Compare commits

...
12 Commits
Author SHA1 Message Date
LeoVasanko c4360df110 Release 2.1.0 2026-09-18 01:32:45 +00:00
LeoVasanko c676665795 Add release script with version bump, tagging and rollback 2026-09-18 01:32:09 +00:00
LeoVasanko 55dd43661c Rewritten README. 2026-09-18 01:11:45 +00:00
LeoVasanko 753ce868c6 Examples: simplify profile demo to print the result code 2026-09-18 00:27:21 +00:00
LeoVasanko 3e0152e688 Profile iframe handles no-session internally with in-place login
The restricted entry validates the session before rendering anything
(no load-time flash): 401/403 switches to the existing login component
in place of the profile, success renders the panel fully populated via
props, other failures show a minimal card with Back only. The dialog
drops the standalone page's heading and help text.
2026-09-18 00:27:21 +00:00
LeoVasanko c5efa03908 profile(): resolve 'login' when login flow completes inside the dialog
The overlay now tracks which dialog kind is open: auth-success from a
profile dialog resolves 'login', auth-back only rejects
AuthCancelledError for auth dialogs.
2026-09-18 00:27:21 +00:00
LeoVasanko 0ca4e07e23 Dev server: serve paskia-js module, rework examples page
The Vite dev server now maps /paskia-js/ to the local paskia-js build
(the examples page's module import has 404'd since it was introduced,
leaving all buttons dead). Navigation actions on the examples page are
now plain same-window links so the flows' back navigation returns to
the page; added a Profile Summary button exercising profile().
2026-09-17 19:17:00 +00:00
LeoVasanko baa993e586 Theme precedence: URL param, then localStorage, then browser default
The restricted page's early script now honors the URL theme parameter
before the cached profile theme, so a fresh server-provided override
wins and the host color scheme applies without a flash. After session
load, an empty profile theme clears the cache but keeps the URL
parameter in effect instead of reverting to the system default.
2026-09-17 19:17:00 +00:00
LeoVasanko 42240dd2c7 Unify host profile view as framed dialog, add profile iframe mode
HostProfileView now renders the same centered frame card as the login
flows, whether shown full-page at /auth/ (host mode) or inside the new
#mode=profile restricted iframe. The component self-fetches its data
when the parent does not provide it, and emits back/logout so each
context reacts appropriately: the full page reloads, the iframe posts
auth-back / auth-logout to the host.
2026-09-17 19:17:00 +00:00
LeoVasanko 2ec709905e paskia-js: profile() dialog, auth-logout message, host color-scheme adoption
New profile() function opens the minimal profile in a compact dialog
iframe and always resolves ('logout' | 'back'), keeping the auth flow's
resolve/reject contract separate and unchanged. The overlay now injects
the host page's computed color-scheme into the iframe URL theme param
when the server has not provided one.
2026-09-17 19:17:00 +00:00
LeoVasanko 6eb862278f Add tests for startup box sign-in summary wildcard pruning 2026-09-10 19:57:37 +00:00
LeoVasanko dbd697772a Updated systemd unit in README for better messages. 2026-09-10 01:55:44 +00:00
14 changed files with 681 additions and 194 deletions
+2 -1
View File
@@ -188,11 +188,12 @@ Paste the following and save:
```ini
[Unit]
Description=Paskia
Description=Paskia authentication system
[Service]
Type=simple
User=paskia
SyslogIdentifier=paskia
WorkingDirectory=/srv/paskia
ExecStart=uvx paskia@latest
+37 -26
View File
@@ -8,6 +8,17 @@
:root {
color-scheme: light dark; /* Automatic themes by browser */
}
.section a, .section button {
display: inline-block;
padding: 0.4em;
margin-right: 0.3em;
border: none;
background: #aaa2;
color: inherit;
font: inherit;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
@@ -20,13 +31,14 @@
<div class="content">
<div class="section">
<h2>Management Site</h2>
<button onclick="window.open('/auth/', '_blank')">👤 User Profile</button>
<button onclick="window.open('/auth/admin/', '_blank')">⚙️ Admin Panel</button>
<a href="/auth/">👤 User Profile</a>
<a href="/auth/admin/">⚙️ Admin Panel</a>
</div>
<div class="section">
<h2>API Mode (not leaving the page)</h2>
<p>For SPAs and fetch() calls - shows auth in an iframe overlay:</p>
<button onclick="profileDemo()">👤 Login/Profile</button>
<button onclick="apiCall('/auth/api/user-info', 'GET')">📋 Get User Info</button>
<button onclick="apiCall('/auth/api/forward?max_age=10s')">🔄 Reauth (max_age=10s)</button>
<button onclick="apiCall('/auth/api/forward?perm=auth:admin')">🛡️ Admin Only</button>
@@ -35,10 +47,10 @@
<div class="section">
<h2>Browser Mode (full page)</h2>
<p>Block access to otherwise open site - intended for forward-auth mechanism (Caddy, Nginx):</p>
<button onclick="browserNav('/auth/api/forward')">🔐 Basic Auth</button>
<button onclick="browserNav('/auth/api/forward?max_age=10s')">🔄 Reauth (max_age=10s)</button>
<button onclick="browserNav('/auth/api/forward?perm=auth:admin')">🛡️ Admin Only</button>
<p>Block access to otherwise open site - intended for forward-auth mechanism (Caddy, Nginx). If not authenticated, you'll see the login page; after auth, a 204 response (blank page = success). Back returns here:</p>
<a href="/auth/api/forward">🔐 Basic Auth</a>
<a href="/auth/api/forward?max_age=10s">🔄 Reauth (max_age=10s)</a>
<a href="/auth/api/forward?perm=auth:admin">🛡️ Admin Only</a>
</div>
<pre id="output">Click a button to test...</pre>
@@ -46,52 +58,51 @@
</div>
<script type="module">
import { apiFetch, apiJson, AuthCancelledError } from '/paskia-js/dist/paskia.js'
const output = document.getElementById('output');
import { apiFetch, apiJson, AuthCancelledError, profile } from '/paskia-js/dist/paskia.js'
function log(msg) {
output.textContent = msg;
console.log(msg)
document.getElementById('output').textContent = msg
}
// Make an API call using paskia module (handles 401/403 automatically)
window.apiCall = async function(url, method = 'GET') {
log(`${method} ${url}...`);
log(`${method} ${url}...`)
try {
const response = await apiFetch(url, { method });
const response = await apiFetch(url, { method })
// Forward endpoint returns 204 on success
if (response.status === 204) {
log('✓ Success (204 No Content)');
return;
log('✓ Success (204 No Content)')
return
}
if (!response.ok) {
log(`Error: ${response.status} ${response.statusText}`);
return;
log(`Error: ${response.status} ${response.statusText}`)
return
}
const data = await response.json();
log('✓ Response:\n' + JSON.stringify(data, null, 2));
const data = await response.json()
log('✓ Response:\n' + JSON.stringify(data, null, 2))
} catch (e) {
if (e instanceof AuthCancelledError) {
log('Authentication cancelled');
log('Authentication cancelled')
} else {
log(`Error: ${e.message}`);
log(`Error: ${e.message}`)
}
}
}
window.logout = async function() {
await fetch('/auth/api/logout', { method: 'POST' });
log('Logged out');
await fetch('/auth/api/logout', { method: 'POST' })
log('Logged out')
}
// Browser mode: open the forward endpoint directly in a new window.
window.browserNav = function(url) {
log('Opening in new window...\nIf not authenticated, you\'ll see the login page.\nAfter auth, you\'ll see a 204 response (blank page = success).');
window.open(url, '_blank');
// Profile dialog: resolves 'login' / 'logout' / 'back'
window.profileDemo = async function() {
log(`Profile return: ${await profile()}`)
}
</script>
</body>
</html>
+15 -1
View File
@@ -2,7 +2,14 @@
<div class="app-shell">
<StatusMessage />
<main class="app-main">
<HostProfileView v-if="viewState === 'profile' && isHostMode" />
<HostProfileView
v-if="viewState === 'profile' && isHostMode"
:ctx="store.ctx"
:user-info="store.userInfo"
:settings="store.settings"
@back="goBack"
@logout="onHostLogout"
/>
<ProfileView v-else-if="viewState === 'profile'" />
<LoadingView v-else-if="viewState === 'loading'" :message="loadingMessage" />
<AccessDenied v-else-if="viewState === 'terminal'" />
@@ -15,6 +22,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { apiJson, SessionValidator, settings as paskiaSettings } from 'paskia'
import { updateThemeFromSession } from '@/utils/theme'
import { goBack } from '@/utils/helpers'
import StatusMessage from '@/components/StatusMessage.vue'
import ProfileView from '@/components/ProfileView.vue'
import HostProfileView from '@/components/HostProfileView.vue'
@@ -48,6 +56,12 @@ const isHostMode = computed(() => {
return currentHost !== configuredHost
})
// HostProfileView already posted /auth/api/logout; clear local state and reload.
function onHostLogout() {
sessionStorage.clear()
window.location.reload()
}
function onSessionLost(e) {
store.userInfo = null
store.ctx = null
+81 -2
View File
@@ -1,5 +1,36 @@
<template>
<template v-if="authMode === 'profile'">
<!--
Profile mode: render nothing until the session check completes (avoids
a load-time flash of the wrong view). Without a session, the login flow
runs in place of the profile; on success auth-success is posted and the
host resolves profile() with 'login'.
-->
<RestrictedAuth
v-if="profileState === 'login'"
mode="login"
@authenticated="handleAuthenticated"
@back="handleBack"
/>
<HostProfileView
v-else-if="profileState === 'ready'"
:ctx="profileCtx"
:user-info="profileInfo"
:settings="profileSettings"
@back="handleBack"
@logout="handleLogout"
/>
<div v-else class="view-root profile-pending">
<div class="surface surface--tight">
<p class="view-lede">{{ profileState === 'error' ? 'Could not load your account.' : 'Loading your account…' }}</p>
<div class="button-row">
<button type="button" class="btn-secondary" @click="handleBack">Back</button>
</div>
</div>
</div>
</template>
<RestrictedAuth
v-else
:mode="authMode"
:remote-auth-token="remoteAuthToken"
:oidc-query-string="oidcQueryString"
@@ -11,6 +42,10 @@
<script setup>
import { onMounted, ref } from 'vue'
import RestrictedAuth from '@/components/RestrictedAuth.vue'
import HostProfileView from '@/components/HostProfileView.vue'
import { fetchJson, settings as paskiaSettings } from 'paskia'
import { getSettings } from '@/utils/settings'
import { updateThemeFromSession } from '@/utils/theme'
// Check if this is a remote auth URL: /auth/{token}
// The token is a 5-word passphrase like "word1.word2.word3.word4.word5"
@@ -45,8 +80,32 @@ let authMode
if (window.location.pathname === '/auth/restricted/oidc') {
authMode = 'oidc'
} else {
// Both iframe and forward auth use hash params for mode (forbidden/login/reauth)
authMode = ['reauth', 'forbidden'].includes(hashParams.get('mode')) ? hashParams.get('mode') : 'login'
// Both iframe and forward auth use hash params for mode (forbidden/login/reauth/profile)
authMode = ['reauth', 'forbidden', 'profile'].includes(hashParams.get('mode')) ? hashParams.get('mode') : 'login'
}
// Profile mode state: 'loading' | 'login' | 'ready' | 'error'
const profileState = ref('loading')
const profileCtx = ref(null)
const profileInfo = ref(null)
const profileSettings = ref(null)
async function loadProfile() {
try {
const [validateData, infoData, settingsData] = await Promise.all([
fetchJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms }),
fetchJson('/auth/api/user-info', { method: 'GET', timeout: paskiaSettings.auth_ms }),
getSettings()
])
profileCtx.value = validateData.ctx
profileInfo.value = infoData
profileSettings.value = settingsData
updateThemeFromSession(validateData.ctx)
profileState.value = 'ready'
} catch (error) {
// No/expired session: run the login flow in place of the profile
profileState.value = error.status === 401 || error.status === 403 ? 'login' : 'error'
}
}
function postToParent(message) {
@@ -74,10 +133,18 @@ function handleBack() {
})
}
function handleLogout() {
postToParent({
type: 'auth-logout'
})
}
onMounted(() => {
// Check for remote auth token in URL
remoteAuthToken.value = extractRemoteToken()
if (authMode === 'profile') loadProfile()
postToParent({
type: 'auth-ready'
})
@@ -89,3 +156,15 @@ onMounted(() => {
})
})
</script>
<style scoped>
.view-root.profile-pending { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
.profile-pending .surface {
max-width: 520px;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
</style>
+1 -1
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>{let t=localStorage.getItem('paskia-theme');if(!t){let p=new URLSearchParams(location.hash.slice(1)).get('theme');if(p==='light'||p==='dark')t=p}(t==='dark'||t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark');if(window.location.pathname==='/auth/restricted/iframe')document.documentElement.style.background='transparent'}</script>
<script>{let t=new URLSearchParams(location.hash.slice(1)).get('theme');if(t!=='light'&&t!=='dark')t=localStorage.getItem('paskia-theme');(t==='dark'||t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark');if(window.location.pathname==='/auth/restricted/iframe')document.documentElement.style.background='transparent'}</script>
<link rel="stylesheet" href="/src/assets/style.css">
</head>
<body>
+151 -78
View File
@@ -1,92 +1,116 @@
<template>
<section class="view-root view-root--wide host-view" data-view="host-profile">
<header class="view-header">
<h1>{{ headingTitle }}</h1>
<p class="view-lede">{{ subheading }}</p>
</header>
<div class="view-root host-profile" data-view="host-profile">
<div class="surface surface--tight">
<!-- Heading/lede belong to the standalone page; in the dialog the host
page already provides the surrounding context. -->
<header v-if="!inIframe" class="view-header center">
<h1>{{ headingTitle }}</h1>
<p class="view-lede">{{ subheading }}</p>
</header>
<section class="section-block" ref="userInfoSection">
<div class="section-body">
<UserBasicInfo
v-if="ctx"
:name="ctx.user.display_name"
:avatar-url="authStore.userInfo.user.avatar_url"
:visits="authStore.userInfo.user.visits"
:created-at="authStore.userInfo.user.created_at"
:last-seen="authStore.userInfo.user.last_seen"
:email="ctx.user.email"
:telephone="ctx.user.telephone"
:org-display-name="orgDisplayName"
:role-name="roleDisplayName"
:can-edit="false"
/>
<p v-else class="empty-state">
{{ initializing ? 'Loading your account…' : 'No active session found.' }}
</p>
</div>
</section>
<section class="section-block">
<div class="section-body host-actions">
<div class="button-row" ref="buttonRow" @keydown="handleButtonRowKeydown">
<button
type="button"
class="btn-secondary"
@click="goBack"
>
Back
</button>
<button
type="button"
class="btn-danger"
:disabled="authStore.isLoading"
@click="logout"
>
{{ authStore.isLoading ? 'Signing out…' : 'Logout' }}
</button>
<button
v-if="authSiteUrl"
type="button"
class="btn-primary"
:disabled="authStore.isLoading"
@click="goToAuthSite"
>
Full Profile
</button>
<section class="section-block">
<div class="section-body">
<UserBasicInfo
v-if="sessionCtx && info"
:name="sessionCtx.user.display_name"
:avatar-url="info.user.avatar_url"
:visits="info.user.visits"
:created-at="info.user.created_at"
:last-seen="info.user.last_seen"
:email="sessionCtx.user.email"
:telephone="sessionCtx.user.telephone"
:org-display-name="orgDisplayName"
:role-name="roleDisplayName"
:can-edit="false"
/>
<p v-else class="empty-state">
{{ loading ? 'Loading your account…' : 'No active session found.' }}
</p>
</div>
<p class="note"><strong>Logout</strong> from {{ currentHost }}, or access your <strong>Full Profile</strong> at {{ authSiteHost }} (you may need to sign in again).</p>
</div>
</section>
</section>
</section>
<section class="section-block">
<div class="section-body host-actions">
<div class="button-row" ref="buttonRow" @keydown="handleButtonRowKeydown">
<button
type="button"
class="btn-secondary"
@click="$emit('back')"
>
Back
</button>
<button
v-if="sessionCtx"
type="button"
class="btn-danger"
:disabled="busy"
@click="logout"
>
{{ busy ? 'Signing out…' : 'Logout' }}
</button>
<button
type="button"
class="btn-primary"
:disabled="busy"
@click="goToAuthSite"
>
Full Profile
</button>
</div>
<p v-if="!inIframe" class="note"><strong>Logout</strong> from {{ currentHost }}, or view your <strong>Full Profile</strong> at {{ authSiteHost }} (you may need to sign in again).</p>
</div>
</section>
</div>
</div>
</template>
<script setup>
import { computed, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import UserBasicInfo from '@/components/UserBasicInfo.vue'
import { useAuthStore } from '@/stores/auth'
import { goBack } from '@/utils/helpers'
import { getSettings } from '@/utils/settings'
import { fetchJson, settings as paskiaSettings } from 'paskia'
import { updateThemeFromSession } from '@/utils/theme'
import { getDirection, navigateButtonRow } from '@/utils/keynav'
defineProps({
initializing: {
type: Boolean,
default: false
// Data may be provided by the parent (full-page /auth/ app already loaded it
// into the store); otherwise the component fetches it itself (restricted iframe).
const props = defineProps({
ctx: {
type: Object,
default: null
},
userInfo: {
type: Object,
default: null
},
settings: {
type: Object,
default: null
}
})
const authStore = useAuthStore()
const emit = defineEmits(['back', 'logout'])
const inIframe = window.parent !== window
const currentHost = window.location.host
const fetchedCtx = ref(null)
const fetchedInfo = ref(null)
const fetchedSettings = ref(null)
const loading = ref(!(props.ctx && props.userInfo))
const busy = ref(false)
// Template refs for navigation
const userInfoSection = ref(null)
const buttonRow = ref(null)
const ctx = computed(() => authStore.userInfo || null)
const orgDisplayName = computed(() => ctx.value?.org?.display_name ?? '')
const roleDisplayName = computed(() => ctx.value?.role?.display_name ?? '')
const sessionCtx = computed(() => props.ctx || fetchedCtx.value)
const info = computed(() => props.userInfo || fetchedInfo.value)
const settingsData = computed(() => props.settings || fetchedSettings.value)
const orgDisplayName = computed(() => sessionCtx.value?.org?.display_name ?? '')
const roleDisplayName = computed(() => sessionCtx.value?.role?.display_name ?? '')
const headingTitle = computed(() => {
const service = authStore.settings?.rp_name
const service = settingsData.value?.rp_name
return service ? `${service} account` : 'Account overview'
})
@@ -94,11 +118,12 @@ const subheading = computed(() => {
return `You're signed in to ${currentHost}.`
})
const authSiteHost = computed(() => authStore.settings?.auth_host || '')
const authSiteHost = computed(() => settingsData.value?.auth_host || '')
const authSiteUrl = computed(() => {
const host = authSiteHost.value
if (!host) return ''
let path = authStore.settings?.ui_base_path ?? '/auth/'
// Fall back to the current host when no separate auth host is configured;
// the full profile is at ui_base_path either way.
const host = authSiteHost.value || currentHost
let path = settingsData.value?.ui_base_path ?? '/auth/'
if (!path.startsWith('/')) path = `/${path}`
if (!path.endsWith('/')) path = `${path}/`
const protocol = window.location.protocol || 'https:'
@@ -107,11 +132,27 @@ const authSiteUrl = computed(() => {
const goToAuthSite = () => {
if (!authSiteUrl.value) return
window.location.href = authSiteUrl.value
// Inside an iframe, open the full profile in a new window and close the
// frame (auth-back) so the host page regains focus.
if (inIframe) {
window.open(authSiteUrl.value, '_blank')
emit('back')
} else {
window.location.href = authSiteUrl.value
}
}
const logout = async () => {
await authStore.logout()
if (busy.value) return
busy.value = true
try {
await fetchJson('/auth/api/logout', { method: 'POST', timeout: paskiaSettings.auth_ms })
} catch (error) {
console.error('Logout error:', error)
}
// The parent decides how to react: the full-page app reloads, the iframe
// host receives auth-logout and closes the frame.
emit('logout')
}
// Keyboard navigation for button row
@@ -124,7 +165,39 @@ const handleButtonRowKeydown = (event) => {
if (direction === 'left' || direction === 'right') {
navigateButtonRow(buttonRow.value, event.target, direction, { itemSelector: 'button' })
}
// Up does nothing (no elements above to navigate to)
// Down does nothing (no elements below to navigate to)
}
onMounted(async () => {
if (!props.settings) {
getSettings().then((data) => { fetchedSettings.value = data })
}
if (props.ctx && props.userInfo) return
try {
const [validateData, infoData] = await Promise.all([
fetchJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms }),
fetchJson('/auth/api/user-info', { method: 'GET', timeout: paskiaSettings.auth_ms })
])
fetchedCtx.value = validateData.ctx
fetchedInfo.value = infoData
updateThemeFromSession(validateData.ctx)
} catch (error) {
if (error.status !== 401 && error.status !== 403) {
console.error('Failed to load account summary:', error)
}
} finally {
loading.value = false
}
})
</script>
<style scoped>
.view-root.host-profile { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
.surface.surface--tight {
max-width: 520px;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
</style>
+12 -1
View File
@@ -38,9 +38,20 @@ export function initThemeFromCache() {
applyTheme(getCachedTheme())
}
/** Theme default from the URL hash (restricted iframe/forward pages only) */
function getHashTheme() {
const theme = new URLSearchParams(window.location.hash.slice(1)).get('theme')
return theme === 'light' || theme === 'dark' ? theme : ''
}
/** Update theme from session context (call after login/session load) */
export function updateThemeFromSession(ctx, animate = false) {
const theme = ctx?.user?.theme || ''
// Always keep the cache in sync with the profile: empty override clears it
// so stale values never mask future server-provided themes.
setCachedTheme(theme)
applyTheme(theme, document.documentElement, animate)
// Without a profile override, stay consistent with the initial paint: a
// theme parameter on the URL (e.g. host page color scheme injected by
// paskia-js) remains in effect before the browser/desktop default.
applyTheme(theme || getHashTheme(), document.documentElement, animate)
}
+8
View File
@@ -64,6 +64,14 @@ export default defineConfig(({ command }) => ({
})
}
},
{
name: 'serve-paskia-js',
configureServer(server) {
// Serve the locally built paskia-js module for the examples page
const serve = sirv(resolve(__dirname, '../paskia-js'), { dev: true })
server.middlewares.use('/paskia-js', serve)
}
},
{
name: 'serve-examples',
configureServer(server) {
+84 -78
View File
@@ -1,14 +1,14 @@
# Paskia
![Screenshot](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/forbidden-light.webp)
JavaScript utilities for [Paskia authentication system](https://git.zi.fi/leovasanko/paskia) integration into web apps.
# Paskia
JavaScript utilities for integrating the [Paskia authentication system](https://git.zi.fi/leovasanko/paskia) into web apps.
## Installation
### NPM
### npm
No framework dependencies. Works with any framework (Vue, React, Svelte, etc.) or vanilla JS. Typescript typing included.
No framework dependencies. Works with Vue, React, Svelte, vanilla JavaScript and other frontend stacks. TypeScript types are included.
```sh
npm install paskia
@@ -20,7 +20,7 @@ import { ... } from 'paskia'
### Plain JavaScript
Fetch the module directly from a CDN, or [download](https://cdn.jsdelivr.net/npm/paskia@latest/dist/paskia.js) first and host yourself. No Node needed.
Import directly from a CDN, or [download](https://cdn.jsdelivr.net/npm/paskia@latest/dist/paskia.js) and host it yourself. No Node.js is required.
```html
<script type="module">
@@ -28,91 +28,102 @@ Fetch the module directly from a CDN, or [download](https://cdn.jsdelivr.net/npm
</script>
```
## Features
## Authentication
### Session Validation
### API requests
Refresh session and track its validity with automatic polling. Pauses on lack of user activity to avoid useless traffic and to allow session expiry even when the page is left open but idle. This monitors that the same account stays logged in but doesn't do any permission checks.
`apiFetch` wraps `fetch` with Paskia authentication handling, while `apiJson` adds automatic JSON request/response handling. Both support request timeouts. For the same JSON and timeout handling without prompting the user for authentication, use `fetchJson`.
```js
import { apiJson, apiFetch } from 'paskia'
const data = await apiJson('/api/endpoint', {
method: 'POST',
body: { key: 'value' }
})
const response = await apiFetch('/api/endpoint')
```
With `apiJson`, a provided `body` is JSON-encoded with the appropriate content type and the response is parsed as JSON.
When the server requests authentication, the API call pauses while the appropriate Paskia dialog is shown and retries after successful authentication.
> Paskia uses `401` and `403` responses to trigger the appropriate **login**, **reauthentication** or **access denied** flow. The backend supplies the authentication URL and context; see the main Paskia documentation for the full response protocol.
### Account and Profile
`profile()` provides a single dialog for an application's login/profile button that allows the user to sign in, view who they are and sign out without ever leaving the page.
```js
import { profile } from 'paskia'
const result = await profile()
if (result !== 'back') // Refresh application state
```
When signed out, it presents the login flow and returns `'login'` on success. When signed in, it shows the profile and returns `'logout'` after logout. `'back'` is returned when the dialog is closed without an expected session change.
Authentication and profile dialogs follow the user's theme override when set in profile, otherwise the host page's light/dark `color-scheme` to remain in the application's color scheme, then the browser/OS preference.
### Lower-level Authentication
`apiFetch` and `apiJson` call `showAuthIframe()` internally. Applications using plain `fetch` or `fetchJson` can call it directly with an authentication URL returned by the backend:
```js
import { showAuthIframe } from 'paskia'
await showAuthIframe(data.auth.iframe)
```
## Session Validation
`SessionValidator` periodically checks that the active Paskia session is still valid and still belongs to the user your application currently has loaded. Validation also refreshes the session to avoid expiry during use.
```js
import { SessionValidator } from 'paskia'
const validator = new SessionValidator(
() => currentUser?.uuid, // getter for current user ID that we track
(error) => handleSessionLost(error) // callback when session is lost
() => currentUser?.uuid, // User ID currently known by your app
error => handleSessionLost(error)
)
validator.start() // call at your app startup/login
validator.stop() // stop the system (optional)
validator.start()
validator.stop()
```
### API Fetch Utilities
The first callback is read on each check, so a logout, expired session or switch to another account invalidates the session your app is currently using. Polling pauses while the user is inactive, avoiding unnecessary traffic and allowing idle sessions to expire.
Enhanced fetch functions with automatic error handling and authentication retry:
## Timeout Settings
```js
import { apiJson, apiFetch } from 'paskia'
// JSON API calls with automatic auth handling
const data = await apiJson('/api/endpoint', { method: 'POST', body: { key: 'value' } })
// Raw fetch with auth handling
const response = await apiFetch('/api/endpoint')
```
When a 401/403 response includes an auth iframe URL, the request automatically pauses, displays the authentication UI, and retries upon success. In case this is not needed, use standard `fetch` or our `fetchJson`.
The JSON variants set headers automatically, with body and response in JSON.
### Timeout Settings
Paskia exports a mutable settings object for defaults used by fetch/auth/session validation timers. Default values shown below.
Paskia exports mutable defaults for network and session timers:
```js
import { settings } from 'paskia'
// General fetch timeout used by apiFetch/apiJson/fetchJson when no timeout is passed
settings.fetch_ms = 10000
// Fetch timeout used by SessionValidator (/auth/api/validate is fast)
settings.auth_ms = 1000
// SessionValidator polling and idle timers
settings.poll_ms = 60000
settings.idle_ms = 300000
settings.fetch_ms = 10000 // apiFetch, apiJson and fetchJson timeout
settings.auth_ms = 1000 // Session validation request timeout
settings.poll_ms = 60000 // Session validation interval
settings.idle_ms = 300000 // Inactivity before validation pauses
```
You can still override timeout per request:
Request timeout can also be overridden per call:
```js
await apiJson('/api/upload', { method: 'POST', body: data, timeout: 30000 })
await apiJson('/api/upload', {
method: 'POST',
body: data,
timeout: 30000
})
```
### Authentication Overlay
## Shared Blur Backdrop
Normally you use apiJson/apiFetch and they handle this automatically. If you need to wire it yourself, on a 401/403 response that includes `auth.iframe`, call `showAuthIframe(...)` and then retry the original request.
A shared backdrop provides consistent UX across your application, avoiding different things stacking with their own backdrops and dialogs in unexpected manner.
The backend returns 401/403 responses with the correct URL for proper user feedback. Alternatively you may use `/auth/restricted/iframe#mode=login`, `mode=reauth` or `mode=forbidden` to trigger the UX flow you need.
Paskia dialogs use a shared blurred backdrop at z-index `1099` and the authentication iframe at `9999`. Application dialogs can use `1100``9998` to appear between them.
```js
import { showAuthIframe, AuthCancelledError } from 'paskia'
const response = await fetch('/api/protected')
if (response.status === 401 || response.status === 403) {
const data = await response.json()
if (data.auth?.iframe) {
await showAuthIframe(data.auth.iframe) // Raises AuthCancelledError if the user cancels
}
}
```
This resolves after the user authenticates (possibly with another account than previously), and you should usually retry the original API request. Note that successful authentication doesn't guarantee that the user still has rights to what originally failed.
### Shared Blur Backdrop
The authentication dialog displays with a blur backdrop (z-index 1099). The auth iframe uses z-index 9999. Your app dialogs should use z-index 11009998 to appear above the backdrop but below authentication.
The backdrop is also reusable/refcounted, so you can keep consistent visuals for your own dialogs:
The same refcounted backdrop can be used by application UI:
```js
import { holdGlobalBackdrop, releaseGlobalBackdrop } from 'paskia'
@@ -125,31 +136,26 @@ try {
}
```
The backdrop only disappears after all holders have released it.
It disappears after all holders release it, also avoiding awkward fade/appear animations when changing between multiple dialogs.
## Error Handling
### AuthCancelledError (apiFetch, apiJson, showAuthIframe)
### `AuthCancelledError`
If the user clicks Back in the authentication dialog, refusing to authenticate, `AuthCancelledError` is risen (as a response to postMessage from the iframe). The dialog closes as expected and it is up to the app how to continue from there.
`apiFetch`, `apiJson` and `showAuthIframe` raise `AuthCancelledError` when the user cancels required authentication with Back or Escape. This means the user does not wish to authenticate, and should not be asked again.
- Do nothing if the app can continue despite the failed operation (no UI notification needed)
- Display a simple Access Denied page with suggestion/button to reload the page to try again
Continue without the failed operation when possible, or show an appropriate terminal view when authentication is required to continue.
Do not retry automatically.
### UI feedback
A set of small utilities are available for determining whether the user needs a notification and to format the error message.
When the error is a direct result of a user action, we don't want to show an additional message for that, while in other situations we should. Helpers determine whether an error needs user notification and provide a suitable message:
```js
import { getUserFriendlyErrorMessage, shouldShowErrorToast } from 'paskia'
try {
await apiJson('/api/action')
} catch (e) {
if (shouldShowErrorToast(e)) {
your.message.display(getUserFriendlyErrorMessage(e))
} catch (error) {
if (shouldShowErrorToast(error)) {
your.message.display(getUserFriendlyErrorMessage(error))
}
}
```
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "paskia",
"version": "1.4.0",
"version": "2.1.0",
"description": "Paskia authentication utilities for JavaScript",
"author": "Leo Vasanko",
"license": "Unlicense",
+1
View File
@@ -20,6 +20,7 @@ export {
isAuthIframeOpen,
hideAuthIframe,
showAuthIframe,
profile,
} from './overlay'
export { SessionValidator } from './validate'
+79 -5
View File
@@ -32,12 +32,27 @@ body.paskia-backdrop {
color-scheme: auto;
background: transparent;
}
#${AUTH_IFRAME_ID}.paskia-dialog {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(36rem, 100%);
height: min(42rem, 100%);
}
`
type DialogResult = 'login' | 'logout' | 'back'
type DialogKind = 'auth' | 'profile'
let authIframe: HTMLIFrameElement | null = null
let authPromise: Promise<void> | null = null
let authResolve: (() => void) | null = null
let authPromise: Promise<DialogResult | undefined> | null = null
let authResolve: ((result?: DialogResult) => void) | null = null
let authReject: ((error: Error) => void) | null = null
// Auth flows reject AuthCancelledError on auth-back (callers rely on it to
// abort request retries) and resolve void on auth-success. The profile dialog
// never rejects: auth-back resolves 'back', and auth-success (the user logged
// in while the profile dialog was open) resolves 'login'.
let dialogKind: DialogKind = 'auth'
let messageListenerInstalled = false
let backdropHolders = 0
@@ -89,7 +104,7 @@ function handleAuthMessage(event: MessageEvent): void {
case 'auth-success':
hideAuthIframe()
if (authResolve) {
authResolve()
authResolve(dialogKind === 'profile' ? 'login' : undefined)
authPromise = null
authResolve = null
authReject = null
@@ -98,8 +113,20 @@ function handleAuthMessage(event: MessageEvent): void {
case 'auth-back':
hideAuthIframe()
if (authReject) {
if (dialogKind === 'auth' && authReject) {
authReject(new AuthCancelledError())
} else if (authResolve) {
authResolve('back')
}
authPromise = null
authResolve = null
authReject = null
break
case 'auth-logout':
hideAuthIframe()
if (authResolve) {
authResolve('logout')
authPromise = null
authResolve = null
authReject = null
@@ -116,12 +143,15 @@ function ensureMessageListener(): void {
}
}
export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Promise<void> {
function openIframe(iframeUrl: string, title: string, kind: DialogKind): Promise<DialogResult | undefined> {
injectStyles()
ensureMessageListener()
if (authPromise) return authPromise
dialogKind = kind
iframeUrl = withAppTheme(iframeUrl)
if (document.getElementById(AUTH_IFRAME_ID)) {
authPromise = new Promise((resolve, reject) => {
authResolve = resolve
@@ -140,6 +170,7 @@ export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Pro
authIframe = document.createElement('iframe')
authIframe.id = AUTH_IFRAME_ID
if (kind === 'profile') authIframe.classList.add('paskia-dialog')
authIframe.title = title
authIframe.src = iframeUrl
document.body.appendChild(authIframe)
@@ -147,6 +178,49 @@ export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Pro
return authPromise
}
// Detect the host page's own color scheme (CSS color-scheme on body) as an
// implicit app-level default. Only an unambiguous 'light' or 'dark' counts;
// 'normal', 'light dark' etc. mean the page adapts, so no override is needed.
function detectColorScheme(): string {
if (typeof window === 'undefined' || !document.body) return ''
const scheme = getComputedStyle(document.body).colorScheme
return scheme === 'light' || scheme === 'dark' ? scheme : ''
}
// Apply the host page's own color scheme to the iframe URL hash — only when
// the URL has no theme parameter yet (a server-provided user theme override
// is authoritative). The restricted UI's precedence is: URL parameter (user
// override from the server, else host color scheme) > cached profile theme
// (localStorage) > browser/desktop default.
function withAppTheme(iframeUrl: string): string {
const theme = detectColorScheme()
if (!theme) return iframeUrl
const hashIndex = iframeUrl.indexOf('#')
const base = hashIndex === -1 ? iframeUrl : iframeUrl.slice(0, hashIndex)
const params = new URLSearchParams(hashIndex === -1 ? '' : iframeUrl.slice(hashIndex + 1))
if (params.has('theme')) return iframeUrl
params.set('theme', theme)
return `${base}#${params}`
}
export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Promise<void> {
return openIframe(iframeUrl, title, 'auth').then(() => undefined)
}
/**
* Show the minimal profile of the logged-in user in a compact dialog iframe.
*
* Unlike the auth flows, this always resolves — 'login' when the user was
* signed out and completed the login flow inside the frame, 'logout' when
* they signed out inside the frame, 'back' when they closed it otherwise.
* The caller decides from context how to react to each (e.g. whether to
* start a new login attempt with showAuthIframe).
*/
export function profile(): Promise<DialogResult> {
return openIframe('/auth/restricted/iframe#mode=profile', 'Profile', 'profile')
.then((result) => result ?? 'back')
}
export function createAuthIframe(iframeUrl: string, title = 'Authentication'): HTMLIFrameElement {
injectStyles()
const existing = document.getElementById(AUTH_IFRAME_ID)
+158
View File
@@ -0,0 +1,158 @@
#!/usr/bin/env -S uv run
"""Release build for paskia (PyPI) and paskia-js (npm).
Usage: release.py [patch|minor|major] (default: patch)
Bumps the version from the latest vX.Y.Z tag, commits "Release x.y.z" with
the paskia-js version bump and tags it, then builds both packages from a
clean slate. On failure the release commit and tag are rolled back.
Publishing is left to the user; the command is printed on success.
"""
import json
import shutil
import subprocess
import sys
from pathlib import Path
REPO_ROOT = Path(__file__).resolve().parent.parent
# Build outputs removed before building
ARTIFACTS = ["dist", "paskia-js/dist", "paskia/frontend-build", "build"]
# Dependency state removed for a fresh upstream resolve (all untracked)
JS_DIRS = ["paskia-js", "frontend"]
JS_JUNK = ["node_modules", "package-lock.json", "deno.lock", "bun.lock"]
BUMPS = ("patch", "minor", "major")
def run(cmd: list[str], cwd: Path = REPO_ROOT) -> None:
print(f"### {' '.join(cmd)}")
subprocess.run(cmd, cwd=cwd, check=True) # noqa: S603
def abort(msg: str) -> None:
print(f"error: {msg}", file=sys.stderr)
raise SystemExit(1)
def git(*args: str) -> str:
return subprocess.run( # noqa: S603
["git", *args], cwd=REPO_ROOT, check=True, capture_output=True, text=True
).stdout.strip()
def check_clean_tree() -> None:
status = git("status", "--porcelain")
if status:
print(status, file=sys.stderr)
abort("working tree is not clean; commit or stash all changes first")
def latest_version() -> tuple[int, int, int]:
"""Highest vX.Y.Z tag, as a tuple."""
tags = []
for tag in git("tag", "--list", "v*").splitlines():
parts = tag.removeprefix("v").split(".")
if len(parts) == 3 and all(p.isdigit() for p in parts):
tags.append(tuple(int(p) for p in parts))
if not tags:
abort("no existing vX.Y.Z tags found")
return max(tags)
def next_version(bump: str) -> tuple[int, int, int]:
major, minor, patch = latest_version()
if bump == "major":
return (major + 1, 0, 0)
if bump == "minor":
return (major, minor + 1, 0)
return (major, minor, patch + 1)
def set_js_version(version: str) -> None:
pkg_path = REPO_ROOT / "paskia-js/package.json"
pkg = json.loads(pkg_path.read_text())
if pkg.get("version") == version:
return
print(f"paskia-js/package.json: {pkg.get('version')} -> {version}")
pkg["version"] = version
pkg_path.write_text(json.dumps(pkg, indent=2) + "\n")
def remove(path: Path, rel: str) -> None:
if not path.exists():
return
print(f"rm -rf {rel}")
if path.is_dir():
shutil.rmtree(path)
else:
path.unlink()
def clean() -> None:
for rel in ARTIFACTS:
remove(REPO_ROOT / rel, rel)
for d in JS_DIRS:
for junk in JS_JUNK:
remove(REPO_ROOT / d / junk, f"{d}/{junk}")
def main() -> None:
bump = sys.argv[1] if len(sys.argv) == 2 else "patch"
if len(sys.argv) > 2 or bump not in BUMPS:
print(__doc__)
raise SystemExit(1)
check_clean_tree()
version_tuple = next_version(bump)
version = ".".join(str(p) for p in version_tuple)
tag = f"v{version}"
if tag in git("tag", "--list", tag).splitlines():
abort(f"tag {tag} already exists")
print(f"Release version: {version}")
previous_head = git("rev-parse", "HEAD")
released = False
try:
# Clean before committing: only the uv build (hatch-vcs) depends on
# the tag, so the release commit can be made from a clean slate.
clean()
set_js_version(version)
run(["git", "add", "paskia-js/package.json"])
run(["git", "commit", "-m", f"Release {version}"])
run(["git", "tag", tag])
released = True
# uv build runs the hatch hook that builds paskia-js and the Vue
# frontend into paskia/frontend-build with fresh dependencies.
run(["uv", "build"])
# Explicit paskia-js build: verifies the package standalone and
# leaves paskia-js/dist ready for npm publish.
run(["npm", "install"], cwd=REPO_ROOT / "paskia-js")
run(["npm", "run", "build"], cwd=REPO_ROOT / "paskia-js")
except BaseException:
if released:
print("Build failed; rolling back the release commit and tag.", file=sys.stderr)
subprocess.run(["git", "tag", "-d", tag], cwd=REPO_ROOT, check=False) # noqa: S603
# The tree was clean before the release commit, so a hard reset
# back to it is safe.
subprocess.run(["git", "reset", "--hard", previous_head], cwd=REPO_ROOT, check=False) # noqa: S603
raise
# Push the release commit to the tracking remote, then the new tag.
# Not rolled back on failure: the local release is intact, just push again.
try:
run(["git", "push"])
run(["git", "push", "--tags"])
except subprocess.CalledProcessError:
abort("push failed; the release commit and tag exist locally, push manually")
print(f"\nBuild completed successfully for version {version}.")
print("To publish, review the artifacts and run:")
print(" uv publish && cd paskia-js && npm publish")
if __name__ == "__main__":
main()
+51
View File
@@ -0,0 +1,51 @@
"""Tests for startup box sign-in summaries (paskia/util/startupbox.py).
Pruning must mirror the actual origin matching in sansio._allowlisted:
wildcards cover https origins (any port) under their base, except under
localhost where any scheme and any port match.
"""
from paskia.util.startupbox import _signin_summary
def test_auth_host_pruned_under_full_wildcard():
"""'**.vasanko.com' already covers auth.vasanko.com."""
keys = ["**.vasanko.com", "auth.vasanko.com"]
assert _signin_summary(keys, "vasanko.com") == "all subdomains"
def test_http_origin_not_covered_by_https_wildcard():
"""Plain http outside localhost is not wildcard-covered; stays listed."""
keys = ["**.example.com", "http://app.example.com"]
summary = _signin_summary(keys, "example.com")
assert summary == "all subdomains, http://app.example.com"
def test_localhost_wildcard_covers_any_scheme_and_port():
keys = ["**.localhost", "http://localhost:3000", "localhost:8080"]
assert _signin_summary(keys, "localhost") == "all subdomains"
def test_https_port_key_covered_by_wildcard():
"""Wildcards match https origins at any port, so 'host:8443' is redundant."""
keys = ["**.example.com", "app.example.com:8443"]
assert _signin_summary(keys, "example.com") == "all subdomains"
def test_single_level_wildcard_pruning():
"""'*.example.com' covers one subdomain level only."""
keys = ["*.example.com", "app.example.com", "deep.app.example.com"]
summary = _signin_summary(keys, "example.com")
assert summary == "subdomains, deep.app.example.com"
def test_no_wildcard_keeps_all_entries():
keys = ["auth.example.com", "app.example.com"]
summary = _signin_summary(keys, "example.com")
assert summary == "app.example.com, auth.example.com"
def test_entries_outside_wildcard_base_kept():
keys = ["**.app.example.com", "auth.example.com"]
summary = _signin_summary(keys, "example.com")
assert summary == "all subdomains of app.example.com, auth.example.com"