API tests added with near-complete coverage over user and admin APIs. 60% overall backend. (not including E2E test in coverage)

Implement redirection to remove /auth/ from UI URLs when on auth-host.

.gitignore

@@ -3,7 +3,8 @@ dist/
 .*
 !.gitignore
 *.lock
-passkey-auth.sqlite
-/passkey/frontend-build
-/test_*.py
-passkey/_version.py
+paskia.sqlite
+/paskia/frontend-build
+/paskia/_version.py
+coverage-html/
+e2e/coverage-frontend/

API.md

@@ -1,28 +1,105 @@
-# PassKey Auth API Documentation
+# Paskia API Documentation
 
-This document describes all API endpoints available in the PassKey Auth FastAPI application, that by default listens on `localhost:4401` ("for authentication required").
+This document lists the HTTP and WebSocket endpoints exposed by the Paskia
+service and how they behave depending on whether a dedicated authentication host
+(`--auth-host` / environment `PASSKEY_AUTH_HOST`) is configured.
 
-### HTTP Endpoints
+## Base Paths & Host Modes
 
-GET /auth/ - Main authentication app
-GET /auth/admin/ - Admin app for managing organisations, users and permissions
-GET /auth/{reset_token} - Process password reset/share token
-POST /auth/api/user-info - Get authenticated user information
-POST /auth/api/logout - Logout and delete session
-POST /auth/api/set-session - Set session cookie from Authorization header
-POST /auth/api/create-link - Create device addition link
-DELETE /auth/api/credential/{uuid} - Delete specific credential
-POST /auth/api/validate - Session validation and renewal endpoint (fetch regularly)
-GET /auth/api/forward - Authentication validation for Caddy/Nginx
-		- On success returns `204 No Content` with [user info](Headers.md)
-		- Otherwise returns
-		   * `401 Unauthorized` - authentication required
-		   * `403 Forbidden` - missing required permissions
-		   * Serves the authentication app for a login or permission denied page
-		- Does not renew session!
+Two deployment modes:
 
-### WebAuthn/Passkey endpoints (WebSockets)
+1. Multi‑host (default – no `--auth-host` provided)
+   - All endpoints are reachable on any host under the `/auth/` prefix.
+   - A convenience root (`/`) also serves the main app.
 
-WS /auth/ws/register - Register new user with passkey
-WS /auth/ws/add_credential - Add new credential for existing user
-WS /auth/ws/authenticate - Authenticate user with passkey
+2. Dedicated auth host (`--auth-host auth.example.com`)
+   - The specified auth host serves the UI at the root (`/`, `/admin/`, reset tokens, etc.).
+   - Other (non‑auth) hosts show a lightweight account summary at `/` or `/auth/`, while other UI routes still redirect to the auth host.
+   - Restricted endpoints on non‑auth hosts return `404` instead of redirecting.
+
+### Path Mapping When Auth Host Enabled
+
+| Purpose | On Auth Host | On Other Hosts (incoming) | Action |
+|---------|--------------|---------------------------|--------|
+| Main UI | `/` | `/auth/` or `/` | Serve account summary SPA (no redirect) |
+| Admin UI root | `/admin/` | `/auth/admin/` or `/admin/` | Redirect -> auth host `/admin/` (strip `/auth`) |
+| Reset / device addition token | `/{token}` | `/auth/{token}` | Redirect -> auth host `/{token}` (strip `/auth`) |
+| Static assets | `/auth/assets/*` | `/auth/assets/*` | Served directly (no redirect) |
+| Unrestricted API | `/auth/api/...` | `/auth/api/...` | Served directly |
+| Restricted API (admin,user,ws namespaces) | `/auth/api/{admin|user|ws}*` | same path | 404 on non‑auth hosts |
+| WebSocket (register/auth) | `/auth/ws/*` | `/auth/ws/*` | 404 on non‑auth hosts |
+
+Notes:
+- “Strip `/auth`” means only when the path starts with that exact segment.
+- A reset token is a single path segment validated by server logic; malformed tokens 404.
+- Method and body are preserved for UI redirects (307 Temporary Redirect).
+
+## HTTP UI Endpoints
+
+| Method | Path (multi‑host) | Path (auth host) | Description |
+|--------|-------------------|------------------|-------------|
+| GET | `/auth/` | `/` | Main authentication SPA (non-auth hosts show an account summary view) |
+| GET | `/auth/admin/` | `/admin/` | Admin SPA root |
+| GET | `/auth/{reset_token}` | `/{reset_token}` | Reset / device addition SPA (token validated) |
+
+## Core API (Unrestricted – available on all hosts)
+
+Always under `/auth/api/` (even on auth host):
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/auth/restricted/` | Authentication UI for iframe embedding (supports `?mode=login` or `?mode=reauth`) |
+|--------|------|-------------|
+| POST | `/auth/api/validate` | Validate & (conditionally) renew session |
+| GET | `/auth/api/forward` | Auth proxy endpoint for reverse proxies (204 or 4xx) |
+| POST | `/auth/api/set-session` | Set cookie from Bearer token |
+| POST | `/auth/api/logout` | Logout current session |
+| POST | `/auth/api/user-info` | Authenticated user + context info (also handles reset tokens) |
+| POST | `/auth/api/create-link` | Create a device addition link (reset token) |
+| DELETE | `/auth/api/credential/{uuid}` | Delete user credential |
+| DELETE | `/auth/api/session/{session_id}` | Terminate a specific session |
+| POST | `/auth/api/user/logout-all` | Terminate all sessions for the user |
+| PUT | `/auth/api/user/display-name` | Update display name |
+
+## Restricted API Namespaces
+
+When `--auth-host` is set, requests to these paths on non‑auth hosts return 404:
+
+| Namespace | Examples |
+|-----------|----------|
+| `/auth/api/admin` | `/auth/api/admin/orgs`, `/auth/api/admin/orgs/{uuid}` ... |
+| `/auth/api/user` | Segment prefix – includes `/auth/api/user/...` endpoints (logout-all, display-name, session, credential) |
+| `/auth/api/ws` | (Reserved / future) |
+
+## WebSockets (Passkey)
+
+| Path | Description | Host Mode Behavior |
+|------|-------------|--------------------|
+| `/auth/ws/register` | Register new credential (new or existing user) | 404 on non‑auth hosts when auth host configured |
+| `/auth/ws/authenticate` | Authenticate user & issue session | 404 on non‑auth hosts when auth host configured |
+
+## Redirection & Status Codes
+
+| Scenario | Response |
+|----------|----------|
+| UI path on non‑auth host (auth host configured) | 307 redirect to auth host; `/auth` prefix stripped |
+| Reset token UI path on non‑auth host | 307 redirect (token preserved) |
+| Restricted API on non‑auth host | 404 |
+| Unrestricted API on any host | Normal response |
+| No auth host configured | All hosts behave like multi-host mode (no redirects; everything accessible) |
+
+## Headers for /auth/api/forward
+See `Headers.md` for details of headers returned on success (204).
+
+## Notes for Integrators
+1. Always use absolute `/auth/api/...` paths for programmatic requests (they do not move when an auth host is introduced).
+2. Bookmark / deep links to UI should resolve correctly after redirection if users access via a non-auth application host.
+3. Treat 404 from restricted namespaces on non-auth hosts as a signal to direct users to the central auth site.
+
+## Environment & CLI Summary
+| Option | Effect |
+|--------|--------|
+| `--auth-host` / `PASSKEY_AUTH_HOST` | Enables dedicated host mode, root-mounts UI there, restricts certain namespaces elsewhere |
+
+---
+This document reflects current behavior of the middleware-based host routing logic.

README.md

@@ -1,129 +1,72 @@
-# PasskeyAuth
+# Paskia
 
-A minimal FastAPI WebAuthn server with WebSocket support for passkey registration. This project demonstrates WebAuthn registration flow with Resident Keys (discoverable credentials) using modern Python tooling.
+An easy to install passkey-based authentication service that protects any web application with strong passwordless login.
 
-## Features
+## What is Paskia?
 
-- 🔐 WebAuthn registration with Resident Keys support
-- 🔌 WebSocket-based communication for real-time interaction
-- 🚀 Modern Python packaging with `pyproject.toml`
-- 🎨 Clean, responsive HTML interface using @simplewebauthn/browser
-- 📦 No database required - challenges stored locally per connection
-- 🛠️ Development tools: `ruff` for linting and formatting
-- 🧹 Clean architecture with local challenge management
+- Easy to use fully featured auth&auth system (login and permissions)
+- Organization and role-based access control (optional)
+   * Org admins control their users and roles
+   * Master admin can create multiple independent orgs
+   * Master admin makes permissions available for orgs to assign
+- User Profile and Administration by API and web interface.
+under `/auth/` or `auth.example.com`
+- Reset tokens and additional device linking via QR code or codewords.
+- Pure Python, FastAPI, packaged with prebuilt Vue frontend
 
-## Docs
+Two interfaces:
+- API fetch: auth checks and login without leaving your app
+- Forward-auth proxy: protect any unprotected site or service (Caddy, Nginx)
 
-- Caddy integration: see `CADDY.md` for short, copy-paste snippets to secure your site with Caddy.
+The API mode is useful for applications that can be customized to run with Paskia. Forward auth can also protect your javascript and other assets. Each provides fine-grained permission control and reauthentication requests where needed, and both can be mixed where needed.
 
-## Requirements
-
-- Python 3.9+
-- A WebAuthn-compatible authenticator (security key, biometric device, etc.)
+Single Sign-On (SSO): Users register once and authenticate across all applications under your domain name (configured rp-id).
 
 ## Quick Start
 
-### Install (editable dev mode)
+Install [UV](https://docs.astral.sh/uv/getting-started/installation/) and run:
 
 ```fish
-uv pip install -e .[dev]
+uvx paskia serve --rp-id example.com
 ```
 
-### Run (new CLI)
+On the first run it downloads the software and prints a registration link for the Admin. If you are going to be connecting `localhost` directly, for testing, leave out the rp-id.
 
-`passkey-auth` now provides subcommands:
+The server will start up on [localhost:4401](http://localhost:4401) "for authentication required", serving for `*.example.com`.
+
+Otherwise you will need a web server such as [Caddy](https://caddyserver.com/) to serve HTTPS on your actual domain names and proxy requests to Paskia and your backend apps.
+
+A quick example without any config file:
+```fish
+sudo caddy reverse-proxy --from example.com --to :4401
+```
+
+For a permanent install of `paskia` CLI command, not needing `uvx`:
+
+```fish
+uv tool install paskia
+```
+
+## Configuration
+
+There is no config file. Pass only the options on CLI:
 
 ```text
-passkey-auth serve [host:port] [--options]
-passkey-auth dev   [--options]
+paskia serve [options]
 ```
 
-Examples (fish shell shown):
+Optional options:
 
-```fish
-# Production style (no reload)
-passkey-auth serve
-passkey-auth serve 0.0.0.0:8080 --rp-id example.com --origin https://example.com
+- Listen address (one of):
+    * `[host]:port`: Address and port (default: `localhost:4401`)
+    * `unix:/path.sock`: Unix socket
+- `--rp-id <domain>`: Main domain (required for production)
+- `--rp-name "<text>"`: Name of your company or site (default: same as rp-id)
+- `--origin <url>`: Explicit single site (default: `https://<rp-id>`)
+- `--auth-host <domain>`: Dedicated authentication site (e.g., `auth.example.com`)
 
-# Development (auto-reload)
-passkey-auth dev            # localhost:4401
-passkey-auth dev :5500      # localhost on port 5500
-passkey-auth dev 127.0.0.1  # host only, default port 4401
-```
+## Documentation
 
-Available options (both subcommands):
-
-```text
---rp-id <id>        Relying Party ID (default: localhost)
---rp-name <name>    Relying Party name (default: same as rp-id)
---origin <url>      Explicit origin (default: https://<rp-id>)
-```
-
-### Legacy Invocation
-
-If you previously used `python -m passkey.fastapi --dev --host ...`, switch to the new form above. The old flags `--host`, `--port`, and `--dev` are replaced by the `[host:port]` positional and the `dev` subcommand.
-
-## Usage (Web)
-
-1. Start the server with one of the commands above
-2. Open your browser to `http://localhost:4401/auth/` (or your chosen host/port)
-3. Enter a username (or use the default)
-4. Click "Register Passkey"
-5. Follow your authenticator's prompts
-
-Real-time status updates stream over WebSocket.
-
-## Development
-
-### Code Quality
-
-```fish
-# Run linting and formatting with ruff
-uv run ruff check .
-uv run ruff format .
-
-# Or with hatch
-hatch run ruff check .
-hatch run ruff format .
-```
-
-### Project Structure
-
-```
-passkeyauth/
-├── passkeyauth/
-│   ├── __init__.py
-│   └── main.py          # FastAPI server with WebSocket support
-├── static/
-│   └── index.html       # Frontend interface
-├── pyproject.toml       # Modern Python packaging configuration
-└── README.md
-```
-
-## Technical Details
-
-### WebAuthn Configuration
-
-- **Relying Party ID**: `localhost` (for development)
-- **Resident Keys**: Required (enables discoverable credentials)
-- **User Verification**: Preferred
-- **Supported Algorithms**: ECDSA-SHA256, RSASSA-PKCS1-v1_5-SHA256
-
-### WebSocket Message Flow
-
-1. Client connects to `/ws/{client_id}`
-2. Client sends `registration_challenge` message
-3. Server responds with `registration_challenge_response`
-4. Client completes WebAuthn ceremony and sends `registration_response`
-5. Server verifies and responds with `registration_success` or `error`
-
-### Security Notes
-
-- This is a minimal demo - challenges are stored locally per WebSocket connection
-- For production use, implement proper user storage and session management
-- Consider using Redis or similar for challenge storage in production with multiple server instances
-- Ensure HTTPS in production environments
-
-## License
-
-MIT License - feel free to use this as a starting point for your own WebAuthn implementations!
+- `API.md`: Complete HTTP and WebSocket API reference
+- `Caddy.md`: Caddy configuration examples
+- `Headers.md`: HTTP headers passed to protected applications

caddy/Caddyfile.dev

@@ -0,0 +1,10 @@
+localhost {
+	# Forwards API by caddy, bypassing the Vite dev proxy
+	# Avoids bug https://github.com/oven-sh/bun/issues/9882
+	handle /api/* {
+		reverse_proxy :4402   # directly to backend
+	}
+	handle {
+		reverse_proxy :4403   # vite dev server
+	}
+}

e2e/.gitignore

@@ -0,0 +1,13 @@
+# Dependencies
+node_modules/
+
+# Test artifacts
+test-data/
+test-results/
+playwright-report/
+
+# Playwright
+.playwright/
+
+# Bun
+bun.lockb

e2e/README.md

@@ -0,0 +1,167 @@
+# Paskia E2E Tests
+
+End-to-end tests for Paskia using [Playwright](https://playwright.dev/) with Chrome's **Virtual Authenticator**.
+
+## Overview
+
+These tests exercise the complete WebAuthn/passkey authentication flow without requiring physical hardware. Chrome's DevTools Protocol provides a virtual authenticator that can:
+
+- Generate passkey credentials
+- Sign authentication challenges
+- Store resident keys (discoverable credentials)
+- Simulate user verification (biometrics/PIN)
+
+## Prerequisites
+
+- Node.js 18+
+- Python with `uv` (for running the backend server)
+
+## Setup
+
+```bash
+cd e2e
+npm install
+npm run install:browsers
+```
+
+## Running Tests
+
+### Basic Test Run
+
+```bash
+npm test
+```
+
+This will:
+1. Start a fresh Paskia server with a test database
+2. Run all E2E tests against it
+3. Clean up the server when done
+
+### With Coverage
+
+```bash
+npm run test:coverage
+```
+
+Runs tests and collects coverage for both:
+- **Python backend** (via `coverage.py`) - HTML report in `coverage-html/`
+- **Frontend JavaScript** (via Chrome V8 coverage) - JSON data in `e2e/coverage-frontend/`
+
+### Interactive Mode
+
+```bash
+npm run test:ui
+```
+
+Opens Playwright's UI mode for interactive test debugging.
+
+### Headed Mode
+
+```bash
+npm run test:headed
+```
+
+Runs tests with a visible browser window.
+
+### Debug Mode
+
+```bash
+npm run test:debug
+```
+
+Runs tests with Playwright Inspector for step-by-step debugging.
+
+## Test Structure
+
+```
+e2e/
+├── playwright.config.ts      # Playwright configuration
+├── package.json
+├── tsconfig.json
+├── test-data/                # Test database (created at runtime)
+│   └── test.sqlite
+└── tests/
+    ├── global-setup.ts       # Creates fresh DB, captures reset token
+    ├── global-teardown.ts    # Cleanup
+    ├── passkey.spec.ts       # Main E2E tests
+    └── fixtures/
+        ├── virtual-authenticator.ts  # Virtual authenticator setup
+        └── passkey-helpers.ts        # WebSocket helpers
+```
+
+## What's Tested
+
+### Registration Flow
+- Bootstrap admin user registration via reset token
+- WebSocket challenge-response with virtual authenticator
+- Session token creation and validation
+
+### Authentication Flow
+- Passkey authentication via WebSocket
+- Credential verification
+- Session management
+
+### Session Management
+- Token validation (`/auth/api/validate`)
+- User info retrieval (`/auth/api/user-info`)
+- Logout (`/auth/api/logout`)
+- Invalid/missing token rejection
+
+## How Virtual Authenticator Works
+
+The tests use Chrome DevTools Protocol (CDP) to create a virtual authenticator:
+
+```typescript
+const cdpSession = await page.context().newCDPSession(page)
+await cdpSession.send('WebAuthn.enable')
+await cdpSession.send('WebAuthn.addVirtualAuthenticator', {
+  options: {
+    protocol: 'ctap2',
+    transport: 'internal',
+    hasResidentKey: true,
+    hasUserVerification: true,
+    isUserVerified: true,
+    automaticPresenceSimulation: true,
+  },
+})
+```
+
+This creates an in-browser authenticator that:
+- Automatically responds to WebAuthn prompts
+- Stores credentials persistently during the test session
+- Simulates user verification without actual biometric input
+
+## Environment Variables
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `BASE_URL` | Server URL | `http://localhost:4404` |
+| `CI` | CI environment flag | - |
+| `CLEANUP_TEST_DB` | Remove test DB after run | `false` |
+
+## Limitations
+
+1. **Chromium only**: Virtual authenticator is a Chrome DevTools feature
+2. **No cross-origin**: Tests run on localhost; production-like origins need additional setup
+3. **Single user per run**: Bootstrap creates one admin user; additional users need admin API
+
+## Debugging Tips
+
+1. **Check test database**: `e2e/test-data/test.sqlite` persists after tests
+2. **View server output**: Global setup echoes server bootstrap to console
+3. **Use trace viewer**: `npx playwright show-trace` on failure traces
+
+## CI Integration
+
+The tests are designed for CI environments:
+
+```yaml
+- name: Run E2E Tests
+  run: |
+    cd e2e
+    npm ci
+    npm run install:browsers
+    npm test
+  env:
+    CI: true
+```

e2e/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "paskia-e2e",
+  "version": "1.0.0",
+  "private": true,
+  "description": "E2E tests for Paskia using Playwright with Virtual Authenticator",
+  "type": "module",
+  "scripts": {
+    "test": "bunx playwright test",
+    "test:headed": "bunx playwright test --headed",
+    "test:debug": "bunx playwright test --debug",
+    "test:ui": "bunx playwright test --ui",
+    "test:coverage": "COVERAGE=1 bunx playwright test",
+    "report": "bunx playwright show-report",
+    "install:browsers": "bunx playwright install chromium"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0",
+    "@simplewebauthn/browser": "^13.1.2",
+    "@types/bun": "^1.3.3",
+    "c8": "^10.1.3"
+  }
+}

e2e/playwright.config.js

@@ -0,0 +1,50 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Playwright configuration for Paskia E2E tests.
+ * Uses Chrome's Virtual Authenticator for automated passkey testing.
+ *
+ * Run with: bun run test
+ */
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: false, // Run tests sequentially for passkey state consistency
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1, // Single worker for database state consistency
+  reporter: [
+    ['html', { open: 'never' }],
+    ['list']
+  ],
+
+  // Global setup/teardown for test database and server
+  globalSetup: './tests/global-setup.ts',
+  globalTeardown: './tests/global-teardown.ts',
+
+  use: {
+    // Base URL for the Paskia server
+    baseURL: process.env.BASE_URL || 'http://localhost:4404',
+
+    // Collect trace on failure for debugging
+    trace: 'on-first-retry',
+
+    // Screenshot on failure
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        // Chrome-specific settings for virtual authenticator
+        launchOptions: {
+          args: [
+            '--enable-features=WebAuthenticationEnterpriseAttestation',
+          ],
+        },
+      },
+    },
+  ],
+})

e2e/playwright.config.ts.bak

@@ -0,0 +1,50 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Playwright configuration for Paskia E2E tests.
+ * Uses Chrome's Virtual Authenticator for automated passkey testing.
+ *
+ * Run with: bun run test
+ */
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: false, // Run tests sequentially for passkey state consistency
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1, // Single worker for database state consistency
+  reporter: [
+    ['html', { open: 'never' }],
+    ['list']
+  ],
+
+  // Global setup/teardown for test database and server
+  globalSetup: './tests/global-setup.ts',
+  globalTeardown: './tests/global-teardown.ts',
+
+  use: {
+    // Base URL for the Paskia server
+    baseURL: process.env.BASE_URL || 'http://localhost:4401',
+
+    // Collect trace on failure for debugging
+    trace: 'on-first-retry',
+
+    // Screenshot on failure
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        // Chrome-specific settings for virtual authenticator
+        launchOptions: {
+          args: [
+            '--enable-features=WebAuthenticationEnterpriseAttestation',
+          ],
+        },
+      },
+    },
+  ],
+})

e2e/tests/10-passkey.spec.ts

@@ -0,0 +1,635 @@
+import { test, expect, createVirtualAuthenticator } from './fixtures/virtual-authenticator'
+import {
+  registerPasskey,
+  authenticatePasskey,
+  validateSession,
+  getUserInfo,
+  logout,
+  getBootstrapResetToken,
+  createDeviceLink,
+  getSessionCookieName,
+  saveSessionToken,
+  getSavedSessionToken,
+  saveDeviceTokens,
+} from './fixtures/passkey-helpers'
+import type { Page, BrowserContext } from '@playwright/test'
+
+/**
+ * Helper to set up session cookie for a page.
+ */
+async function setupSessionCookie(page: Page, sessionToken: string): Promise<void> {
+  const cookieName = getSessionCookieName()
+  await page.context().addCookies([{
+    name: cookieName,
+    value: sessionToken,
+    domain: 'localhost',
+    path: '/',
+    secure: true,
+    httpOnly: true,
+    sameSite: 'Strict' as const,
+  }])
+}
+
+/**
+ * E2E tests for Paskia using Chrome's Virtual Authenticator.
+ *
+ * These tests exercise the complete WebAuthn flow:
+ * 1. Registration via WebSocket using bootstrap reset token
+ * 2. Authentication via WebSocket
+ * 3. Session validation
+ * 4. User info retrieval
+ * 5. Logout
+ *
+ * The virtual authenticator simulates a hardware passkey device,
+ * allowing fully automated testing without physical hardware.
+ */
+
+test.describe('Passkey Authentication E2E', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test.describe.configure({ mode: 'serial' })
+
+  // Shared state across tests in this describe block
+  let sessionToken: string
+  let userUuid: string
+  let credentialUuid: string
+  let resetToken: string | undefined
+
+  test.beforeAll(() => {
+    // Get the bootstrap reset token from global setup
+    resetToken = getBootstrapResetToken()
+    if (!resetToken) {
+      console.warn('⚠️ No reset token found - registration test may fail')
+    } else {
+      console.log(`📝 Using reset token: ${resetToken}`)
+    }
+  })
+
+  test('should load the auth page', async ({ page }) => {
+    // Navigate to auth page to establish origin for WebAuthn
+    await page.goto('/auth/')
+    await expect(page).toHaveTitle(/.*/)
+
+    // Page should load - 401 errors are expected since user is not logged in
+    await page.waitForTimeout(500)
+
+    // Take screenshot of the login view
+    await page.screenshot({ path: 'test-results/login-view.png' })
+    console.log('✓ Screenshot saved: test-results/login-view.png')
+
+    // Just verify the page loaded without JS errors (network 401s are OK)
+    console.log('✓ Auth page loaded successfully')
+  })
+
+  test('should register admin passkey via WebSocket using reset token', async ({ page, virtualAuthenticator }) => {
+    test.skip(!resetToken, 'No reset token available from bootstrap')
+
+    // Must visit the page first to establish origin
+    await page.goto('/auth/')
+
+    // Perform registration via WebSocket with virtual authenticator
+    // Using the bootstrap reset token for the admin user
+    const result = await registerPasskey(page, baseUrl, {
+      resetToken: resetToken,
+      displayName: 'Admin User',
+    })
+
+    // Verify registration result
+    expect(result.session_token).toBeDefined()
+    expect(result.session_token).toHaveLength(16)
+    expect(result.user_uuid).toBeDefined()
+    expect(result.credential_uuid).toBeDefined()
+    expect(result.message).toContain('successfully')
+
+    // Store for subsequent tests
+    sessionToken = result.session_token
+    userUuid = result.user_uuid
+    credentialUuid = result.credential_uuid
+
+    // Save session token for other test groups to use
+    saveSessionToken(sessionToken)
+
+    console.log(`✓ Registered user: ${userUuid}`)
+    console.log(`✓ Credential: ${credentialUuid}`)
+    console.log(`✓ Session token: ${sessionToken.substring(0, 4)}...`)
+  })
+
+  test('should create device tokens for other tests', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    // Create a batch of device tokens for API tests to use
+    // Each API test needs its own token to register a passkey in its virtual authenticator
+    const tokenCount = 15  // Enough for all API tests
+    const tokens: string[] = []
+
+    for (let i = 0; i < tokenCount; i++) {
+      const deviceLink = await createDeviceLink(page, baseUrl, sessionToken)
+      tokens.push(deviceLink.token)
+    }
+
+    saveDeviceTokens(tokens)
+    console.log(`✓ Created ${tokens.length} device tokens for API tests`)
+  })
+
+  test('should validate the session token', async ({ page }) => {
+    // Skip if registration didn't run
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    const validation = await validateSession(page, baseUrl, sessionToken)
+
+    expect(validation.valid).toBe(true)
+    expect(validation.user_uuid).toBe(userUuid)
+
+    console.log(`✓ Session validated for user: ${validation.user_uuid}`)
+  })
+
+  test('should retrieve user info', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    const userInfo = await getUserInfo(page, baseUrl, sessionToken)
+
+    expect(userInfo.user.user_uuid).toBe(userUuid)
+    expect(userInfo.user.user_name).toBe('Admin User')
+    expect(userInfo.credentials).toBeDefined()
+    expect(userInfo.credentials.length).toBeGreaterThanOrEqual(1)
+
+    // Navigate to profile and take screenshot
+    const cookieName = getSessionCookieName()
+    await page.context().addCookies([{
+      name: cookieName,
+      value: sessionToken,
+      domain: 'localhost',
+      path: '/',
+      secure: true,
+      httpOnly: true,
+      sameSite: 'Strict' as const,
+    }])
+    await page.goto('/auth/')
+    await page.waitForSelector('[data-view="profile"]', { timeout: 5000 })
+    await page.screenshot({ path: 'test-results/profile-view.png' })
+    console.log('✓ Screenshot saved: test-results/profile-view.png')
+
+    console.log(`✓ User info retrieved: ${userInfo.user.user_name}`)
+    console.log(`✓ Credentials count: ${userInfo.credentials.length}`)
+  })
+
+  test('should authenticate with existing passkey', async ({ page, virtualAuthenticator }) => {
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    // Navigate to page (required for WebAuthn origin)
+    await page.goto('/auth/')
+
+    // The virtual authenticator in this context is new and doesn't have credentials.
+    // Create a device link using the current session, then register a new credential.
+    const deviceLink = await createDeviceLink(page, baseUrl, sessionToken)
+    console.log(`✓ Created device link with token: ${deviceLink.token}`)
+
+    // Register a new credential using the device link
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceLink.token,
+      displayName: 'Admin User (test device)'
+    })
+
+    console.log(`✓ Added test credential: ${regResult.credential_uuid}`)
+
+    // Now logout and authenticate with the fresh credential
+    await logout(page, baseUrl, regResult.session_token)
+    console.log('✓ Logged out')
+
+    // Authenticate with the virtual authenticator (now has a valid credential)
+    const result = await authenticatePasskey(page, baseUrl)
+
+    expect(result.session_token).toBeDefined()
+    expect(result.session_token).toHaveLength(16)
+    expect(result.user_uuid).toBe(userUuid)
+
+    // Update session token for subsequent tests
+    sessionToken = result.session_token
+
+    // Save session token for other test groups to use
+    saveSessionToken(sessionToken)
+
+    console.log(`✓ Authenticated as user: ${result.user_uuid}`)
+    console.log(`✓ New session token: ${sessionToken.substring(0, 4)}...`)
+  })
+
+  test('should validate new session after authentication', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires successful authentication')
+
+    const validation = await validateSession(page, baseUrl, sessionToken)
+
+    expect(validation.valid).toBe(true)
+    expect(validation.user_uuid).toBe(userUuid)
+
+    console.log(`✓ New session validated`)
+  })
+
+  // Note: Logout test moved to the end so other test groups can use the session
+})
+
+test.describe('Session Management', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test('should reject invalid session token', async ({ page }) => {
+    const cookieName = getSessionCookieName()
+    const response = await page.request.post(`${baseUrl}/auth/api/validate`, {
+      headers: {
+        'Cookie': `${cookieName}=invalid_token_123`,
+      },
+      failOnStatusCode: false,
+    })
+
+    // Server may return 400 (bad format) or 401 (unauthorized)
+    expect([400, 401]).toContain(response.status())
+    console.log(`✓ Invalid token correctly rejected`)
+  })
+
+  test('should reject missing session token', async ({ page }) => {
+    const response = await page.request.post(`${baseUrl}/auth/api/validate`, {
+      failOnStatusCode: false,
+    })
+
+    expect(response.status()).toBe(401)
+    console.log(`✓ Missing token correctly rejected`)
+  })
+})
+
+test.describe('Device Addition Dialog', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test.describe.configure({ mode: 'serial' })
+
+  let sessionToken: string
+
+  test.beforeAll(() => {
+    // Get the session token saved by the previous test group
+    // Note: This runs before the logout test, so the session should still be valid
+    const saved = getSavedSessionToken()
+    if (saved) {
+      sessionToken = saved
+    }
+  })
+
+  test('should open device addition dialog and show QR code', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires saved session token from previous tests')
+
+    // Set the session cookie for this test context
+    const cookieName = getSessionCookieName()
+    await page.context().addCookies([{
+      name: cookieName,
+      value: sessionToken,
+      domain: 'localhost',
+      path: '/',
+      secure: true,
+      httpOnly: true,
+      sameSite: 'Strict',
+    }])
+
+    // Navigate to auth page (which should show profile when logged in)
+    await page.goto('/auth/')
+
+    // Wait for the profile view to load
+    await page.waitForSelector('[data-view="profile"]', { timeout: 5000 })
+
+    // Click the "Add Another Device" button
+    const addDeviceButton = page.getByRole('button', { name: 'Add Another Device' })
+    await expect(addDeviceButton).toBeVisible()
+    await addDeviceButton.click()
+
+    // Wait for the registration link modal to appear
+    const dialog = page.locator('.device-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    // Verify dialog contains expected elements
+    await expect(dialog.locator('h2')).toContainText('Device Registration Link')
+
+    // Wait for QR code to be generated (canvas should have content)
+    const qrCanvas = dialog.locator('.qr-code')
+    await expect(qrCanvas).toBeVisible()
+
+    // Verify the link is displayed (text strips scheme, but href has it)
+    const linkElement = dialog.locator('a.qr-link')
+    await expect(linkElement).toBeVisible()
+    const linkText = await linkElement.textContent()
+    const linkHref = await linkElement.getAttribute('href')
+    // Text shows hostname without scheme
+    expect(linkText).toContain('localhost:4404/auth/')
+    // Href includes full URL with scheme
+    expect(linkHref).toContain('http://localhost:4404/auth/')
+    console.log(`✓ Device link displayed: ${linkText} (href: ${linkHref})`)
+
+    // Verify expiration warning is shown
+    await expect(dialog.locator('.reg-help')).toContainText('Expires')
+
+    // Take screenshot of the dialog
+    await dialog.screenshot({ path: 'test-results/device-addition-dialog.png' })
+    console.log(`✓ Screenshot saved: test-results/device-addition-dialog.png`)
+
+    // Verify Copy Link button exists
+    const copyButton = dialog.getByRole('button', { name: 'Copy Link' })
+    await expect(copyButton).toBeVisible()
+
+    // Close the dialog (use the text button, not the icon button)
+    const closeButton = dialog.locator('button.btn-secondary', { hasText: 'Close' })
+    await closeButton.click()
+    await expect(dialog).not.toBeVisible()
+
+    console.log(`✓ Device addition dialog test complete`)
+  })
+
+  test('should extract valid reset token from dialog', async ({ page }) => {
+    test.skip(!sessionToken, 'Requires successful registration')
+
+    // Set the session cookie
+    // __Host- cookies require: secure=true, path=/, no domain (but we set domain for localhost)
+    const cookieName = getSessionCookieName()
+    await page.context().addCookies([{
+      name: cookieName,
+      value: sessionToken,
+      domain: 'localhost',
+      path: '/',
+      secure: true,
+      httpOnly: true,
+      sameSite: 'Strict',
+    }])
+
+    await page.goto('/auth/')
+    await page.waitForSelector('[data-view="profile"]', { timeout: 5000 })
+
+    // Open the dialog
+    await page.getByRole('button', { name: 'Add Another Device' }).click()
+    const dialog = page.locator('.device-dialog')
+    await expect(dialog).toBeVisible({ timeout: 5000 })
+
+    // Extract the reset token from the displayed URL
+    const linkText = dialog.locator('.qr-link p')
+    const linkContent = await linkText.textContent()
+
+    // URL format: localhost/auth/word1.word2.word3.word4.word5
+    const tokenMatch = linkContent?.match(/\/auth\/([a-z]+\.[a-z]+\.[a-z]+\.[a-z]+\.[a-z]+)/)
+    expect(tokenMatch).toBeTruthy()
+    const extractedToken = tokenMatch![1]
+    console.log(`✓ Extracted reset token: ${extractedToken}`)
+
+    // Close the dialog (use the text button, not the icon button)
+    await dialog.locator('button.btn-secondary', { hasText: 'Close' }).click()
+
+    // Verify the token can be used for registration via API
+    // (We won't complete registration, just verify the WebSocket accepts it)
+    const wsUrl = `${baseUrl.replace('http', 'ws')}/auth/ws/register?reset=${encodeURIComponent(extractedToken)}&name=Test`
+
+    // Use page.evaluate to test WebSocket connection
+    const wsResult = await page.evaluate(async (wsUrl) => {
+      return new Promise<{ success: boolean; hasOptions: boolean }>((resolve) => {
+        const ws = new WebSocket(wsUrl)
+        ws.onmessage = (event) => {
+          const data = JSON.parse(event.data)
+          ws.close()
+          // Check if we got registration options (not an error)
+          resolve({
+            success: !data.status && !data.detail,
+            hasOptions: !!data.optionsJSON?.challenge
+          })
+        }
+        ws.onerror = () => resolve({ success: false, hasOptions: false })
+        setTimeout(() => {
+          ws.close()
+          resolve({ success: false, hasOptions: false })
+        }, 5000)
+      })
+    }, wsUrl)
+
+    expect(wsResult.success).toBe(true)
+    expect(wsResult.hasOptions).toBe(true)
+    console.log(`✓ Reset token is valid and accepted by server`)
+  })
+})
+
+test.describe('ProfileView - Add New Passkey', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test('should show credentials list in profile', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+
+    // Wait for credentials to load
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Should have at least one credential from initial registration
+    const credentialItems = await page.locator('.credential-item').count()
+    expect(credentialItems).toBeGreaterThanOrEqual(1)
+    console.log(`✓ Profile shows ${credentialItems} credential(s) in list`)
+  })
+
+  test('should add a new passkey using Add New Passkey button', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    // Create virtual authenticator for this page
+    await createVirtualAuthenticator(page)
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+
+    // Wait for credentials list and get initial count
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+    const initialCredentialCount = await page.locator('.credential-item').count()
+    console.log(`Initial credential count: ${initialCredentialCount}`)
+
+    // Click "Add New Passkey" button
+    const addPasskeyBtn = page.locator('button:has-text("Add New Passkey")')
+    await expect(addPasskeyBtn).toBeVisible()
+    await addPasskeyBtn.click()
+
+    // Wait for WebAuthn registration to complete (virtual authenticator handles it automatically)
+    // The button might show loading state or there might be a success message
+    await page.waitForTimeout(2000) // Give time for WebSocket registration to complete
+
+    // Refresh the page to ensure we see updated credentials
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Should now have one more credential
+    const newCredentialCount = await page.locator('.credential-item').count()
+    expect(newCredentialCount).toBe(initialCredentialCount + 1)
+    console.log(`✓ Successfully added new passkey. Credentials: ${initialCredentialCount} -> ${newCredentialCount}`)
+  })
+
+  test('should reject duplicate passkey from same authenticator', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    // Create virtual authenticator with resident key support
+    // Using same authenticator configuration - credentials stored on authenticator
+    await createVirtualAuthenticator(page, {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    })
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+
+    // Wait for credentials list
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+    const initialCredentialCount = await page.locator('.credential-item').count()
+
+    // Try to add a passkey - with excludeCredentials the authenticator should
+    // prevent re-registration of the same credential
+    const addPasskeyBtn = page.locator('button:has-text("Add New Passkey")')
+    await expect(addPasskeyBtn).toBeVisible()
+    await addPasskeyBtn.click()
+
+    // Wait for response - could be success (new credential) or error (duplicate)
+    await page.waitForTimeout(3000)
+
+    // Check for error message or status message
+    const statusMessage = page.locator('.status-message')
+    const hasError = await statusMessage.locator('.error, .status-error').isVisible().catch(() => false)
+
+    // Reload to check final credential count
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+    const finalCredentialCount = await page.locator('.credential-item').count()
+
+    // The test passes if either:
+    // 1. An error was shown (duplicate rejected by excludeCredentials)
+    // 2. A new credential was added (fresh authenticator has no stored credential)
+    console.log(`Credentials: ${initialCredentialCount} -> ${finalCredentialCount}, error shown: ${hasError}`)
+    console.log(`✓ Add passkey flow completed (new authenticator creates new credential)`)
+  })
+})
+
+test.describe('ProfileView - Multi-Authenticator', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test('should add passkey from different authenticator', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    // Create a different virtual authenticator (simulating a different device)
+    await createVirtualAuthenticator(page, {
+      protocol: 'ctap2',
+      transport: 'usb', // Different transport - like a USB security key
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    })
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+
+    // Wait for credentials list and get initial count
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+    const initialCredentialCount = await page.locator('.credential-item').count()
+
+    // Click "Add New Passkey" button
+    const addPasskeyBtn = page.locator('button:has-text("Add New Passkey")')
+    await expect(addPasskeyBtn).toBeVisible()
+    await addPasskeyBtn.click()
+
+    // Wait for registration to complete
+    await page.waitForTimeout(2000)
+
+    // Refresh to see updated list
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    const newCredentialCount = await page.locator('.credential-item').count()
+    expect(newCredentialCount).toBe(initialCredentialCount + 1)
+    console.log(`✓ Added passkey from USB authenticator. Credentials: ${initialCredentialCount} -> ${newCredentialCount}`)
+  })
+
+  test('should display multiple credentials with details', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Should have multiple credentials now from previous tests
+    const credentialItems = page.locator('.credential-item')
+    const count = await credentialItems.count()
+
+    // Verify each credential has required elements
+    for (let i = 0; i < count; i++) {
+      const item = credentialItems.nth(i)
+
+      // Should have title/name
+      const title = item.locator('.item-title')
+      await expect(title).toBeVisible()
+
+      // Should have date information
+      const dates = item.locator('.credential-dates')
+      await expect(dates).toBeVisible()
+
+      // Should have created date
+      const createdDate = item.locator('.date-label:has-text("Created:")')
+      await expect(createdDate).toBeVisible()
+    }
+
+    console.log(`✓ All ${count} credentials displayed with proper details`)
+
+    // Take screenshot of credentials list
+    await page.screenshot({
+      path: 'test-results/credentials-list.png',
+      fullPage: false,
+    })
+    console.log(`✓ Screenshot saved: test-results/credentials-list.png`)
+  })
+
+  test('should show current session badge', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await setupSessionCookie(page, sessionToken!)
+
+    // Navigate to profile page
+    await page.goto(`${baseUrl}/auth/`)
+    await page.waitForLoadState('networkidle')
+    await page.waitForSelector('.credential-list', { timeout: 10000 })
+
+    // Look for the "Current" badge indicating current session's credential
+    const currentBadge = page.locator('.badge-current:has-text("Current")')
+    const hasCurrent = await currentBadge.isVisible().catch(() => false)
+
+    if (hasCurrent) {
+      console.log(`✓ Current session credential is marked with "Current" badge`)
+
+      // The current credential should have delete disabled
+      const currentItem = page.locator('.credential-item.current-session')
+      if (await currentItem.isVisible()) {
+        const deleteBtn = currentItem.locator('.btn-card-delete')
+        if (await deleteBtn.isVisible()) {
+          await expect(deleteBtn).toBeDisabled()
+          console.log(`✓ Delete button is disabled for current session credential`)
+        }
+      }
+    } else {
+      console.log(`ℹ No credential marked as current (may be using different auth method)`)
+    }
+  })
+})

e2e/tests/20-api-auth.spec.ts

@@ -0,0 +1,606 @@
+import { test, expect, createVirtualAuthenticator } from './fixtures/virtual-authenticator'
+import {
+  getSessionCookieName,
+  getSavedSessionToken,
+  saveSessionToken,
+  registerPasskey,
+  authenticatePasskey,
+  popDeviceToken,
+  getDeviceTokenCount,
+  logout,
+} from './fixtures/passkey-helpers'
+import type { Page, Frame } from '@playwright/test'
+
+/**
+ * E2E tests for API mode authentication flows.
+ *
+ * These tests simulate the flow used by SPAs when making API calls:
+ * 1. API call returns 401/403 with auth.iframe URL
+ * 2. App shows auth iframe overlay
+ * 3. User authenticates in iframe
+ * 4. Iframe posts 'auth-success' message to parent
+ * 5. App retries original API call
+ *
+ * Note: These tests depend on 10-passkey.spec.ts running first to create device tokens.
+ * Each test that needs authentication uses popDeviceToken() to get a fresh token
+ * and registers its own credential in its virtual authenticator.
+ */
+
+const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+/**
+ * Helper to set up session cookie for a page.
+ */
+async function setupSessionCookie(page: Page, sessionToken: string): Promise<void> {
+  const cookieName = getSessionCookieName()
+  await page.context().addCookies([{
+    name: cookieName,
+    value: sessionToken,
+    domain: 'localhost',
+    path: '/',
+    secure: true,
+    httpOnly: true,
+    sameSite: 'Strict' as const,
+  }])
+}
+
+/**
+ * Helper to clear session cookie.
+ */
+async function clearSessionCookie(page: Page): Promise<void> {
+  const cookieName = getSessionCookieName()
+  await page.context().clearCookies({ name: cookieName })
+}
+
+/**
+ * Set up the test page using the examples page directly.
+ * The examples page already has iframe handling - we just add a Promise wrapper.
+ */
+async function setupTestHarness(page: Page): Promise<void> {
+  // Navigate to the examples page which already has the auth iframe handling
+  await page.goto(`${baseUrl}/auth/examples/`)
+}
+
+/**
+ * Make an API call through the examples page, returning a Promise.
+ * Wraps the page's apiCall and listens for auth-success/auth-back messages.
+ * Returns { status, data } on success, or throws on cancellation.
+ *
+ * Note: If auth is not needed (request succeeds without 401/403), this will
+ * resolve after a timeout with the direct fetch result.
+ */
+async function makeApiCall(page: Page, url: string, method = 'GET'): Promise<{ status: number; data?: any }> {
+  return page.evaluate(({ url, method }) => {
+    return new Promise((resolve, reject) => {
+      let resolved = false;
+
+      // Listen for auth messages
+      const handler = (event: MessageEvent) => {
+        const { type } = event.data || {};
+        if (type === 'auth-success') {
+          if (resolved) return;
+          resolved = true;
+          window.removeEventListener('message', handler);
+          // Wait a tick for the page's handler to retry, then make our own call
+          setTimeout(async () => {
+            try {
+              const response = await fetch(url, { method, credentials: 'include' });
+              if (response.status === 204) {
+                resolve({ status: 204 });
+              } else if (response.ok) {
+                const data = await response.json();
+                resolve({ status: response.status, data });
+              } else {
+                resolve({ status: response.status });
+              }
+            } catch (e) {
+              resolve({ status: 0 });
+            }
+          }, 200);
+        } else if (type === 'auth-back') {
+          if (resolved) return;
+          resolved = true;
+          window.removeEventListener('message', handler);
+          reject(new Error('cancelled'));
+        }
+      };
+      window.addEventListener('message', handler);
+
+      // Also make a direct fetch to handle the case where no auth is needed
+      // (the page's apiCall won't send any message if the request succeeds)
+      setTimeout(async () => {
+        if (resolved) return;
+        try {
+          const response = await fetch(url, { method, credentials: 'include' });
+          // Only resolve if this is a success or non-auth error
+          if (response.status !== 401 && response.status !== 403) {
+            if (resolved) return;
+            resolved = true;
+            window.removeEventListener('message', handler);
+            if (response.status === 204) {
+              resolve({ status: 204 });
+            } else if (response.ok) {
+              const data = await response.json();
+              resolve({ status: response.status, data });
+            } else {
+              resolve({ status: response.status });
+            }
+          }
+          // If 401/403, the auth iframe will appear and we wait for the message
+        } catch (e) {
+          // Network error - let the message handler deal with it
+        }
+      }, 100);
+
+      // Call the page's existing apiCall function
+      // It will show the iframe on 401/403
+      (window as any).apiCall(url, method);
+    });
+  }, { url, method });
+}
+
+/**
+ * Wait for auth iframe to appear and return a reference to it.
+ */
+async function waitForAuthIframe(page: Page, timeout = 5000): Promise<Frame> {
+  await page.waitForSelector('#auth-iframe', { timeout })
+  const iframe = page.frameLocator('#auth-iframe')
+  // Wait for iframe content to load
+  await iframe.locator('.view-root').waitFor({ timeout })
+  return page.frame({ url: /\/auth\/restricted\// })!
+}
+
+/**
+ * Wait for auth iframe to disappear.
+ */
+async function waitForAuthIframeHidden(page: Page, timeout = 5000): Promise<void> {
+  await page.waitForSelector('#auth-iframe', { state: 'detached', timeout })
+}
+
+/**
+ * Click Back button in auth iframe.
+ */
+async function clickBackInIframe(page: Page): Promise<void> {
+  const iframe = page.frameLocator('#auth-iframe')
+  await iframe.getByRole('button', { name: 'Back' }).click()
+}
+
+/**
+ * Click Login button in auth iframe.
+ */
+async function clickLoginInIframe(page: Page): Promise<void> {
+  const iframe = page.frameLocator('#auth-iframe')
+  await iframe.getByRole('button', { name: 'Login' }).click()
+}
+
+/**
+ * Click Verify button in auth iframe (for reauth mode).
+ */
+async function clickVerifyInIframe(page: Page): Promise<void> {
+  const iframe = page.frameLocator('#auth-iframe')
+  await iframe.getByRole('button', { name: 'Verify' }).click()
+}
+
+/**
+ * Click Logout button in auth iframe (for forbidden mode).
+ */
+async function clickLogoutInIframe(page: Page): Promise<void> {
+  const iframe = page.frameLocator('#auth-iframe')
+  await iframe.getByRole('button', { name: 'Logout' }).click()
+}
+
+test.describe('API Mode - 401 Login Flow', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  test('should show auth iframe on 401 and allow cancellation (Back)', async ({ page }) => {
+    // Set up test harness (injects our API flow handler)
+    await setupTestHarness(page)
+
+    // Clear any existing session cookie
+    await clearSessionCookie(page)
+
+    // Make API call that triggers 401 (don't await - it blocks until iframe resolves)
+    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'POST').catch(e => e)
+    console.log('✓ Auth iframe appeared on 401')
+
+    // Verify it's in login mode (not reauth)
+    const iframe = page.frameLocator('#auth-iframe')
+    await expect(iframe.locator('h1')).toContainText('🔐')
+    await expect(iframe.getByRole('button', { name: 'Login' })).toBeVisible()
+
+    // Take screenshot of the login iframe
+    await page.screenshot({ path: 'test-results/api-401-login-iframe.png' })
+    console.log('✓ Screenshot saved: test-results/api-401-login-iframe.png')
+
+    // Click Back to cancel authentication
+    await clickBackInIframe(page)
+
+    // Iframe should close
+    await waitForAuthIframeHidden(page)
+    console.log('✓ Auth iframe closed on Back button')
+
+    // Wait for the API call promise to reject
+    const result = await apiCallPromise
+    expect(result).toBeInstanceOf(Error)
+    expect(result.message).toContain('cancelled')
+
+    // Output should show cancellation
+    const output = page.locator('#output')
+    await expect(output).toContainText('cancelled')
+    console.log('✓ API call was cancelled')
+  })
+
+  test('should show auth iframe on 401 and complete login', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and register credential using device token
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'API Test Device',
+    })
+    console.log(`✓ Registered credential: ${regResult.credential_uuid}`)
+
+    // Logout to clear session (but keep the passkey in virtual authenticator)
+    await logout(page, baseUrl, regResult.session_token)
+    console.log('✓ Logged out')
+
+    // Set up test harness
+    await setupTestHarness(page)
+
+    // Make API call that triggers 401
+    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'POST')
+
+    // Wait for auth iframe to appear
+    await waitForAuthIframe(page)
+    console.log('✓ Auth iframe appeared on 401')
+
+    // Click Login button - virtual authenticator will handle the passkey
+    await clickLoginInIframe(page)
+
+    // Wait for authentication to complete - iframe should close
+    await waitForAuthIframeHidden(page, 10000)
+    console.log('✓ Authentication completed, iframe closed')
+
+    // Wait for API call to complete and verify result
+    const result = await apiCallPromise
+    expect(result.status).toBe(200)
+    expect(result.data.user).toBeDefined()
+    console.log('✓ API call succeeded after authentication')
+
+    // Save the session for other tests
+    const cookies = await page.context().cookies()
+    const sessionCookie = cookies.find(c => c.name === getSessionCookieName())
+    if (sessionCookie) {
+      saveSessionToken(sessionCookie.value)
+      console.log(`✓ Saved session token for other tests`)
+    }
+  })
+})
+
+test.describe('API Mode - 401 Reauth Flow', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  test('should show reauth iframe on max_age violation and allow cancellation', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and register a credential
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'Reauth Cancel Test Device',
+    })
+    saveSessionToken(regResult.session_token)
+
+    // Wait for session to age past max_age threshold
+    console.log('Waiting 3s for session to age...')
+    await page.waitForTimeout(3000)
+
+    // Set up test harness with the session
+    await setupSessionCookie(page, regResult.session_token)
+    await setupTestHarness(page)
+
+    // Make API call with max_age=1s (session is now > 1s old)
+    const apiCallPromise = makeApiCall(page, '/auth/api/forward?max_age=1s', 'GET').catch(e => e)
+
+    // Wait for auth iframe to appear
+    await waitForAuthIframe(page)
+    console.log('✓ Reauth iframe appeared (session older than max_age)')
+
+    // Verify it's in reauth mode
+    const iframe = page.frameLocator('#auth-iframe')
+    await expect(iframe.locator('h1')).toContainText('Additional Authentication')
+    await expect(iframe.getByRole('button', { name: 'Verify' })).toBeVisible()
+
+    // Take screenshot of reauth iframe
+    await page.screenshot({ path: 'test-results/api-401-reauth-iframe.png' })
+    console.log('✓ Screenshot saved: test-results/api-401-reauth-iframe.png')
+
+    // Click Back to cancel
+    await clickBackInIframe(page)
+    await waitForAuthIframeHidden(page)
+    console.log('✓ Reauth cancelled via Back button')
+
+    const result = await apiCallPromise
+    expect(result).toBeInstanceOf(Error)
+  })
+
+  test('should complete reauth flow with passkey', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and register a credential
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'Reauth Test Device',
+    })
+
+    // Save the new session
+    saveSessionToken(regResult.session_token)
+
+    // Wait for the session to be "old" (>2s for max_age=2s test)
+    console.log('Waiting 3s for session to age...')
+    await page.waitForTimeout(3000)
+
+    // Set up test harness with the session
+    await setupSessionCookie(page, regResult.session_token)
+    await setupTestHarness(page)
+
+    // Make API call with max_age=2s
+    const apiCallPromise = makeApiCall(page, '/auth/api/forward?max_age=2s', 'GET')
+
+    // Auth iframe should appear in reauth mode
+    await waitForAuthIframe(page)
+    console.log('✓ Reauth iframe appeared')
+
+    const iframe = page.frameLocator('#auth-iframe')
+    await expect(iframe.locator('h1')).toContainText('Additional Authentication')
+
+    // Click Verify - virtual authenticator handles passkey
+    await clickVerifyInIframe(page)
+
+    // Wait for completion
+    await waitForAuthIframeHidden(page, 10000)
+    console.log('✓ Reauth completed')
+
+    // Wait for API call result
+    const result = await apiCallPromise
+    expect(result.status).toBe(204)
+    console.log('✓ Forward endpoint returned 204 after reauth')
+  })
+})
+
+test.describe('API Mode - 403 Forbidden Flow', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  test('should show forbidden view and allow going back', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    // Set up test harness with valid session
+    await setupSessionCookie(page, sessionToken!)
+    await setupTestHarness(page)
+
+    // Make API call requiring admin permission
+    const apiCallPromise = makeApiCall(page, '/auth/api/forward?perm=auth:admin', 'GET').catch(e => e)
+
+    // Check if auth iframe appeared
+    const iframeAppeared = await page.waitForSelector('#auth-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
+
+    if (!iframeAppeared) {
+      // User might already have admin permission
+      const result = await apiCallPromise
+      if (result.status === 204) {
+        console.log('✓ User has admin permission, got 204 (skipping forbidden test)')
+        return
+      }
+    }
+
+    await waitForAuthIframe(page)
+    console.log('✓ Auth iframe appeared on permission check')
+
+    // Wait for view to stabilize and check mode
+    await page.waitForTimeout(500)
+    const iframe = page.frameLocator('#auth-iframe')
+    const headingText = await iframe.locator('h1').textContent()
+    console.log(`  Heading: ${headingText}`)
+
+    if (headingText?.includes('Forbidden')) {
+      console.log('✓ Forbidden view displayed (user lacks admin permission)')
+
+      // Should show Logout button in forbidden mode
+      await expect(iframe.getByRole('button', { name: 'Logout' })).toBeVisible()
+
+      // Take screenshot of forbidden view
+      await page.screenshot({ path: 'test-results/api-403-forbidden-iframe.png' })
+      console.log('✓ Screenshot saved: test-results/api-403-forbidden-iframe.png')
+
+      // Click Back to close
+      await clickBackInIframe(page)
+      await waitForAuthIframeHidden(page)
+      console.log('✓ Forbidden dialog closed via Back')
+
+      const result = await apiCallPromise
+      expect(result).toBeInstanceOf(Error)
+    } else {
+      // User has admin permission, so they got through
+      console.log('✓ User has admin permission, no forbidden view')
+    }
+  })
+
+  test('should allow logout from forbidden view and then login', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and register credential for later login
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'Forbidden Test Device',
+    })
+    saveSessionToken(regResult.session_token)
+
+    // Set up test harness with the session
+    await setupSessionCookie(page, regResult.session_token)
+    await setupTestHarness(page)
+
+    // Make API call requiring admin permission
+    const apiCallPromise = makeApiCall(page, '/auth/api/forward?perm=auth:admin', 'GET').catch(e => e)
+
+    // Check if auth iframe appeared
+    const iframeAppeared = await page.waitForSelector('#auth-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
+
+    if (!iframeAppeared) {
+      const result = await apiCallPromise
+      if (result.status === 204) {
+        console.log('✓ User has admin permission, skipping forbidden->login test')
+        return
+      }
+    }
+
+    await waitForAuthIframe(page)
+    const iframe = page.frameLocator('#auth-iframe')
+    await page.waitForTimeout(500)
+
+    const headingText = await iframe.locator('h1').textContent()
+
+    if (headingText?.includes('Forbidden')) {
+      console.log('✓ Forbidden view displayed')
+
+      // Take screenshot of forbidden view before logout
+      await page.screenshot({ path: 'test-results/api-403-forbidden-before-logout.png' })
+      console.log('✓ Screenshot saved: test-results/api-403-forbidden-before-logout.png')
+
+      // Click Logout in the iframe
+      await clickLogoutInIframe(page)
+
+      // After logout, the view should switch to login mode and show a toast
+      await page.waitForTimeout(1000)
+      await expect(iframe.getByRole('button', { name: 'Login' })).toBeVisible({ timeout: 5000 })
+      console.log('✓ Switched to login view after logout')
+
+      // Verify status message appears indicating user can login with another account
+      const statusMessage = iframe.locator('.global-status .status')
+      await expect(statusMessage).toBeVisible({ timeout: 3000 })
+      const statusText = await statusMessage.textContent()
+      expect(statusText).toContain('sign in with a different account')
+      console.log(`✓ Status message: ${statusText}`)
+
+      // Take screenshot showing login view with status message (after forbidden logout)
+      await page.screenshot({ path: 'test-results/api-403-after-logout-login.png' })
+      console.log('✓ Screenshot saved: test-results/api-403-after-logout-login.png')
+
+      // Now login with the passkey
+      await clickLoginInIframe(page)
+
+      // Wait for auth to complete
+      await waitForAuthIframeHidden(page, 10000)
+      console.log('✓ Logged in successfully')
+
+      // The API call should have completed (but may still fail with 403 since same user)
+      const result = await apiCallPromise
+      console.log(`  Final result status: ${result.status || 'error'}`)
+    } else {
+      console.log('✓ Not in forbidden mode, closing dialog')
+      await clickBackInIframe(page)
+      await waitForAuthIframeHidden(page)
+    }
+  })
+})
+
+test.describe('API Mode - Direct API Response Format', () => {
+  test('should return JSON with auth.iframe on 401 (unauthenticated)', async ({ page }) => {
+    // Make direct API call without session
+    const response = await page.request.get(`${baseUrl}/auth/api/forward`, {
+      headers: {
+        'Accept': 'application/json',
+      },
+    })
+
+    expect(response.status()).toBe(401)
+
+    const data = await response.json()
+    expect(data.auth).toBeDefined()
+    expect(data.auth.iframe).toBeDefined()
+    expect(data.auth.mode).toBe('login')
+    expect(data.auth.iframe).toContain('/auth/restricted/')
+
+    console.log(`✓ 401 response includes auth.iframe: ${data.auth.iframe}`)
+  })
+
+  test('should return JSON with auth.mode=forbidden on 403', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    const cookieName = getSessionCookieName()
+
+    // Make API call with session but requesting admin permission
+    const response = await page.request.get(`${baseUrl}/auth/api/forward?perm=auth:admin`, {
+      headers: {
+        'Accept': 'application/json',
+        'Cookie': `${cookieName}=${sessionToken}`,
+      },
+    })
+
+    // Could be 403 (forbidden) or 204 (user is admin)
+    if (response.status() === 403) {
+      const data = await response.json()
+      expect(data.auth).toBeDefined()
+      expect(data.auth.mode).toBe('forbidden')
+      console.log(`✓ 403 response auth.mode: ${data.auth.mode}`)
+    } else if (response.status() === 204) {
+      console.log('✓ User has admin permission, got 204')
+    } else {
+      console.log(`  Unexpected status: ${response.status()}`)
+    }
+  })
+
+  test('should return JSON with auth.mode=reauth on max_age violation', async ({ page, virtualAuthenticator }) => {
+    // Get a device token from the pool (created by 10-passkey.spec.ts)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'Requires device token from passkey tests')
+    console.log(`✓ Got device token: ${deviceToken} (${getDeviceTokenCount()} remaining)`)
+
+    // Navigate and create fresh session
+    await page.goto(`${baseUrl}/auth/`)
+    const regResult = await registerPasskey(page, baseUrl, {
+      resetToken: deviceToken,
+      displayName: 'Max Age Test Device',
+    })
+
+    // Wait for session to be older than 1s
+    await page.waitForTimeout(2000)
+
+    const cookieName = getSessionCookieName()
+
+    // Make API call with max_age=1s (session is now > 1s old)
+    const response = await page.request.get(`${baseUrl}/auth/api/forward?max_age=1s`, {
+      headers: {
+        'Accept': 'application/json',
+        'Cookie': `${cookieName}=${regResult.session_token}`,
+      },
+    })
+
+    expect(response.status()).toBe(401)
+
+    const data = await response.json()
+    expect(data.auth).toBeDefined()
+    expect(data.auth.mode).toBe('reauth')
+
+    console.log(`✓ 401 response auth.mode: ${data.auth.mode}`)
+
+    // Save session for cleanup
+    saveSessionToken(regResult.session_token)
+  })
+})

e2e/tests/99-logout.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from './fixtures/virtual-authenticator'
+import {
+  logout,
+  getSessionCookieName,
+  getSavedSessionToken,
+} from './fixtures/passkey-helpers'
+
+/**
+ * Logout test - runs last to clean up the session.
+ * The "99-" prefix ensures this runs after all other tests.
+ */
+test.describe('Logout', () => {
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+
+  test('should logout successfully', async ({ page }) => {
+    const sessionToken = getSavedSessionToken()
+    test.skip(!sessionToken, 'Requires saved session token')
+
+    await logout(page, baseUrl, sessionToken!)
+
+    // Session should no longer be valid
+    const cookieName = getSessionCookieName()
+    const response = await page.request.post(`${baseUrl}/auth/api/validate`, {
+      headers: {
+        'Cookie': `${cookieName}=${sessionToken}`,
+      },
+      failOnStatusCode: false,
+    })
+
+    expect(response.status()).toBe(401)
+    console.log(`✓ Logout successful, session invalidated`)
+  })
+})

e2e/tests/fixtures/coverage.ts

@@ -0,0 +1,147 @@
+import { test as base, type Page, type CDPSession } from '@playwright/test'
+import { existsSync, mkdirSync, writeFileSync, readFileSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const coverageDir = join(__dirname, '..', '..', 'coverage-frontend')
+
+// Check if frontend coverage is enabled
+const COLLECT_COVERAGE = process.env.COVERAGE === '1' || process.env.COVERAGE === 'true'
+
+interface CoverageEntry {
+  url: string
+  scriptId: string
+  source?: string
+  functions: Array<{
+    functionName: string
+    ranges: Array<{
+      startOffset: number
+      endOffset: number
+      count: number
+    }>
+    isBlockCoverage: boolean
+  }>
+}
+
+/**
+ * Collect V8 JavaScript coverage from the page.
+ */
+async function startCoverage(page: Page): Promise<CDPSession | null> {
+  if (!COLLECT_COVERAGE) return null
+
+  try {
+    const cdp = await page.context().newCDPSession(page)
+    await cdp.send('Profiler.enable')
+    await cdp.send('Profiler.startPreciseCoverage', {
+      callCount: true,
+      detailed: true,
+    })
+    return cdp
+  } catch {
+    return null
+  }
+}
+
+async function stopCoverage(cdp: CDPSession | null, testName: string): Promise<void> {
+  if (!cdp) return
+
+  try {
+    const { result } = await cdp.send('Profiler.takePreciseCoverage')
+    await cdp.send('Profiler.stopPreciseCoverage')
+    await cdp.send('Profiler.disable')
+
+    // Filter to only include our app's JavaScript files
+    const appCoverage = result.filter((entry: CoverageEntry) =>
+      entry.url.includes('/auth/') &&
+      entry.url.endsWith('.js') &&
+      !entry.url.includes('node_modules')
+    )
+
+    if (appCoverage.length > 0) {
+      // Ensure coverage directory exists
+      if (!existsSync(coverageDir)) {
+        mkdirSync(coverageDir, { recursive: true })
+      }
+
+      // Save coverage data for this test
+      const safeName = testName.replace(/[^a-z0-9]/gi, '_').substring(0, 50)
+      const coverageFile = join(coverageDir, `coverage-${safeName}-${Date.now()}.json`)
+      writeFileSync(coverageFile, JSON.stringify(appCoverage, null, 2))
+    }
+  } catch (err) {
+    // Silently ignore coverage collection errors
+  }
+}
+
+/**
+ * Merge all coverage files into a single summary.
+ */
+export async function mergeCoverage(): Promise<void> {
+  if (!COLLECT_COVERAGE || !existsSync(coverageDir)) return
+
+  const files = require('fs').readdirSync(coverageDir).filter((f: string) => f.startsWith('coverage-') && f.endsWith('.json'))
+  if (files.length === 0) return
+
+  const merged: Map<string, CoverageEntry> = new Map()
+
+  for (const file of files) {
+    const data: CoverageEntry[] = JSON.parse(readFileSync(join(coverageDir, file), 'utf-8'))
+    for (const entry of data) {
+      const existing = merged.get(entry.url)
+      if (!existing) {
+        merged.set(entry.url, entry)
+      } else {
+        // Merge function coverage counts
+        for (const func of entry.functions) {
+          const existingFunc = existing.functions.find(f => f.functionName === func.functionName)
+          if (existingFunc) {
+            for (let i = 0; i < func.ranges.length; i++) {
+              if (existingFunc.ranges[i]) {
+                existingFunc.ranges[i].count += func.ranges[i].count
+              }
+            }
+          } else {
+            existing.functions.push(func)
+          }
+        }
+      }
+    }
+  }
+
+  // Write merged coverage
+  writeFileSync(
+    join(coverageDir, 'coverage-merged.json'),
+    JSON.stringify(Array.from(merged.values()), null, 2)
+  )
+
+  // Generate simple coverage summary
+  let totalFunctions = 0
+  let coveredFunctions = 0
+
+  for (const entry of merged.values()) {
+    for (const func of entry.functions) {
+      totalFunctions++
+      const hasCoverage = func.ranges.some(r => r.count > 0)
+      if (hasCoverage) coveredFunctions++
+    }
+  }
+
+  const percentage = totalFunctions > 0 ? Math.round((coveredFunctions / totalFunctions) * 100) : 0
+  console.log(`\n  📊 Frontend JS Coverage: ${coveredFunctions}/${totalFunctions} functions (${percentage}%)`)
+  console.log(`  ✅ Frontend coverage data: ${coverageDir}/coverage-merged.json\n`)
+}
+
+/**
+ * Extended test with coverage collection.
+ * This wraps each test to collect V8 coverage data.
+ */
+export const testWithCoverage = base.extend<{
+  coverageSession: CDPSession | null
+}>({
+  coverageSession: async ({ page }, use, testInfo) => {
+    const cdp = await startCoverage(page)
+    await use(cdp)
+    await stopCoverage(cdp, testInfo.title)
+  },
+})

e2e/tests/fixtures/passkey-helpers.ts

@@ -0,0 +1,453 @@
+import { type Page } from '@playwright/test'
+import { existsSync, readFileSync, writeFileSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const stateFile = join(__dirname, '..', '..', 'test-data', 'test-state.json')
+
+/**
+ * WebSocket helpers for passkey registration and authentication.
+ * These functions mirror the frontend's passkey.js but work in a Playwright context.
+ */
+
+export interface RegistrationResult {
+  user_uuid: string
+  credential_uuid: string
+  session_token: string
+  message: string
+}
+
+export interface AuthenticationResult {
+  user_uuid: string
+  session_token: string
+}
+
+/**
+ * Get the bootstrap reset token from the test state file.
+ */
+export function getBootstrapResetToken(): string | undefined {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      return state.resetToken
+    } catch {
+      return undefined
+    }
+  }
+  return undefined
+}
+
+/**
+ * Get the session cookie name from the test state file.
+ */
+export function getSessionCookieName(): string {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      return state.sessionCookie || '__Host-auth'
+    } catch {
+      return '__Host-auth'
+    }
+  }
+  return '__Host-auth'
+}
+
+/**
+ * Save a session token to the test state file for sharing across test groups.
+ */
+export function saveSessionToken(sessionToken: string): void {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      state.savedSessionToken = sessionToken
+      writeFileSync(stateFile, JSON.stringify(state, null, 2))
+    } catch {
+      // Ignore errors
+    }
+  }
+}
+
+/**
+ * Clear the saved session token from the test state file.
+ * Call this after logout to prevent accidental reuse of invalidated sessions.
+ */
+export function clearSavedSessionToken(): void {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      delete state.savedSessionToken
+      writeFileSync(stateFile, JSON.stringify(state, null, 2))
+    } catch {
+      // Ignore errors
+    }
+  }
+}
+
+/**
+ * Get a saved session token from the test state file.
+ */
+export function getSavedSessionToken(): string | undefined {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      return state.savedSessionToken
+    } catch {
+      return undefined
+    }
+  }
+  return undefined
+}
+
+/**
+ * Save device tokens to the test state file for use by other tests.
+ * These tokens allow tests to register their own passkeys.
+ */
+export function saveDeviceTokens(tokens: string[]): void {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      state.deviceTokens = tokens
+      writeFileSync(stateFile, JSON.stringify(state, null, 2))
+    } catch {
+      // Ignore errors
+    }
+  }
+}
+
+/**
+ * Get and consume a device token from the pool.
+ * Returns undefined if no tokens are available.
+ */
+export function popDeviceToken(): string | undefined {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      if (state.deviceTokens && state.deviceTokens.length > 0) {
+        const token = state.deviceTokens.pop()
+        writeFileSync(stateFile, JSON.stringify(state, null, 2))
+        return token
+      }
+    } catch {
+      return undefined
+    }
+  }
+  return undefined
+}
+
+/**
+ * Get the count of remaining device tokens.
+ */
+export function getDeviceTokenCount(): number {
+  if (existsSync(stateFile)) {
+    try {
+      const state = JSON.parse(readFileSync(stateFile, 'utf-8'))
+      return state.deviceTokens?.length || 0
+    } catch {
+      return 0
+    }
+  }
+  return 0
+}
+
+/**
+ * Perform passkey registration via WebSocket.
+ * This runs in the browser context using the virtual authenticator.
+ */
+export async function registerPasskey(
+  page: Page,
+  baseUrl: string,
+  options: { resetToken?: string; displayName?: string } = {}
+): Promise<RegistrationResult> {
+  return await page.evaluate(async ({ baseUrl, resetToken, displayName }) => {
+    // Build WebSocket URL with query parameters
+    let wsUrl = `${baseUrl.replace('http', 'ws')}/auth/ws/register`
+    const params: string[] = []
+    if (resetToken) params.push(`reset=${encodeURIComponent(resetToken)}`)
+    if (displayName) params.push(`name=${encodeURIComponent(displayName)}`)
+    if (params.length) wsUrl += `?${params.join('&')}`
+
+    return new Promise<any>((resolve, reject) => {
+      const ws = new WebSocket(wsUrl)
+
+      ws.onopen = () => {
+        console.log('WebSocket connected for registration')
+      }
+
+      ws.onmessage = async (event) => {
+        const data = JSON.parse(event.data)
+
+        // Check for error response
+        if (data.detail) {
+          ws.close()
+          reject(new Error(data.detail))
+          return
+        }
+
+        // Check if this is the final success response
+        if (data.session_token) {
+          ws.close()
+          resolve(data)
+          return
+        }
+
+        // This should be the registration options from server (wrapped in optionsJSON)
+        // Use the native WebAuthn API with the virtual authenticator
+        try {
+          // Extract options from the optionsJSON wrapper
+          const opts = data.optionsJSON
+
+          // Convert base64url challenge to ArrayBuffer
+          const challenge = Uint8Array.from(atob(opts.challenge.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0))
+
+          // Build the credential creation options
+          const publicKeyCredentialCreationOptions: CredentialCreationOptions = {
+            publicKey: {
+              challenge: challenge,
+              rp: {
+                name: opts.rp.name,
+                id: opts.rp.id,
+              },
+              user: {
+                id: Uint8Array.from(atob(opts.user.id.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0)),
+                name: opts.user.name,
+                displayName: opts.user.displayName,
+              },
+              pubKeyCredParams: opts.pubKeyCredParams,
+              authenticatorSelection: opts.authenticatorSelection,
+              timeout: opts.timeout,
+              attestation: opts.attestation,
+              excludeCredentials: opts.excludeCredentials?.map((cred: any) => ({
+                ...cred,
+                id: Uint8Array.from(atob(cred.id.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0)),
+              })) || [],
+            }
+          }
+
+          // Create the credential using native WebAuthn API (virtual authenticator handles it)
+          const credential = await navigator.credentials.create(publicKeyCredentialCreationOptions) as PublicKeyCredential
+
+          if (!credential) {
+            throw new Error('Failed to create credential')
+          }
+
+          const response = credential.response as AuthenticatorAttestationResponse
+
+          // Convert response to JSON format expected by server
+          const registrationResponse = {
+            id: credential.id,
+            rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+            response: {
+              clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(response.clientDataJSON))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              attestationObject: btoa(String.fromCharCode(...new Uint8Array(response.attestationObject))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              transports: response.getTransports?.() || [],
+            },
+            type: credential.type,
+            clientExtensionResults: credential.getClientExtensionResults(),
+            authenticatorAttachment: (credential as any).authenticatorAttachment,
+          }
+
+          ws.send(JSON.stringify(registrationResponse))
+        } catch (error: any) {
+          ws.close()
+          reject(new Error(error.message || 'Registration failed'))
+        }
+      }
+
+      ws.onerror = () => {
+        reject(new Error('WebSocket error during registration'))
+      }
+
+      ws.onclose = (event) => {
+        if (!event.wasClean && event.code !== 1000) {
+          reject(new Error(`WebSocket closed unexpectedly: ${event.code}`))
+        }
+      }
+    })
+  }, { baseUrl, resetToken: options.resetToken, displayName: options.displayName })
+}
+
+/**
+ * Perform passkey authentication via WebSocket.
+ * This runs in the browser context using the virtual authenticator.
+ */
+export async function authenticatePasskey(
+  page: Page,
+  baseUrl: string
+): Promise<AuthenticationResult> {
+  return await page.evaluate(async ({ baseUrl }) => {
+    const wsUrl = `${baseUrl.replace('http', 'ws')}/auth/ws/authenticate`
+
+    return new Promise<any>((resolve, reject) => {
+      const ws = new WebSocket(wsUrl)
+
+      ws.onopen = () => {
+        console.log('WebSocket connected for authentication')
+      }
+
+      ws.onmessage = async (event) => {
+        const data = JSON.parse(event.data)
+
+        // Check for error response
+        if (data.detail) {
+          ws.close()
+          reject(new Error(data.detail))
+          return
+        }
+
+        // Check if this is the final success response
+        if (data.session_token) {
+          ws.close()
+          resolve(data)
+          return
+        }
+
+        // This should be the authentication options from server (wrapped in optionsJSON)
+        try {
+          // Extract options from the optionsJSON wrapper
+          const opts = data.optionsJSON
+
+          // Convert base64url challenge to ArrayBuffer
+          const challenge = Uint8Array.from(atob(opts.challenge.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0))
+
+          // Build the credential request options
+          const publicKeyCredentialRequestOptions: CredentialRequestOptions = {
+            publicKey: {
+              challenge: challenge,
+              rpId: opts.rpId,
+              timeout: opts.timeout,
+              userVerification: opts.userVerification,
+              allowCredentials: opts.allowCredentials?.map((cred: any) => ({
+                type: cred.type,
+                id: Uint8Array.from(atob(cred.id.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0)),
+                transports: cred.transports,
+              })) || [],
+            }
+          }
+
+          // Get the credential using native WebAuthn API (virtual authenticator handles it)
+          const credential = await navigator.credentials.get(publicKeyCredentialRequestOptions) as PublicKeyCredential
+
+          if (!credential) {
+            throw new Error('Failed to get credential')
+          }
+
+          const response = credential.response as AuthenticatorAssertionResponse
+
+          // Convert response to JSON format expected by server
+          const authenticationResponse = {
+            id: credential.id,
+            rawId: btoa(String.fromCharCode(...new Uint8Array(credential.rawId))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+            response: {
+              clientDataJSON: btoa(String.fromCharCode(...new Uint8Array(response.clientDataJSON))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              authenticatorData: btoa(String.fromCharCode(...new Uint8Array(response.authenticatorData))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              signature: btoa(String.fromCharCode(...new Uint8Array(response.signature))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''),
+              userHandle: response.userHandle ? btoa(String.fromCharCode(...new Uint8Array(response.userHandle))).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '') : null,
+            },
+            type: credential.type,
+            clientExtensionResults: credential.getClientExtensionResults(),
+            authenticatorAttachment: (credential as any).authenticatorAttachment,
+          }
+
+          ws.send(JSON.stringify(authenticationResponse))
+        } catch (error: any) {
+          ws.close()
+          reject(new Error(error.message || 'Authentication failed'))
+        }
+      }
+
+      ws.onerror = () => {
+        reject(new Error('WebSocket error during authentication'))
+      }
+
+      ws.onclose = (event) => {
+        if (!event.wasClean && event.code !== 1000) {
+          reject(new Error(`WebSocket closed unexpectedly: ${event.code}`))
+        }
+      }
+    })
+  }, { baseUrl })
+}
+
+/**
+ * Validate a session token via the API.
+ */
+export async function validateSession(
+  page: Page,
+  baseUrl: string,
+  sessionToken: string
+): Promise<{ valid: boolean; user_uuid: string; renewed: boolean }> {
+  const cookieName = getSessionCookieName()
+  const response = await page.request.post(`${baseUrl}/auth/api/validate`, {
+    headers: {
+      'Cookie': `${cookieName}=${sessionToken}`,
+    },
+  })
+  return await response.json()
+}
+
+/**
+ * Get user info via the API.
+ */
+export async function getUserInfo(
+  page: Page,
+  baseUrl: string,
+  sessionToken: string
+): Promise<any> {
+  const cookieName = getSessionCookieName()
+  const response = await page.request.post(`${baseUrl}/auth/api/user-info`, {
+    headers: {
+      'Cookie': `${cookieName}=${sessionToken}`,
+    },
+  })
+  return await response.json()
+}
+
+/**
+ * Logout via the API.
+ * If the session being logged out matches the saved session token, clears it.
+ */
+export async function logout(
+  page: Page,
+  baseUrl: string,
+  sessionToken: string
+): Promise<void> {
+  const cookieName = getSessionCookieName()
+  await page.request.post(`${baseUrl}/auth/api/logout`, {
+    headers: {
+      'Cookie': `${cookieName}=${sessionToken}`,
+    },
+  })
+  // Clear saved session token if it matches the one being logged out
+  const savedToken = getSavedSessionToken()
+  if (savedToken === sessionToken) {
+    clearSavedSessionToken()
+  }
+}
+
+/**
+ * Create a device link for adding a new credential to an existing user.
+ */
+export async function createDeviceLink(
+  page: Page,
+  baseUrl: string,
+  sessionToken: string
+): Promise<{ url: string; token: string }> {
+  const cookieName = getSessionCookieName()
+  const response = await page.request.post(`${baseUrl}/auth/api/user/create-link`, {
+    headers: {
+      'Cookie': `${cookieName}=${sessionToken}`,
+    },
+  })
+  if (!response.ok()) {
+    throw new Error(`Failed to create device link: ${response.status()} - ${await response.text()}`)
+  }
+  const data = await response.json()
+  if (!data.url) {
+    throw new Error(`No URL in response: ${JSON.stringify(data)}`)
+  }
+  // Extract token from URL (last path segment)
+  const url = new URL(data.url)
+  const token = url.pathname.split('/').pop() || ''
+  return { url: data.url, token }
+}

e2e/tests/fixtures/virtual-authenticator.ts

@@ -0,0 +1,144 @@
+import { test as base, expect, type CDPSession, type Page } from '@playwright/test'
+import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const coverageDir = join(__dirname, '..', '..', 'coverage-frontend')
+
+// Check if frontend coverage is enabled
+const COLLECT_COVERAGE = process.env.COVERAGE === '1' || process.env.COVERAGE === 'true'
+
+/**
+ * Virtual Authenticator configuration for WebAuthn testing.
+ * Uses Chrome DevTools Protocol to create a software authenticator.
+ */
+export interface VirtualAuthenticatorOptions {
+  protocol?: 'ctap1/u2f' | 'ctap2'
+  transport?: 'usb' | 'nfc' | 'ble' | 'internal'
+  hasResidentKey?: boolean
+  hasUserVerification?: boolean
+  isUserVerified?: boolean
+  automaticPresenceSimulation?: boolean
+}
+
+export interface VirtualAuthenticator {
+  authenticatorId: string
+  cdpSession: CDPSession
+}
+
+/**
+ * Create a virtual authenticator using Chrome DevTools Protocol.
+ * This allows fully automated passkey registration and authentication.
+ */
+export async function createVirtualAuthenticator(
+  page: Page,
+  options: VirtualAuthenticatorOptions = {}
+): Promise<VirtualAuthenticator> {
+  const cdpSession = await page.context().newCDPSession(page)
+
+  // Enable WebAuthn in CDP
+  await cdpSession.send('WebAuthn.enable', {
+    enableUI: false, // Suppress any UI prompts
+  })
+
+  // Create the virtual authenticator with resident key support
+  const { authenticatorId } = await cdpSession.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: options.protocol ?? 'ctap2',
+      transport: options.transport ?? 'internal',
+      hasResidentKey: options.hasResidentKey ?? true,
+      hasUserVerification: options.hasUserVerification ?? true,
+      isUserVerified: options.isUserVerified ?? true,
+      automaticPresenceSimulation: options.automaticPresenceSimulation ?? true,
+    },
+  })
+
+  return { authenticatorId, cdpSession }
+}
+
+/**
+ * Remove a virtual authenticator.
+ */
+export async function removeVirtualAuthenticator(
+  authenticator: VirtualAuthenticator
+): Promise<void> {
+  await authenticator.cdpSession.send('WebAuthn.removeVirtualAuthenticator', {
+    authenticatorId: authenticator.authenticatorId,
+  })
+  await authenticator.cdpSession.send('WebAuthn.disable')
+}
+
+/**
+ * Get all credentials stored in a virtual authenticator.
+ */
+export async function getCredentials(
+  authenticator: VirtualAuthenticator
+): Promise<any[]> {
+  const result = await authenticator.cdpSession.send('WebAuthn.getCredentials', {
+    authenticatorId: authenticator.authenticatorId,
+  })
+  return result.credentials
+}
+
+/**
+ * Extended test fixture with virtual authenticator support and optional coverage.
+ */
+export const test = base.extend<{
+  virtualAuthenticator: VirtualAuthenticator
+}>({
+  virtualAuthenticator: async ({ page }, use, testInfo) => {
+    // Start coverage collection if enabled
+    let coverageCdp: CDPSession | null = null
+    if (COLLECT_COVERAGE) {
+      try {
+        coverageCdp = await page.context().newCDPSession(page)
+        await coverageCdp.send('Profiler.enable')
+        await coverageCdp.send('Profiler.startPreciseCoverage', {
+          callCount: true,
+          detailed: true,
+        })
+      } catch {
+        coverageCdp = null
+      }
+    }
+
+    // Create virtual authenticator before test
+    const authenticator = await createVirtualAuthenticator(page)
+
+    // Run the test
+    await use(authenticator)
+
+    // Cleanup after test
+    await removeVirtualAuthenticator(authenticator)
+
+    // Stop and save coverage
+    if (coverageCdp) {
+      try {
+        const { result } = await coverageCdp.send('Profiler.takePreciseCoverage')
+        await coverageCdp.send('Profiler.stopPreciseCoverage')
+        await coverageCdp.send('Profiler.disable')
+
+        // Filter to only include our app's JavaScript files
+        const appCoverage = result.filter((entry: any) =>
+          entry.url.includes('/auth/') &&
+          entry.url.endsWith('.js') &&
+          !entry.url.includes('node_modules')
+        )
+
+        if (appCoverage.length > 0) {
+          if (!existsSync(coverageDir)) {
+            mkdirSync(coverageDir, { recursive: true })
+          }
+          const safeName = testInfo.title.replace(/[^a-z0-9]/gi, '_').substring(0, 50)
+          const coverageFile = join(coverageDir, `coverage-${safeName}-${Date.now()}.json`)
+          writeFileSync(coverageFile, JSON.stringify(appCoverage, null, 2))
+        }
+      } catch {
+        // Silently ignore coverage collection errors
+      }
+    }
+  },
+})
+
+export { expect }

e2e/tests/global-setup.ts

@@ -0,0 +1,132 @@
+import { spawn } from 'child_process'
+import { join, dirname } from 'path'
+import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const testDataDir = join(__dirname, '..', 'test-data')
+const stateFile = join(testDataDir, 'test-state.json')
+const projectRoot = join(__dirname, '..', '..')
+
+// Check if coverage is enabled
+const COLLECT_COVERAGE = process.env.COVERAGE === '1' || process.env.COVERAGE === 'true'
+
+interface TestState {
+  resetToken?: string
+  serverPid?: number
+  sessionCookie?: string
+}
+
+/**
+ * Global setup for E2E tests.
+ *
+ * Uses in-memory SQLite database for fast, isolated tests.
+ * Captures the bootstrap reset token for initial user registration.
+ */
+export default async function globalSetup() {
+  console.log('\n🔧 Setting up E2E test environment...\n')
+
+  // Create test data directory for state file
+  if (!existsSync(testDataDir)) {
+    mkdirSync(testDataDir, { recursive: true })
+  }
+
+  console.log('  Starting server with in-memory database...')
+  if (COLLECT_COVERAGE) {
+    console.log('  📊 Coverage collection enabled for Python backend')
+  }
+
+  const state: TestState = {}
+
+  // Build server command - with or without coverage
+  const serverArgs = COLLECT_COVERAGE
+    ? [
+        'run', 'coverage', 'run', '--parallel-mode',
+        '-m', 'paskia.fastapi', 'serve', 'localhost:4404',
+        '--rp-id', 'localhost'
+      ]
+    : [
+        'run', 'paskia', 'serve', 'localhost:4404',
+        '--rp-id', 'localhost'
+      ]
+
+  // Start the server using Node's spawn
+  // Use in-memory SQLite for faster tests
+  const serverProcess = spawn('uv', serverArgs, {
+    cwd: projectRoot,
+    env: {
+      ...process.env,
+      PASKIA_DB: 'sqlite+aiosqlite:///:memory:',
+      COVERAGE_FILE: join(projectRoot, '.coverage'),
+    },
+    stdio: ['ignore', 'pipe', 'pipe'],
+  })
+
+  state.serverPid = serverProcess.pid
+
+  // Capture output to find reset token
+  const resetTokenPromise = new Promise<string>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      reject(new Error('Timed out waiting for server bootstrap (30s)'))
+    }, 30000)
+
+    let output = ''
+
+    const handleData = (data: Buffer) => {
+      const text = data.toString()
+      output += text
+      process.stdout.write(text) // Echo to console
+
+      // Look for the reset token URL in the output
+      // Format: https://localhost/auth/{token} or http://localhost:4404/auth/{token}
+      // where token is word.word.word.word.word (dot separated)
+      const match = output.match(/https?:\/\/localhost(?::\d+)?\/auth\/([a-z]+(?:\.[a-z]+)+)/)
+      if (match) {
+        clearTimeout(timeout)
+        // Wait a bit for server to fully start
+        setTimeout(() => resolve(match[1]), 1000)
+      }
+    }
+
+    serverProcess.stdout?.on('data', handleData)
+    serverProcess.stderr?.on('data', handleData)
+
+    serverProcess.on('error', (err) => {
+      clearTimeout(timeout)
+      reject(err)
+    })
+
+    serverProcess.on('exit', (code) => {
+      if (code !== 0 && code !== null) {
+        clearTimeout(timeout)
+        reject(new Error(`Server exited with code ${code}`))
+      }
+    })
+  })
+
+  try {
+    state.resetToken = await resetTokenPromise
+    console.log(`\n  ✅ Captured reset token: ${state.resetToken}\n`)
+  } catch (err) {
+    console.error('Failed to capture reset token:', err)
+    serverProcess.kill()
+    throw err
+  }
+
+  // Fetch session cookie name from server settings
+  try {
+    const response = await fetch('http://localhost:4404/auth/api/settings')
+    const settings = await response.json()
+    state.sessionCookie = settings.session_cookie
+    console.log(`  ✅ Session cookie name: ${state.sessionCookie}\n`)
+  } catch (err) {
+    console.error('Failed to fetch settings:', err)
+    serverProcess.kill()
+    throw err
+  }
+
+  // Save state for tests
+  writeFileSync(stateFile, JSON.stringify(state, null, 2))
+
+  console.log('  ✅ E2E test environment ready\n')
+}

e2e/tests/global-teardown.ts

@@ -0,0 +1,148 @@
+import { join, dirname } from 'path'
+import { existsSync, rmSync, readFileSync, readdirSync, writeFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { execSync } from 'child_process'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const testDataDir = join(__dirname, '..', 'test-data')
+const stateFile = join(testDataDir, 'test-state.json')
+const projectRoot = join(__dirname, '..', '..')
+const coverageDir = join(__dirname, '..', 'coverage-frontend')
+
+// Check if coverage is enabled
+const COLLECT_COVERAGE = process.env.COVERAGE === '1' || process.env.COVERAGE === 'true'
+
+interface TestState {
+  resetToken?: string
+  serverPid?: number
+}
+
+interface CoverageEntry {
+  url: string
+  functions: Array<{
+    functionName: string
+    ranges: Array<{ count: number }>
+  }>
+}
+
+/**
+ * Global teardown for E2E tests.
+ *
+ * This cleans up the test server and optionally removes the test database.
+ */
+export default async function globalTeardown() {
+  console.log('\n🧹 Cleaning up E2E test environment...\n')
+
+  // Read state file to get server PID
+  if (existsSync(stateFile)) {
+    try {
+      const state: TestState = JSON.parse(readFileSync(stateFile, 'utf-8'))
+
+      if (state.serverPid) {
+        console.log(`  Stopping server (PID: ${state.serverPid})...`)
+        try {
+          process.kill(state.serverPid, 'SIGTERM')
+          // Wait longer for graceful shutdown and coverage data flush
+          await new Promise(r => setTimeout(r, COLLECT_COVERAGE ? 2000 : 500))
+        } catch (err: any) {
+          // Process may already be dead
+          if (err.code !== 'ESRCH') {
+            console.warn(`  Warning: Could not kill server: ${err.message}`)
+          }
+        }
+      }
+    } catch (err) {
+      console.warn('  Warning: Could not read state file')
+    }
+
+    // Clean up state file
+    rmSync(stateFile, { force: true })
+  }
+
+  // Optionally clean up test database (keep it for debugging by default)
+  if (process.env.CLEANUP_TEST_DB === 'true') {
+    const dbPath = join(testDataDir, 'test.sqlite')
+    if (existsSync(dbPath)) {
+      console.log('  Removing test database...')
+      rmSync(dbPath)
+    }
+    // Remove wal/shm files too
+    for (const ext of ['-wal', '-shm']) {
+      const file = dbPath + ext
+      if (existsSync(file)) rmSync(file)
+    }
+  }
+
+  // Generate Python coverage report if coverage was collected
+  if (COLLECT_COVERAGE) {
+    console.log('  📊 Generating Python coverage report...')
+    try {
+      // Combine parallel coverage data and generate reports
+      execSync('uv run coverage combine', { cwd: projectRoot, stdio: 'inherit' })
+      execSync('uv run coverage report', { cwd: projectRoot, stdio: 'inherit' })
+      execSync('uv run coverage html', { cwd: projectRoot, stdio: 'inherit' })
+      console.log(`  ✅ Python coverage report: ${join(projectRoot, 'coverage-html', 'index.html')}\n`)
+    } catch (err: any) {
+      console.warn(`  Warning: Failed to generate coverage report: ${err.message}`)
+    }
+
+    // Merge and report frontend coverage
+    if (existsSync(coverageDir)) {
+      try {
+        const files = readdirSync(coverageDir).filter(f => f.startsWith('coverage-') && f.endsWith('.json') && f !== 'coverage-merged.json')
+
+        if (files.length > 0) {
+          const merged: Map<string, CoverageEntry> = new Map()
+
+          for (const file of files) {
+            const data: CoverageEntry[] = JSON.parse(readFileSync(join(coverageDir, file), 'utf-8'))
+            for (const entry of data) {
+              const existing = merged.get(entry.url)
+              if (!existing) {
+                merged.set(entry.url, entry)
+              } else {
+                // Merge function coverage counts
+                for (const func of entry.functions) {
+                  const existingFunc = existing.functions.find(f => f.functionName === func.functionName)
+                  if (existingFunc) {
+                    for (let i = 0; i < func.ranges.length && i < existingFunc.ranges.length; i++) {
+                      existingFunc.ranges[i].count += func.ranges[i].count
+                    }
+                  } else {
+                    existing.functions.push(func)
+                  }
+                }
+              }
+            }
+          }
+
+          // Write merged coverage
+          writeFileSync(
+            join(coverageDir, 'coverage-merged.json'),
+            JSON.stringify(Array.from(merged.values()), null, 2)
+          )
+
+          // Generate simple coverage summary
+          let totalFunctions = 0
+          let coveredFunctions = 0
+
+          for (const entry of merged.values()) {
+            for (const func of entry.functions) {
+              totalFunctions++
+              const hasCoverage = func.ranges.some(r => r.count > 0)
+              if (hasCoverage) coveredFunctions++
+            }
+          }
+
+          const percentage = totalFunctions > 0 ? Math.round((coveredFunctions / totalFunctions) * 100) : 0
+          console.log(`  📊 Frontend JS Coverage: ${coveredFunctions}/${totalFunctions} functions (${percentage}%)`)
+          console.log(`  ✅ Frontend coverage data: ${coverageDir}/coverage-merged.json\n`)
+        }
+      } catch (err: any) {
+        console.warn(`  Warning: Failed to merge frontend coverage: ${err.message}`)
+      }
+    }
+  }
+
+  console.log('  ✅ Cleanup complete\n')
+}

e2e/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "types": ["bun-types"]
+  },
+  "include": ["tests/**/*.ts", "playwright.config.ts"],
+  "exclude": ["node_modules"]
+}

examples/index.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Paskia - Dev Mode</title>
+    <style>
+        :root {
+            color-scheme: light dark;  /* Automatic themes by browser */
+        }
+        /* Login/reauth/forbidden dialog will appear in this iframe */
+        #auth-iframe {
+            /* Full viewport overlay */
+            border: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 9999;
+            /* Optional transparent background with optional blur backdrop */
+            color-scheme: auto;
+            background: transparent;
+            backdrop-filter: blur(.1rem) brightness(0.7);
+            -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
+        }
+        /* Prevent background scroll when auth-iframe is shown */
+        body:has(#auth-iframe) {
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🔐 Paskia - Development Server</h1>
+            <p class="subtitle">The following features are available after you have registered your Admin account and logged in. You should also use the Admin Site to create non-privileged users to see the Forbidden dialog caused by missing permissions.</p>
+        </header>
+
+        <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>
+            </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="apiCall('/auth/api/user-info', 'POST')">📋 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>
+                <button onclick="logout()">🚪 Logout</button>
+            </div>
+
+            <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>
+            </div>
+
+            <pre id="output">Click a button to test...</pre>
+        </div>
+    </div>
+
+    <script>
+        const output = document.getElementById('output');
+        let pendingCall = null;  // Stores the API call to retry after auth
+
+        // The auth iframe posts messages when authentication completes or is cancelled.
+        // Message types: 'auth-success' (proceed), 'auth-back' (user cancelled)
+        // Errors during auth stay in the dialog allowing retry, no message is sent.
+        window.addEventListener('message', (event) => {
+            const { type, message } = event.data || {};
+
+            if (type === 'auth-success') {
+                log('✓ Authentication successful, retrying...');
+                hideAuthIframe();
+                // Retry the original API call that triggered authentication
+                if (pendingCall) {
+                    const { url, method } = pendingCall;
+                    pendingCall = null;
+                    apiCall(url, method);
+                }
+            } else if (type === 'auth-back') {
+                log(message || 'Authentication cancelled');
+                hideAuthIframe();
+                pendingCall = null;
+            }
+        });
+
+        // Make an API call, handling 401/403 by showing the auth iframe.
+        // The server returns JSON with auth.iframe URL when authentication is needed.
+        async function apiCall(url, method = 'GET') {
+            log(`${method} ${url}...`);
+
+            const response = await fetch(url, { method, credentials: 'include' });
+
+            // Server returns 401 (login/reauth) or 403 (missing permissions)
+            // with a JSON body containing the iframe URL for authentication
+            if (response.status === 401 || response.status === 403) {
+                const data = await response.json();
+                if (data.auth?.iframe) {
+                    const mode = data.auth.mode;  // 'login' or 'reauth'
+                    log(`${mode === 'reauth' ? 'Re-authentication' : 'Authentication'} required...`);
+                    pendingCall = { url, method };
+                    showAuthIframe(data.auth.iframe);
+                    return;
+                }
+                log(`Error: ${response.status} - ${data.detail}`);
+                return;
+            }
+
+            // Forward endpoint returns 204 on success (Caddy then adds Remote-* headers)
+            if (response.status === 204) {
+                log('✓ Success (204 No Content)\nHeaders:\n' +
+                    [...response.headers].filter(([k]) => k.startsWith('remote-'))
+                        .map(([k, v]) => `  ${k}: ${v}`).join('\n'));
+                return;
+            }
+
+            if (!response.ok) {
+                log(`Error: ${response.status} ${response.statusText}`);
+                return;
+            }
+
+            const data = await response.json();
+            log('✓ Response:\n' + JSON.stringify(data, null, 2));
+        }
+
+        async function logout() {
+            await fetch('/auth/api/logout', { method: 'POST', credentials: 'include' });
+            log('Logged out');
+        }
+
+        // Create fullscreen iframe for authentication.
+        // The 'allow' attribute enables WebAuthn (passkey) API inside the iframe.
+        function showAuthIframe(url) {
+            hideAuthIframe();
+            const iframe = document.createElement('iframe');
+            iframe.id = 'auth-iframe';
+            iframe.src = url;
+            document.body.appendChild(iframe);
+            log("Authentication dialog open...")
+        }
+
+        function hideAuthIframe() {
+            document.getElementById('auth-iframe')?.remove();
+        }
+
+        function log(msg) {
+            output.textContent = msg;
+        }
+
+        // Browser mode: open the forward endpoint directly in a new window.
+        // When Accept: text/html, the server redirects to the login page if needed,
+        // then back to the original URL after authentication.
+        function browserNav(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');
+        }
+    </script>
+</body>
+</html>

frontend/auth/App.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="app-shell">
+    <StatusMessage />
+    <main class="app-main">
+      <HostProfileView v-if="authenticated && isHostMode" :initializing="loading" />
+      <ProfileView v-else-if="authenticated" />
+      <LoadingView v-else-if="loading" :message="loadingMessage" />
+      <AuthRequiredMessage v-else-if="showBackMessage" @reload="reloadPage" />
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { apiJson, getAuthIframeUrl } from '@/utils/api'
+import StatusMessage from '@/components/StatusMessage.vue'
+import ProfileView from '@/components/ProfileView.vue'
+import HostProfileView from '@/components/HostProfileView.vue'
+import LoadingView from '@/components/LoadingView.vue'
+import AuthRequiredMessage from '@/components/AccessDenied.vue'
+
+const store = useAuthStore()
+const loading = ref(true)
+const loadingMessage = ref('Loading...')
+const authenticated = ref(false)
+const showBackMessage = ref(false)
+
+/**
+ * Normalize a host string for comparison (lowercase, strip default ports).
+ */
+function normalizeHost(raw) {
+  if (!raw) return null
+  const trimmed = raw.trim().toLowerCase()
+  if (!trimmed) return null
+  // Remove default ports
+  return trimmed.replace(/:80$/, '').replace(/:443$/, '')
+}
+
+/**
+ * Host mode is active when an auth_host is configured AND the current host differs from it.
+ * In host mode, we show a limited profile view with logout and link to full profile.
+ */
+const isHostMode = computed(() => {
+  const authHost = store.settings?.auth_host
+  if (!authHost) return false
+  const currentHost = normalizeHost(window.location.host)
+  const configuredHost = normalizeHost(authHost)
+  return currentHost !== configuredHost
+})
+let validationTimer = null
+let authIframe = null
+
+async function loadUserInfo() {
+  try {
+    store.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
+    authenticated.value = true
+    loading.value = false
+    startSessionValidation()
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
+async function showAuthIframe() {
+  // Remove existing iframe if any
+  hideAuthIframe()
+
+  // Create new iframe for authentication using src URL
+  const url = await getAuthIframeUrl('login')
+  authIframe = document.createElement('iframe')
+  authIframe.id = 'auth-iframe'
+  authIframe.title = 'Authentication'
+  authIframe.allow = 'publickey-credentials-get; publickey-credentials-create'
+  authIframe.src = url
+  document.body.appendChild(authIframe)
+  loadingMessage.value = 'Authentication required...'
+}
+
+function hideAuthIframe() {
+  if (authIframe) {
+    authIframe.remove()
+    authIframe = null
+  }
+}
+
+function reloadPage() {
+  window.location.reload()
+}
+
+function handleAuthMessage(event) {
+  const data = event.data
+  if (!data?.type) return
+
+  switch (data.type) {
+    case 'auth-success':
+      // Authentication successful - reload user info
+      hideAuthIframe()
+      loading.value = true
+      loadingMessage.value = 'Loading user profile...'
+      loadUserInfo()
+      break
+
+    case 'auth-error':
+      // Authentication failed - keep iframe open so user can retry
+      if (data.cancelled) {
+        console.log('Authentication cancelled by user')
+      } else {
+        store.showMessage(data.message || 'Authentication failed', 'error', 5000)
+      }
+      break
+
+    case 'auth-cancelled':
+      // Legacy support - treat as auth-error with cancelled flag
+      console.log('Authentication cancelled')
+      break
+
+    case 'auth-back':
+      // User clicked Back - show message with reload option
+      hideAuthIframe()
+      loading.value = false
+      showBackMessage.value = true
+      store.showMessage('Authentication cancelled', 'info', 3000)
+      break
+
+    case 'auth-close-request':
+      // Legacy support - treat as back
+      hideAuthIframe()
+      break
+  }
+}
+
+async function validateSession() {
+  try {
+    await apiJson('/auth/api/validate', {
+      method: 'POST',
+      credentials: 'include'
+    })
+    // If successful, session was renewed automatically
+  } catch (error) {
+    if (error.status === 401) {
+      // Session expired - need to re-authenticate
+      console.log('Session expired, requiring re-authentication')
+      authenticated.value = false
+      loading.value = true
+      stopSessionValidation()
+      showAuthIframe()
+    } else {
+      console.error('Session validation error:', error)
+      // Don't treat network errors as session expiry
+    }
+  }
+}
+
+function startSessionValidation() {
+  // Validate session every 2 minutes
+  stopSessionValidation()
+  validationTimer = setInterval(validateSession, 2 * 60 * 1000)
+}
+
+function stopSessionValidation() {
+  if (validationTimer) {
+    clearInterval(validationTimer)
+    validationTimer = null
+  }
+}
+
+onMounted(async () => {
+  // Listen for postMessage from auth iframe
+  window.addEventListener('message', handleAuthMessage)
+
+  // Load settings
+  await store.loadSettings()
+
+  // Set appropriate page title based on mode
+  const rpName = store.settings?.rp_name
+  if (rpName) {
+    // In host mode, show "account summary" style title
+    // Settings are loaded but isHostMode depends on them, so check here
+    const authHost = store.settings?.auth_host
+    const inHostMode = authHost && normalizeHost(window.location.host) !== normalizeHost(authHost)
+    document.title = inHostMode ? `${rpName} · Account summary` : rpName
+  }
+
+  // Try to load user info
+  const success = await loadUserInfo()
+
+  if (!success) {
+    // Need authentication - show login iframe
+    showAuthIframe()
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('message', handleAuthMessage)
+  stopSessionValidation()
+  hideAuthIframe()
+})
+</script>
+
+<style scoped>
+</style>

frontend/auth/admin/AdminApp.vue

@@ -1,18 +1,25 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import CredentialList from '@/components/CredentialList.vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
 import StatusMessage from '@/components/StatusMessage.vue'
-import AdminOverview from './AdminOverview.vue'
-import AdminOrgDetail from './AdminOrgDetail.vue'
-import AdminUserDetail from './AdminUserDetail.vue'
-import AdminDialogs from './AdminDialogs.vue'
+import LoadingView from '@/components/LoadingView.vue'
+import AuthRequiredMessage from '@/components/AccessDenied.vue'
+import AdminOverview from '@/admin/AdminOverview.vue'
+import AdminOrgDetail from '@/admin/AdminOrgDetail.vue'
+import AdminUserDetail from '@/admin/AdminUserDetail.vue'
+import AdminDialogs from '@/admin/AdminDialogs.vue'
 import { useAuthStore } from '@/stores/auth'
+import { getSettings, adminUiPath, makeUiHref } from '@/utils/settings'
+import { apiJson } from '@/utils/api'
 
 const info = ref(null)
 const loading = ref(true)
+const loadingMessage = ref('Loading...')
+const authenticated = ref(false)
+const showBackMessage = ref(false)
 const error = ref(null)
 const orgs = ref([])
 const permissions = ref([])
@@ -42,11 +49,17 @@ function handleGlobalClick(e) {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
   document.addEventListener('click', handleGlobalClick)
+  window.addEventListener('hashchange', parseHash)
+  const settings = await getSettings()
+  if (settings?.rp_name) document.title = settings.rp_name + ' Admin'
+  await load()
 })
-onBeforeUnmount(() => {
+
+onUnmounted(() => {
   document.removeEventListener('click', handleGlobalClick)
+  window.removeEventListener('hashchange', parseHash)
 })
 
 // Build a summary: for each permission id -> { orgs: Set(org_display_name), userCount }
@@ -55,7 +68,7 @@ const permissionSummary = computed(() => {
   for (const o of orgs.value) {
     const orgBase = { uuid: o.uuid, display_name: o.display_name }
     const orgPerms = new Set(o.permissions || [])
-    
+
     // Org-level permissions (direct) - only count if org can grant them
     for (const pid of o.permissions || []) {
       if (!summary[pid]) summary[pid] = { orgs: [], orgSet: new Set(), userCount: 0 }
@@ -64,13 +77,13 @@ const permissionSummary = computed(() => {
         summary[pid].orgSet.add(o.uuid)
       }
     }
-    
+
     // Role-based permissions (inheritance) - only count if org can grant them
     for (const r of o.roles) {
       for (const pid of r.permissions) {
         // Only count if the org can grant this permission
         if (!orgPerms.has(pid)) continue
-        
+
         if (!summary[pid]) summary[pid] = { orgs: [], orgSet: new Set(), userCount: 0 }
         if (!summary[pid].orgSet.has(o.uuid)) {
           summary[pid].orgs.push(orgBase)
@@ -98,9 +111,7 @@ async function attachPermissionToOrg(pid, orgUuid) {
   if (!orgUuid) return
   try {
     const params = new URLSearchParams({ permission_id: pid })
-    const res = await fetch(`/auth/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'POST' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'POST' })
     await loadOrgs()
   } catch (e) {
   authStore.showMessage(e.message || 'Failed to add permission to org')
@@ -111,9 +122,7 @@ async function detachPermissionFromOrg(pid, orgUuid) {
   openDialog('confirm', { message: 'Remove permission from this org?', action: async () => {
     try {
       const params = new URLSearchParams({ permission_id: pid })
-      const res = await fetch(`/auth/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'DELETE' })
-      const data = await res.json()
-      if (data.detail) throw new Error(data.detail)
+      await apiJson(`/auth/api/admin/orgs/${orgUuid}/permission?${params.toString()}`, { method: 'DELETE' })
       await loadOrgs()
     } catch (e) {
       authStore.showMessage(e.message || 'Failed to remove permission from org')
@@ -133,10 +142,7 @@ function parseHash() {
 }
 
 async function loadOrgs() {
-  const res = await fetch('/auth/admin/orgs')
-  const data = await res.json()
-  if (data.detail) throw new Error(data.detail)
-  // Restructure to attach users to roles instead of flat user list at org level
+  const data = await apiJson('/auth/api/admin/orgs')
   orgs.value = data.map(o => {
     const roles = o.roles.map(r => ({ ...r, org_uuid: o.uuid, users: [] }))
     const roleMap = Object.fromEntries(roles.map(r => [r.display_name, r]))
@@ -148,25 +154,25 @@ async function loadOrgs() {
 }
 
 async function loadPermissions() {
-  const res = await fetch('/auth/admin/permissions')
-  const data = await res.json()
-  if (data.detail) throw new Error(data.detail)
-  permissions.value = data
+  permissions.value = await apiJson('/auth/api/admin/permissions')
+}
+
+async function loadUserInfo() {
+  info.value = await apiJson('/auth/api/user-info', { method: 'POST' })
+  authenticated.value = true
 }
 
 async function load() {
   loading.value = true
+  loadingMessage.value = 'Loading...'
   error.value = null
   try {
-  const res = await fetch('/auth/api/user-info', { method: 'POST' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-    info.value = data
-    if (data.authenticated && (data.is_global_admin || data.is_org_admin)) {
-      await Promise.all([loadOrgs(), loadPermissions()])
-    }
-    // After loading orgs decide view if not global admin
-    if (!data.is_global_admin && data.is_org_admin && orgs.value.length === 1) {
+    // Load admin data first - apiJson will handle 401/403 with iframe authentication
+    await Promise.all([loadOrgs(), loadPermissions()])
+    // If we get here, user has admin access - now fetch user info for display
+    await loadUserInfo()
+
+    if (!info.value.is_global_admin && info.value.is_org_admin && orgs.value.length === 1) {
       if (!window.location.hash || window.location.hash === '#overview') {
         currentOrgId.value = orgs.value[0].uuid
         window.location.hash = `#org/${currentOrgId.value}`
@@ -176,7 +182,11 @@ async function load() {
       }
     } else parseHash()
   } catch (e) {
-    error.value = e.message
+    if (e.name === 'AuthCancelledError') {
+      showBackMessage.value = true
+    } else {
+      error.value = e.message
+    }
   } finally {
     loading.value = false
   }
@@ -192,8 +202,7 @@ function editUserName(user) { openDialog('user-update-name', { user, name: user.
 function deleteOrg(org) {
   if (!info.value?.is_global_admin) { authStore.showMessage('Global admin only'); return }
   openDialog('confirm', { message: `Delete organization ${org.display_name}?`, action: async () => {
-    const res = await fetch(`/auth/admin/orgs/${org.uuid}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/orgs/${org.uuid}`, { method: 'DELETE' })
     await Promise.all([loadOrgs(), loadPermissions()])
   } })
 }
@@ -202,14 +211,15 @@ function createUserInRole(org, role) { openDialog('user-create', { org, role })
 
 async function moveUserToRole(org, user, targetRoleDisplayName) {
   if (user.role === targetRoleDisplayName) return
-  const res = await fetch(`/auth/admin/orgs/${org.uuid}/users/${user.uuid}/role`, {
-    method: 'PUT',
-    headers: { 'content-type': 'application/json' },
-    body: JSON.stringify({ role: targetRoleDisplayName })
-  })
-  const data = await res.json()
-  if (data.detail) { authStore.showMessage(data.detail); return }
-  await loadOrgs()
+  try {
+    await apiJson(`/auth/api/admin/orgs/${org.uuid}/users/${user.uuid}/role`, {
+      method: 'PUT',
+      body: { role: targetRoleDisplayName }
+    })
+    await loadOrgs()
+  } catch (e) {
+    authStore.showMessage(e.message || 'Failed to update user role')
+  }
 }
 
 function onUserDragStart(e, user, org_uuid) {
@@ -244,30 +254,26 @@ function updateRole(role) { openDialog('role-update', { role, name: role.display
 
 function deleteRole(role) {
   openDialog('confirm', { message: `Delete role ${role.display_name}?`, action: async () => {
-    const res = await fetch(`/auth/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'DELETE' })
     await loadOrgs()
   } })
 }
 
 async function toggleRolePermission(role, pid, checked) {
   // Calculate new permissions array
-  const newPermissions = checked 
-    ? [...role.permissions, pid] 
+  const newPermissions = checked
+    ? [...role.permissions, pid]
     : role.permissions.filter(p => p !== pid)
-  
+
   // Optimistic update
   const prevPermissions = [...role.permissions]
   role.permissions = newPermissions
-  
+
   try {
-    const res = await fetch(`/auth/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, {
+    await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, {
       method: 'PUT',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ display_name: role.display_name, permissions: newPermissions })
+      body: { display_name: role.display_name, permissions: newPermissions }
     })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
     await loadOrgs()
   } catch (e) {
     authStore.showMessage(e.message || 'Failed to update role permission')
@@ -281,20 +287,14 @@ function updatePermission(p) { openDialog('perm-display', { permission: p }) }
 function deletePermission(p) {
   openDialog('confirm', { message: `Delete permission ${p.id}?`, action: async () => {
     const params = new URLSearchParams({ permission_id: p.id })
-    const res = await fetch(`/auth/admin/permission?${params.toString()}`, { method: 'DELETE' })
-    const data = await res.json(); if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
     await loadPermissions()
   } })
 }
 
-onMounted(async () => {
-  window.addEventListener('hashchange', parseHash)
-  await authStore.loadSettings()
-  if (authStore.settings?.rp_name) {
-    document.title = authStore.settings.rp_name + ' Admin'
-  }
-  load()
-})
+function reloadPage() {
+  window.location.reload()
+}
 
 const selectedOrg = computed(() => orgs.value.find(o => o.uuid === currentOrgId.value) || null)
 
@@ -324,14 +324,14 @@ const selectedUser = computed(() => {
 const pageHeading = computed(() => {
   if (selectedUser.value) return 'Admin: User'
   if (selectedOrg.value) return 'Admin: Org'
-  return (authStore.settings?.rp_name || 'Master') + ' Admin'
+  return ((authStore.settings?.rp_name) || 'Master') + ' Admin'
 })
 
 // Breadcrumb entries for admin app.
 const breadcrumbEntries = computed(() => {
   const entries = [
-    { label: 'Auth', href: authStore.uiHref() },
-    { label: 'Admin', href: authStore.adminHomeHref() }
+    { label: 'Auth', href: makeUiHref() },
+    { label: 'Admin', href: adminUiPath() }
   ]
   // Determine organization for user view if selectedOrg not explicitly chosen.
   let orgForUser = null
@@ -351,10 +351,7 @@ const breadcrumbEntries = computed(() => {
 watch(selectedUser, async (u) => {
   if (!u) { userDetail.value = null; return }
   try {
-  const res = await fetch(`/auth/admin/orgs/${u.org_uuid}/users/${u.uuid}`)
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
-    userDetail.value = data
+    userDetail.value = await apiJson(`/auth/api/admin/orgs/${u.org_uuid}/users/${u.uuid}`)
   } catch (e) {
     userDetail.value = { error: e.message }
   }
@@ -390,9 +387,7 @@ async function toggleOrgPermission(org, permId, checked) {
   org.permissions = next
   try {
     const params = new URLSearchParams({ permission_id: permId })
-    const res = await fetch(`/auth/admin/orgs/${org.uuid}/permission?${params.toString()}`, { method: checked ? 'POST' : 'DELETE' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
+    await apiJson(`/auth/api/admin/orgs/${org.uuid}/permission?${params.toString()}`, { method: checked ? 'POST' : 'DELETE' })
     await loadOrgs()
   } catch (e) {
     authStore.showMessage(e.message || 'Failed to update organization permission')
@@ -403,16 +398,17 @@ async function toggleOrgPermission(org, permId, checked) {
 function openDialog(type, data) { dialog.value = { type, data, busy: false, error: '' } }
 function closeDialog() { dialog.value = { type: null, data: null, busy: false, error: '' } }
 
-async function onUserNameSaved() {
+async function refreshUserDetail() {
   await loadOrgs()
   if (selectedUser.value) {
     try {
-  const r = await fetch(`/auth/admin/orgs/${selectedUser.value.org_uuid}/users/${selectedUser.value.uuid}`)
-      const jd = await r.json()
-      if (!r.ok || jd.detail) throw new Error(jd.detail || 'Reload failed')
-      userDetail.value = jd
+      userDetail.value = await apiJson(`/auth/api/admin/orgs/${selectedUser.value.org_uuid}/users/${selectedUser.value.uuid}`)
     } catch (e) { authStore.showMessage(e.message || 'Failed to reload user', 'error') }
   }
+}
+
+async function onUserNameSaved() {
+  await refreshUserDetail()
   authStore.showMessage('User renamed', 'success', 1500)
 }
 
@@ -423,53 +419,48 @@ async function submitDialog() {
     const t = dialog.value.type
     if (t === 'org-create') {
       const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch('/auth/admin/orgs', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: [] }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await Promise.all([loadOrgs(), loadPermissions()])
+      await apiJson('/auth/api/admin/orgs', { method: 'POST', body: { display_name: name, permissions: [] } })
+      await Promise.all([loadOrgs(), loadPermissions()])
     } else if (t === 'org-update') {
       const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${org.uuid}`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: org.permissions }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
+      await apiJson(`/auth/api/admin/orgs/${org.uuid}`, { method: 'PUT', body: { display_name: name, permissions: org.permissions } })
+      await loadOrgs()
     } else if (t === 'role-create') {
       const { org } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${org.uuid}/roles`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: [] }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
+      await apiJson(`/auth/api/admin/orgs/${org.uuid}/roles`, { method: 'POST', body: { display_name: name, permissions: [] } })
+      await loadOrgs()
     } else if (t === 'role-update') {
       const { role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, permissions: role.permissions }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
+      await apiJson(`/auth/api/admin/orgs/${role.org_uuid}/roles/${role.uuid}`, { method: 'PUT', body: { display_name: name, permissions: role.permissions } })
+      await loadOrgs()
     } else if (t === 'user-create') {
       const { org, role } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${org.uuid}/users`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name, role: role.display_name }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await loadOrgs()
+      await apiJson(`/auth/api/admin/orgs/${org.uuid}/users`, { method: 'POST', body: { display_name: name, role: role.display_name } })
+      await loadOrgs()
     } else if (t === 'user-update-name') {
       const { user } = dialog.value.data; const name = dialog.value.data.name?.trim(); if (!name) throw new Error('Name required')
-      const res = await fetch(`/auth/admin/orgs/${user.org_uuid}/users/${user.uuid}/display-name`, { method: 'PUT', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ display_name: name }) })
-      const d = await res.json(); if (d.detail) throw new Error(d.detail); await onUserNameSaved()
+      await apiJson(`/auth/api/admin/orgs/${user.org_uuid}/users/${user.uuid}/display-name`, { method: 'PUT', body: { display_name: name } })
+      await onUserNameSaved()
     } else if (t === 'perm-display') {
       const { permission } = dialog.value.data
       const newId = dialog.value.data.id?.trim()
       const newDisplay = dialog.value.data.display_name?.trim()
       if (!newDisplay) throw new Error('Display name required')
       if (!newId) throw new Error('ID required')
-      
+
       if (newId !== permission.id) {
         // ID changed, use rename endpoint
-        const body = { old_id: permission.id, new_id: newId, display_name: newDisplay }
-        const res = await fetch('/auth/admin/permission/rename', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
-        let data; try { data = await res.json() } catch(_) { data = {} }
-        if (!res.ok || data.detail) throw new Error(data.detail || data.error || `Failed (${res.status})`)
+        await apiJson('/auth/api/admin/permission/rename', { method: 'POST', body: { old_id: permission.id, new_id: newId, display_name: newDisplay } })
       } else if (newDisplay !== permission.display_name) {
         // Only display name changed
         const params = new URLSearchParams({ permission_id: permission.id, display_name: newDisplay })
-        const res = await fetch(`/auth/admin/permission?${params.toString()}`, { method: 'PUT' })
-        const d = await res.json(); if (d.detail) throw new Error(d.detail)
+        await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'PUT' })
       }
       await loadPermissions()
     } else if (t === 'perm-create') {
       const id = dialog.value.data.id?.trim(); if (!id) throw new Error('ID required')
       const display_name = dialog.value.data.display_name?.trim(); if (!display_name) throw new Error('Display name required')
-      const res = await fetch('/auth/admin/permissions', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ id, display_name }) })
-      const data = await res.json(); if (data.detail) throw new Error(data.detail)
+      await apiJson('/auth/api/admin/permissions', { method: 'POST', body: { id, display_name } })
       await loadPermissions(); dialog.value.data.display_name = ''; dialog.value.data.id = ''
     } else if (t === 'confirm') {
       const action = dialog.value.data.action; if (action) await action()
@@ -485,76 +476,71 @@ async function submitDialog() {
   <div class="app-shell admin-shell">
     <StatusMessage />
     <main class="app-main">
-      <section class="view-root view-admin">
-        <div class="view-content view-content--wide">
-          <header class="view-header">
-            <h1>{{ pageHeading }}</h1>
-            <Breadcrumbs :entries="breadcrumbEntries" />
-          </header>
+      <LoadingView v-if="loading" :message="loadingMessage" />
+      <AuthRequiredMessage
+        v-else-if="showBackMessage"
+        @reload="reloadPage"
+      />
+      <section v-else-if="authenticated && (info?.is_global_admin || info?.is_org_admin)" class="view-root view-root--wide view-admin">
+        <header class="view-header">
+          <h1>{{ pageHeading }}</h1>
+          <Breadcrumbs :entries="breadcrumbEntries" />
+        </header>
 
-          <section class="section-block admin-section">
-            <div class="section-body admin-section-body">
-              <div v-if="loading" class="surface surface--tight">Loading…</div>
-              <div v-else-if="error" class="surface surface--tight error">{{ error }}</div>
-              <template v-else>
-                <div v-if="!info?.authenticated" class="surface surface--tight">
-                  <p>You must be authenticated.</p>
-                </div>
-                <div v-else-if="!(info?.is_global_admin || info?.is_org_admin)" class="surface surface--tight">
-                  <p>Insufficient permissions.</p>
-                </div>
-                <div v-else class="admin-panels">
-                                    <AdminOverview
-                    v-if="!selectedUser && !selectedOrg && (info.is_global_admin || info.is_org_admin)"
-                    :info="info"
-                    :orgs="orgs"
-                    :permissions="permissions"
-                    :permission-summary="permissionSummary"
-                    @create-org="createOrg"
-                    @open-org="openOrg"
-                    @update-org="updateOrg"
-                    @delete-org="deleteOrg"
-                    @toggle-org-permission="toggleOrgPermission"
-                    @open-dialog="openDialog"
-                    @delete-permission="deletePermission"
-                    @rename-permission-display="renamePermissionDisplay"
-                  />
+        <section class="section-block admin-section">
+          <div class="section-body admin-section-body">
+            <div v-if="error" class="surface surface--tight error">{{ error }}</div>
+            <div v-else class="admin-panels">
+                                  <AdminOverview
+                  v-if="!selectedUser && !selectedOrg && (info.is_global_admin || info.is_org_admin)"
+                  :info="info"
+                  :orgs="orgs"
+                  :permissions="permissions"
+                  :permission-summary="permissionSummary"
+                  @create-org="createOrg"
+                  @open-org="openOrg"
+                  @update-org="updateOrg"
+                  @delete-org="deleteOrg"
+                  @toggle-org-permission="toggleOrgPermission"
+                  @open-dialog="openDialog"
+                  @delete-permission="deletePermission"
+                  @rename-permission-display="renamePermissionDisplay"
+                />
 
-                  <AdminUserDetail
-                    v-else-if="selectedUser"
-                    :selected-user="selectedUser"
-                    :user-detail="userDetail"
-                    :selected-org="selectedOrg"
-                    :loading="loading"
-                    :show-reg-modal="showRegModal"
-                    @generate-user-registration-link="generateUserRegistrationLink"
-                    @go-overview="goOverview"
-                    @open-org="openOrg"
-                    @on-user-name-saved="onUserNameSaved"
-                    @edit-user-name="editUserName"
-                    @close-reg-modal="showRegModal = false"
-                  />
-                  <AdminOrgDetail
-                    v-else-if="selectedOrg"
-                    :selected-org="selectedOrg"
-                    :permissions="permissions"
-                    @update-org="updateOrg"
-                    @create-role="createRole"
-                    @update-role="updateRole"
-                    @delete-role="deleteRole"
-                    @create-user-in-role="createUserInRole"
-                    @open-user="openUser"
-                    @toggle-role-permission="toggleRolePermission"
-                    @on-role-drag-over="onRoleDragOver"
-                    @on-role-drop="onRoleDrop"
-                    @on-user-drag-start="onUserDragStart"
-                  />
+                <AdminUserDetail
+                  v-else-if="selectedUser"
+                  :selected-user="selectedUser"
+                  :user-detail="userDetail"
+                  :selected-org="selectedOrg"
+                  :loading="loading"
+                  :show-reg-modal="showRegModal"
+                  @generate-user-registration-link="generateUserRegistrationLink"
+                  @go-overview="goOverview"
+                  @open-org="openOrg"
+                  @on-user-name-saved="onUserNameSaved"
+                  @refresh-user-detail="refreshUserDetail"
+                  @edit-user-name="editUserName"
+                  @close-reg-modal="showRegModal = false"
+                />
+                <AdminOrgDetail
+                  v-else-if="selectedOrg"
+                  :selected-org="selectedOrg"
+                  :permissions="permissions"
+                  @update-org="updateOrg"
+                  @create-role="createRole"
+                  @update-role="updateRole"
+                  @delete-role="deleteRole"
+                  @create-user-in-role="createUserInRole"
+                  @open-user="openUser"
+                  @toggle-role-permission="toggleRolePermission"
+                  @on-role-drag-over="onRoleDragOver"
+                  @on-role-drop="onRoleDrop"
+                  @on-user-drag-start="onUserDragStart"
+                />
 
-                </div>
-              </template>
-            </div>
-          </section>
-        </div>
+              </div>
+          </div>
+        </section>
       </section>
     </main>
     <AdminDialogs

frontend/auth/admin/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="admin-app"></div>
-    <script type="module" src="/src/admin/main.js"></script>
+    <script type="module" src="./main.js"></script>
   </body>
   </html>

frontend/auth/admin/main.js

@@ -1,4 +1,4 @@
-import '../assets/style.css'
+import '@/assets/style.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

frontend/auth/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="main.js"></script>
   </body>
 </html>

frontend/auth/main.js

@@ -1,4 +1,4 @@
-import './assets/style.css'
+import '@/assets/style.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

frontend/auth/restricted/RestrictedApi.vue

@@ -0,0 +1,53 @@
+<template>
+  <RestrictedAuth
+    :mode="authMode"
+    @authenticated="handleAuthenticated"
+    @back="handleBack"
+  />
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import RestrictedAuth from '@/components/RestrictedAuth.vue'
+
+// Detect mode from URL hash fragment
+const authMode = computed(() => {
+  const params = new URLSearchParams(window.location.hash.slice(1))
+  const mode = params.get('mode')
+  if (mode === 'reauth') return 'reauth'
+  if (mode === 'forbidden') return 'forbidden'
+  return 'login'
+})
+
+function postToParent(message) {
+  if (window.parent && window.parent !== window) {
+    window.parent.postMessage(message, '*')
+  }
+}
+
+function handleAuthenticated(result) {
+  postToParent({
+    type: 'auth-success',
+    authenticated: true,
+    sessionToken: result.session_token
+  })
+}
+
+function handleBack() {
+  postToParent({
+    type: 'auth-back'
+  })
+}
+
+onMounted(() => {
+  postToParent({
+    type: 'auth-ready'
+  })
+
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      handleBack()
+    }
+  })
+})
+</script>

frontend/auth/restricted/index.html

@@ -0,0 +1,4 @@
+<html style="background: transparent"><meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<div id="app"></div>
+<script type="module" src="/auth/restricted/main.js"></script>

frontend/auth/restricted/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import RestrictedApi from './RestrictedApi.vue'
+import '@/assets/style.css'
+
+createApp(RestrictedApi).mount('#app')

frontend/int/forward/RestrictedForward.vue

@@ -0,0 +1,45 @@
+<template>
+  <RestrictedAuth
+    :mode="authMode"
+    @authenticated="handleAuthenticated"
+    @back="goBack"
+    @home="returnHome"
+  />
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import RestrictedAuth from '@/components/RestrictedAuth.vue'
+import { uiBasePath } from '@/utils/settings'
+import { goBack } from '@/utils/helpers'
+
+const basePath = computed(() => uiBasePath())
+
+// Detect mode from data attribute on html tag only
+// (RestrictedApi uses URL query, RestrictedForward uses data injected by server)
+const authMode = computed(() => {
+  const htmlElement = document.documentElement
+  const dataMode = htmlElement.getAttribute('data-mode')
+  if (dataMode === 'reauth') return 'reauth'
+  if (dataMode === 'forbidden') return 'forbidden'
+  return 'login'
+})
+
+function handleAuthenticated() {
+  // Reload page to re-trigger forward auth validation
+  location.reload()
+}
+
+function returnHome() {
+  const target = basePath.value || '/auth/'
+  if (window.location.pathname !== target) history.replaceState(null, '', target)
+  window.location.href = target
+}
+
+onMounted(() => {
+  // Handle Escape key to trigger back navigation
+  window.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') goBack()
+  })
+})
+</script>

frontend/int/forward/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/restricted/main.js"></script>
+    <script type="module" src="/int/forward/main.js"></script>
   </body>
 </html>

frontend/int/forward/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './RestrictedForward.vue'
+import '@/assets/style.css'
+
+createApp(App).mount('#app')

frontend/int/reset/ResetApp.vue

@@ -7,54 +7,50 @@
     </div>
 
     <main class="view-root">
-      <div class="view-content">
-        <div class="surface surface--tight" style="max-width: 560px; margin: 0 auto; width: 100%;">
-          <header class="view-header" style="text-align: center;">
-            <h1>🔑 Complete Your Passkey Setup</h1>
-            <p class="view-lede">
-              {{ subtitleMessage }}
-            </p>
-          </header>
+      <div class="surface surface--tight" style="max-width: 560px; margin: 0 auto; width: 100%;">
+        <header class="view-header" style="text-align: center;">
+          <h1>🔑 Registration</h1>
+          <p class="view-lede">
+            {{ subtitleMessage }}
+          </p>
+        </header>
 
-          <section class="section-block" v-if="initializing">
-            <div class="section-body center">
-              <p>Loading reset details…</p>
+        <section class="section-block" v-if="initializing">
+          <div class="section-body center">
+            <p>Loading reset details…</p>
+          </div>
+        </section>
+
+        <section class="section-block" v-else-if="!canRegister">
+          <div class="section-body center">
+            <p>{{ errorMessage }}</p>
+            <div class="button-row center" style="justify-content: center;">
+              <button class="btn-secondary" @click="goHome">Return to sign-in</button>
             </div>
-          </section>
+          </div>
+        </section>
 
-          <section class="section-block" v-else-if="!canRegister">
-            <div class="section-body center">
-              <p>{{ errorMessage }}</p>
-              <div class="button-row center" style="justify-content: center;">
-                <button class="btn-secondary" @click="goHome">Return to sign-in</button>
-              </div>
-            </div>
-          </section>
-
-          <section class="section-block" v-else>
-            <div class="section-body">
-              <label class="name-edit">
-                <span>👤 Name</span>
-                <input
-                  type="text"
-                  v-model="displayName"
-                  :placeholder="namePlaceholder"
-                  :disabled="loading"
-                  maxlength="64"
-                  @keyup.enter="registerPasskey"
-                />
-              </label>
-              <p>Click below to finish {{ sessionDescriptor }}.</p>
-              <button
-                class="btn-primary"
+        <section class="section-block" v-else>
+          <div class="section-body">
+            <label class="name-edit">
+              <span>👤 Name</span>
+              <input
+                type="text"
+                v-model="displayName"
                 :disabled="loading"
-                @click="registerPasskey"
-              >
-                {{ loading ? 'Registering…' : 'Register Passkey' }}
-              </button>
-            </div>
-          </section>
-        </div>
+                maxlength="64"
+                @keyup.enter="registerPasskey"
+              />
+            </label>
+            <button
+              class="btn-primary"
+              :disabled="loading"
+              @click="registerPasskey"
+            >
+              {{ loading ? 'Registering…' : 'Register Passkey' }}
+            </button>
+          </div>
+        </section>
       </div>
     </main>
   </div>
@@ -63,6 +59,8 @@
 <script setup>
 import { computed, onMounted, reactive, ref } from 'vue'
 import passkey from '@/utils/passkey'
+import { getSettings, uiBasePath } from '@/utils/settings'
+import { apiJson, ApiError, getUserFriendlyErrorMessage } from '@/utils/api'
 
 const status = reactive({
   show: false,
@@ -80,18 +78,13 @@ const errorMessage = ref('')
 let statusTimer = null
 
 const sessionDescriptor = computed(() => userInfo.value?.session_type || 'your enrollment')
-const namePlaceholder = computed(() => userInfo.value?.user?.user_name || 'Your name')
 const subtitleMessage = computed(() => {
   if (initializing.value) return 'Preparing your secure enrollment…'
   if (!canRegister.value) return 'This reset link is no longer valid.'
-  return `Finish setting up a passkey for ${userInfo.value?.user?.user_name || 'your account'}.`
+  return `Finish up ${sessionDescriptor.value}. You may edit the name below if needed, and it will be saved to your passkey.`
 })
 
-const uiBasePath = computed(() => {
-  const base = settings.value?.ui_base_path || '/auth/'
-  if (base === '/') return '/'
-  return base.endsWith('/') ? base : `${base}/`
-})
+const basePath = computed(() => uiBasePath())
 
 const canRegister = computed(() => !!(token.value && userInfo.value))
 
@@ -109,13 +102,9 @@ function showMessage(message, type = 'info', duration = 3000) {
 
 async function fetchSettings() {
   try {
-    const res = await fetch('/auth/api/settings')
-    if (!res.ok) return
-    const data = await res.json()
+    const data = await getSettings()
     settings.value = data
-    if (data?.rp_name) {
-      document.title = `${data.rp_name} · Passkey Setup`
-    }
+    if (data?.rp_name) document.title = `${data.rp_name} · Passkey Setup`
   } catch (error) {
     console.warn('Unable to load settings', error)
   }
@@ -124,20 +113,15 @@ async function fetchSettings() {
 async function fetchUserInfo() {
   if (!token.value) return
   try {
-    const res = await fetch(`/auth/api/user-info?reset=${encodeURIComponent(token.value)}`, {
+    userInfo.value = await apiJson(`/auth/api/user-info?reset=${encodeURIComponent(token.value)}`, {
       method: 'POST'
     })
-    if (!res.ok) {
-      const payload = await safeParseJson(res)
-      const detail = payload?.detail || 'Reset link is invalid or expired.'
-      errorMessage.value = detail
-      showMessage(detail, 'error', 0)
-      return
-    }
-    userInfo.value = await res.json()
+    displayName.value = userInfo.value?.user?.user_name || ''
   } catch (error) {
     console.error('Failed to load user info', error)
-    const message = 'We could not load your reset details. Try refreshing the page.'
+    const message = error instanceof ApiError
+      ? (error.data?.detail || 'Reset link is invalid or expired.')
+      : getUserFriendlyErrorMessage(error)
     errorMessage.value = message
     showMessage(message, 'error', 0)
   }
@@ -161,7 +145,7 @@ async function registerPasskey() {
   }
 
   try {
-    await setSessionCookie(result.session_token)
+    await setSessionCookie(result)
   } catch (error) {
     loading.value = false
     const message = error?.message || 'Failed to establish session'
@@ -169,29 +153,23 @@ async function registerPasskey() {
     return
   }
 
-  showMessage('Passkey registered successfully!', 'success', 2000)
-  setTimeout(() => {
-    loading.value = false
-    redirectHome()
-  }, 800)
+  showMessage('Passkey registered successfully!', 'success', 800)
+  setTimeout(() => { loading.value = false; goHome() }, 800)
 }
 
-async function setSessionCookie(sessionToken) {
-  const response = await fetch('/auth/api/set-session', {
+async function setSessionCookie(result) {
+  if (!result?.session_token) {
+    throw new Error('Registration response missing session_token')
+  }
+  return await apiJson('/auth/api/set-session', {
     method: 'POST',
     headers: {
-      Authorization: `Bearer ${sessionToken}`
+      Authorization: `Bearer ${result.session_token}`
     }
   })
-  const payload = await safeParseJson(response)
-  if (!response.ok || payload?.detail) {
-    const detail = payload?.detail || 'Session could not be established.'
-    throw new Error(detail)
-  }
-  return payload
 }
 
-function redirectHome() {
+function goHome() {
   const target = uiBasePath.value || '/auth/'
   if (window.location.pathname !== target) {
     history.replaceState(null, '', target)
@@ -199,10 +177,6 @@ function redirectHome() {
   window.location.reload()
 }
 
-function goHome() {
-  redirectHome()
-}
-
 function extractTokenFromPath() {
   const segments = window.location.pathname.split('/').filter(Boolean)
   if (!segments.length) return ''
@@ -214,14 +188,6 @@ function extractTokenFromPath() {
   return candidate
 }
 
-async function safeParseJson(response) {
-  try {
-    return await response.json()
-  } catch (error) {
-    return null
-  }
-}
-
 onMounted(async () => {
   token.value = extractTokenFromPath()
   await fetchSettings()

frontend/int/reset/index.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/reset/main.js"></script>
+    <script type="module" src="/int/reset/main.js"></script>
   </body>
 </html>

frontend/package.json

@@ -12,6 +12,7 @@
     "@simplewebauthn/browser": "^13.1.2",
     "pinia": "^3.0.3",
     "qrcode": "^1.5.4",
+    "sirv": "^3.0.2",
     "vue": "^3.5.17"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="app-shell">
-    <StatusMessage />
-    <main class="app-main">
-      <!-- Only render views after authentication status is determined -->
-      <template v-if="initialized">
-        <LoginView v-if="store.currentView === 'login'" />
-        <ProfileView v-if="store.currentView === 'profile'" />
-        <DeviceLinkView v-if="store.currentView === 'device-link'" />
-      </template>
-      <!-- Show loading state while determining auth status -->
-      <div v-else class="loading-container">
-        <div class="loading-spinner"></div>
-        <p>Loading...</p>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-import { useAuthStore } from '@/stores/auth'
-import StatusMessage from '@/components/StatusMessage.vue'
-import LoginView from '@/components/LoginView.vue'
-import ProfileView from '@/components/ProfileView.vue'
-import DeviceLinkView from '@/components/DeviceLinkView.vue'
-const store = useAuthStore()
-const initialized = ref(false)
-
-onMounted(async () => {
-  // Load branding / settings first (non-blocking for auth flow)
-  await store.loadSettings()
-  // Was an error message passed in the URL hash?
-  const message = location.hash.substring(1)
-  if (message) {
-    store.showMessage(decodeURIComponent(message), 'error')
-    history.replaceState(null, '', location.pathname)
-  }
-  try {
-    await store.loadUserInfo()
-  } catch (error) {
-    console.log('Failed to load user info:', error)
-  } finally {
-    initialized.value = true
-    store.selectView()
-  }
-})
-</script>
-
-<style scoped>
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  gap: 1rem;
-}
-
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid var(--color-border);
-  border-top: 4px solid var(--color-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.loading-container p {
-  color: var(--color-text-muted);
-  margin: 0;
-}
-</style>

frontend/src/admin/AdminUserDetail.vue

@@ -3,7 +3,9 @@ import { ref } from 'vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import CredentialList from '@/components/CredentialList.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
+import SessionList from '@/components/SessionList.vue'
 import { useAuthStore } from '@/stores/auth'
+import { apiJson } from '@/utils/api'
 
 const props = defineProps({
   selectedUser: Object,
@@ -13,9 +15,12 @@ const props = defineProps({
   showRegModal: Boolean
 })
 
-const emit = defineEmits(['generateUserRegistrationLink', 'goOverview', 'openOrg', 'onUserNameSaved', 'closeRegModal', 'editUserName'])
+const emit = defineEmits(['generateUserRegistrationLink', 'goOverview', 'openOrg', 'onUserNameSaved', 'closeRegModal', 'editUserName', 'refreshUserDetail'])
 
 const authStore = useAuthStore()
+const terminatingSessions = ref({})
+const hoveredCredentialUuid = ref(null)
+const hoveredSession = ref(null)
 
 function onLinkCopied() {
   authStore.showMessage('Link copied to clipboard!')
@@ -25,17 +30,44 @@ function handleEditName() {
   emit('editUserName', props.selectedUser)
 }
 
-function handleDelete(credential) {
-  fetch(`/auth/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/credentials/${credential.credential_uuid}`, { method: 'DELETE' })
-    .then(res => res.json())
-    .then(data => {
-      if (data.status === 'ok') {
-        emit('onUserNameSaved') // Reuse to refresh user detail
-      } else {
-        console.error('Failed to delete credential', data)
+async function handleDelete(credential) {
+  try {
+    const data = await apiJson(`/auth/api/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/credentials/${credential.credential_uuid}`, { method: 'DELETE' })
+    if (data.status === 'ok') {
+      emit('onUserNameSaved') // Reuse to refresh user detail
+    } else {
+      console.error('Failed to delete credential', data)
+    }
+  } catch (err) {
+    console.error('Delete credential error', err)
+  }
+}
+
+async function handleTerminateSession(session) {
+  const sessionId = session?.id
+  if (!sessionId) return
+  terminatingSessions.value = { ...terminatingSessions.value, [sessionId]: true }
+  try {
+    const data = await apiJson(`/auth/api/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/sessions/${sessionId}`, { method: 'DELETE' })
+    if (data.status === 'ok') {
+      if (data.current_session_terminated) {
+        sessionStorage.clear()
+        location.reload()
+        return
       }
-    })
-    .catch(err => console.error('Delete credential error', err))
+      emit('refreshUserDetail') // Refresh without showing rename message
+      authStore.showMessage('Session terminated', 'success', 2500)
+    } else {
+      authStore.showMessage(data.detail || 'Failed to terminate session', 'error')
+    }
+  } catch (err) {
+    console.error('Terminate session error', err)
+    authStore.showMessage(err.message || 'Failed to terminate session', 'error')
+  } finally {
+    const next = { ...terminatingSessions.value }
+    delete next[sessionId]
+    terminatingSessions.value = next
+  }
 }
 
 </script>
@@ -51,24 +83,57 @@ function handleDelete(credential) {
       :loading="loading"
       :org-display-name="userDetail.org.display_name"
       :role-name="userDetail.role"
-      :update-endpoint="`/auth/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
+      :update-endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
       @saved="$emit('onUserNameSaved')"
       @edit-name="handleEditName"
     />
     <div v-else-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
     <template v-if="userDetail && !userDetail.error">
-      <h3 class="cred-title">Registered Passkeys</h3>
-      <CredentialList :credentials="userDetail.credentials" :aaguid-info="userDetail.aaguid_info" :allow-delete="true" @delete="handleDelete" />
+      <div class="registration-actions">
+        <button
+          class="btn-secondary reg-token-btn"
+          @click="$emit('generateUserRegistrationLink', selectedUser)"
+          :disabled="loading"
+        >Generate Registration Token</button>
+        <p class="matrix-hint muted">
+          Generate a one-time registration link so this user can register or add another passkey.
+          Copy the link from the dialog and send it to the user, or have the user scan the QR code on their device.
+        </p>
+      </div>
+      <section class="section-block" data-section="registered-passkeys">
+        <div class="section-header">
+          <h2>Registered Passkeys</h2>
+        </div>
+        <div class="section-body">
+          <CredentialList
+            :credentials="userDetail.credentials"
+            :aaguid-info="userDetail.aaguid_info"
+            :allow-delete="true"
+            :hovered-credential-uuid="hoveredCredentialUuid"
+            :hovered-session-credential-uuid="hoveredSession?.credential_uuid"
+            @delete="handleDelete"
+            @credential-hover="hoveredCredentialUuid = $event"
+          />
+        </div>
+      </section>
+      <SessionList
+        :sessions="userDetail.sessions || []"
+        :terminating-sessions="terminatingSessions"
+        :hovered-credential-uuid="hoveredCredentialUuid"
+        :empty-message="'This user has no active sessions.'"
+        :section-description="'View and manage the active sessions for this user.'"
+        @terminate="handleTerminateSession"
+        @session-hover="hoveredSession = $event"
+      />
     </template>
-    <div class="actions">
-      <button @click="$emit('generateUserRegistrationLink', selectedUser)">Generate Registration Token</button>
+    <div class="actions ancillary-actions">
       <button v-if="selectedOrg" @click="$emit('openOrg', selectedOrg)" class="icon-btn" title="Back to Org">↩️</button>
     </div>
-    <p class="matrix-hint muted">Use the token dialog to register a new credential for the member.</p>
     <RegistrationLinkModal
       v-if="showRegModal"
-      :endpoint="`/auth/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/create-link`"
+      :endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/create-link`"
       :auto-copy="false"
+      :user-name="userDetail?.display_name || selectedUser.display_name"
       @close="$emit('closeRegModal')"
       @copied="onLinkCopied"
     />
@@ -77,13 +142,14 @@ function handleDelete(credential) {
 
 <style scoped>
 .user-detail { display: flex; flex-direction: column; gap: var(--space-lg); }
-.cred-title { font-size: 1.25rem; font-weight: 600; color: var(--color-heading); margin-bottom: var(--space-md); }
 .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
-.actions button { width: auto; }
+.ancillary-actions { margin-top: -0.5rem; }
+.reg-token-btn { align-self: flex-start; }
+.registration-actions { display: flex; flex-direction: column; gap: 0.5rem; }
 .icon-btn { background: none; border: none; color: var(--color-text-muted); padding: 0.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
 .icon-btn:hover { color: var(--color-heading); background: var(--color-surface-muted); }
 .matrix-hint { font-size: 0.8rem; color: var(--color-text-muted); }
 .error { color: var(--color-danger-text); }
 .small { font-size: 0.9rem; }
 .muted { color: var(--color-text-muted); }
-</style>
+</style>

frontend/src/assets/style.css

@@ -1,7 +1,5 @@
-/* Passkey Authentication – Unified Layout */
 
 :root {
-  color-scheme: light dark;
   --font-sans: "Inter", "Inter var", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
   --font-mono: "DM Mono", "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   --color-canvas: #f5f6f8;
@@ -36,14 +34,13 @@
   --space-lg: 1.5rem;
   --space-xl: 2.25rem;
   --space-xxl: 3.5rem;
-  --layout-max-width: 1080px;
+  --layout-max-width: 1400px;
   --layout-padding: clamp(1.5rem, 3vw + 1rem, 3.25rem);
   --transition-base: 160ms ease;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    color-scheme: dark;
     --color-canvas: #0f172a;
     --color-surface: #141b2f;
     --color-surface-subtle: #1b243b;
@@ -58,13 +55,13 @@
     --color-accent-strong: #3b82f6;
     --color-accent-contrast: #0b1120;
     --color-success-text: #34d399;
-    --color-success-bg: rgba(34, 197, 94, 0.12);
+    --color-success-bg: #1a4d2e;
     --color-error-text: #fca5a5;
-    --color-error-bg: rgba(248, 113, 113, 0.16);
+    --color-error-bg: #4a1f1f;
     --color-info-text: #bae6fd;
-    --color-info-bg: rgba(59, 130, 246, 0.16);
+    --color-info-bg: #1e3a5f;
     --color-danger: #f87171;
-    --shadow-soft: 0 0 0 rgba(0, 0, 0, 0);
+    --shadow-soft: 0 0 0 #000000;
   }
 }
 
@@ -74,15 +71,16 @@
   box-sizing: border-box;
 }
 
-html,
-body {
+html {
   height: 100%;
+  background: var(--color-canvas);
 }
 
 body {
+  height: 100%;
   margin: 0;
   font-family: var(--font-sans);
-  background: var(--color-canvas);
+  background: none;
   color: var(--color-text);
   line-height: 1.55;
   -webkit-font-smoothing: antialiased;
@@ -124,7 +122,6 @@ a:focus-visible {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: var(--color-canvas);
 }
 
 .app-main {
@@ -137,23 +134,22 @@ a:focus-visible {
   flex: 1;
   width: 100%;
   display: flex;
-  padding: var(--layout-padding);
-  box-sizing: border-box;
-}
-
-.view-content {
-  flex: 1;
-  display: flex;
   flex-direction: column;
   gap: 2rem;
+  padding: var(--layout-padding);
+  box-sizing: border-box;
   margin: 0 auto;
   width: min(100%, var(--layout-max-width));
 }
 
-.view-content--wide {
+.view-root--wide {
   width: min(100%, 1200px);
 }
 
+.view-root--narrow {
+  max-width: 540px;
+}
+
 .view-header {
   display: flex;
   flex-direction: column;
@@ -233,8 +229,8 @@ button:focus-visible {
 }
 
 button:disabled {
-  opacity: 0.6;
   cursor: not-allowed;
+  filter: opacity(0.6);
 }
 
 .btn-primary {
@@ -289,7 +285,7 @@ input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
   border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+  box-shadow: 0 0 0 3px #c7d2fe;
   outline: none;
 }
 
@@ -373,19 +369,19 @@ th {
 }
 
 .status.info {
-  border-color: rgba(14, 96, 155, 0.28);
+  border-color: #3b82f6;
   color: var(--color-info-text);
   background: var(--color-info-bg);
 }
 
 .status.success {
-  border-color: rgba(6, 118, 71, 0.22);
+  border-color: #16a34a;
   color: var(--color-success-text);
   background: var(--color-success-bg);
 }
 
 .status.error {
-  border-color: rgba(180, 35, 24, 0.28);
+  border-color: #dc2626;
   color: var(--color-error-text);
   background: var(--color-error-bg);
 }
@@ -393,8 +389,9 @@ th {
 .dialog-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(9, 14, 24, 0.55);
-  backdrop-filter: blur(6px);
+  background: transparent;
+  backdrop-filter: blur(.1rem) brightness(0.7);
+  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
   z-index: 1100;
   display: flex;
   align-items: center;
@@ -440,60 +437,118 @@ th {
   color: var(--color-text);
 }
 
-.credential-list {
+:root { --card-width: 22rem; }
+
+.record-list,
+.credential-list,
+.session-list {
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
+  justify-content: start;
   gap: 1rem 1.25rem;
   align-items: stretch;
+  margin: 0 auto;
 }
 
-.credential-item {
+@media (max-width: 720px) {
+  .record-list { display: flex; flex-direction: column; max-width: 100%; }
+}
+
+.record-item,
+.credential-item,
+.session-item {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  padding: 0.85rem 1rem;
+  padding: 1rem;
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   background: var(--color-surface);
   height: 100%;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  position: relative;
+  cursor: pointer;
 }
 
-.credential-item.current-session {
-  border-color: var(--color-accent);
-  background: rgba(37, 99, 235, 0.08);
+.record-item:hover,
+.credential-item:hover,
+.session-item:hover {
+  border-color: var(--color-border-strong);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
+  transform: translateY(-1px);
 }
 
-.credential-header {
+.record-item.is-current,
+.credential-item.current-session,
+.credential-item.is-hovered,
+.session-item.is-current,
+.session-item.is-hovered { border-color: var(--color-accent); }
+
+.credential-item.is-linked-session,
+.session-item.is-linked-credential { border-color: var(--color-accent); background-color: var(--color-surface-subtle); }
+
+.item-top {
   display: flex;
+  align-items: center;
   gap: 1rem;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  flex: 1 1 auto;
 }
 
-.credential-icon {
+.item-icon {
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
+  background: var(--color-surface-subtle, transparent);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+  flex-shrink: 0;
 }
 
-.credential-info {
-  flex: 1 1 auto;
+.auth-icon {
+  border-radius: var(--radius-sm);
 }
 
-.credential-info h4 {
+.item-title {
+  flex: 1;
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
   color: var(--color-heading);
 }
 
+.item-actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.item-actions .badge + .btn-card-delete { margin-left: 0.25rem; }
+.item-actions .badge + .badge { margin-left: 0.25rem; }
+
+.item-details {
+  margin-left: calc(40px + 1rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 .credential-dates {
   display: grid;
   grid-auto-flow: row;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: 7rem 1fr;
+  gap: 0.35rem 0.5rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  align-items: center;
+}
+
+.session-dates {
+  display: grid;
+  grid-auto-flow: row;
+  grid-template-columns: 7rem 1fr;
   gap: 0.35rem 0.5rem;
   font-size: 0.75rem;
   color: var(--color-text-muted);
@@ -509,27 +564,49 @@ th {
   color: var(--color-text);
 }
 
-.credential-actions {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
+.btn-card-delete { background: transparent; border: none; color: var(--color-danger); padding: 0.35rem 0.5rem; font-size: 1.05rem; line-height: 1; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
+.btn-card-delete:hover:not(:disabled) { background: #fee; }
+.btn-card-delete:disabled { filter: opacity(0.4); cursor: not-allowed; }
+
+
+.session-emoji {
+  font-size: 1.2rem;
 }
 
-.btn-delete-credential {
-  background: transparent;
-  border: none;
-  color: var(--color-danger);
-  padding: 0.25rem 0.35rem;
-  font-size: 1.05rem;
+.badge {
+  padding: 0.2rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.8rem;
+  font-weight: 500;
 }
 
-.btn-delete-credential:hover:not(:disabled) {
-  background: rgba(220, 38, 38, 0.08);
+.badge-current {
+  background: var(--color-accent);
+  color: var(--color-accent-contrast);
+  box-shadow: 0 0 0 1px var(--color-accent) inset;
 }
 
-.btn-delete-credential:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
+.badge:not(.badge-current) {
+  background: var(--color-surface-subtle);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+}
+
+
+.session-meta-info {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  font-family: monospace;
+}
+
+.empty-state {
+  text-align: center;
+  padding: var(--space-lg);
+  color: var(--color-text-muted);
+}
+
+.empty-state p {
+  margin: 0;
 }
 
 .user-info {
@@ -573,9 +650,6 @@ th {
 @media (max-width: 720px) {
   .view-root {
     padding: clamp(1rem, 3vw + 0.75rem, 2rem);
-  }
-
-  .view-content {
     gap: 1.75rem;
   }
 
@@ -584,6 +658,13 @@ th {
     grid-template-columns: auto auto;
   }
 
+  .global-status {
+    top: 1rem;
+  }
+}
+
+/* Mobile portrait (touch) or very narrow screens: stack buttons */
+@media (max-width: 500px) and (orientation: portrait) and (pointer: coarse), (max-width: 350px) {
   button {
     width: 100%;
   }
@@ -591,21 +672,17 @@ th {
   .button-row {
     flex-direction: column;
   }
-
-  .global-status {
-    top: 1rem;
-  }
 }
 
-/* Dialog styles for auth views */
 .dialog-backdrop {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
+  background: transparent;
+  backdrop-filter: blur(.1rem) brightness(0.7);
+  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -625,7 +702,7 @@ th {
   padding: 2rem;
   background: var(--color-surface);
   border-radius: var(--radius-lg);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 20px 60px #1e293b;
   border: 1px solid var(--color-border);
 }
 
@@ -642,3 +719,22 @@ th {
     padding: 1.5rem;
   }
 }
+
+/* Auth iframe overlay styles */
+body:has(#auth-iframe) {
+  overflow: hidden;
+}
+
+#auth-iframe {
+  border: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  color-scheme: auto;
+  background: transparent;
+  backdrop-filter: blur(.1rem) brightness(0.7);
+  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
+}

frontend/src/components/AccessDenied.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="message-container">
+    <div class="message-content">
+      <h2>🔒 Access Denied</h2>
+      <div class="button-row">
+        <button class="btn-secondary" @click="goBack">Back</button>
+        <button class="btn-primary" @click="$emit('reload')">Reload Page</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { goBack } from '@/utils/helpers'
+
+defineEmits(['reload'])
+</script>
+
+<style scoped>
+.message-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  padding: 2rem;
+}
+
+.message-content {
+  text-align: center;
+  max-width: 480px;
+}
+
+.message-content h2 {
+  margin: 0 0 1.5rem;
+  color: var(--color-heading);
+}
+
+.message-content .button-row {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+}
+</style>

frontend/src/components/CredentialList.vue

@@ -6,10 +6,17 @@
       <div
         v-for="credential in credentials"
         :key="credential.credential_uuid"
-        :class="['credential-item', { 'current-session': credential.is_current_session }]"
+        :class="['credential-item', {
+          'current-session': credential.is_current_session && !hoveredCredentialUuid && !hoveredSessionCredentialUuid,
+          'is-hovered': hoveredCredentialUuid === credential.credential_uuid,
+          'is-linked-session': hoveredSessionCredentialUuid === credential.credential_uuid
+        }]"
+        tabindex="0"
+        @focusin="handleCredentialFocus(credential.credential_uuid)"
+        @focusout="handleCredentialBlur($event)"
       >
-        <div class="credential-header">
-          <div class="credential-icon">
+        <div class="item-top">
+          <div class="item-icon">
             <img
               v-if="getCredentialAuthIcon(credential)"
               :src="getCredentialAuthIcon(credential)"
@@ -20,31 +27,37 @@
             >
             <span v-else class="auth-emoji">🔑</span>
           </div>
-          <div class="credential-info">
-            <h4>{{ getCredentialAuthName(credential) }}</h4>
-          </div>
-          <div class="credential-dates">
-            <span class="date-label">Created:</span>
-            <span class="date-value">{{ formatDate(credential.created_at) }}</span>
-            <span class="date-label" v-if="credential.last_used">Last used:</span>
-            <span class="date-value" v-if="credential.last_used">{{ formatDate(credential.last_used) }}</span>
-          </div>
-          <div class="credential-actions" v-if="allowDelete">
+          <h4 class="item-title">{{ getCredentialAuthName(credential) }}</h4>
+          <div class="item-actions">
+            <span v-if="credential.is_current_session && !hoveredCredentialUuid && !hoveredSessionCredentialUuid" class="badge badge-current">Current</span>
+            <span v-else-if="hoveredCredentialUuid === credential.credential_uuid" class="badge badge-current">Selected</span>
+            <span v-else-if="hoveredSessionCredentialUuid === credential.credential_uuid" class="badge badge-current">Linked</span>
             <button
+              v-if="allowDelete"
               @click="$emit('delete', credential)"
-              class="btn-delete-credential"
+              class="btn-card-delete"
               :disabled="credential.is_current_session"
               :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey'"
             >🗑️</button>
           </div>
         </div>
+        <div class="item-details">
+          <div class="credential-dates">
+            <span class="date-label">Created:</span>
+            <span class="date-value">{{ formatDate(credential.created_at) }}</span>
+            <span class="date-label">Last used:</span>
+            <span class="date-value">{{ formatDate(credential.last_used) }}</span>
+            <span class="date-label">Last verified:</span>
+            <span class="date-value">{{ formatDate(credential.last_verified) }}</span>
+          </div>
+        </div>
       </div>
     </template>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { formatDate } from '@/utils/helpers'
 
 const props = defineProps({
@@ -52,8 +65,23 @@ const props = defineProps({
   aaguidInfo: { type: Object, default: () => ({}) },
   loading: { type: Boolean, default: false },
   allowDelete: { type: Boolean, default: false },
+  hoveredCredentialUuid: { type: String, default: null },
+  hoveredSessionCredentialUuid: { type: String, default: null },
 })
 
+const emit = defineEmits(['delete', 'credentialHover'])
+
+const handleCredentialFocus = (uuid) => {
+  emit('credentialHover', uuid)
+}
+
+const handleCredentialBlur = (event) => {
+  // Only clear if focus moved outside this element
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    emit('credentialHover', null)
+  }
+}
+
 const getCredentialAuthName = (credential) => {
   const info = props.aaguidInfo?.[credential.aaguid]
   return info ? info.name : 'Unknown Authenticator'
@@ -67,121 +95,3 @@ const getCredentialAuthIcon = (credential) => {
   return info[iconKey] || null
 }
 </script>
-
-<style scoped>
-.credential-list {
-  width: 100%;
-  margin-top: var(--space-sm);
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 1rem 1.25rem;
-  align-items: stretch;
-}
-
-.credential-item {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 0.85rem 1rem;
-  background: var(--color-surface);
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  width: 28rem;
-  height: 100%;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
-}
-
-.credential-item:hover {
-  border-color: var(--color-border-strong);
-  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
-  transform: translateY(-1px);
-}
-
-.credential-item.current-session {
-  border-color: var(--color-accent);
-  background: rgba(37, 99, 235, 0.08);
-}
-
-.credential-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  flex-wrap: wrap;
-  flex: 1 1 auto;
-}
-
-.credential-icon {
-  width: 40px;
-  height: 40px;
-  display: grid;
-  place-items: center;
-  background: var(--color-surface-subtle, transparent);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border);
-}
-
-.auth-icon {
-  border-radius: var(--radius-sm);
-}
-
-.credential-info {
-  flex: 1 1 150px;
-  min-width: 0;
-}
-
-.credential-info h4 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-heading);
-}
-
-.credential-dates {
-  display: grid;
-  grid-auto-flow: row;
-  grid-template-columns: auto 1fr;
-  gap: 0.35rem 0.5rem;
-  font-size: 0.75rem;
-  align-items: center;
-  color: var(--color-text-muted);
-}
-
-.date-label {
-  font-weight: 600;
-}
-
-.date-value {
-  color: var(--color-text);
-}
-
-.credential-actions {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-}
-
-.btn-delete-credential {
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 1rem;
-  color: var(--color-danger);
-  padding: 0.25rem 0.35rem;
-  border-radius: var(--radius-sm);
-}
-
-.btn-delete-credential:hover:not(:disabled) {
-  background: rgba(220, 38, 38, 0.08);
-}
-
-.btn-delete-credential:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-@media (max-width: 600px) {
-  .credential-list {
-    grid-template-columns: 1fr;
-  }
-}
-</style>

frontend/src/components/DeviceLinkView.vue

@@ -1,87 +1,46 @@
 <template>
-  <section class="view-root view-device-link">
-    <div class="view-content view-content--narrow">
-      <header class="view-header">
-        <h1>📱 Add Another Device</h1>
-        <p class="view-lede">Generate a one-time link to set up passkeys on a new device.</p>
-      </header>
-      <section class="section-block">
-        <div class="section-body">
-          <div class="device-link-section">
-            <div class="qr-container">
-              <a :href="url" class="qr-link" @click="copyLink">
-                <canvas ref="qrCanvas" class="qr-code"></canvas>
-                <p v-if="url">
-                  {{ url.replace(/^[^:]+:\/\//, '') }}
-                </p>
-                <p v-else>
-                  <em>Generating link...</em>
-                </p>
-              </a>
-              <p>
-                <strong>Scan and visit the URL on another device.</strong><br>
-                <small>⚠️ Expires in 24 hours and can only be used once.</small>
-              </p>
-            </div>
-          </div>
-          <div class="button-row">
-            <button @click="authStore.currentView = 'profile'" class="btn-secondary">
-              Back to Profile
-            </button>
-          </div>
-        </div>
-      </section>
+  <section class="view-root view-root--narrow view-device-link">
+    <header class="view-header">
+      <h1>📱 Add Another Device</h1>
+      <p class="view-lede">Generate a one-time link to set up passkeys on a new device.</p>
+    </header>
+    <RegistrationLinkModal
+      inline
+              :endpoint="'/auth/api/user/create-link'"
+      :user-name="userName"
+      :auto-copy="false"
+      :prefix-copy-with-user-name="!!userName"
+      show-close-in-inline
+      @copied="onCopied"
+    />
+    <div class="button-row" style="margin-top:1rem;">
+      <button @click="authStore.currentView = 'profile'" class="btn-secondary">Back to Profile</button>
     </div>
   </section>
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useAuthStore } from '@/stores/auth'
-import QRCode from 'qrcode/lib/browser'
+import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
 
 const authStore = useAuthStore()
-const url = ref(null)
-const qrCanvas = ref(null)
-
-const copyLink = async (event) => {
-  event.preventDefault()
-  if (url.value) {
-    await navigator.clipboard.writeText(url.value)
-    authStore.showMessage('Link copied to clipboard!')
-    authStore.currentView = 'profile'
-  }
-}
-
-async function drawQr() {
-  if (!url.value || !qrCanvas.value) return
-  await nextTick()
-  QRCode.toCanvas(qrCanvas.value, url.value, { scale: 8 }, (error) => {
-    if (error) console.error('Failed to generate QR code:', error)
-  })
+const userName = ref(null)
+const onCopied = () => {
+  authStore.showMessage('Link copied to clipboard!', 'success', 2500)
+  authStore.currentView = 'profile'
 }
 
 onMounted(async () => {
-  try {
-    const response = await fetch('/auth/api/create-link', { method: 'POST' })
-    const result = await response.json()
-    if (result.detail) throw new Error(result.detail)
-
-    url.value = result.url
-    await drawQr()
-  } catch (error) {
-    authStore.showMessage(`Failed to create device link: ${error.message}`, 'error')
-    authStore.currentView = 'profile'
-  }
+  // Extract optional admin-provided query parameters (?user=Name&emoji=😀)
+  const params = new URLSearchParams(location.search)
+  const qUser = params.get('user')
+  if (qUser) userName.value = qUser.trim()
 })
 
 </script>
 
 <style scoped>
-.view-content--narrow {
-  max-width: 540px;
-}
-
 .view-lede {
   margin: 0;
   color: var(--color-text-muted);

frontend/src/components/HostProfileView.vue

@@ -0,0 +1,121 @@
+<template>
+  <section class="view-root host-view" data-view="host-profile">
+    <header class="view-header">
+      <h1>{{ headingTitle }}</h1>
+      <p class="view-lede">{{ subheading }}</p>
+    </header>
+
+    <section class="section-block">
+      <div class="section-body">
+        <UserBasicInfo
+          v-if="user"
+          :name="user.user_name"
+          :visits="user.visits || 0"
+          :created-at="user.created_at"
+          :last-seen="user.last_seen"
+          :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">
+          <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>
+        </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>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import UserBasicInfo from '@/components/UserBasicInfo.vue'
+import { useAuthStore } from '@/stores/auth'
+import { goBack } from '@/utils/helpers'
+
+defineProps({
+  initializing: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const authStore = useAuthStore()
+const currentHost = window.location.host
+
+const user = computed(() => authStore.userInfo?.user || null)
+const orgDisplayName = computed(() => authStore.userInfo?.org?.display_name || '')
+const roleDisplayName = computed(() => authStore.userInfo?.role?.display_name || '')
+
+const headingTitle = computed(() => {
+  const service = authStore.settings?.rp_name
+  return service ? `${service} account` : 'Account overview'
+})
+
+const subheading = computed(() => {
+  return `You're signed in to ${currentHost}.`
+})
+
+const authSiteHost = computed(() => authStore.settings?.auth_host || '')
+const authSiteUrl = computed(() => {
+  const host = authSiteHost.value
+  if (!host) return ''
+  let path = authStore.settings?.ui_base_path ?? '/auth/'
+  if (!path.startsWith('/')) path = `/${path}`
+  if (!path.endsWith('/')) path = `${path}/`
+  const protocol = window.location.protocol || 'https:'
+  return `${protocol}//${host}${path}`
+})
+
+const goToAuthSite = () => {
+  if (!authSiteUrl.value) return
+  window.location.href = authSiteUrl.value
+}
+
+const logout = async () => {
+  await authStore.logout()
+}
+</script>
+
+<style scoped>
+.host-view { padding: 3rem 1.5rem 4rem; }
+.host-actions { display: flex; flex-direction: column; gap: 0.75rem; }
+.host-actions .button-row { gap: 0.75rem; flex-wrap: wrap; }
+.host-actions .button-row button { flex: 0 0 auto; }
+.note { margin: 0; color: var(--color-text-muted); }
+.empty-state { margin: 0; color: var(--color-text-muted); }
+@media (max-width: 600px) {
+  .host-actions .button-row { flex-direction: column; }
+  .host-actions .button-row button { width: 100%; }
+}
+</style>

frontend/src/components/LoadingView.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="loading-container">
+    <div class="loading-spinner"></div>
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: 'Loading...'
+  }
+})
+</script>
+
+<style scoped>
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  gap: 1rem;
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid var(--color-border);
+  border-top: 4px solid var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-container p {
+  color: var(--color-text-muted);
+  margin: 0;
+}
+</style>

frontend/src/components/LoginView.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="dialog-backdrop">
-    <div class="dialog-container">
-      <div class="dialog-content dialog-content--narrow">
-        <header class="view-header">
-          <h1>🔐 {{ (authStore.settings?.rp_name || location.origin)}}</h1>
-          <p class="view-lede">User authentication is required for access.</p>
-        </header>
-        <section class="section-block">
-          <form class="section-body" @submit.prevent="handleLogin">
-            <button
-              type="submit"
-              class="btn-primary"
-              :disabled="authStore.isLoading"
-            >
-              {{ authStore.isLoading ? 'Authenticating...' : 'Login with Your Device' }}
-            </button>
-          </form>
-        </section>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useAuthStore } from '@/stores/auth'
-
-const authStore = useAuthStore()
-
-const handleLogin = async () => {
-  try {
-    authStore.showMessage('Starting authentication...', 'info')
-    await authStore.authenticate()
-    authStore.showMessage('Authentication successful!', 'success', 2000)
-    authStore.currentView = 'profile'
-  } catch (error) {
-    authStore.showMessage(error.message, 'error')
-  }
-}
-</script>
-
-<style scoped>
-.view-lede {
-  margin: 0;
-  color: var(--color-text-muted);
-}
-
-.section-body {
-  gap: 1.5rem;
-}
-
-@media (max-width: 720px) {
-  button {
-    width: 100%;
-  }
-}
-</style>

frontend/src/components/Modal.vue

@@ -17,8 +17,9 @@ defineEmits(['close'])
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(.1rem);
+  background: transparent;
+  backdrop-filter: blur(.1rem) brightness(0.7);
+  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -80,7 +81,7 @@ defineEmits(['close'])
 .modal :deep(.modal-form textarea:focus) {
   outline: none;
   border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+  box-shadow: 0 0 0 2px #c7d2fe;
 }
 
 .modal :deep(.modal-actions) {
@@ -90,4 +91,4 @@ defineEmits(['close'])
   margin-top: var(--space-md);
   margin-bottom: var(--space-xs);
 }
-</style>
+</style>

frontend/src/components/ProfileView.vue

@@ -1,71 +1,95 @@
 <template>
   <section class="view-root" data-view="profile">
-    <div class="view-content">
-      <header class="view-header">
-        <h1>👋 Welcome!</h1>
-  <Breadcrumbs :entries="breadcrumbEntries" />
-        <p class="view-lede">Manage your account details and passkeys.</p>
-      </header>
+    <header class="view-header">
+      <h1>👋 Welcome!</h1>
+      <Breadcrumbs :entries="breadcrumbEntries" />
+      <p class="view-lede">Manage your account details and passkeys.</p>
+    </header>
 
-      <section class="section-block">
-        <UserBasicInfo
-          v-if="authStore.userInfo?.user"
-          :name="authStore.userInfo.user.user_name"
-          :visits="authStore.userInfo.user.visits || 0"
-          :created-at="authStore.userInfo.user.created_at"
-          :last-seen="authStore.userInfo.user.last_seen"
+    <section class="section-block">
+      <UserBasicInfo
+        v-if="authStore.userInfo?.user"
+        :name="authStore.userInfo.user.user_name"
+        :visits="authStore.userInfo.user.visits || 0"
+        :created-at="authStore.userInfo.user.created_at"
+        :last-seen="authStore.userInfo.user.last_seen"
+        :loading="authStore.isLoading"
+        update-endpoint="/auth/api/user/display-name"
+        @saved="authStore.loadUserInfo()"
+        @edit-name="openNameDialog"
+      />
+    </section>
+
+    <section class="section-block">
+      <div class="section-header">
+        <h2>Your Passkeys</h2>
+        <p class="section-description">Keep at least one trusted passkey so you can always sign in.</p>
+      </div>
+      <div class="section-body">
+        <CredentialList
+          :credentials="authStore.userInfo?.credentials || []"
+          :aaguid-info="authStore.userInfo?.aaguid_info || {}"
           :loading="authStore.isLoading"
-          update-endpoint="/auth/api/user/display-name"
-          @saved="authStore.loadUserInfo()"
-          @edit-name="openNameDialog"
+          :hovered-credential-uuid="hoveredCredentialUuid"
+          :hovered-session-credential-uuid="hoveredSession?.credential_uuid"
+          allow-delete
+          @delete="handleDelete"
+          @credential-hover="hoveredCredentialUuid = $event"
         />
-      </section>
-
-      <section class="section-block">
-        <div class="section-header">
-          <h2>Your Passkeys</h2>
-          <p class="section-description">Keep at least one trusted passkey so you can always sign in.</p>
-        </div>
-        <div class="section-body">
-          <CredentialList
-            :credentials="authStore.userInfo?.credentials || []"
-            :aaguid-info="authStore.userInfo?.aaguid_info || {}"
-            :loading="authStore.isLoading"
-            allow-delete
-            @delete="handleDelete"
-          />
-          <div class="button-row">
-            <button @click="addNewCredential" class="btn-primary">
-              Add New Passkey
-            </button>
-            <button @click="authStore.currentView = 'device-link'" class="btn-secondary">
-              Add Another Device
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <section class="section-block">
         <div class="button-row">
-          <button @click="logout" class="btn-danger logout-button">
-            Logout
-          </button>
+          <button @click="addNewCredential" class="btn-primary">Add New Passkey</button>
+          <button @click="showRegLink = true" class="btn-secondary">Add Another Device</button>
         </div>
-      </section>
+      </div>
+    </section>
 
-      <!-- Name Edit Dialog -->
-      <Modal v-if="showNameDialog" @close="showNameDialog = false">
-        <h3>Edit Display Name</h3>
-        <form @submit.prevent="saveName" class="modal-form">
-          <NameEditForm
-            label="Display Name"
-            v-model="newName"
-            :busy="saving"
-            @cancel="showNameDialog = false"
-          />
-        </form>
-      </Modal>
-    </div>
+    <SessionList
+      :sessions="sessions"
+      :terminating-sessions="terminatingSessions"
+      :hovered-credential-uuid="hoveredCredentialUuid"
+      @terminate="terminateSession"
+      @session-hover="hoveredSession = $event"
+      section-description="Review where you're signed in and end any sessions you no longer recognize."
+    />
+
+    <Modal v-if="showNameDialog" @close="showNameDialog = false">
+      <h3>Edit Display Name</h3>
+      <form @submit.prevent="saveName" class="modal-form">
+        <NameEditForm
+          label="Display Name"
+          v-model="newName"
+          :busy="saving"
+          @cancel="showNameDialog = false"
+        />
+      </form>
+    </Modal>
+
+    <section class="section-block">
+      <div class="button-row logout-row" :class="{ single: !hasMultipleSessions }">
+        <button
+          type="button"
+          class="btn-secondary"
+          @click="goBack"
+        >
+          Back
+        </button>
+        <button v-if="!hasMultipleSessions" @click="logoutEverywhere" class="btn-danger logout-button" :disabled="authStore.isLoading">Logout</button>
+        <template v-else>
+          <button @click="logout" class="btn-danger logout-button" :disabled="authStore.isLoading">Logout</button>
+          <button @click="logoutEverywhere" class="btn-danger logout-button" :disabled="authStore.isLoading">All</button>
+        </template>
+      </div>
+      <p class="logout-note" v-if="!hasMultipleSessions"><strong>Logout</strong> from {{ currentSessionHost }}.</p>
+      <p class="logout-note" v-else><strong>Logout</strong> this session on {{ currentSessionHost }}, or <strong>All</strong> sessions across all sites and devices for {{ rpName }}. You'll need to log in again with your passkey afterwards.</p>
+    </section>
+    <RegistrationLinkModal
+      v-if="showRegLink"
+              :endpoint="'/auth/api/user/create-link'"
+      :auto-copy="false"
+      :prefix-copy-with-user-name="false"
+      @close="showRegLink = false"
+      @copied="showRegLink = false; authStore.showMessage('Link copied to clipboard!', 'success', 2500)"
+    />
   </section>
 </template>
 
@@ -76,48 +100,41 @@ import CredentialList from '@/components/CredentialList.vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import Modal from '@/components/Modal.vue'
 import NameEditForm from '@/components/NameEditForm.vue'
+import SessionList from '@/components/SessionList.vue'
+import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
 import { useAuthStore } from '@/stores/auth'
+import { adminUiPath, makeUiHref } from '@/utils/settings'
 import passkey from '@/utils/passkey'
+import { goBack } from '@/utils/helpers'
+import { apiJson } from '@/utils/api'
 
 const authStore = useAuthStore()
 const updateInterval = ref(null)
 const showNameDialog = ref(false)
+const showRegLink = ref(false)
 const newName = ref('')
 const saving = ref(false)
+const hoveredCredentialUuid = ref(null)
+const hoveredSession = ref(null)
 
-watch(showNameDialog, (newVal) => {
-  if (newVal) {
-    newName.value = authStore.userInfo?.user?.user_name || ''
-  }
-})
+watch(showNameDialog, (newVal) => { if (newVal) newName.value = authStore.userInfo?.user?.user_name || '' })
 
 onMounted(() => {
-  updateInterval.value = setInterval(() => {
-    // Trigger Vue reactivity to update formatDate fields
-    if (authStore.userInfo) {
-      authStore.userInfo = { ...authStore.userInfo }
-    }
-  }, 60000) // Update every minute
+  updateInterval.value = setInterval(() => { if (authStore.userInfo) authStore.userInfo = { ...authStore.userInfo } }, 60000)
 })
 
-onUnmounted(() => {
-  if (updateInterval.value) {
-    clearInterval(updateInterval.value)
-  }
-})
+onUnmounted(() => { if (updateInterval.value) clearInterval(updateInterval.value) })
 
 const addNewCredential = async () => {
   try {
-    authStore.isLoading = true
-    authStore.showMessage('Adding new passkey...', 'info')
-    await passkey.register()
+    await passkey.register(null, null, () => {
+      authStore.showMessage('Adding new passkey...', 'info')
+    })
     await authStore.loadUserInfo()
     authStore.showMessage('New passkey added successfully!', 'success', 3000)
   } catch (error) {
     console.error('Failed to add new passkey:', error)
     authStore.showMessage(error.message, 'error')
-  } finally {
-    authStore.isLoading = false
   }
 }
 
@@ -128,80 +145,59 @@ const handleDelete = async (credential) => {
   try {
     await authStore.deleteCredential(credentialId)
     authStore.showMessage('Passkey deleted successfully!', 'success', 3000)
-  } catch (error) {
-    authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error')
+  } catch (error) { authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error') }
+}
+
+const rpName = computed(() => authStore.settings?.rp_name || 'this service')
+const sessions = computed(() => authStore.userInfo?.sessions || [])
+const currentSessionHost = computed(() => {
+  const currentSession = sessions.value.find(session => session.is_current)
+  return currentSession?.host || 'this host'
+})
+const terminatingSessions = ref({})
+
+const terminateSession = async (session) => {
+  const sessionId = session?.id
+  if (!sessionId) return
+  terminatingSessions.value = { ...terminatingSessions.value, [sessionId]: true }
+  try { await authStore.terminateSession(sessionId) }
+  catch (error) { authStore.showMessage(error.message || 'Failed to terminate session', 'error', 5000) }
+  finally {
+    const next = { ...terminatingSessions.value }
+    delete next[sessionId]
+    terminatingSessions.value = next
   }
 }
 
-const logout = async () => {
-  await authStore.logout()
-}
-
-const openNameDialog = () => {
-  newName.value = authStore.userInfo?.user?.user_name || ''
-  showNameDialog.value = true
-}
-
+const logoutEverywhere = async () => { await authStore.logoutEverywhere() }
+const logout = async () => { await authStore.logout() }
+const openNameDialog = () => { newName.value = authStore.userInfo?.user?.user_name || ''; showNameDialog.value = true }
 const isAdmin = computed(() => !!(authStore.userInfo?.is_global_admin || authStore.userInfo?.is_org_admin))
-
-const breadcrumbEntries = computed(() => {
-  const entries = [{ label: 'Auth', href: authStore.uiHref() }]
-  if (isAdmin.value) entries.push({ label: 'Admin', href: authStore.adminHomeHref() })
-  return entries
-})
+const hasMultipleSessions = computed(() => sessions.value.length > 1)
+const breadcrumbEntries = computed(() => { const entries = [{ label: 'Auth', href: makeUiHref() }]; if (isAdmin.value) entries.push({ label: 'Admin', href: adminUiPath() }); return entries })
 
 const saveName = async () => {
   const name = newName.value.trim()
-  if (!name) {
-    authStore.showMessage('Name cannot be empty', 'error')
-    return
-  }
+  if (!name) { authStore.showMessage('Name cannot be empty', 'error'); return }
   try {
     saving.value = true
-    const res = await fetch('/auth/api/user/display-name', {
-      method: 'PUT',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ display_name: name })
-    })
-    const data = await res.json()
-    if (!res.ok || data.detail) throw new Error(data.detail || 'Update failed')
-  showNameDialog.value = false
+    await apiJson('/auth/api/user/display-name', { method: 'PUT', body: { display_name: name } })
+    showNameDialog.value = false
     await authStore.loadUserInfo()
     authStore.showMessage('Name updated successfully!', 'success', 3000)
-  } catch (e) {
-    authStore.showMessage(e.message || 'Failed to update name', 'error')
-  } finally {
-    saving.value = false
-  }
+  } catch (e) { authStore.showMessage(e.message || 'Failed to update name', 'error') }
+  finally { saving.value = false }
 }
 </script>
 
 <style scoped>
-.view-lede {
-  margin: 0;
-  color: var(--color-text-muted);
-  font-size: 1rem;
-}
-
-.section-header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.section-description {
-  margin: 0;
-  color: var(--color-text-muted);
-}
-
-.logout-button {
-  align-self: flex-start;
-}
-
-@media (max-width: 720px) {
-  .logout-button {
-    width: 100%;
-  }
-}
+.view-lede { margin: 0; color: var(--color-text-muted); font-size: 1rem; }
+.section-header { display: flex; flex-direction: column; gap: 0.4rem; }
+.section-description { margin: 0; color: var(--color-text-muted); }
+.empty-state { margin: 0; color: var(--color-text-muted); text-align: center; padding: 1rem 0; }
+.logout-button { align-self: flex-start; }
+.logout-row { gap: 1rem; }
+.logout-row.single { justify-content: flex-start; }
+.logout-note { margin: 0.75rem 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
+@media (max-width: 720px) { .logout-button { width: 100%; } }
 </style>
-

frontend/src/components/RegistrationLinkModal.vue

@@ -1,29 +1,54 @@
 <template>
-  <div class="dialog-overlay" @keydown.esc.prevent="$emit('close')">
+  <div v-if="!inline && url" class="dialog-overlay" @keydown.esc.prevent="$emit('close')">
     <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
-      <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
-        <h2 id="regTitle" style="margin:0; font-size:1.25rem;">📱 Device Registration Link</h2>
+      <div class="reg-header-row">
+        <h2 id="regTitle" class="reg-title">
+          📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Device Registration Link</span>
+        </h2>
         <button class="icon-btn" @click="$emit('close')" aria-label="Close">❌</button>
       </div>
       <div class="device-link-section">
         <div class="qr-container">
-          <a v-if="url" :href="url" @click.prevent="copy" class="qr-link">
+          <a :href="url" @click.prevent="copy" class="qr-link">
             <canvas ref="qrCanvas" class="qr-code"></canvas>
             <p>{{ displayUrl }}</p>
           </a>
-          <div v-else>
-            <em>Generating link...</em>
-          </div>
-          <p>
-            <strong>Scan and visit the URL on another device.</strong><br>
-            <small>⚠️ Expires in 24 hours and one-time use.</small>
+          <p class="reg-help">
+            <span v-if="userName">The user should open this link on the device where they want to register.</span>
+            <span v-else>Open or scan this link on the device you wish to register to your account.</span>
+            <br><small>{{ expirationMessage }}</small>
           </p>
-          <div v-if="expires" style="font-size:12px; margin-top:6px;">Expires: {{ new Date(expires).toLocaleString() }}</div>
         </div>
       </div>
-      <div style="display:flex; justify-content:flex-end; gap:.5rem; margin-top:10px;">
+      <div class="reg-actions">
         <button class="btn-secondary" @click="$emit('close')">Close</button>
-        <button class="btn-primary" :disabled="!url" @click="copy">Copy Link</button>
+        <button class="btn-primary" @click="copy">Copy Link</button>
+      </div>
+    </div>
+  </div>
+  <div v-else-if="inline && url" class="registration-inline-wrapper">
+    <div class="registration-inline-block section-block">
+      <div class="section-header">
+        <h2 class="inline-heading">📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Device Registration Link</span></h2>
+      </div>
+      <div class="section-body">
+        <div class="device-link-section">
+          <div class="qr-container">
+            <a :href="url" @click.prevent="copy" class="qr-link">
+              <canvas ref="qrCanvas" class="qr-code"></canvas>
+              <p>{{ displayUrl }}</p>
+            </a>
+            <p class="reg-help">
+              <span v-if="userName">The user should open this link on the device where they want to register.</span>
+              <span v-else>Open this link on the device you wish to connect with.</span>
+              <br><small>{{ expirationMessage }}</small>
+            </p>
+          </div>
+        </div>
+        <div class="button-row" style="margin-top:1rem;">
+          <button class="btn-primary" @click="copy">Copy Link</button>
+          <button v-if="showCloseInInline" class="btn-secondary" @click="$emit('close')">Close</button>
+        </div>
       </div>
     </div>
   </div>
@@ -32,10 +57,19 @@
 <script setup>
 import { ref, onMounted, watch, computed, nextTick } from 'vue'
 import QRCode from 'qrcode/lib/browser'
+import { formatDate } from '@/utils/helpers'
+import { useAuthStore } from '@/stores/auth'
+import { apiJson, getUserFriendlyErrorMessage, shouldShowErrorToast } from '@/utils/api'
+
+const authStore = useAuthStore()
 
 const props = defineProps({
-  endpoint: { type: String, required: true }, // POST endpoint returning {url, expires}
-  autoCopy: { type: Boolean, default: true }
+  endpoint: { type: String, required: true },
+  autoCopy: { type: Boolean, default: true },
+  userName: { type: String, default: null },
+  inline: { type: Boolean, default: false },
+  showCloseInInline: { type: Boolean, default: false },
+  prefixCopyWithUserName: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['close','generated','copied'])
@@ -46,11 +80,14 @@ const qrCanvas = ref(null)
 
 const displayUrl = computed(() => url.value ? url.value.replace(/^[^:]+:\/\//,'') : '')
 
+const expirationMessage = computed(() => {
+  const timeStr = formatDate(expires.value)
+  return `⚠️ Expires ${timeStr.startsWith('In ') ? timeStr.substring(3) : timeStr} and can only be used once.`
+})
+
 async function fetchLink() {
   try {
-    const res = await fetch(props.endpoint, { method: 'POST' })
-    const data = await res.json()
-    if (data.detail) throw new Error(data.detail)
+    const data = await apiJson(props.endpoint, { method: 'POST' })
     url.value = data.url
     expires.value = data.expires
     emit('generated', { url: data.url, expires: data.expires })
@@ -58,9 +95,12 @@ async function fetchLink() {
     drawQR()
     if (props.autoCopy) copy()
   } catch (e) {
-    url.value = null
-    expires.value = null
     console.error('Failed to create link', e)
+    if (shouldShowErrorToast(e)) {
+      authStore.showMessage(getUserFriendlyErrorMessage(e), 'error', 4000)
+    }
+    // Close the dialog on any error (auth cancelled, network error, etc.)
+    emit('close')
   }
 }
 
@@ -73,15 +113,35 @@ async function drawQR() {
 
 async function copy() {
   if (!url.value) return
-  try { await navigator.clipboard.writeText(url.value); emit('copied', url.value); emit('close') } catch (_) { /* ignore */ }
+  let text = url.value
+  if (props.prefixCopyWithUserName && props.userName) {
+    text = `${props.userName} ${text}`
+  }
+  try {
+    await navigator.clipboard.writeText(text)
+    emit('copied', text)
+    if (!props.inline) emit('close')
+  } catch (_) {
+    /* ignore */
+  }
 }
 
 onMounted(fetchLink)
 watch(url, () => drawQR(), { flush: 'post' })
+
 </script>
 <style scoped>
 .icon-btn { background:none; border:none; cursor:pointer; font-size:1rem; opacity:.6; }
 .icon-btn:hover { opacity:1; }
 /* Minimal extra styling; main look comes from global styles */
 .qr-link { text-decoration:none; color:inherit; }
+.reg-header-row { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.75rem; }
+.reg-title { margin:0; font-size:1.25rem; font-weight:600; }
+.device-dialog { background: var(--color-surface); padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius-md); max-width:480px; width:100%; box-shadow:0 6px 28px rgba(0,0,0,.25); }
+.qr-container { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
+.qr-code { display:block; }
+.reg-help { margin-top:.5rem; margin-bottom:.75rem; font-size:.85rem; line-height:1.25rem; text-align:center; }
+.reg-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.25rem; }
+.registration-inline-block .qr-container { align-items:flex-start; }
+.registration-inline-block .reg-help { text-align:left; }
 </style>

frontend/src/components/RestrictedAuth.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="app-shell">
+    <div v-if="status.show" class="global-status" style="display: block;">
+      <div :class="['status', status.type]">
+        {{ status.message }}
+      </div>
+    </div>
+
+    <main class="view-root">
+      <div v-if="!initializing" class="surface surface--tight">
+        <header class="view-header center">
+          <h1>{{ headingTitle }}</h1>
+          <p v-if="isAuthenticated" class="user-line">👤 {{ userDisplayName }}</p>
+          <p class="view-lede">{{ headerMessage }}</p>
+        </header>
+
+        <section class="section-block">
+          <div class="section-body center">
+            <div class="button-row center">
+              <slot name="actions"
+                :loading="loading"
+                :can-authenticate="canAuthenticate"
+                :is-authenticated="isAuthenticated"
+                :authenticate="authenticateUser"
+                :logout="logoutUser"
+                :mode="mode">
+                <!-- Default actions -->
+                <button class="btn-secondary" :disabled="loading" @click="$emit('back')">Back</button>
+                <button v-if="canAuthenticate" class="btn-primary" :disabled="loading" @click="authenticateUser">
+                  {{ loading ? (mode === 'reauth' ? 'Verifying…' : 'Signing in…') : (mode === 'reauth' ? 'Verify' : 'Login') }}
+                </button>
+                <button v-if="isAuthenticated && mode !== 'reauth'" class="btn-danger" :disabled="loading" @click="logoutUser">Logout</button>
+                <button v-if="isAuthenticated && mode !== 'reauth'" class="btn-primary" :disabled="loading" @click="openProfile">Profile</button>
+              </slot>
+            </div>
+          </div>
+        </section>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import passkey from '@/utils/passkey'
+import { getSettings } from '@/utils/settings'
+import { fetchJson, getUserFriendlyErrorMessage } from '@/utils/api'
+
+const props = defineProps({
+  mode: {
+    type: String,
+    default: 'login',
+    validator: (value) => ['login', 'reauth', 'forbidden'].includes(value)
+  }
+})
+
+const emit = defineEmits(['authenticated', 'forbidden', 'logout', 'back', 'home', 'auth-error'])
+
+const status = reactive({ show: false, message: '', type: 'info' })
+const initializing = ref(true)
+const loading = ref(false)
+const settings = ref(null)
+const userInfo = ref(null)
+const currentView = ref('initial') // 'initial', 'login', 'forbidden'
+let statusTimer = null
+
+const isAuthenticated = computed(() => !!userInfo.value?.authenticated)
+
+const canAuthenticate = computed(() => {
+  if (initializing.value) return false
+  // In reauth mode, allow authentication even if already authenticated
+  if (props.mode === 'reauth') return true
+  // In forbidden view (authenticated but lacking permissions), don't allow authentication
+  if (currentView.value === 'forbidden') return false
+  // In login view or initial state, allow authentication
+  return true
+})
+
+const headingTitle = computed(() => {
+  if (props.mode === 'reauth') {
+    return `🔐 Additional Authentication`
+  }
+  if (currentView.value === 'forbidden') return '🚫 Forbidden'
+  return `🔐 ${settings.value?.rp_name || location.origin}`
+})
+
+const headerMessage = computed(() => {
+  if (props.mode === 'reauth') {
+    return 'Please verify your identity to continue with this action.'
+  }
+  if (currentView.value === 'forbidden') {
+    return 'You lack the required permissions.'
+  }
+  return 'Please sign in with your passkey.'
+})
+
+const userDisplayName = computed(() => userInfo.value?.user?.user_name || 'User')
+
+function showMessage(message, type = 'info', duration = 3000) {
+  status.show = true
+  status.message = message
+  status.type = type
+  if (statusTimer) clearTimeout(statusTimer)
+  if (duration > 0) statusTimer = setTimeout(() => { status.show = false }, duration)
+}
+
+async function fetchSettings() {
+  try {
+    const data = await getSettings()
+    settings.value = data
+    if (data?.rp_name) {
+      const titleSuffix = props.mode === 'reauth'
+        ? 'Verify Identity'
+        : (isAuthenticated.value ? 'Forbidden' : 'Sign In')
+      document.title = `${data.rp_name} · ${titleSuffix}`
+    }
+  } catch (error) {
+    console.warn('Unable to load settings', error)
+  }
+}
+
+async function fetchUserInfo() {
+  try {
+    userInfo.value = await fetchJson('/auth/api/user-info', { method: 'POST' })
+    // Determine view based on authentication status
+    if (isAuthenticated.value && props.mode !== 'reauth') {
+      currentView.value = 'forbidden'
+      emit('forbidden', userInfo.value)
+    } else {
+      currentView.value = 'login'
+    }
+  } catch (error) {
+    console.error('Failed to load user info', error)
+    // For 401/403 just go to login, for other errors show message
+    if (error.status !== 401 && error.status !== 403) {
+      showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
+    }
+    userInfo.value = null
+    currentView.value = 'login'
+  }
+}
+
+async function authenticateUser() {
+  if (!canAuthenticate.value || loading.value) return
+  loading.value = true
+  showMessage('Starting authentication…', 'info')
+  let result
+  try { result = await passkey.authenticate() } catch (error) {
+    loading.value = false
+    const message = error?.message || 'Passkey authentication cancelled'
+    const cancelled = message === 'Passkey authentication cancelled'
+    showMessage(message, cancelled ? 'info' : 'error', 4000)
+    emit('auth-error', { message, cancelled })
+    return
+  }
+  try { await setSessionCookie(result) } catch (error) {
+    loading.value = false
+    const message = error?.message || 'Failed to establish session'
+    showMessage(message, 'error', 4000)
+    emit('auth-error', { message, cancelled: false })
+    return
+  }
+  loading.value = false
+  emit('authenticated', result)
+}
+
+async function logoutUser() {
+  if (loading.value) return
+  loading.value = true
+  try {
+    await fetchJson('/auth/api/logout', { method: 'POST' })
+    userInfo.value = null
+    // Switch to login view after logout
+    currentView.value = 'login'
+    showMessage('Logged out. You can sign in with a different account.', 'info', 3000)
+  } catch (error) {
+    showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
+  }
+  finally { loading.value = false }
+  emit('logout')
+}
+
+function openProfile() {
+  // Open profile in a new window with a specific name to reuse the same tab
+  const profileWindow = window.open('/auth/', 'passkey_auth_profile')
+  if (profileWindow) profileWindow.focus()
+}
+
+async function setSessionCookie(result) {
+  if (!result?.session_token) {
+    console.error('setSessionCookie called with missing session_token:', result)
+    throw new Error('Authentication response missing session_token')
+  }
+  return await fetchJson('/auth/api/set-session', {
+    method: 'POST', headers: { Authorization: `Bearer ${result.session_token}` }
+  })
+}
+
+onMounted(async () => {
+  await fetchSettings()
+  await fetchUserInfo()
+  initializing.value = false
+})
+
+defineExpose({
+  showMessage,
+  isAuthenticated,
+  userInfo
+})
+</script>
+
+<style scoped>
+.button-row.center { display: flex; justify-content: center; gap: 0.75rem; }
+.user-line { margin: 0.5rem 0 0; font-weight: 500; color: var(--color-text); }
+/* Vertically center the restricted "dialog" surface in the viewport */
+main.view-root { 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>

frontend/src/components/SessionList.vue

@@ -0,0 +1,206 @@
+<template>
+  <section class="section-block" data-component="session-list-section">
+    <div class="section-header">
+      <h2>Active Sessions</h2>
+      <p class="section-description">{{ sectionDescription }}</p>
+    </div>
+    <div class="section-body">
+      <div :class="['session-list']">
+        <template v-if="Array.isArray(sessions) && sessions.length">
+          <div v-for="(group, host) in groupedSessions" :key="host" class="session-group">
+            <h3 :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
+              <template v-if="host"><a :href="hostUrl(host)">🌐 {{ host }}</a></template>
+              <template v-else>🌐 Unbound host</template>
+            </h3>
+            <div class="session-group-sessions">
+              <div
+                v-for="session in group.sessions"
+                :key="session.id"
+                :class="['session-item', {
+                  'is-current': session.is_current && !hoveredIp && !hoveredCredentialUuid,
+                  'is-hovered': hoveredSession?.id === session.id,
+                  'is-linked-credential': hoveredCredentialUuid === session.credential_uuid
+                }]"
+                tabindex="0"
+                @focusin="handleSessionFocus(session)"
+                @focusout="handleSessionBlur($event)"
+              >
+                <div class="item-top">
+                  <h4 class="item-title">{{ session.user_agent }}</h4>
+                  <div class="item-actions">
+                    <span v-if="session.is_current && !hoveredIp && !hoveredCredentialUuid" class="badge badge-current">Current</span>
+                    <span v-else-if="hoveredSession?.id === session.id" class="badge badge-current">Selected</span>
+                    <span v-else-if="hoveredCredentialUuid === session.credential_uuid" class="badge badge-current">Linked</span>
+                    <span v-else-if="!hoveredCredentialUuid && isSameNetwork(session.ip)" class="badge">Same IP</span>
+                    <button
+                      @click="$emit('terminate', session)"
+                      class="btn-card-delete"
+                      :disabled="isTerminating(session.id)"
+                      :title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
+                    >🗑️</button>
+                  </div>
+                </div>
+                <div class="item-details">
+                  <div class="session-dates">
+                    <span class="date-label">{{ formatDate(session.last_renewed) }}</span>
+                    <span class="date-value">{{ session.ip }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+        <div v-else class="empty-state"><p>{{ emptyMessage }}</p></div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { formatDate } from '@/utils/helpers'
+
+const props = defineProps({
+  sessions: { type: Array, default: () => [] },
+  emptyMessage: { type: String, default: 'You currently have no other active sessions.' },
+  sectionDescription: { type: String, default: "Review where you're signed in and end any sessions you no longer recognize." },
+  terminatingSessions: { type: Object, default: () => ({}) },
+  hoveredCredentialUuid: { type: String, default: null },
+})
+
+const emit = defineEmits(['terminate', 'sessionHover'])
+
+const hoveredIp = ref(null)
+const hoveredSession = ref(null)
+
+const handleSessionFocus = (session) => {
+  hoveredSession.value = session
+  hoveredIp.value = session.ip || null
+  emit('sessionHover', session)
+}
+
+const handleSessionBlur = (event) => {
+  // Only clear if focus moved outside this element
+  if (!event.currentTarget.contains(event.relatedTarget)) {
+    hoveredSession.value = null
+    hoveredIp.value = null
+    emit('sessionHover', null)
+  }
+}
+
+const isTerminating = (sessionId) => !!props.terminatingSessions[sessionId]
+
+const hostUrl = (host) => {
+  // Assume http if there's a port number, https otherwise
+  const protocol = host.includes(':') ? 'http' : 'https'
+  return `${protocol}://${host}`
+}
+
+// Extract /64 prefix for IPv6, or return full IP for IPv4
+const getNetworkPrefix = ip => {
+  if (!ip) return null
+
+  // IPv4?
+  if (!ip.includes(':')) return ip
+
+  // Normalize IPv6 using URL
+  // Wrap in brackets so URL accepts it
+  const norm = new URL(`http://[${ip}]/`).hostname
+
+  // norm is now fully expanded, e.g. "2001:0db8:0000:0000:0000:0000:0000:0001"
+  const parts = norm.split(':')
+  return parts.slice(0, 4).join(':')
+}
+
+const currentNetworkPrefix = computed(() => {
+  // Use hovered IP if available, otherwise fall back to current session
+  if (hoveredIp.value) return getNetworkPrefix(hoveredIp.value)
+  const current = props.sessions.find(s => s.is_current)
+  return current ? getNetworkPrefix(current.ip) : null
+})
+
+const isSameNetwork = (ip) => {
+  if (!currentNetworkPrefix.value || !ip) return false
+  return getNetworkPrefix(ip) === currentNetworkPrefix.value
+}
+
+const groupedSessions = computed(() => {
+  const groups = {}
+  for (const session of props.sessions) {
+    const host = session.host || ''
+    if (!groups[host]) {
+      groups[host] = { sessions: [], isCurrentSite: false }
+    }
+    groups[host].sessions.push(session)
+    if (session.is_current_host) {
+      groups[host].isCurrentSite = true
+    }
+  }
+  // Sort sessions within each group by last_renewed descending
+  for (const host in groups) {
+    groups[host].sessions.sort((a, b) => new Date(b.last_renewed) - new Date(a.last_renewed))
+  }
+  // Sort groups by host name (natural sort)
+  const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' })
+  const sortedHosts = Object.keys(groups).sort(collator.compare)
+  const sortedGroups = {}
+  for (const host of sortedHosts) {
+    sortedGroups[host] = groups[host]
+  }
+  return sortedGroups
+})
+</script>
+
+<style>
+.session-meta-info {
+  grid-column: span 2;
+}
+[data-component="session-list-section"] .session-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5em;
+}
+.session-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+.session-group-host {
+  font-size: 1em;
+  font-weight: 600;
+  margin: 0;
+}
+.session-group-host a {
+  color: inherit;
+  text-decoration: none;
+}
+.session-group-host a:hover {
+  text-decoration: underline;
+}
+.session-group-host.is-current-site {
+  color: var(--color-accent);
+}
+.session-group-sessions {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
+  gap: 0.5em;
+  align-items: start;
+}
+.session-group-sessions .session-item {
+  width: auto;
+  height: auto;
+  padding: 0.75rem;
+  gap: 0.5rem;
+}
+.session-group-sessions .session-item .item-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-group-sessions .session-item .item-details {
+  margin-left: 0;
+}
+.session-group-sessions .session-item .session-dates {
+  grid-template-columns: auto 1fr;
+}
+</style>

frontend/src/restricted/RestrictedApp.vue

@@ -1,207 +0,0 @@
-<template>
-  <div class="app-shell">
-    <div v-if="status.show" class="global-status" style="display: block;">
-      <div :class="['status', status.type]">
-        {{ status.message }}
-      </div>
-    </div>
-
-    <main class="view-root">
-      <div class="view-content">
-        <div class="surface surface--tight" style="max-width: 520px; margin: 0 auto; width: 100%;">
-          <header class="view-header" style="text-align: center;">
-            <h1>🚫 Access Restricted</h1>
-            <p class="view-lede">{{ headerMessage }}</p>
-          </header>
-
-          <section class="section-block" v-if="initializing">
-            <div class="section-body center">
-              <p>Checking your session…</p>
-            </div>
-          </section>
-
-          <section class="section-block" v-else>
-            <div class="section-body center" style="gap: 1.75rem;">
-              <p>{{ detailText }}</p>
-
-              <div class="button-row center" style="justify-content: center;">
-                <button v-if="canAuthenticate" class="btn-primary" :disabled="loading" @click="authenticateUser">
-                  {{ loading ? 'Signing in…' : 'Sign in with Passkey' }}
-                </button>
-                <button class="btn-secondary" :disabled="loading" @click="returnHome">
-                  Go back to Auth Home
-                </button>
-              </div>
-            </div>
-          </section>
-        </div>
-      </div>
-    </main>
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
-import passkey from '@/utils/passkey'
-
-const status = reactive({
-  show: false,
-  message: '',
-  type: 'info'
-})
-
-const initializing = ref(true)
-const loading = ref(false)
-const settings = ref(null)
-const userInfo = ref(null)
-const fallbackDetail = ref('')
-let statusTimer = null
-
-const isAuthenticated = computed(() => !!userInfo.value?.authenticated)
-const canAuthenticate = computed(() => !initializing.value && !isAuthenticated.value)
-const uiBasePath = computed(() => {
-  const base = settings.value?.ui_base_path || '/auth/'
-  if (base === '/') return '/'
-  return base.endsWith('/') ? base : `${base}/`
-})
-
-const headerMessage = computed(() => {
-  if (initializing.value) return 'Checking your access permissions…'
-  if (isAuthenticated.value) {
-    return 'Your account is signed in, but this resource needs extra permissions.'
-  }
-  return 'Sign in to continue to the requested resource.'
-})
-
-const detailText = computed(() => {
-  if (isAuthenticated.value) {
-    return fallbackDetail.value || 'You do not have the required permissions to view this page.'
-  }
-  return fallbackDetail.value || 'Use your registered passkey to sign in securely.'
-})
-
-function showMessage(message, type = 'info', duration = 3000) {
-  status.show = true
-  status.message = message
-  status.type = type
-  if (statusTimer) clearTimeout(statusTimer)
-  if (duration > 0) {
-    statusTimer = setTimeout(() => {
-      status.show = false
-    }, duration)
-  }
-}
-
-async function fetchSettings() {
-  try {
-    const res = await fetch('/auth/api/settings')
-    if (!res.ok) return
-    const data = await res.json()
-    settings.value = data
-    if (data?.rp_name) {
-      document.title = `${data.rp_name} · Access Restricted`
-    }
-  } catch (error) {
-    console.warn('Unable to load settings', error)
-  }
-}
-
-async function fetchUserInfo() {
-  try {
-    const res = await fetch('/auth/api/user-info', { method: 'POST' })
-    if (!res.ok) {
-      const payload = await safeParseJson(res)
-      fallbackDetail.value = payload?.detail || 'Please sign in to continue.'
-      return
-    }
-    userInfo.value = await res.json()
-  } catch (error) {
-    console.error('Failed to load user info', error)
-    fallbackDetail.value = 'We were unable to verify your session. Try again shortly.'
-  }
-}
-
-async function authenticateUser() {
-  if (!canAuthenticate.value || loading.value) return
-  loading.value = true
-  showMessage('Starting authentication…', 'info')
-
-  let result
-  try {
-    result = await passkey.authenticate()
-  } catch (error) {
-    loading.value = false
-    const message = error?.message || 'Passkey authentication cancelled'
-    const cancelled = message === 'Passkey authentication cancelled'
-    showMessage(cancelled ? message : `Authentication failed: ${message}`, cancelled ? 'info' : 'error', 4000)
-    return
-  }
-
-  try {
-    await setSessionCookie(result.session_token)
-  } catch (error) {
-    loading.value = false
-    const message = error?.message || 'Failed to establish session'
-    showMessage(message, 'error', 4000)
-    return
-  }
-
-  showMessage('Signed in successfully!', 'success', 2000)
-  setTimeout(() => {
-    loading.value = false
-    window.location.reload()
-  }, 800)
-}
-
-async function setSessionCookie(sessionToken) {
-  const response = await fetch('/auth/api/set-session', {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${sessionToken}`
-    }
-  })
-  const payload = await safeParseJson(response)
-  if (!response.ok || payload?.detail) {
-    const detail = payload?.detail || 'Session could not be established.'
-    throw new Error(detail)
-  }
-  return payload
-}
-
-function returnHome() {
-  const target = uiBasePath.value || '/auth/'
-  if (window.location.pathname !== target) {
-    history.replaceState(null, '', target)
-  }
-  window.location.href = target
-}
-
-async function safeParseJson(response) {
-  try {
-    return await response.json()
-  } catch (error) {
-    return null
-  }
-}
-
-onMounted(async () => {
-  await fetchSettings()
-  await fetchUserInfo()
-  if (!canAuthenticate.value && !isAuthenticated.value && !fallbackDetail.value) {
-    fallbackDetail.value = 'Please try signing in again.'
-  }
-  initializing.value = false
-})
-</script>
-
-<style scoped>
-.center {
-  text-align: center;
-}
-
-.button-row.center {
-  display: flex;
-  justify-content: center;
-  gap: 0.75rem;
-}
-</style>

frontend/src/restricted/main.js

@@ -1,5 +0,0 @@
-import { createApp } from 'vue'
-import RestrictedApp from './RestrictedApp.vue'
-import '@/assets/style.css'
-
-createApp(RestrictedApp).mount('#app')

frontend/src/stores/auth.js

@@ -1,13 +1,17 @@
 import { defineStore } from 'pinia'
 import { register, authenticate } from '@/utils/passkey'
+import { getSettings } from '@/utils/settings'
+import { apiJson } from '@/utils/api'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
     // Auth State
-    userInfo: null, // Contains the full user info response: {user, credentials, aaguid_info, session_type, authenticated}
-    settings: null, // Server provided settings (/auth/settings)
+    userInfo: null, // Contains the full user info response: {user, credentials, aaguid_info}
     isLoading: false,
 
+    // Settings
+    settings: null,
+
     // UI State
     currentView: 'login',
     status: {
@@ -17,15 +21,6 @@ export const useAuthStore = defineStore('auth', {
     },
   }),
   getters: {
-    uiBasePath(state) {
-      const configured = state.settings?.ui_base_path || '/auth/'
-      if (!configured.endsWith('/')) return `${configured}/`
-      return configured
-    },
-    adminUiPath() {
-      const base = this.uiBasePath
-      return base === '/' ? '/admin/' : `${base}admin/`
-    },
   },
   actions: {
     setLoading(flag) {
@@ -43,31 +38,21 @@ export const useAuthStore = defineStore('auth', {
         }, duration)
       }
     },
-    uiHref(suffix = '') {
-      const trimmed = suffix.startsWith('/') ? suffix.slice(1) : suffix
-      if (!trimmed) return this.uiBasePath
-      if (this.uiBasePath === '/') return `/${trimmed}`
-      return `${this.uiBasePath}${trimmed}`
-    },
-    adminHomeHref() {
-      return this.adminUiPath
-    },
-    async setSessionCookie(sessionToken) {
-      const response = await fetch('/auth/api/set-session', {
-        method: 'POST',
-        headers: {'Authorization': `Bearer ${sessionToken}`},
-      })
-      const result = await response.json()
-      if (result.detail) {
-        throw new Error(result.detail)
+    async setSessionCookie(result) {
+      if (!result?.session_token) {
+        console.error('setSessionCookie called with missing session_token:', result)
+        throw new Error('Authentication response missing session_token')
       }
-      return result
+      return await apiJson('/auth/api/set-session', {
+        method: 'POST',
+        headers: {'Authorization': `Bearer ${result.session_token}`},
+      })
     },
     async register() {
       this.isLoading = true
       try {
         const result = await register()
-        await this.setSessionCookie(result.session_token)
+        await this.setSessionCookie(result)
         await this.loadUserInfo()
         this.selectView()
         return result
@@ -80,7 +65,7 @@ export const useAuthStore = defineStore('auth', {
       try {
         const result = await authenticate()
 
-        await this.setSessionCookie(result.session_token)
+        await this.setSessionCookie(result)
         await this.loadUserInfo()
         this.selectView()
 
@@ -91,57 +76,68 @@ export const useAuthStore = defineStore('auth', {
     },
     selectView() {
       if (!this.userInfo) this.currentView = 'login'
-      else if (this.userInfo.authenticated) this.currentView = 'profile'
-      else this.currentView = 'login'
-    },
-    async loadUserInfo() {
-      const response = await fetch('/auth/api/user-info', { method: 'POST' })
-      let result = null
-      try {
-        result = await response.json()
-      } catch (_) {
-        // ignore JSON parse errors (unlikely)
-      }
-      if (response.status === 401 && result?.detail) {
-        this.showMessage(result.detail, 'error', 5000)
-        throw new Error(result.detail)
-      }
-      if (result?.detail) {
-        // Other error style
-        this.showMessage(result.detail, 'error', 5000)
-        throw new Error(result.detail)
-      }
-      this.userInfo = result
-      console.log('User info loaded:', result)
+      else this.currentView = 'profile'
     },
     async loadSettings() {
+      this.settings = await getSettings()
+    },
+    async loadUserInfo() {
       try {
-  const res = await fetch('/auth/api/settings')
-        if (!res.ok) return
-        const data = await res.json()
-        this.settings = data
-        if (data?.rp_name) {
-          document.title = data.rp_name
+        this.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
+        console.log('User info loaded:', this.userInfo)
+      } catch (error) {
+        // Suppress toast for 401/403 errors - the auth iframe will handle these
+        if (error.status === 401 || error.status === 403) {
+          console.log('Authentication required:', error.message)
+        } else {
+          this.showMessage(error.message || 'Failed to load user info', 'error', 5000)
         }
-      } catch (_) {
-        // ignore
+        throw error
       }
     },
     async deleteCredential(uuid) {
-  const response = await fetch(`/auth/api/credential/${uuid}`, {method: 'Delete'})
-      const result = await response.json()
-      if (result.detail) throw new Error(`Server: ${result.detail}`)
-
+      await apiJson(`/auth/api/user/credential/${uuid}`, { method: 'DELETE' })
       await this.loadUserInfo()
     },
+    async terminateSession(sessionId) {
+      try {
+        const payload = await apiJson(`/auth/api/user/session/${sessionId}`, { method: 'DELETE' })
+        if (payload?.current_session_terminated) {
+          sessionStorage.clear()
+          location.reload()
+          return
+        }
+        await this.loadUserInfo()
+        this.showMessage('Session terminated', 'success', 2500)
+      } catch (error) {
+        console.error('Terminate session error:', error)
+        throw error
+      }
+    },
     async logout() {
       try {
-        await fetch('/auth/api/logout', {method: 'POST'})
+        await apiJson('/auth/api/logout', {method: 'POST'})
         sessionStorage.clear()
         location.reload()
       } catch (error) {
         console.error('Logout error:', error)
-        this.showMessage(error.message, 'error')
+        // Suppress toast for 401/403 errors - the auth iframe will handle these
+        if (error.status !== 401 && error.status !== 403) {
+          this.showMessage(error.message, 'error')
+        }
+      }
+    },
+    async logoutEverywhere() {
+      try {
+        await apiJson('/auth/api/user/logout-all', {method: 'POST'})
+        sessionStorage.clear()
+        location.reload()
+      } catch (error) {
+        console.error('Logout-all error:', error)
+        // Suppress toast for 401/403 errors - the auth iframe will handle these
+        if (error.status !== 401 && error.status !== 403) {
+          this.showMessage(error.message, 'error')
+        }
       }
     },
   }

frontend/src/utils/api.js

@@ -0,0 +1,378 @@
+/**
+ * API fetch wrapper that handles authentication errors with iframe-based re-authentication.
+ *
+ * When a 401 or 403 response is received with an `auth` object containing `iframe` URL,
+ * this wrapper shows an authentication iframe and retries the original request after
+ * successful authentication.
+ */
+
+/** Default timeout for API requests in milliseconds */
+const DEFAULT_TIMEOUT_MS = 1000
+
+/**
+ * Custom error class for API errors with full response context.
+ */
+export class ApiError extends Error {
+  constructor(url, response, data) {
+    super(data?.detail || `Request failed: ${response.status}`)
+    this.name = 'ApiError'
+    this.url = url
+    this.status = response.status
+    this.statusText = response.statusText
+    this.data = data
+  }
+}
+
+/**
+ * Custom error class for network/timeout errors.
+ */
+export class NetworkError extends Error {
+  constructor(message, originalError = null) {
+    super(message)
+    this.name = 'NetworkError'
+    this.originalError = originalError
+  }
+}
+
+/**
+ * Error thrown when user cancels authentication.
+ */
+export class AuthCancelledError extends Error {
+  constructor() {
+    super('Authentication cancelled')
+    this.name = 'AuthCancelledError'
+  }
+}
+
+let authIframe = null
+let authPromise = null
+let authResolve = null
+let authReject = null
+
+// Cache for auth iframe URL by mode
+const authIframeUrlCache = {}
+
+/**
+ * Get the auth iframe URL for a given mode.
+ * Fetches from /auth/api/forward which returns URL in the auth.iframe field.
+ * Results are cached per mode.
+ * @param {string} mode - The auth mode ('login', 'reauth', 'forbidden')
+ * @returns {Promise<string>} - The URL for the iframe
+ */
+export async function getAuthIframeUrl(mode = 'login') {
+  if (authIframeUrlCache[mode]) {
+    return authIframeUrlCache[mode]
+  }
+
+  // Fetch from forward endpoint - it returns URL in auth.iframe on 401/403
+  const response = await fetch('/auth/api/forward', { credentials: 'include' })
+  if (response.status === 401 || response.status === 403) {
+    const data = await response.json()
+    if (data.auth?.iframe) {
+      // The iframe field now contains a URL with hash fragment
+      // If mode differs, update the hash param
+      let url = data.auth.iframe
+      if (mode !== data.auth.mode) {
+        url = url.replace(/mode=[^&]*/, `mode=${mode}`)
+      }
+      authIframeUrlCache[mode] = url
+      return url
+    }
+  }
+  throw new Error('Unable to fetch auth iframe URL')
+}
+
+/**
+ * Check if an auth iframe is already open (from any source).
+ * @returns {boolean}
+ */
+export function isAuthIframeOpen() {
+  return !!document.getElementById('auth-iframe')
+}
+
+/**
+ * Show the authentication iframe and return a promise that resolves on success.
+ * If an auth iframe is already open (from any source), hooks into its completion.
+ * @param {string} iframeUrl - The URL for the iframe src
+ * @returns {Promise<void>}
+ * @throws {AuthCancelledError} - If authentication is cancelled by user
+ */
+export function showAuthIframe(iframeUrl) {
+  // If we already have a promise (from us), return it
+  if (authPromise) return authPromise
+
+  // If there's already an iframe in the DOM (from App.vue or elsewhere),
+  // create a promise that hooks into the message handler
+  if (document.getElementById('auth-iframe')) {
+    authPromise = new Promise((resolve, reject) => {
+      authResolve = resolve
+      authReject = reject
+    })
+    return authPromise
+  }
+
+  authPromise = new Promise((resolve, reject) => {
+    authResolve = resolve
+    authReject = reject
+  })
+
+  // Remove existing iframe if any
+  hideAuthIframe()
+
+  // Create new iframe for authentication using src URL
+  authIframe = document.createElement('iframe')
+  authIframe.id = 'auth-iframe'
+  authIframe.title = 'Authentication'
+  authIframe.allow = 'publickey-credentials-get; publickey-credentials-create'
+  authIframe.src = iframeUrl
+  document.body.appendChild(authIframe)
+
+  return authPromise
+}
+
+function hideAuthIframe() {
+  if (authIframe) {
+    authIframe.remove()
+    authIframe = null
+  }
+}
+
+function handleAuthMessage(event) {
+  const data = event.data
+  if (!data?.type) return
+
+  switch (data.type) {
+    case 'auth-success':
+      hideAuthIframe()
+      if (authResolve) {
+        authResolve()
+        authPromise = null
+        authResolve = null
+        authReject = null
+      }
+      break
+
+    case 'auth-back':
+    case 'auth-close-request':
+      hideAuthIframe()
+      if (authReject) {
+        authReject(new AuthCancelledError())
+        authPromise = null
+        authResolve = null
+        authReject = null
+      }
+      break
+
+    case 'auth-error':
+      // Keep iframe open for retry, but if cancelled, treat as back
+      if (data.cancelled && authReject) {
+        hideAuthIframe()
+        authReject(new AuthCancelledError())
+        authPromise = null
+        authResolve = null
+        authReject = null
+      }
+      break
+  }
+}
+
+// Install global message listener
+if (typeof window !== 'undefined') {
+  window.addEventListener('message', handleAuthMessage)
+}
+
+/**
+ * Fetch wrapper that handles auth errors with iframe-based re-authentication.
+ * Loops until successful or user cancels authentication.
+ *
+ * @param {string|URL} url - The URL to fetch
+ * @param {RequestInit} [options] - Fetch options
+ * @param {number} [options.timeout] - Timeout in ms (default: 10000, use 0 to disable)
+ * @returns {Promise<Response>} - The fetch response
+ * @throws {AuthCancelledError} - If authentication is cancelled by user
+ * @throws {NetworkError} - If network error or timeout occurs
+ */
+export async function apiFetch(url, options = {}) {
+  const { timeout = DEFAULT_TIMEOUT_MS, ...fetchOptions } = options
+
+  // Ensure credentials are included for cookie-based auth
+  fetchOptions.credentials = fetchOptions.credentials || 'include'
+
+  while (true) {
+    let response
+    try {
+      response = await fetch(url, {...fetchOptions, signal: timeout && AbortSignal.timeout(timeout)})
+    } catch (error) {
+      // Handle network errors and timeouts
+      if (error.name === 'TimeoutError') {
+        throw new NetworkError('Request timed out', error)
+      }
+      if (error.name === 'AbortError') {
+        // Re-throw abort errors as-is (user-initiated cancellation)
+        throw error
+      }
+      if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
+        throw new NetworkError('Unable to connect to server', error)
+      }
+      throw new NetworkError(error.message || 'Network error', error)
+    }
+
+    // Check for auth errors (401/403)
+    if (response.status === 401 || response.status === 403) {
+      // Try to parse the response to get the iframe URL
+      let authInfo = null
+      try {
+        const data = await response.clone().json()
+        authInfo = data.auth
+      } catch {
+        // If we can't parse JSON, no iframe available
+      }
+
+      // Authenticate via iframe (only in top-level window)
+      if (authInfo?.iframe && window === window.top) {
+        // Show auth iframe (or wait for existing one) and retry on success
+        // showAuthIframe returns existing promise if iframe is already open
+        await showAuthIframe(authInfo.iframe)
+        continue  // Retry the original request
+      }
+    }
+
+    return response
+  }
+}
+
+/**
+ * Convenience method for JSON API calls.
+ * Automatically sets Accept and Content-Type headers.
+ * Returns parsed JSON directly if response is ok, throws ApiError otherwise.
+ *
+ * @param {string|URL} url - The URL to fetch
+ * @param {RequestInit} [options] - Fetch options
+ * @returns {Promise<any>} - Parsed JSON response
+ * @throws {ApiError} - If response is not ok
+ * @throws {NetworkError} - If network error or timeout occurs
+ * @throws {AuthCancelledError} - If authentication is cancelled by user
+ */
+export async function apiJson(url, options = {}) {
+  const fetchOptions = { ...options }
+
+  // Set default headers, allowing caller overrides
+  fetchOptions.headers = {
+    'Accept': 'application/json',
+    ...fetchOptions.headers,
+  }
+
+  // Set Content-Type for requests with JSON body
+  if (fetchOptions.body && typeof fetchOptions.body === 'object' && !(fetchOptions.body instanceof FormData)) {
+    fetchOptions.headers = {
+      'Content-Type': 'application/json',
+      ...fetchOptions.headers,
+    }
+    fetchOptions.body = JSON.stringify(fetchOptions.body)
+  }
+
+  const response = await apiFetch(url, fetchOptions)
+  const data = await response.json()
+
+  if (!response.ok) {
+    throw new ApiError(url, response, data)
+  }
+
+  return data
+}
+
+/**
+ * Simple JSON fetch without auto-auth iframe handling.
+ * Use this in contexts where showing an auth iframe would be inappropriate
+ * (e.g., inside the auth iframe itself).
+ *
+ * @param {string|URL} url - The URL to fetch
+ * @param {RequestInit} [options] - Fetch options
+ * @returns {Promise<any>} - Parsed JSON response
+ * @throws {ApiError} - If response is not ok
+ */
+export async function fetchJson(url, options = {}) {
+  const fetchOptions = {
+    credentials: 'include',
+    ...options,
+    headers: {
+      'Accept': 'application/json',
+      ...options.headers,
+    },
+  }
+
+  const response = await fetch(url, fetchOptions)
+  const data = await response.json()
+
+  if (!response.ok) {
+    throw new ApiError(url, response, data)
+  }
+
+  return data
+}
+
+/**
+ * Convert an error to a user-friendly message.
+ * @param {Error} error - The error to convert
+ * @returns {string} - User-friendly error message
+ */
+export function getUserFriendlyErrorMessage(error) {
+  if (error instanceof NetworkError) {
+    return error.message
+  }
+  if (error instanceof ApiError) {
+    return error.message
+  }
+  if (error.name === 'TimeoutError') {
+    return 'Request timed out'
+  }
+  if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
+    return 'Unable to connect to server'
+  }
+  return error.message || 'An error occurred'
+}
+
+/**
+ * Check if an error should show a toast to the user.
+ * @param {Error} error - The error to check
+ * @returns {boolean} - Whether to show a toast
+ */
+export function shouldShowErrorToast(error) {
+  // Don't show toast for user cancellations
+  if (error instanceof AuthCancelledError) return false
+  if (error.name === 'AbortError') return false
+  // Don't show toast for 401/403 errors - the auth iframe will handle these
+  if (error instanceof ApiError && (error.status === 401 || error.status === 403)) return false
+  return true
+}
+
+/**
+ * Create an API caller with error handling (toast + console.error).
+ * Wraps apiJson calls with consistent error handling for apps.
+ *
+ * @param {Function} showMessage - Function to show toast messages: (message, type, duration) => void
+ * @returns {Function} - Wrapped apiJson that handles errors
+ */
+export function createApiCaller(showMessage) {
+  /**
+   * @param {string|URL} url - The URL to fetch
+   * @param {RequestInit} [options] - Fetch options
+   * @returns {Promise<any>} - Parsed JSON response, or undefined on error
+   */
+  return async function apiCall(url, options = {}) {
+    try {
+      return await apiJson(url, options)
+    } catch (error) {
+      if (!shouldShowErrorToast(error)) {
+        throw error
+      }
+      // Log full error details
+      console.error(`API error for ${url}:`, error instanceof ApiError ? { status: error.status, statusText: error.statusText, data: error.data } : error)
+      // Show user-friendly toast
+      showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
+      throw error
+    }
+  }
+}
+
+export default apiFetch

frontend/src/utils/awaitable-websocket.js

@@ -5,8 +5,8 @@ class AwaitableWebSocket extends WebSocket {
   #opened = false
 
   constructor(resolve, reject, url, protocols, binaryType) {
-    // Support relative URLs even on old browsers that don't
-    super(new URL(url, location.href.replace(/^http/, 'ws')), protocols)
+    // Support relative URLs even on old browsers that don't natively support them
+    super(new URL(url, document.baseURI.replace(/^http/, 'ws')), protocols)
     this.binaryType = binaryType || 'blob'
     this.onopen = () => {
       this.#opened = true
@@ -51,17 +51,12 @@ class AwaitableWebSocket extends WebSocket {
       console.error("WebSocket received binary data, expected JSON string", data)
       throw new Error("WebSocket received binary data, expected JSON string")
     }
-    let parsed
     try {
-      parsed = JSON.parse(data)
+      return JSON.parse(data)
     } catch (err) {
       console.error("Failed to parse JSON from WebSocket message", data, err)
       throw new Error("Failed to parse JSON from WebSocket message")
     }
-    if (parsed.detail) {
-      throw new Error(`Server: ${parsed.detail}`)
-    }
-    return parsed
   }
 
   send_json(data) {

frontend/src/utils/helpers.js

@@ -5,16 +5,18 @@ export function formatDate(dateString) {
 
   const date = new Date(dateString)
   const now = new Date()
-  const diffMs = now - date
-  const diffMinutes = Math.floor(diffMs / (1000 * 60))
-  const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+  const diffMs = date - now  // Changed to date - now for future/past
+  const isFuture = diffMs > 0
+  const absDiffMs = Math.abs(diffMs)
+  const diffMinutes = Math.round(absDiffMs / (1000 * 60))
+  const diffHours = Math.round(absDiffMs / (1000 * 60 * 60))
+  const diffDays = Math.round(absDiffMs / (1000 * 60 * 60 * 24))
 
-  if (diffMs < 0 || diffDays > 7) return date.toLocaleDateString()
-  if (diffMinutes === 0) return 'Just now'
-  if (diffMinutes < 60) return diffMinutes === 1 ? 'a minute ago' : `${diffMinutes} minutes ago`
-  if (diffHours < 24) return diffHours === 1 ? 'an hour ago' : `${diffHours} hours ago`
-  return diffDays === 1 ? 'a day ago' : `${diffDays} days ago`
+  if (absDiffMs < 1000 * 60) return 'Now'
+  if (diffMinutes <= 60) return isFuture ? `In ${diffMinutes} minute${diffMinutes === 1 ? '' : 's'}` : diffMinutes === 1 ? 'a minute ago' : `${diffMinutes} minutes ago`
+  if (diffHours <= 24) return isFuture ? `In ${diffHours} hour${diffHours === 1 ? '' : 's'}` : diffHours === 1 ? 'an hour ago' : `${diffHours} hours ago`
+  if (diffDays <= 14) return isFuture ? `In ${diffDays} day${diffDays === 1 ? '' : 's'}` : diffDays === 1 ? 'a day ago' : `${diffDays} days ago`
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
 }
 
 export function getCookie(name) {
@@ -22,3 +24,5 @@ export function getCookie(name) {
   const parts = value.split(`; ${name}=`)
   if (parts.length === 2) return parts.pop().split(';').shift()
 }
+
+export const goBack = () => history.back() || window.close()

frontend/src/utils/passkey.js

@@ -1,34 +1,76 @@
 import { startRegistration, startAuthentication } from '@simplewebauthn/browser'
 import aWebSocket from '@/utils/awaitable-websocket'
+import { getSettings } from '@/utils/settings'
+import { showAuthIframe } from '@/utils/api'
 
-export async function register(resetToken = null, displayName = null) {
+// Generic path normalizer: if an auth_host is configured and differs from current
+// host, return absolute URL (scheme derived by aWebSocket). Otherwise, keep as-is.
+async function makeUrl(path) {
+  const s = await getSettings()
+  const h = s?.auth_host
+  return h && location.host !== h ? `//${h}${path}` : path
+}
+
+export async function register(resetToken = null, displayName = null, onstartreg = null) {
   let params = []
   if (resetToken) params.push(`reset=${encodeURIComponent(resetToken)}`)
   if (displayName) params.push(`name=${encodeURIComponent(displayName)}`)
   const qs = params.length ? `?${params.join('&')}` : ''
-  const url = `/auth/ws/register${qs}`
-  const ws = await aWebSocket(url)
-  try {
-    const optionsJSON = await ws.receive_json()
-    const registrationResponse = await startRegistration({ optionsJSON })
-    ws.send_json(registrationResponse)
-    return await ws.receive_json()
-  } catch (error) {
-    console.error('Registration error:', error)
-     // Replace useless and ugly error message from startRegistration
-    throw Error(error.name === "NotAllowedError" ? 'Passkey registration cancelled' : error.message)
-  } finally {
-    ws.close()
+
+  while (true) {
+    const ws = await aWebSocket(await makeUrl(`/auth/ws/register${qs}`))
+    try {
+      const res = await ws.receive_json()
+
+      // Handle auth errors (401/403) with iframe
+      if ((res.status === 401 || res.status === 403) && res.auth?.iframe) {
+        ws.close()
+        await showAuthIframe(res.auth.iframe)
+        continue
+      }
+
+      // Handle other errors (status field present means error)
+      if (res.status) {
+        throw new Error(res.detail || `Registration failed: ${res.status}`)
+      }
+
+      // Notify caller that we're about to show the browser prompt
+      if (onstartreg) onstartreg()
+
+      const registrationResponse = await startRegistration(res)
+      ws.send_json(registrationResponse)
+
+      const result = await ws.receive_json()
+      if (result.status) {
+        throw new Error(result.detail || `Registration failed: ${result.status}`)
+      }
+      return result
+    } catch (error) {
+      ws.close()
+      console.error('Registration error:', error)
+      // Replace useless and ugly error message from startRegistration
+      throw Error(error.name === "NotAllowedError" ? 'Passkey registration cancelled' : error.message)
+    }
   }
 }
 
 export async function authenticate() {
-  const ws = await aWebSocket('/auth/ws/authenticate')
+  const ws = await aWebSocket(await makeUrl('/auth/ws/authenticate'))
   try {
-    const optionsJSON = await ws.receive_json()
-    const authResponse = await startAuthentication({ optionsJSON })
+    const res = await ws.receive_json()
+    console.log('Authentication options:', res)
+    // status field present means error
+    if (res.status) {
+      throw new Error(res.detail || `Authentication failed: ${res.status}`)
+    }
+
+    const authResponse = await startAuthentication(res)
     ws.send_json(authResponse)
+
     const result = await ws.receive_json()
+    if (result.status) {
+      throw new Error(result.detail || `Authentication failed: ${result.status}`)
+    }
     return result
   } catch (error) {
     console.error('Authentication error:', error)

frontend/src/utils/settings.js

@@ -0,0 +1,29 @@
+let _settingsPromise = null
+let _settings = null
+
+export function getSettingsCached() { return _settings }
+
+export async function getSettings() {
+  if (_settings) return _settings
+  if (_settingsPromise) return _settingsPromise
+  _settingsPromise = fetch('/auth/api/settings')
+    .then(r => (r.ok ? r.json() : {}))
+    .then(obj => { _settings = obj || {}; return _settings })
+    .catch(() => { _settings = {}; return _settings })
+  return _settingsPromise
+}
+
+export function uiBasePath() {
+  const base = _settings?.ui_base_path || '/auth/'
+  if (base === '/') return '/'
+  return base.endsWith('/') ? base : base + '/'
+}
+
+export function adminUiPath() { return uiBasePath() === '/' ? '/admin/' : uiBasePath() + 'admin/' }
+
+export function makeUiHref(suffix = '') {
+  const trimmed = suffix.startsWith('/') ? suffix.slice(1) : suffix
+  if (!trimmed) return uiBasePath()
+  if (uiBasePath() === '/') return '/' + trimmed
+  return uiBasePath() + trimmed
+}

frontend/vite.config.js

@@ -1,61 +1,95 @@
 import { fileURLToPath, URL } from 'node:url'
-
 import { defineConfig } from 'vite'
 import { resolve } from 'node:path'
 import vue from '@vitejs/plugin-vue'
+import { existsSync, renameSync, mkdirSync } from 'node:fs'
+import sirv from 'sirv'
 
-// https://vite.dev/config/
-export default defineConfig(({ command, mode }) => ({
+export default defineConfig(({ command }) => ({
+  appType: 'mpa',
+  publicDir: 'public',
   plugins: [
     vue(),
+    {
+      name: 'serve-examples',
+      configureServer(server) {
+        const examplesDir = resolve(__dirname, '../examples')
+        const serve = sirv(examplesDir, { dev: true })
+        server.middlewares.use((req, _res, next) => {
+          if (req.url === '/' || req.url === '/index.html') req.url = '/examples/'
+          next()
+        })
+        server.middlewares.use('/examples', serve)
+      }
+    },
+    {
+      name: 'move-html-files',
+      closeBundle() {
+        if (command !== 'build') return
+
+        const outDir = resolve(__dirname, '../paskia/frontend-build')
+        const moves = [
+          { from: 'auth.html', to: 'auth/index.html' },
+          { from: 'admin.html', to: 'admin/index.html' },
+          { from: 'restricted.html', to: 'restricted/index.html' },
+          { from: 'reset.html', to: 'reset/index.html' },
+          { from: 'forward.html', to: 'forward/index.html' }
+        ]
+
+        for (const { from, to } of moves) {
+          const fromPath = resolve(outDir, from)
+          const toPath = resolve(outDir, to)
+          if (existsSync(fromPath)) {
+            mkdirSync(resolve(outDir, to.split('/')[0]), { recursive: true })
+            renameSync(fromPath, toPath)
+          }
+        }
+      }
+    }
   ],
   resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    },
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }
   },
-  // Use absolute paths at dev, deploy under /auth/
-  base: command === 'build' ? '/auth/' : '/',
+  base: '/',
   server: {
     port: 4403,
+    fs: {
+      allow: ['..']
+    },
     proxy: {
-      '/auth/': {
+      // Only proxy these two specific backend API paths
+      '/auth/api': {
         target: 'http://localhost:4402',
-        ws: true,
-        changeOrigin: false,
-        // We proxy API + WS under /auth/, but want Vite to serve the SPA entrypoints
-        // and static assets so that HMR works. Bypass tells http-proxy to skip
-        // proxying when we return a (possibly rewritten) local path.
-        bypass(req) {
-          const rawUrl = req.url || ''
-          // Strip query/hash to match path-only for SPA entrypoints with query params (e.g. ?reset=token)
-          const url = rawUrl.split('?')[0].split('#')[0]
-          // Bypass only root SPA entrypoints + static assets so Vite serves them for HMR.
-          // Admin API endpoints (e.g., /auth/admin/orgs) must still hit backend.
-          if (url === '/auth/' || url === '/auth') return '/'
-          if (url === '/auth/admin' || url === '/auth/admin/') return '/admin/'
-          if (url.startsWith('/auth/assets/')) return url.replace(/^\/auth/, '')
-          if (/^\/auth\/([a-z]+\.){4}[a-z]+\/?$/.test(url)) return '/reset/index.html'
-          if (/^\/([a-z]+\.){4}[a-z]+\/?$/.test(url)) return '/reset/index.html'
-          if (url === '/auth/restricted' || url === '/auth/restricted/') return '/restricted/index.html'
-          if (url === '/restricted' || url === '/restricted/') return '/restricted/index.html'
-          // Everything else (including /auth/admin/* APIs) should proxy.
-        }
+        headers: { connection: 'close' }
+      },
+      '/auth/ws': {
+        target: 'http://localhost:4402',
+        ws: true
       }
     }
   },
   build: {
-    outDir: '../passkey/frontend-build',
+    outDir: '../paskia/frontend-build',
     emptyOutDir: true,
-    assetsDir: 'assets',
     rollupOptions: {
       input: {
-        index: resolve(__dirname, 'index.html'),
-        admin: resolve(__dirname, 'admin/index.html'),
-        reset: resolve(__dirname, 'reset/index.html'),
-        restricted: resolve(__dirname, 'restricted/index.html')
+        auth: resolve(__dirname, 'auth/index.html'),
+        admin: resolve(__dirname, 'auth/admin/index.html'),
+        restricted: resolve(__dirname, 'auth/restricted/index.html'),
+        reset: resolve(__dirname, 'int/reset/index.html'),
+        forward: resolve(__dirname, 'int/forward/index.html'),
       },
-      output: {}
+      output: {
+        entryFileNames: (chunkInfo) => {
+          return 'auth/assets/[name]-[hash].js'
+        },
+        chunkFileNames: (chunkInfo) => {
+          return 'auth/assets/[name]-[hash].js'
+        },
+        assetFileNames: (assetInfo) => {
+          return 'auth/assets/[name]-[hash][extname]'
+        }
+      }
     }
   }
 }))

paskia/__init__.py

@@ -0,0 +1,3 @@
+from paskia.sansio import Passkey
+
+__all__ = ["Passkey"]

paskia/aaguid/__init__.py

@@ -14,7 +14,7 @@ from importlib.resources import files
 __ALL__ = ["AAGUID", "filter"]
 
 # Path to the AAGUID JSON file
-AAGUID_FILE = files("passkey") / "aaguid" / "combined_aaguid.json"
+AAGUID_FILE = files("paskia") / "aaguid" / "combined_aaguid.json"
 AAGUID: dict[str, dict] = json.loads(AAGUID_FILE.read_text(encoding="utf-8"))
 
 

paskia/authsession.py

@@ -0,0 +1,112 @@
+"""
+Core session management for WebAuthn authentication.
+
+This module provides generic session management functionality that is
+independent of any web framework:
+- Session creation and validation
+- Token handling and refresh
+- Credential management
+"""
+
+from datetime import datetime, timezone
+from uuid import UUID
+
+from paskia.config import SESSION_LIFETIME
+from paskia.db import ResetToken, Session
+from paskia.globals import db, passkey
+from paskia.util import hostutil
+from paskia.util.tokens import create_token, reset_key, session_key
+
+EXPIRES = SESSION_LIFETIME
+
+
+def expires() -> datetime:
+    return datetime.now(timezone.utc) + EXPIRES
+
+
+def reset_expires() -> datetime:
+    from .config import RESET_LIFETIME
+
+    return datetime.now(timezone.utc) + RESET_LIFETIME
+
+
+def session_expiry(session: Session) -> datetime:
+    """Calculate the expiration timestamp for a session (UTC aware)."""
+    # After migration all renewed timestamps are timezone-aware UTC
+    return session.renewed + EXPIRES
+
+
+async def create_session(
+    user_uuid: UUID,
+    credential_uuid: UUID,
+    *,
+    host: str,
+    ip: str,
+    user_agent: str,
+) -> str:
+    """Create a new session and return a session token."""
+    normalized_host = hostutil.normalize_host(host)
+    if not normalized_host:
+        raise ValueError("Host required for session creation")
+    hostname = normalized_host.split(":")[0]  # Domain names only, IPs aren't supported
+    rp_id = passkey.instance.rp_id
+    if not (hostname == rp_id or hostname.endswith(f".{rp_id}")):
+        raise ValueError(f"Host must be the same as or a subdomain of {rp_id}")
+    token = create_token()
+    now = datetime.now(timezone.utc)
+    await db.instance.create_session(
+        user_uuid=user_uuid,
+        credential_uuid=credential_uuid,
+        key=session_key(token),
+        host=normalized_host,
+        ip=ip,
+        user_agent=user_agent,
+        renewed=now,
+    )
+    return token
+
+
+async def get_reset(token: str) -> ResetToken:
+    """Validate a credential reset token. Returns None if the token is not well formed (i.e. it is another type of token)."""
+    record = await db.instance.get_reset_token(reset_key(token))
+    if record and record.expiry >= datetime.now(timezone.utc):
+        return record
+    raise ValueError("This reset link is invalid or has expired")
+
+
+async def get_session(token: str, host: str | None = None) -> Session:
+    """Validate a session token and return session data if valid."""
+    host = hostutil.normalize_host(host)
+    if not host:
+        raise ValueError("Invalid host")
+    session = await db.instance.get_session(session_key(token))
+    if session and session_expiry(session) >= datetime.now(timezone.utc):
+        if session.host is None:
+            # First time binding: store exact host:port (or IPv6 form) now.
+            await db.instance.set_session_host(session.key, host)
+            session.host = host
+        elif session.host != host:
+            raise ValueError("Session host mismatch")
+        return session
+    raise ValueError("Your session has expired. Please sign in again!")
+
+
+async def refresh_session_token(token: str, *, ip: str, user_agent: str):
+    """Refresh a session extending its expiry."""
+    session_record = await db.instance.get_session(session_key(token))
+    if not session_record:
+        raise ValueError("Session not found or expired")
+    updated = await db.instance.update_session(
+        session_key(token),
+        ip=ip,
+        user_agent=user_agent,
+        renewed=datetime.now(timezone.utc),
+    )
+    if not updated:
+        raise ValueError("Session not found or expired")
+
+
+async def delete_credential(credential_uuid: UUID, auth: str, host: str | None = None):
+    """Delete a specific credential for the current user."""
+    s = await get_session(auth, host=host)
+    await db.instance.delete_credential(credential_uuid, s.user_uuid)

paskia/bootstrap.py

@@ -8,13 +8,13 @@ generating a reset link for initial admin setup.
 
 import asyncio
 import logging
-from datetime import datetime
+from datetime import datetime, timezone
 
 import uuid7
 
-from . import authsession, globals
-from .db import Org, Permission, Role, User
-from .util import hostutil, passphrase, tokens
+from paskia import authsession, globals
+from paskia.db import Org, Permission, Role, User
+from paskia.util import hostutil, passphrase, tokens
 
 
 def _init_logger() -> logging.Logger:
@@ -41,27 +41,22 @@ ADMIN_RESET_MESSAGE = """\
 async def _create_and_log_admin_reset_link(user_uuid, message, session_type) -> str:
     """Create an admin reset link and log it with the provided message."""
     token = passphrase.generate()
-    await globals.db.instance.create_session(
+    expiry = authsession.reset_expires()
+    await globals.db.instance.create_reset_token(
         user_uuid=user_uuid,
         key=tokens.reset_key(token),
-        expires=authsession.expires(),
-        info={"type": session_type},
+        expiry=expiry,
+        token_type=session_type,
     )
     reset_link = hostutil.reset_link_url(token)
     logger.info(ADMIN_RESET_MESSAGE, message, reset_link)
     return reset_link
 
 
-async def bootstrap_system(
-    user_name: str | None = None, org_name: str | None = None
-) -> dict:
+async def bootstrap_system() -> dict:
     """
     Bootstrap the entire system with default data.
 
-    Args:
-        user_name: Display name for the admin user (default: "Admin")
-        org_name: Display name for the organization (default: "Organization")
-
     Returns:
         dict: Contains information about created entities and reset link
     """
@@ -69,7 +64,7 @@ async def bootstrap_system(
     perm0 = Permission(id="auth:admin", display_name="Master Admin")
     await globals.db.instance.create_permission(perm0)
 
-    org = Org(uuid7.create(), org_name or "Organization")
+    org = Org(uuid7.create(), "Organization")
     await globals.db.instance.create_organization(org)
 
     # After creation, org.permissions now includes the auto-created org admin permission
@@ -88,9 +83,9 @@ async def bootstrap_system(
 
     user = User(
         uuid=uuid7.create(),
-        display_name=user_name or "Admin",
+        display_name="Admin",
         role_uuid=role.uuid,
-        created_at=datetime.now(),
+        created_at=datetime.now(timezone.utc),
         visits=0,
     )
     await globals.db.instance.create_user(user)
@@ -158,16 +153,10 @@ async def check_admin_credentials() -> bool:
         return False
 
 
-async def bootstrap_if_needed(
-    default_admin: str | None = None, default_org: str | None = None
-) -> bool:
+async def bootstrap_if_needed() -> bool:
     """
     Check if system needs bootstrapping and perform it if necessary.
 
-    Args:
-        default_admin: Display name for the admin user
-        default_org: Display name for the organization
-
     Returns:
         bool: True if bootstrapping was performed, False if system was already set up
     """
@@ -184,35 +173,17 @@ async def bootstrap_if_needed(
 
     # No admin permission found, need to bootstrap
     # Bootstrap creates the admin user AND the reset link, so no need to check credentials after
-    await bootstrap_system(default_admin, default_org)
+    await bootstrap_system()
     return True
 
 
 # CLI interface
 async def main():
     """Main CLI entry point for bootstrapping."""
-    import argparse
-
     # Configure logging for CLI usage
     logging.basicConfig(level=logging.INFO, format="%(message)s", force=True)
 
-    parser = argparse.ArgumentParser(
-        description="Bootstrap passkey authentication system"
-    )
-    parser.add_argument(
-        "--user-name",
-        default=None,
-        help="Name for the admin user (default: Admin)",
-    )
-    parser.add_argument(
-        "--org-name",
-        default=None,
-        help="Name for the organization (default: Organization)",
-    )
-
-    args = parser.parse_args()
-
-    await globals.init(default_admin=args.user_name, default_org=args.org_name)
+    await globals.init()
 
 
 if __name__ == "__main__":

paskia/config.py

@@ -0,0 +1,25 @@
+from dataclasses import dataclass
+from datetime import timedelta
+
+# Shared configuration constants for session management.
+SESSION_LIFETIME = timedelta(hours=24)
+
+# Lifetime for reset links created by admins
+RESET_LIFETIME = timedelta(days=14)
+
+
+@dataclass
+class PaskiaConfig:
+    """Runtime configuration for the Paskia authentication server."""
+
+    rp_id: str
+    rp_name: str | None
+    origins: list[str] | None
+    auth_host: str | None
+    site_url: str  # Base URL without trailing path (e.g. https://example.com)
+    site_path: str  # Path to auth UI: "/" if auth_host, else "/auth/"
+    # Listen address (one of host:port or uds)
+    host: str | None = None
+    port: int | None = None
+    uds: str | None = None
+    devmode: bool = False

paskia/db/__init__.py

@@ -63,9 +63,27 @@ class Credential:
 class Session:
     key: bytes
     user_uuid: UUID
-    expires: datetime
-    info: dict
-    credential_uuid: UUID | None = None
+    credential_uuid: UUID
+    host: str
+    ip: str
+    user_agent: str
+    renewed: datetime
+
+    def metadata(self) -> dict:
+        """Return session metadata for backwards compatibility."""
+        return {
+            "ip": self.ip,
+            "user_agent": self.user_agent,
+            "renewed": self.renewed.isoformat(),
+        }
+
+
+@dataclass
+class ResetToken:
+    key: bytes
+    user_uuid: UUID
+    expiry: datetime
+    token_type: str
 
 
 @dataclass
@@ -74,6 +92,7 @@ class SessionContext:
     user: User
     org: Org
     role: Role
+    credential: Credential | None = None
     permissions: list[Permission] | None = None
 
 
@@ -146,9 +165,11 @@ class DatabaseInterface(ABC):
         self,
         user_uuid: UUID,
         key: bytes,
-        expires: datetime,
-        info: dict,
-        credential_uuid: UUID | None = None,
+        credential_uuid: UUID,
+        host: str,
+        ip: str,
+        user_agent: str,
+        renewed: datetime,
     ) -> None:
         """Create a new session."""
 
@@ -162,14 +183,50 @@ class DatabaseInterface(ABC):
 
     @abstractmethod
     async def update_session(
-        self, key: bytes, expires: datetime, info: dict
+        self,
+        key: bytes,
+        *,
+        ip: str,
+        user_agent: str,
+        renewed: datetime,
     ) -> Session | None:
-        """Update session expiry and info."""
+        """Update session metadata and touch renewed timestamp."""
+
+    @abstractmethod
+    async def set_session_host(self, key: bytes, host: str) -> None:
+        """Bind a session to a specific host if not already set."""
+
+    @abstractmethod
+    async def list_sessions_for_user(self, user_uuid: UUID) -> list[Session]:
+        """Return all sessions for a user (including other hosts)."""
 
     @abstractmethod
     async def cleanup(self) -> None:
         """Called periodically to clean up expired records."""
 
+    @abstractmethod
+    async def delete_sessions_for_user(self, user_uuid: UUID) -> None:
+        """Delete all sessions belonging to the provided user."""
+
+    # Reset token operations
+    @abstractmethod
+    async def create_reset_token(
+        self,
+        user_uuid: UUID,
+        key: bytes,
+        expiry: datetime,
+        token_type: str,
+    ) -> None:
+        """Create a reset token for a user."""
+
+    @abstractmethod
+    async def get_reset_token(self, key: bytes) -> ResetToken | None:
+        """Retrieve a reset token by key."""
+
+    @abstractmethod
+    async def delete_reset_token(self, key: bytes) -> None:
+        """Delete a reset token by key."""
+
     # Organization operations
     @abstractmethod
     async def create_organization(self, org: Org) -> None:
@@ -315,36 +372,41 @@ class DatabaseInterface(ABC):
         """Create a new user and their first credential in a transaction."""
 
     @abstractmethod
-    async def get_session_context(self, session_key: bytes) -> SessionContext | None:
+    async def get_session_context(
+        self, session_key: bytes, host: str | None = None
+    ) -> SessionContext | None:
         """Get complete session context including user, organization, role, and permissions."""
 
-        # Combined atomic operations
-        @abstractmethod
-        async def create_credential_session(
-            self,
-            user_uuid: UUID,
-            credential: Credential,
-            reset_key: bytes | None,
-            session_key: bytes,
-            session_expires: datetime,
-            session_info: dict,
-            display_name: str | None = None,
-        ) -> None:
-            """Atomically add a credential and create a session.
+    # Combined atomic operations
+    @abstractmethod
+    async def create_credential_session(
+        self,
+        user_uuid: UUID,
+        credential: Credential,
+        reset_key: bytes | None,
+        session_key: bytes,
+        *,
+        display_name: str | None = None,
+        host: str | None = None,
+        ip: str | None = None,
+        user_agent: str | None = None,
+    ) -> None:
+        """Atomically add a credential and create a session.
 
-            Steps (single transaction):
-                1. Insert credential
-                2. Optionally delete old session (e.g. reset token) if provided
-                3. Optionally update user's display name
-                4. Insert new session referencing the credential
-                5. Update user's last_seen and increment visits (treat as a login)
-            """
+        Steps (single transaction):
+            1. Insert credential
+            2. Optionally delete old reset token if provided
+            3. Optionally update user's display name
+            4. Insert new session referencing the credential
+            5. Update user's last_seen and increment visits (treat as a login)
+        """
 
 
 __all__ = [
     "User",
     "Credential",
     "Session",
+    "ResetToken",
     "SessionContext",
     "Org",
     "Role",

paskia/db/sql.py

@@ -5,8 +5,9 @@ This module provides an async database layer using SQLAlchemy async mode
 for managing users and credentials in a WebAuthn authentication system.
 """
 
+import os
 from contextlib import asynccontextmanager
-from datetime import datetime
+from datetime import datetime, timezone
 from uuid import UUID
 
 from sqlalchemy import (
@@ -19,29 +20,41 @@ from sqlalchemy import (
     event,
     insert,
     select,
+    text,
     update,
 )
-from sqlalchemy.dialects.sqlite import BLOB, JSON
+from sqlalchemy.dialects.sqlite import BLOB
 from sqlalchemy.ext.asyncio import async_sessionmaker, create_async_engine
 from sqlalchemy.orm import DeclarativeBase, Mapped, mapped_column
 
-from ..globals import db
-from . import (
+from paskia.config import SESSION_LIFETIME
+from paskia.db import (
     Credential,
     DatabaseInterface,
     Org,
     Permission,
+    ResetToken,
     Role,
     Session,
     SessionContext,
     User,
 )
+from paskia.globals import db
 
-DB_PATH = "sqlite+aiosqlite:///passkey-auth.sqlite"
+DB_PATH_DEFAULT = "sqlite+aiosqlite:///paskia.sqlite"
+
+
+def _normalize_dt(value: datetime | None) -> datetime | None:
+    if value is None:
+        return None
+    if value.tzinfo is None:
+        return value.replace(tzinfo=timezone.utc)
+    return value.astimezone(timezone.utc)
 
 
 async def init(*args, **kwargs):
-    db.instance = DB()
+    db_path = os.environ.get("PASKIA_DB", DB_PATH_DEFAULT)
+    db.instance = DB(db_path)
     await db.instance.init_db()
 
 
@@ -98,8 +111,12 @@ class UserModel(Base):
     role_uuid: Mapped[bytes] = mapped_column(
         LargeBinary(16), ForeignKey("roles.uuid", ondelete="CASCADE"), nullable=False
     )
-    created_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.now)
-    last_seen: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
+    )
+    last_seen: Mapped[datetime | None] = mapped_column(
+        DateTime(timezone=True), nullable=True
+    )
     visits: Mapped[int] = mapped_column(Integer, nullable=False, default=0)
 
     def as_dataclass(self) -> User:
@@ -107,8 +124,8 @@ class UserModel(Base):
             uuid=UUID(bytes=self.uuid),
             display_name=self.display_name,
             role_uuid=UUID(bytes=self.role_uuid),
-            created_at=self.created_at,
-            last_seen=self.last_seen,
+            created_at=_normalize_dt(self.created_at) or self.created_at,
+            last_seen=_normalize_dt(self.last_seen) or self.last_seen,
             visits=self.visits,
         )
 
@@ -118,7 +135,7 @@ class UserModel(Base):
             uuid=user.uuid.bytes,
             display_name=user.display_name,
             role_uuid=user.role_uuid.bytes,
-            created_at=user.created_at or datetime.now(),
+            created_at=user.created_at or datetime.now(timezone.utc),
             last_seen=user.last_seen,
             visits=user.visits,
         )
@@ -137,9 +154,29 @@ class CredentialModel(Base):
     aaguid: Mapped[bytes] = mapped_column(LargeBinary(16), nullable=False)
     public_key: Mapped[bytes] = mapped_column(BLOB, nullable=False)
     sign_count: Mapped[int] = mapped_column(Integer, nullable=False)
-    created_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.now)
-    last_used: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
-    last_verified: Mapped[datetime | None] = mapped_column(DateTime, nullable=True)
+    created_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
+    )
+    # Columns declared timezone-aware going forward; legacy rows may still be naive in storage
+    last_used: Mapped[datetime | None] = mapped_column(
+        DateTime(timezone=True), nullable=True
+    )
+    last_verified: Mapped[datetime | None] = mapped_column(
+        DateTime(timezone=True), nullable=True
+    )
+
+    def as_dataclass(self):  # type: ignore[override]
+        return Credential(
+            uuid=UUID(bytes=self.uuid),
+            credential_id=self.credential_id,
+            user_uuid=UUID(bytes=self.user_uuid),
+            aaguid=UUID(bytes=self.aaguid),
+            public_key=self.public_key,
+            sign_count=self.sign_count,
+            created_at=_normalize_dt(self.created_at) or self.created_at,
+            last_used=_normalize_dt(self.last_used) or self.last_used,
+            last_verified=_normalize_dt(self.last_verified) or self.last_verified,
+        )
 
 
 class SessionModel(Base):
@@ -147,23 +184,31 @@ class SessionModel(Base):
 
     key: Mapped[bytes] = mapped_column(LargeBinary(16), primary_key=True)
     user_uuid: Mapped[bytes] = mapped_column(
-        LargeBinary(16), ForeignKey("users.uuid", ondelete="CASCADE")
+        LargeBinary(16), ForeignKey("users.uuid", ondelete="CASCADE"), nullable=False
     )
-    credential_uuid: Mapped[bytes | None] = mapped_column(
-        LargeBinary(16), ForeignKey("credentials.uuid", ondelete="CASCADE")
+    credential_uuid: Mapped[bytes] = mapped_column(
+        LargeBinary(16),
+        ForeignKey("credentials.uuid", ondelete="CASCADE"),
+        nullable=False,
+    )
+    host: Mapped[str] = mapped_column(String, nullable=False)
+    ip: Mapped[str] = mapped_column(String(64), nullable=False)
+    user_agent: Mapped[str] = mapped_column(String(512), nullable=False)
+    renewed: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True),
+        default=lambda: datetime.now(timezone.utc),
+        nullable=False,
     )
-    expires: Mapped[datetime] = mapped_column(DateTime, nullable=False)
-    info: Mapped[dict] = mapped_column(JSON, default=dict)
 
     def as_dataclass(self):
         return Session(
             key=self.key,
             user_uuid=UUID(bytes=self.user_uuid),
-            credential_uuid=(
-                UUID(bytes=self.credential_uuid) if self.credential_uuid else None
-            ),
-            expires=self.expires,
-            info=self.info,
+            credential_uuid=UUID(bytes=self.credential_uuid),
+            host=self.host,
+            ip=self.ip,
+            user_agent=self.user_agent,
+            renewed=_normalize_dt(self.renewed) or self.renewed,
         )
 
     @staticmethod
@@ -171,9 +216,30 @@ class SessionModel(Base):
         return SessionModel(
             key=session.key,
             user_uuid=session.user_uuid.bytes,
-            credential_uuid=session.credential_uuid and session.credential_uuid.bytes,
-            expires=session.expires,
-            info=session.info,
+            credential_uuid=session.credential_uuid.bytes,
+            host=session.host,
+            ip=session.ip,
+            user_agent=session.user_agent,
+            renewed=session.renewed,
+        )
+
+
+class ResetTokenModel(Base):
+    __tablename__ = "reset_tokens"
+
+    key: Mapped[bytes] = mapped_column(LargeBinary(16), primary_key=True)
+    user_uuid: Mapped[bytes] = mapped_column(
+        LargeBinary(16), ForeignKey("users.uuid", ondelete="CASCADE"), nullable=False
+    )
+    token_type: Mapped[str] = mapped_column(String, nullable=False)
+    expiry: Mapped[datetime] = mapped_column(DateTime(timezone=True), nullable=False)
+
+    def as_dataclass(self) -> ResetToken:
+        return ResetToken(
+            key=self.key,
+            user_uuid=UUID(bytes=self.user_uuid),
+            token_type=self.token_type,
+            expiry=_normalize_dt(self.expiry) or self.expiry,
         )
 
 
@@ -225,7 +291,7 @@ class RolePermission(Base):
 class DB(DatabaseInterface):
     """Database class that handles its own connections."""
 
-    def __init__(self, db_path: str = DB_PATH):
+    def __init__(self, db_path: str = DB_PATH_DEFAULT):
         """Initialize with database path."""
         self.engine = create_async_engine(db_path, echo=False)
         # Ensure SQLite foreign key enforcement is ON for every new connection
@@ -257,6 +323,58 @@ class DB(DatabaseInterface):
         """Initialize database tables."""
         async with self.engine.begin() as conn:
             await conn.run_sync(Base.metadata.create_all)
+            result = await conn.execute(text("PRAGMA table_info('sessions')"))
+            columns = {row[1] for row in result}
+            expected = {
+                "key",
+                "user_uuid",
+                "credential_uuid",
+                "host",
+                "ip",
+                "user_agent",
+                "renewed",
+            }
+            needs_recreate = False
+            if columns and columns != expected:
+                await conn.execute(text("DROP TABLE sessions"))
+                needs_recreate = True
+            result = await conn.execute(text("PRAGMA table_info('reset_tokens')"))
+            if not list(result):
+                needs_recreate = True
+            if needs_recreate:
+                await conn.run_sync(Base.metadata.create_all)
+        # Run one-time migration to add UTC tzinfo to any naive datetimes
+        await self._migrate_naive_datetimes()
+
+    async def _migrate_naive_datetimes(self) -> None:
+        """Attach UTC tzinfo to any legacy naive datetime rows.
+
+        SQLite stores datetimes as text; older rows may have been inserted naive.
+        We treat naive timestamps as already UTC and rewrite them in ISO8601 with Z.
+        """
+        # Helper SQL fragment for detecting naive (no timezone offset) for ISO strings
+        # We only update rows whose textual representation lacks a 'Z' or '+' sign.
+        async with self.session() as session:
+            # Users
+            for model, fields in [
+                (UserModel, ["created_at", "last_seen"]),
+                (CredentialModel, ["created_at", "last_used", "last_verified"]),
+                (SessionModel, ["renewed"]),
+                (ResetTokenModel, ["expiry"]),
+            ]:
+                stmt = select(model)
+                result = await session.execute(stmt)
+                rows = result.scalars().all()
+                dirty = False
+                for row in rows:
+                    for fname in fields:
+                        value = getattr(row, fname, None)
+                        if isinstance(value, datetime) and value.tzinfo is None:
+                            setattr(row, fname, value.replace(tzinfo=timezone.utc))
+                            dirty = True
+                if dirty:
+                    # SQLAlchemy autoflush/commit in context manager will persist
+                    pass
 
     async def get_user_by_uuid(self, user_uuid: UUID) -> User:
         async with self.session() as session:
@@ -323,7 +441,7 @@ class DB(DatabaseInterface):
             credential_model = result.scalar_one_or_none()
 
             if not credential_model:
-                raise ValueError("Credential not registered")
+                raise ValueError("Credential not found")
             return Credential(
                 uuid=UUID(bytes=credential_model.uuid),
                 credential_id=credential_model.credential_id,
@@ -409,9 +527,11 @@ class DB(DatabaseInterface):
         credential: Credential,
         reset_key: bytes | None,
         session_key: bytes,
-        session_expires: datetime,
-        session_info: dict,
+        *,
         display_name: str | None = None,
+        host: str | None = None,
+        ip: str | None = None,
+        user_agent: str | None = None,
     ) -> None:
         """Atomic credential + (optional old session delete) + (optional rename) + new session."""
         async with self.session() as session:
@@ -434,10 +554,10 @@ class DB(DatabaseInterface):
                     last_verified=credential.last_verified,
                 )
             )
-            # Delete old session if provided
+            # Delete old reset token if provided
             if reset_key:
                 await session.execute(
-                    delete(SessionModel).where(SessionModel.key == reset_key)
+                    delete(ResetTokenModel).where(ResetTokenModel.key == reset_key)
                 )
             # Optional rename
             if display_name:
@@ -452,8 +572,9 @@ class DB(DatabaseInterface):
                     key=session_key,
                     user_uuid=user_uuid.bytes,
                     credential_uuid=credential.uuid.bytes,
-                    expires=session_expires,
-                    info=session_info,
+                    host=host,
+                    ip=ip,
+                    user_agent=user_agent,
                 )
             )
             # Login side-effects: update user analytics (last_seen + visits increment)
@@ -476,17 +597,21 @@ class DB(DatabaseInterface):
         self,
         user_uuid: UUID,
         key: bytes,
-        expires: datetime,
-        info: dict,
-        credential_uuid: UUID | None = None,
+        credential_uuid: UUID,
+        host: str,
+        ip: str,
+        user_agent: str,
+        renewed: datetime,
     ) -> None:
         async with self.session() as session:
             session_model = SessionModel(
                 key=key,
                 user_uuid=user_uuid.bytes,
-                credential_uuid=credential_uuid.bytes if credential_uuid else None,
-                expires=expires,
-                info=info,
+                credential_uuid=credential_uuid.bytes,
+                host=host,
+                ip=ip,
+                user_agent=user_agent,
+                renewed=renewed,
             )
             session.add(session_model)
 
@@ -497,29 +622,88 @@ class DB(DatabaseInterface):
             session_model = result.scalar_one_or_none()
 
             if session_model:
-                return Session(
-                    key=session_model.key,
-                    user_uuid=UUID(bytes=session_model.user_uuid),
-                    credential_uuid=UUID(bytes=session_model.credential_uuid)
-                    if session_model.credential_uuid
-                    else None,
-                    expires=session_model.expires,
-                    info=session_model.info or {},
-                )
+                return session_model.as_dataclass()
             return None
 
     async def delete_session(self, key: bytes) -> None:
         async with self.session() as session:
             await session.execute(delete(SessionModel).where(SessionModel.key == key))
 
-    async def update_session(self, key: bytes, expires: datetime, info: dict) -> None:
+    async def delete_sessions_for_user(self, user_uuid: UUID) -> None:
         async with self.session() as session:
             await session.execute(
-                update(SessionModel)
-                .where(SessionModel.key == key)
-                .values(expires=expires, info=info)
+                delete(SessionModel).where(SessionModel.user_uuid == user_uuid.bytes)
             )
 
+    async def create_reset_token(
+        self,
+        user_uuid: UUID,
+        key: bytes,
+        expiry: datetime,
+        token_type: str,
+    ) -> None:
+        async with self.session() as session:
+            model = ResetTokenModel(
+                key=key,
+                user_uuid=user_uuid.bytes,
+                token_type=token_type,
+                expiry=expiry,
+            )
+            session.add(model)
+
+    async def get_reset_token(self, key: bytes) -> ResetToken | None:
+        async with self.session() as session:
+            stmt = select(ResetTokenModel).where(ResetTokenModel.key == key)
+            result = await session.execute(stmt)
+            model = result.scalar_one_or_none()
+            return model.as_dataclass() if model else None
+
+    async def delete_reset_token(self, key: bytes) -> None:
+        async with self.session() as session:
+            await session.execute(
+                delete(ResetTokenModel).where(ResetTokenModel.key == key)
+            )
+
+    async def update_session(
+        self,
+        key: bytes,
+        *,
+        ip: str,
+        user_agent: str,
+        renewed: datetime,
+    ) -> Session | None:
+        async with self.session() as session:
+            model = await session.get(SessionModel, key)
+            if not model:
+                return None
+            model.ip = ip
+            model.user_agent = user_agent
+            model.renewed = renewed
+            await session.flush()
+            return model.as_dataclass()
+
+    async def set_session_host(self, key: bytes, host: str) -> None:
+        async with self.session() as session:
+            model = await session.get(SessionModel, key)
+            if model and model.host is None:
+                model.host = host
+                await session.flush()
+
+    async def list_sessions_for_user(self, user_uuid: UUID) -> list[Session]:
+        async with self.session() as session:
+            stmt = (
+                select(SessionModel)
+                .where(SessionModel.user_uuid == user_uuid.bytes)
+                .order_by(SessionModel.renewed.desc())
+            )
+            result = await session.execute(stmt)
+            session_models = [
+                model
+                for model in result.scalars().all()
+                if model.key.startswith(b"sess")
+            ]
+            return [model.as_dataclass() for model in session_models]
+
     # Organization operations
     async def create_organization(self, org: Org) -> None:
         async with self.session() as session:
@@ -1115,29 +1299,41 @@ class DB(DatabaseInterface):
 
     async def cleanup(self) -> None:
         async with self.session() as session:
-            current_time = datetime.now()
-            stmt = delete(SessionModel).where(SessionModel.expires < current_time)
-            await session.execute(stmt)
+            current_time = datetime.now(timezone.utc)
+            session_threshold = current_time - SESSION_LIFETIME
+            await session.execute(
+                delete(SessionModel).where(SessionModel.renewed < session_threshold)
+            )
+            await session.execute(
+                delete(ResetTokenModel).where(ResetTokenModel.expiry < current_time)
+            )
 
-    async def get_session_context(self, session_key: bytes) -> SessionContext | None:
+    async def get_session_context(
+        self, session_key: bytes, host: str | None = None
+    ) -> SessionContext | None:
         """Get complete session context including user, organization, role, and permissions.
 
         Uses efficient JOINs to retrieve all related data in a single database query.
         """
         async with self.session() as session:
-            # Build a query that joins sessions, users, roles, organizations, and role_permissions
+            # Build a query that joins sessions, users, roles, organizations, credentials and role_permissions
             stmt = (
                 select(
                     SessionModel,
                     UserModel,
                     RoleModel,
                     OrgModel,
+                    CredentialModel,
                     PermissionModel,
                 )
                 .select_from(SessionModel)
                 .join(UserModel, SessionModel.user_uuid == UserModel.uuid)
                 .join(RoleModel, UserModel.role_uuid == RoleModel.uuid)
                 .join(OrgModel, RoleModel.org_uuid == OrgModel.uuid)
+                .outerjoin(
+                    CredentialModel,
+                    SessionModel.credential_uuid == CredentialModel.uuid,
+                )
                 .outerjoin(RolePermission, RoleModel.uuid == RolePermission.role_uuid)
                 .outerjoin(
                     PermissionModel, RolePermission.permission_id == PermissionModel.id
@@ -1153,18 +1349,23 @@ class DB(DatabaseInterface):
 
             # Extract the first row to get session and user data
             first_row = rows[0]
-            session_model, user_model, role_model, org_model, _ = first_row
+            session_model, user_model, role_model, org_model, credential_model, _ = (
+                first_row
+            )
 
             # Create the session object
-            session_obj = Session(
-                key=session_model.key,
-                user_uuid=UUID(bytes=session_model.user_uuid),
-                credential_uuid=UUID(bytes=session_model.credential_uuid)
-                if session_model.credential_uuid
-                else None,
-                expires=session_model.expires,
-                info=session_model.info or {},
-            )
+            if host is not None:
+                if session_model.host is None:
+                    await session.execute(
+                        update(SessionModel)
+                        .where(SessionModel.key == session_key)
+                        .values(host=host)
+                    )
+                    session_model.host = host
+                elif session_model.host != host:
+                    return None
+
+            session_obj = session_model.as_dataclass()
 
             # Create the user object
             user_obj = user_model.as_dataclass()
@@ -1179,11 +1380,16 @@ class DB(DatabaseInterface):
                 display_name=role_model.display_name,
             )
 
+            # Create credential object if available
+            credential_obj = (
+                credential_model.as_dataclass() if credential_model else None
+            )
+
             # Collect all unique permissions for the role
             permissions = []
             seen_permission_ids = set()
             for row in rows:
-                _, _, _, _, permission_model = row
+                _, _, _, _, _, permission_model = row
                 if permission_model and permission_model.id not in seen_permission_ids:
                     permissions.append(
                         Permission(
@@ -1213,5 +1419,6 @@ class DB(DatabaseInterface):
                 user=user_obj,
                 org=organization,
                 role=role,
+                credential=credential_obj,
                 permissions=effective_permissions if effective_permissions else None,
             )

paskia/fastapi/__init__.py

@@ -0,0 +1,3 @@
+from paskia.fastapi.mainapp import app
+
+__all__ = ["app"]

paskia/fastapi/__main__.py

@@ -7,11 +7,31 @@ from urllib.parse import urlparse
 
 import uvicorn
 
-from passkey.util import frontend
+from paskia.util.hostutil import normalize_origin
 
 DEFAULT_HOST = "localhost"
 DEFAULT_SERVE_PORT = 4401
-DEFAULT_DEV_PORT = 4402
+
+
+def is_subdomain(sub: str, domain: str) -> bool:
+    """Check if sub is a subdomain of domain (or equal)."""
+    sub_parts = sub.lower().split(".")
+    domain_parts = domain.lower().split(".")
+    if len(sub_parts) < len(domain_parts):
+        return False
+    return sub_parts[-len(domain_parts) :] == domain_parts
+
+
+def validate_auth_host(auth_host: str, rp_id: str) -> None:
+    """Validate that auth_host is a subdomain of rp_id."""
+    parsed = urlparse(auth_host if "://" in auth_host else f"//{auth_host}")
+    host = parsed.hostname or parsed.path
+    if not host:
+        raise SystemExit(f"Invalid auth-host: '{auth_host}'")
+    if not is_subdomain(host, rp_id):
+        raise SystemExit(
+            f"auth-host '{auth_host}' is not a subdomain of rp-id '{rp_id}'"
+        )
 
 
 def parse_endpoint(
@@ -93,7 +113,13 @@ def add_common_options(p: argparse.ArgumentParser) -> None:
         "--rp-id", default="localhost", help="Relying Party ID (default: localhost)"
     )
     p.add_argument("--rp-name", help="Relying Party name (default: same as rp-id)")
-    p.add_argument("--origin", help="Origin URL (default: https://<rp-id>)")
+    p.add_argument(
+        "--origin",
+        action="append",
+        dest="origins",
+        metavar="URL",
+        help="Allowed origin URL(s). May be specified multiple times. If any are specified, only those origins are permitted for WebSocket authentication.",
+    )
     p.add_argument(
         "--auth-host",
         help=(
@@ -108,7 +134,7 @@ def main():
     logging.basicConfig(level=logging.INFO, format="%(message)s", force=True)
 
     parser = argparse.ArgumentParser(
-        prog="passkey-auth", description="Passkey authentication server"
+        prog="paskia", description="Paskia authentication server"
     )
     sub = parser.add_subparsers(dest="command", required=True)
 
@@ -126,18 +152,6 @@ def main():
     )
     add_common_options(serve)
 
-    # dev subcommand
-    dev = sub.add_parser("dev", help="Run the server in development (auto-reload)")
-    dev.add_argument(
-        "hostport",
-        nargs="?",
-        help=(
-            "Endpoint (default: localhost:4402). Forms: host[:port] | :port | "
-            "[ipv6][:port] | ipv6 | unix:/path.sock"
-        ),
-    )
-    add_common_options(dev)
-
     # reset subcommand
     reset = sub.add_parser(
         "reset",
@@ -155,64 +169,119 @@ def main():
 
     args = parser.parse_args()
 
-    if args.command in {"serve", "dev"}:
-        default_port = DEFAULT_DEV_PORT if args.command == "dev" else DEFAULT_SERVE_PORT
-        host, port, uds, all_ifaces = parse_endpoint(args.hostport, default_port)
-        devmode = args.command == "dev"
+    if args.command == "serve":
+        host, port, uds, all_ifaces = parse_endpoint(args.hostport, DEFAULT_SERVE_PORT)
     else:
         host = port = uds = all_ifaces = None  # type: ignore
-        devmode = False
 
-    # Determine origin (dev mode default override)
-    origin = args.origin
-    if devmode and not args.origin and not args.rp_id:
-        # Dev mode: Vite runs on another port, override:
-        origin = "http://localhost:4403"
+    # Collect and normalize origins, handle auth_host
+    origins = [normalize_origin(o) for o in (getattr(args, "origins", None) or [])]
+    if args.auth_host:
+        # Normalize auth_host with scheme
+        if "://" not in args.auth_host:
+            args.auth_host = f"https://{args.auth_host}"
 
-    # Export configuration via environment for lifespan initialization in each process
-    os.environ.setdefault("PASSKEY_RP_ID", args.rp_id)
-    if args.rp_name:
-        os.environ["PASSKEY_RP_NAME"] = args.rp_name
-    if origin:
-        os.environ["PASSKEY_ORIGIN"] = origin
-    if getattr(args, "auth_host", None):
-        os.environ["PASSKEY_AUTH_HOST"] = args.auth_host
+        validate_auth_host(args.auth_host, args.rp_id)
+
+        # If origins are configured, ensure auth_host is included at top
+        if origins:
+            # Insert auth_host at the beginning (Passkey.__init__ will dedupe)
+            origins.insert(0, args.auth_host)
+
+    # Compute site_url and site_path for reset links
+    # Priority: auth_host > first origin with localhost > http://localhost:port
+    if args.auth_host:
+        site_url = args.auth_host.rstrip("/")
+        site_path = "/"
+    elif origins:
+        # Find localhost origin if rp_id is localhost, else use first origin
+        localhost_origin = (
+            next((o for o in origins if "://localhost" in o), None)
+            if args.rp_id == "localhost"
+            else None
+        )
+        site_url = (localhost_origin or origins[0]).rstrip("/")
+        site_path = "/auth/"
+    elif args.rp_id == "localhost" and port:
+        # Dev mode: use http with port
+        site_url = f"http://localhost:{port}"
+        site_path = "/auth/"
     else:
-        # Preserve pre-set env variable if CLI option omitted
-        args.auth_host = os.environ.get("PASSKEY_AUTH_HOST")
+        site_url = f"https://{args.rp_id}"
+        site_path = "/auth/"
 
-    if getattr(args, "auth_host", None):
-        from passkey.util import hostutil as _hostutil  # local import
+    # Build runtime configuration
+    from paskia.config import PaskiaConfig
 
-        _hostutil.reload_config()
+    config = PaskiaConfig(
+        rp_id=args.rp_id,
+        rp_name=args.rp_name or None,
+        origins=origins or None,
+        auth_host=args.auth_host or None,
+        site_url=site_url,
+        site_path=site_path,
+        host=host,
+        port=port,
+        uds=uds,
+    )
 
-    # One-time initialization + bootstrap before starting any server processes.
-    # Lifespan in worker processes will call globals.init with bootstrap disabled.
-    from passkey import globals as _globals  # local import
+    # Export configuration via single JSON env variable for worker processes
+    import json
+
+    config_json = {
+        "rp_id": config.rp_id,
+        "rp_name": config.rp_name,
+        "origins": config.origins,
+        "auth_host": config.auth_host,
+        "site_url": config.site_url,
+        "site_path": config.site_path,
+    }
+    os.environ["PASKIA_CONFIG"] = json.dumps(config_json)
+
+    # Initialize globals (without bootstrap yet)
+    from paskia import globals as _globals  # local import
 
     asyncio.run(
         _globals.init(
-            rp_id=args.rp_id,
-            rp_name=args.rp_name,
-            origin=origin,
-            default_admin=os.getenv("PASSKEY_DEFAULT_ADMIN") or None,
-            default_org=os.getenv("PASSKEY_DEFAULT_ORG") or None,
-            bootstrap=True,
+            rp_id=config.rp_id,
+            rp_name=config.rp_name,
+            origins=config.origins,
+            bootstrap=False,
         )
     )
 
+    # Print startup configuration
+    from paskia.util import startupbox
+
+    startupbox.print_startup_config(config)
+
+    # Bootstrap after startup box is printed
+    from paskia.bootstrap import bootstrap_if_needed
+
+    asyncio.run(bootstrap_if_needed())
+
     # Handle recover-admin command (no server start)
     if args.command == "reset":
-        from passkey.fastapi import reset as reset_cmd  # local import
+        from paskia.fastapi import reset as reset_cmd  # local import
 
         exit_code = reset_cmd.run(getattr(args, "query", None))
         raise SystemExit(exit_code)
 
-    if args.command in {"serve", "dev"}:
+    if args.command == "serve":
         run_kwargs: dict = {
-            "reload": devmode,
             "log_level": "info",
         }
+
+        # Dev mode: enable reload when PASKIA_DEVMODE is set
+        devmode = os.environ.get("PASKIA_DEVMODE") == "1"
+        if devmode:
+            # Security: dev mode must run on localhost:4402 to prevent
+            # accidental public exposure of the Vite dev server
+            if host != "localhost" or port != 4402:
+                raise SystemExit(f"Dev mode requires localhost:4402, got {host}:{port}")
+            run_kwargs["reload"] = True
+            run_kwargs["reload_dirs"] = ["paskia"]
+
         if uds:
             run_kwargs["uds"] = uds
         else:
@@ -220,20 +289,17 @@ def main():
                 run_kwargs["host"] = host
                 run_kwargs["port"] = port
 
-        if devmode:
-            if os.environ.get("PASSKEY_BUN_PARENT") != "1":
-                os.environ["PASSKEY_BUN_PARENT"] = "1"
-                frontend.run_dev()
-
         if all_ifaces and not uds:
+            # Dev mode with all interfaces: use simple single-server approach
             if devmode:
                 run_kwargs["host"] = "::"
                 run_kwargs["port"] = port
-                uvicorn.run("passkey.fastapi:app", **run_kwargs)
+                uvicorn.run("paskia.fastapi:app", **run_kwargs)
             else:
+                # Production: run separate servers for IPv4 and IPv6
                 from uvicorn import Config, Server  # noqa: E402 local import
 
-                from passkey.fastapi import (
+                from paskia.fastapi import (
                     app as fastapi_app,  # noqa: E402 local import
                 )
 
@@ -256,7 +322,7 @@ def main():
 
                 asyncio.run(serve_both())
         else:
-            uvicorn.run("passkey.fastapi:app", **run_kwargs)
+            uvicorn.run("paskia.fastapi:app", **run_kwargs)
 
 
 if __name__ == "__main__":

paskia/fastapi/admin.py

@@ -1,13 +1,24 @@
 import logging
+from datetime import timezone
 from uuid import UUID, uuid4
 
-from fastapi import Body, Cookie, FastAPI, HTTPException, Request
-from fastapi.responses import FileResponse, JSONResponse
+from fastapi import Body, FastAPI, HTTPException, Request, Response
+from fastapi.responses import JSONResponse
 
-from ..authsession import expires
-from ..globals import db
-from ..util import frontend, hostutil, passphrase, permutil, querysafe, tokens
-from . import authz
+from paskia.authsession import reset_expires
+from paskia.fastapi import authz
+from paskia.fastapi.session import AUTH_COOKIE
+from paskia.globals import db
+from paskia.util import (
+    frontend,
+    hostutil,
+    passphrase,
+    permutil,
+    querysafe,
+    tokens,
+    useragent,
+)
+from paskia.util.tokens import encode_session_key, session_key
 
 app = FastAPI()
 
@@ -17,27 +28,37 @@ async def value_error_handler(_request, exc: ValueError):  # pragma: no cover -
     return JSONResponse(status_code=400, content={"detail": str(exc)})
 
 
+@app.exception_handler(authz.AuthException)
+async def auth_exception_handler(_request, exc: authz.AuthException):
+    """Handle AuthException with auth info for UI."""
+    return JSONResponse(
+        status_code=exc.status_code,
+        content=await authz.auth_error_content(exc),
+    )
+
+
 @app.exception_handler(Exception)
-async def general_exception_handler(_request, exc: Exception):
+async def general_exception_handler(_request, exc: Exception):  # pragma: no cover
     logging.exception("Unhandled exception in admin app")
     return JSONResponse(status_code=500, content={"detail": "Internal server error"})
 
 
 @app.get("/")
-async def adminapp(auth=Cookie(None)):
-    try:
-        await authz.verify(auth, ["auth:admin", "auth:org:*"], match=permutil.has_any)
-        return FileResponse(frontend.file("admin/index.html"))
-    except HTTPException as e:
-        return FileResponse(frontend.file("index.html"), status_code=e.status_code)
+async def adminapp(request: Request, auth=AUTH_COOKIE):
+    return Response(*await frontend.read("/auth/admin/index.html"))
 
 
 # -------------------- Organizations --------------------
 
 
 @app.get("/orgs")
-async def admin_list_orgs(auth=Cookie(None)):
-    ctx = await authz.verify(auth, ["auth:admin", "auth:org:*"], match=permutil.has_any)
+async def admin_list_orgs(request: Request, auth=AUTH_COOKIE):
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", "auth:org:*"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
     orgs = await db.instance.list_organizations()
     if "auth:admin" not in ctx.role.permissions:
         orgs = [o for o in orgs if f"auth:org:{o.uuid}" in ctx.role.permissions]
@@ -73,8 +94,12 @@ async def admin_list_orgs(auth=Cookie(None)):
 
 
 @app.post("/orgs")
-async def admin_create_org(payload: dict = Body(...), auth=Cookie(None)):
-    await authz.verify(auth, ["auth:admin"])
+async def admin_create_org(
+    request: Request, payload: dict = Body(...), auth=AUTH_COOKIE
+):
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
     from ..db import Org as OrgDC  # local import to avoid cycles
     from ..db import Role as RoleDC  # local import to avoid cycles
 
@@ -99,16 +124,24 @@ async def admin_create_org(payload: dict = Body(...), auth=Cookie(None)):
 
 @app.put("/orgs/{org_uuid}")
 async def admin_update_org(
-    org_uuid: UUID, payload: dict = Body(...), auth=Cookie(None)
+    org_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
 ):
     ctx = await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
     )
     from ..db import Org as OrgDC  # local import to avoid cycles
 
     current = await db.instance.get_organization(str(org_uuid))
     display_name = payload.get("display_name") or current.display_name
-    permissions = payload.get("permissions") or current.permissions or []
+    permissions = payload.get("permissions")
+    if permissions is None:
+        permissions = current.permissions or []
 
     # Sanity check: prevent removing permissions that would break current user's admin access
     org_admin_perm = f"auth:org:{org_uuid}"
@@ -129,9 +162,13 @@ async def admin_update_org(
 
 
 @app.delete("/orgs/{org_uuid}")
-async def admin_delete_org(org_uuid: UUID, auth=Cookie(None)):
+async def admin_delete_org(org_uuid: UUID, request: Request, auth=AUTH_COOKIE):
     ctx = await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+        max_age="5m",
     )
     if ctx.org.uuid == org_uuid:
         raise ValueError("Cannot delete the organization you belong to")
@@ -156,18 +193,28 @@ async def admin_delete_org(org_uuid: UUID, auth=Cookie(None)):
 
 @app.post("/orgs/{org_uuid}/permission")
 async def admin_add_org_permission(
-    org_uuid: UUID, permission_id: str, auth=Cookie(None)
+    org_uuid: UUID,
+    permission_id: str,
+    request: Request,
+    auth=AUTH_COOKIE,
 ):
-    await authz.verify(auth, ["auth:admin"])
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
     await db.instance.add_permission_to_organization(str(org_uuid), permission_id)
     return {"status": "ok"}
 
 
 @app.delete("/orgs/{org_uuid}/permission")
 async def admin_remove_org_permission(
-    org_uuid: UUID, permission_id: str, auth=Cookie(None)
+    org_uuid: UUID,
+    permission_id: str,
+    request: Request,
+    auth=AUTH_COOKIE,
 ):
-    await authz.verify(auth, ["auth:admin"])
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
     await db.instance.remove_permission_from_organization(str(org_uuid), permission_id)
     return {"status": "ok"}
 
@@ -177,10 +224,16 @@ async def admin_remove_org_permission(
 
 @app.post("/orgs/{org_uuid}/roles")
 async def admin_create_role(
-    org_uuid: UUID, payload: dict = Body(...), auth=Cookie(None)
+    org_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
 ):
     await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
     )
     from ..db import Role as RoleDC
 
@@ -205,11 +258,18 @@ async def admin_create_role(
 
 @app.put("/orgs/{org_uuid}/roles/{role_uuid}")
 async def admin_update_role(
-    org_uuid: UUID, role_uuid: UUID, payload: dict = Body(...), auth=Cookie(None)
+    org_uuid: UUID,
+    role_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
 ):
     # Verify caller is global admin or admin of provided org
     ctx = await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
     )
     role = await db.instance.get_role(role_uuid)
     if role.org_uuid != org_uuid:
@@ -247,9 +307,18 @@ async def admin_update_role(
 
 
 @app.delete("/orgs/{org_uuid}/roles/{role_uuid}")
-async def admin_delete_role(org_uuid: UUID, role_uuid: UUID, auth=Cookie(None)):
+async def admin_delete_role(
+    org_uuid: UUID,
+    role_uuid: UUID,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
     ctx = await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+        max_age="5m",
     )
     role = await db.instance.get_role(role_uuid)
     if role.org_uuid != org_uuid:
@@ -268,10 +337,16 @@ async def admin_delete_role(org_uuid: UUID, role_uuid: UUID, auth=Cookie(None)):
 
 @app.post("/orgs/{org_uuid}/users")
 async def admin_create_user(
-    org_uuid: UUID, payload: dict = Body(...), auth=Cookie(None)
+    org_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
 ):
     await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
     )
     display_name = payload.get("display_name")
     role_name = payload.get("role")
@@ -297,10 +372,17 @@ async def admin_create_user(
 
 @app.put("/orgs/{org_uuid}/users/{user_uuid}/role")
 async def admin_update_user_role(
-    org_uuid: UUID, user_uuid: UUID, payload: dict = Body(...), auth=Cookie(None)
+    org_uuid: UUID,
+    user_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
 ):
     ctx = await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
     )
     new_role = payload.get("role")
     if not new_role:
@@ -318,7 +400,7 @@ async def admin_update_user_role(
     # Sanity check: prevent admin from removing their own access
     if ctx.user.uuid == user_uuid:
         new_role_obj = next((r for r in roles if r.display_name == new_role), None)
-        if new_role_obj:
+        if new_role_obj:  # pragma: no branch - always true, role validated above
             has_admin_access = (
                 "auth:admin" in new_role_obj.permissions
                 or f"auth:org:{org_uuid}" in new_role_obj.permissions
@@ -334,7 +416,10 @@ async def admin_update_user_role(
 
 @app.post("/orgs/{org_uuid}/users/{user_uuid}/create-link")
 async def admin_create_user_registration_link(
-    org_uuid: UUID, user_uuid: UUID, request: Request, auth=Cookie(None)
+    org_uuid: UUID,
+    user_uuid: UUID,
+    request: Request,
+    auth=AUTH_COOKIE,
 ):
     try:
         user_org, _role_name = await db.instance.get_user_organization(user_uuid)
@@ -343,28 +428,50 @@ async def admin_create_user_registration_link(
     if user_org.uuid != org_uuid:
         raise HTTPException(status_code=404, detail="User not found in organization")
     ctx = await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+        max_age="5m",
     )
-    if (
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
         "auth:admin" not in ctx.role.permissions
         and f"auth:org:{org_uuid}" not in ctx.role.permissions
     ):
-        raise HTTPException(status_code=403, detail="Insufficient permissions")
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
+
+    # Check if user has existing credentials
+    credentials = await db.instance.get_credentials_by_user_uuid(user_uuid)
+    token_type = "user registration" if not credentials else "account recovery"
+
     token = passphrase.generate()
-    await db.instance.create_session(
+    expiry = reset_expires()
+    await db.instance.create_reset_token(
         user_uuid=user_uuid,
         key=tokens.reset_key(token),
-        expires=expires(),
-        info={"type": "device addition", "created_by_admin": True},
+        expiry=expiry,
+        token_type=token_type,
     )
-    url = hostutil.reset_link_url(
-        token, request.url.scheme, request.headers.get("host")
-    )
-    return {"url": url, "expires": expires().isoformat()}
+    url = hostutil.reset_link_url(token)
+    return {
+        "url": url,
+        "expires": (
+            expiry.astimezone(timezone.utc).isoformat().replace("+00:00", "Z")
+            if expiry.tzinfo
+            else expiry.replace(tzinfo=timezone.utc).isoformat().replace("+00:00", "Z")
+        ),
+    }
 
 
 @app.get("/orgs/{org_uuid}/users/{user_uuid}")
-async def admin_get_user_detail(org_uuid: UUID, user_uuid: UUID, auth=Cookie(None)):
+async def admin_get_user_detail(
+    org_uuid: UUID,
+    user_uuid: UUID,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
     try:
         user_org, role_name = await db.instance.get_user_organization(user_uuid)
     except ValueError:
@@ -372,13 +479,18 @@ async def admin_get_user_detail(org_uuid: UUID, user_uuid: UUID, auth=Cookie(Non
     if user_org.uuid != org_uuid:
         raise HTTPException(status_code=404, detail="User not found in organization")
     ctx = await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
     )
-    if (
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
         "auth:admin" not in ctx.role.permissions
         and f"auth:org:{org_uuid}" not in ctx.role.permissions
     ):
-        raise HTTPException(status_code=403, detail="Insufficient permissions")
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
     user = await db.instance.get_user_by_uuid(user_uuid)
     cred_ids = await db.instance.get_credentials_by_user_uuid(user_uuid)
     creds: list[dict] = []
@@ -386,7 +498,7 @@ async def admin_get_user_detail(org_uuid: UUID, user_uuid: UUID, auth=Cookie(Non
     for cid in cred_ids:
         try:
             c = await db.instance.get_credential_by_id(cid)
-        except ValueError:
+        except ValueError:  # pragma: no cover - race condition handling
             continue
         aaguid_str = str(c.aaguid)
         aaguids.add(aaguid_str)
@@ -394,9 +506,41 @@ async def admin_get_user_detail(org_uuid: UUID, user_uuid: UUID, auth=Cookie(Non
             {
                 "credential_uuid": str(c.uuid),
                 "aaguid": aaguid_str,
-                "created_at": c.created_at.isoformat(),
-                "last_used": c.last_used.isoformat() if c.last_used else None,
-                "last_verified": c.last_verified.isoformat()
+                "created_at": (
+                    c.created_at.astimezone(timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                    if c.created_at.tzinfo
+                    else c.created_at.replace(tzinfo=timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                ),
+                "last_used": (
+                    c.last_used.astimezone(timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                    if c.last_used and c.last_used.tzinfo
+                    else (
+                        c.last_used.replace(tzinfo=timezone.utc)
+                        .isoformat()
+                        .replace("+00:00", "Z")
+                        if c.last_used
+                        else None
+                    )
+                ),
+                "last_verified": (
+                    c.last_verified.astimezone(timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                    if c.last_verified and c.last_verified.tzinfo
+                    else (
+                        c.last_verified.replace(tzinfo=timezone.utc)
+                        .isoformat()
+                        .replace("+00:00", "Z")
+                        if c.last_verified
+                        else None
+                    )
+                )
                 if c.last_verified
                 else None,
                 "sign_count": c.sign_count,
@@ -405,21 +549,77 @@ async def admin_get_user_detail(org_uuid: UUID, user_uuid: UUID, auth=Cookie(Non
     from .. import aaguid as aaguid_mod
 
     aaguid_info = aaguid_mod.filter(aaguids)
+
+    # Get sessions for the user
+    normalized_request_host = hostutil.normalize_host(request.headers.get("host"))
+    session_records = await db.instance.list_sessions_for_user(user_uuid)
+    current_session_key = session_key(auth)
+    sessions_payload: list[dict] = []
+    for entry in session_records:
+        sessions_payload.append(
+            {
+                "id": encode_session_key(entry.key),
+                "host": entry.host,
+                "ip": entry.ip,
+                "user_agent": useragent.compact_user_agent(entry.user_agent),
+                "last_renewed": (
+                    entry.renewed.astimezone(timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                    if entry.renewed.tzinfo
+                    else entry.renewed.replace(tzinfo=timezone.utc)
+                    .isoformat()
+                    .replace("+00:00", "Z")
+                ),
+                "is_current": entry.key == current_session_key,
+                "is_current_host": bool(
+                    normalized_request_host
+                    and entry.host
+                    and entry.host == normalized_request_host
+                ),
+            }
+        )
+
     return {
         "display_name": user.display_name,
         "org": {"display_name": user_org.display_name},
         "role": role_name,
         "visits": user.visits,
-        "created_at": user.created_at.isoformat() if user.created_at else None,
-        "last_seen": user.last_seen.isoformat() if user.last_seen else None,
+        "created_at": (
+            user.created_at.astimezone(timezone.utc).isoformat().replace("+00:00", "Z")
+            if user.created_at and user.created_at.tzinfo
+            else (
+                user.created_at.replace(tzinfo=timezone.utc)
+                .isoformat()
+                .replace("+00:00", "Z")
+                if user.created_at
+                else None
+            )
+        ),
+        "last_seen": (
+            user.last_seen.astimezone(timezone.utc).isoformat().replace("+00:00", "Z")
+            if user.last_seen and user.last_seen.tzinfo
+            else (
+                user.last_seen.replace(tzinfo=timezone.utc)
+                .isoformat()
+                .replace("+00:00", "Z")
+                if user.last_seen
+                else None
+            )
+        ),
         "credentials": creds,
         "aaguid_info": aaguid_info,
+        "sessions": sessions_payload,
     }
 
 
 @app.put("/orgs/{org_uuid}/users/{user_uuid}/display-name")
 async def admin_update_user_display_name(
-    org_uuid: UUID, user_uuid: UUID, payload: dict = Body(...), auth=Cookie(None)
+    org_uuid: UUID,
+    user_uuid: UUID,
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
 ):
     try:
         user_org, _role_name = await db.instance.get_user_organization(user_uuid)
@@ -428,13 +628,18 @@ async def admin_update_user_display_name(
     if user_org.uuid != org_uuid:
         raise HTTPException(status_code=404, detail="User not found in organization")
     ctx = await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
     )
-    if (
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
         "auth:admin" not in ctx.role.permissions
         and f"auth:org:{org_uuid}" not in ctx.role.permissions
     ):
-        raise HTTPException(status_code=403, detail="Insufficient permissions")
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
     new_name = (payload.get("display_name") or "").strip()
     if not new_name:
         raise HTTPException(status_code=400, detail="display_name required")
@@ -446,7 +651,11 @@ async def admin_update_user_display_name(
 
 @app.delete("/orgs/{org_uuid}/users/{user_uuid}/credentials/{credential_uuid}")
 async def admin_delete_user_credential(
-    org_uuid: UUID, user_uuid: UUID, credential_uuid: UUID, auth=Cookie(None)
+    org_uuid: UUID,
+    user_uuid: UUID,
+    credential_uuid: UUID,
+    request: Request,
+    auth=AUTH_COOKIE,
 ):
     try:
         user_org, _role_name = await db.instance.get_user_organization(user_uuid)
@@ -455,23 +664,80 @@ async def admin_delete_user_credential(
     if user_org.uuid != org_uuid:
         raise HTTPException(status_code=404, detail="User not found in organization")
     ctx = await authz.verify(
-        auth, ["auth:admin", f"auth:org:{org_uuid}"], match=permutil.has_any
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+        max_age="5m",
     )
-    if (
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
         "auth:admin" not in ctx.role.permissions
         and f"auth:org:{org_uuid}" not in ctx.role.permissions
     ):
-        raise HTTPException(status_code=403, detail="Insufficient permissions")
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
     await db.instance.delete_credential(credential_uuid, user_uuid)
     return {"status": "ok"}
 
 
+@app.delete("/orgs/{org_uuid}/users/{user_uuid}/sessions/{session_id}")
+async def admin_delete_user_session(
+    org_uuid: UUID,
+    user_uuid: UUID,
+    session_id: str,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    try:
+        user_org, _role_name = await db.instance.get_user_organization(user_uuid)
+    except ValueError:
+        raise HTTPException(status_code=404, detail="User not found")
+    if user_org.uuid != org_uuid:
+        raise HTTPException(status_code=404, detail="User not found in organization")
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", f"auth:org:{org_uuid}"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
+    if (  # pragma: no cover - defense in depth, authz.verify already checked
+        "auth:admin" not in ctx.role.permissions
+        and f"auth:org:{org_uuid}" not in ctx.role.permissions
+    ):
+        raise authz.AuthException(
+            status_code=403, detail="Insufficient permissions", mode="forbidden"
+        )
+
+    try:
+        target_key = tokens.decode_session_key(session_id)
+    except ValueError as exc:
+        raise HTTPException(
+            status_code=400, detail="Invalid session identifier"
+        ) from exc
+
+    target_session = await db.instance.get_session(target_key)
+    if not target_session or target_session.user_uuid != user_uuid:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    await db.instance.delete_session(target_key)
+
+    # Check if admin terminated their own session
+    current_terminated = target_key == session_key(auth)
+    return {"status": "ok", "current_session_terminated": current_terminated}
+
+
 # -------------------- Permissions (global) --------------------
 
 
 @app.get("/permissions")
-async def admin_list_permissions(auth=Cookie(None)):
-    ctx = await authz.verify(auth, ["auth:admin", "auth:org:*"], match=permutil.has_any)
+async def admin_list_permissions(request: Request, auth=AUTH_COOKIE):
+    ctx = await authz.verify(
+        auth,
+        ["auth:admin", "auth:org:*"],
+        match=permutil.has_any,
+        host=request.headers.get("host"),
+    )
     perms = await db.instance.list_permissions()
 
     # Global admins see all permissions
@@ -485,8 +751,18 @@ async def admin_list_permissions(auth=Cookie(None)):
 
 
 @app.post("/permissions")
-async def admin_create_permission(payload: dict = Body(...), auth=Cookie(None)):
-    await authz.verify(auth, ["auth:admin"])
+async def admin_create_permission(
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth,
+        ["auth:admin"],
+        host=request.headers.get("host"),
+        match=permutil.has_all,
+        max_age="5m",
+    )
     from ..db import Permission as PermDC
 
     perm_id = payload.get("id")
@@ -500,9 +776,14 @@ async def admin_create_permission(payload: dict = Body(...), auth=Cookie(None)):
 
 @app.put("/permission")
 async def admin_update_permission(
-    permission_id: str, display_name: str, auth=Cookie(None)
+    permission_id: str,
+    display_name: str,
+    request: Request,
+    auth=AUTH_COOKIE,
 ):
-    await authz.verify(auth, ["auth:admin"])
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
     from ..db import Permission as PermDC
 
     if not display_name:
@@ -515,8 +796,14 @@ async def admin_update_permission(
 
 
 @app.post("/permission/rename")
-async def admin_rename_permission(payload: dict = Body(...), auth=Cookie(None)):
-    await authz.verify(auth, ["auth:admin"])
+async def admin_rename_permission(
+    request: Request,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth, ["auth:admin"], host=request.headers.get("host"), match=permutil.has_all
+    )
     old_id = payload.get("old_id")
     new_id = payload.get("new_id")
     display_name = payload.get("display_name")
@@ -533,15 +820,25 @@ async def admin_rename_permission(payload: dict = Body(...), auth=Cookie(None)):
         perm = await db.instance.get_permission(old_id)
         display_name = perm.display_name
     rename_fn = getattr(db.instance, "rename_permission", None)
-    if not rename_fn:
+    if not rename_fn:  # pragma: no cover - all current backends support rename
         raise ValueError("Permission renaming not supported by this backend")
     await rename_fn(old_id, new_id, display_name)
     return {"status": "ok"}
 
 
 @app.delete("/permission")
-async def admin_delete_permission(permission_id: str, auth=Cookie(None)):
-    await authz.verify(auth, ["auth:admin"])
+async def admin_delete_permission(
+    permission_id: str,
+    request: Request,
+    auth=AUTH_COOKIE,
+):
+    await authz.verify(
+        auth,
+        ["auth:admin"],
+        host=request.headers.get("host"),
+        match=permutil.has_all,
+        max_age="5m",
+    )
     querysafe.assert_safe(permission_id, field="permission_id")
 
     # Sanity check: prevent deleting critical permissions

paskia/fastapi/api.py

@@ -0,0 +1,282 @@
+import logging
+from contextlib import suppress
+from datetime import datetime, timedelta, timezone
+
+from fastapi import (
+    Depends,
+    FastAPI,
+    HTTPException,
+    Query,
+    Request,
+    Response,
+)
+from fastapi.responses import JSONResponse
+from fastapi.security import HTTPBearer
+
+from paskia.authsession import (
+    EXPIRES,
+    get_reset,
+    get_session,
+    refresh_session_token,
+    session_expiry,
+)
+from paskia.fastapi import authz, session, user
+from paskia.fastapi.session import AUTH_COOKIE, AUTH_COOKIE_NAME
+from paskia.globals import db
+from paskia.globals import passkey as global_passkey
+from paskia.util import frontend, hostutil, htmlutil, passphrase, userinfo
+from paskia.util.tokens import session_key
+
+bearer_auth = HTTPBearer(auto_error=True)
+
+app = FastAPI()
+
+app.mount("/user", user.app)
+
+
+@app.exception_handler(HTTPException)
+async def http_exception_handler(_request: Request, exc: HTTPException):
+    """Ensure auth cookie is cleared on 401 responses (JSON responses only)."""
+    if exc.status_code == 401:
+        resp = JSONResponse(status_code=exc.status_code, content={"detail": exc.detail})
+        session.clear_session_cookie(resp)
+        return resp
+    return JSONResponse(status_code=exc.status_code, content={"detail": exc.detail})
+
+
+# Refresh only if at least this much of the session lifetime has been *consumed*.
+# Consumption is derived from (now + EXPIRES) - current_expires.
+# This guarantees a minimum spacing between DB writes even with frequent /validate calls.
+_REFRESH_INTERVAL = timedelta(minutes=5)
+
+
+@app.exception_handler(ValueError)
+async def value_error_handler(_request: Request, exc: ValueError):
+    return JSONResponse(status_code=400, content={"detail": str(exc)})
+
+
+@app.exception_handler(authz.AuthException)
+async def auth_exception_handler(_request: Request, exc: authz.AuthException):
+    """Handle AuthException with auth info for UI."""
+    return JSONResponse(
+        status_code=exc.status_code,
+        content=await authz.auth_error_content(exc),
+    )
+
+
+@app.exception_handler(Exception)
+async def general_exception_handler(
+    _request: Request, exc: Exception
+):  # pragma: no cover
+    logging.exception("Unhandled exception in API app")
+    return JSONResponse(status_code=500, content={"detail": "Internal server error"})
+
+
+@app.post("/validate")
+async def validate_token(
+    request: Request,
+    response: Response,
+    perm: list[str] = Query([]),
+    auth=AUTH_COOKIE,
+):
+    """Validate the current session and extend its expiry.
+
+    Always refreshes the session (sliding expiration) and re-sets the cookie with a
+    renewed max-age. This keeps active users logged in without needing a separate
+    refresh endpoint.
+    """
+    try:
+        ctx = await authz.verify(auth, perm, host=request.headers.get("host"))
+    except HTTPException:
+        # Global handler will clear cookie if 401
+        raise
+    renewed = False
+    if auth:
+        current_expiry = session_expiry(ctx.session)
+        consumed = EXPIRES - (current_expiry - datetime.now(timezone.utc))
+        if not timedelta(0) < consumed < _REFRESH_INTERVAL:
+            try:
+                await refresh_session_token(
+                    auth,
+                    ip=request.client.host if request.client else "",
+                    user_agent=request.headers.get("user-agent") or "",
+                )
+                session.set_session_cookie(response, auth)
+                renewed = True
+            except ValueError:
+                # Session disappeared, e.g. due to concurrent logout; global handler will clear
+                raise authz.AuthException(
+                    status_code=401, detail="Session expired", mode="login"
+                )
+    return {
+        "valid": True,
+        "user_uuid": str(ctx.session.user_uuid),
+        "renewed": renewed,
+    }
+
+
+@app.get("/forward")
+async def forward_authentication(
+    request: Request,
+    response: Response,
+    perm: list[str] = Query([]),
+    max_age: str | None = Query(None),
+    auth=AUTH_COOKIE,
+):
+    """Forward auth validation for Caddy/Nginx.
+
+    Query Params:
+    - perm: repeated permission IDs the authenticated user must possess (ALL required).
+    - max_age: maximum age of authentication (e.g., "5m", "1h", "30s"). If the session
+               is older than this, user must re-authenticate.
+
+    Success: 204 No Content with Remote-* headers describing the authenticated user.
+    Failure (unauthenticated / unauthorized): 4xx response.
+        - If Accept header contains "text/html": HTML page for authentication
+          with data attributes for mode and other metadata.
+        - Otherwise: JSON response with error details and an `iframe` field
+          pointing to /auth/restricted/?mode=... for iframe-based authentication.
+    """
+    try:
+        ctx = await authz.verify(
+            auth, perm, host=request.headers.get("host"), max_age=max_age
+        )
+        role_permissions = set(ctx.role.permissions or [])
+        if ctx.permissions:
+            role_permissions.update(permission.id for permission in ctx.permissions)
+
+        remote_headers: dict[str, str] = {
+            "Remote-User": str(ctx.user.uuid),
+            "Remote-Name": ctx.user.display_name,
+            "Remote-Groups": ",".join(sorted(role_permissions)),
+            "Remote-Org": str(ctx.org.uuid),
+            "Remote-Org-Name": ctx.org.display_name,
+            "Remote-Role": str(ctx.role.uuid),
+            "Remote-Role-Name": ctx.role.display_name,
+            "Remote-Session-Expires": (
+                session_expiry(ctx.session)
+                .astimezone(timezone.utc)
+                .isoformat()
+                .replace("+00:00", "Z")
+                if session_expiry(ctx.session).tzinfo
+                else session_expiry(ctx.session)
+                .replace(tzinfo=timezone.utc)
+                .isoformat()
+                .replace("+00:00", "Z")
+            ),
+            "Remote-Credential": str(ctx.session.credential_uuid),
+        }
+        return Response(status_code=204, headers=remote_headers)
+    except authz.AuthException as e:
+        # Clear cookie only if session is invalid (not for reauth)
+        if e.clear_session:
+            session.clear_session_cookie(response)
+
+        # Check Accept header to decide response format
+        accept = request.headers.get("accept", "")
+        wants_html = "text/html" in accept
+
+        if wants_html:
+            # Browser request - return full-page HTML with metadata
+            data_attrs = {"mode": e.mode, **e.metadata}
+            html = (await frontend.read("/int/forward/index.html"))[0]
+            html = htmlutil.patch_html_data_attrs(html, **data_attrs)
+            return Response(
+                html, status_code=e.status_code, media_type="text/html; charset=UTF-8"
+            )
+        else:
+            # API request - return JSON with iframe srcdoc HTML
+            return JSONResponse(
+                status_code=e.status_code,
+                content=await authz.auth_error_content(e),
+            )
+
+
+@app.get("/settings")
+async def get_settings():
+    pk = global_passkey.instance
+    base_path = hostutil.ui_base_path()
+    return {
+        "rp_id": pk.rp_id,
+        "rp_name": pk.rp_name,
+        "ui_base_path": base_path,
+        "auth_host": hostutil.configured_auth_host(),
+        "session_cookie": AUTH_COOKIE_NAME,
+    }
+
+
+@app.post("/user-info")
+async def api_user_info(
+    request: Request,
+    response: Response,
+    reset: str | None = None,
+    auth=AUTH_COOKIE,
+):
+    """Get user information including credentials, sessions, and permissions.
+
+    Can be called with either:
+    - A session cookie (auth) for authenticated users
+    - A reset token for users in password reset flow
+    """
+    authenticated = False
+    session_record = None
+    reset_token = None
+    try:
+        if reset:
+            if not passphrase.is_well_formed(reset):
+                raise ValueError("Invalid reset token")
+            reset_token = await get_reset(reset)
+            target_user_uuid = reset_token.user_uuid
+        else:
+            if auth is None:
+                raise authz.AuthException(
+                    status_code=401,
+                    detail="Authentication required",
+                    mode="login",
+                )
+            session_record = await get_session(auth, host=request.headers.get("host"))
+            authenticated = True
+            target_user_uuid = session_record.user_uuid
+    except ValueError as e:
+        raise HTTPException(401, str(e))
+
+    # Return minimal response for reset tokens
+    if not authenticated and reset_token:
+        return await userinfo.format_reset_user_info(target_user_uuid, reset_token)
+
+    # Return full user info for authenticated users
+    assert auth is not None
+    assert session_record is not None
+
+    return await userinfo.format_user_info(
+        user_uuid=target_user_uuid,
+        auth=auth,
+        session_record=session_record,
+        request_host=request.headers.get("host"),
+    )
+
+
+@app.post("/logout")
+async def api_logout(request: Request, response: Response, auth=AUTH_COOKIE):
+    if not auth:
+        return {"message": "Already logged out"}
+    try:
+        await get_session(auth, host=request.headers.get("host"))
+    except ValueError:
+        return {"message": "Already logged out"}
+    with suppress(Exception):
+        await db.instance.delete_session(session_key(auth))
+    session.clear_session_cookie(response)
+    return {"message": "Logged out successfully"}
+
+
+@app.post("/set-session")
+async def api_set_session(
+    request: Request, response: Response, auth=Depends(bearer_auth)
+):
+    user = await get_session(auth.credentials, host=request.headers.get("host"))
+    session.set_session_cookie(response, auth.credentials)
+    return {
+        "message": "Session cookie set successfully",
+        "user_uuid": str(user.user_uuid),
+    }

paskia/fastapi/auth_host.py

@@ -0,0 +1,97 @@
+"""Middleware for handling auth host redirects."""
+
+from fastapi import Request, Response
+from fastapi.responses import RedirectResponse
+
+from paskia.util import hostutil, passphrase
+
+
+def is_ui_path(path: str) -> bool:
+    """Check if the path is a UI endpoint."""
+    ui_paths = {
+        "/",
+        "/admin",
+        "/admin/",
+        "/auth",
+        "/auth/",
+        "/auth/admin",
+        "/auth/admin/",
+    }
+    if path in ui_paths:
+        return True
+    # Treat reset token pages as UI (dynamic). Accept single-segment tokens.
+    if path.startswith("/auth/"):
+        token = path[6:]
+        if token and "/" not in token and passphrase.is_well_formed(token):
+            return True
+    else:
+        token = path[1:]
+        if token and "/" not in token and passphrase.is_well_formed(token):
+            return True
+    return False
+
+
+def is_restricted_path(path: str) -> bool:
+    """Check if the path is restricted (API/admin endpoints)."""
+    return path.startswith(("/auth/api/admin/", "/auth/api/user/", "/auth/ws/"))
+
+
+def should_redirect_to_auth_host(path: str) -> bool:
+    """Determine if the request should be redirected to the auth host."""
+    if path in {"/", "/auth", "/auth/"}:
+        return False
+    return is_ui_path(path) or is_restricted_path(path)
+
+
+def redirect_to_auth_host(request: Request, cfg: str, path: str) -> Response:
+    """Create a redirect response to the auth host."""
+    if is_restricted_path(path):
+        return Response(status_code=404)
+    new_path = (
+        path[5:] or "/" if is_ui_path(path) and path.startswith("/auth") else path
+    )
+    return RedirectResponse(f"{request.url.scheme}://{cfg}{new_path}", 307)
+
+
+def should_redirect_auth_path_to_root(path: str) -> bool:
+    """Check if /auth/ UI path should be redirected to root on auth host."""
+    if not path.startswith("/auth/"):
+        return False
+    ui_paths = {"/auth", "/auth/", "/auth/admin", "/auth/admin/"}
+    if path in ui_paths:
+        return True
+    # Check for reset token
+    token = path[6:]
+    return bool(token and "/" not in token and passphrase.is_well_formed(token))
+
+
+def redirect_to_root_on_auth_host(request: Request, cur: str, path: str) -> Response:
+    """Create a redirect response to root path on the same host."""
+    new_path = path[5:] or "/"
+    return RedirectResponse(f"{request.url.scheme}://{cur}{new_path}", 307)
+
+
+async def redirect_middleware(request: Request, call_next):
+    """Middleware to handle auth host redirects."""
+    cfg = hostutil.configured_auth_host()
+    if not cfg:
+        return await call_next(request)
+
+    cur = hostutil.normalize_host(request.headers.get("host"))
+    if not cur:
+        return await call_next(request)
+
+    cfg_normalized = hostutil.normalize_host(cfg)
+    on_auth_host = cur == cfg_normalized
+
+    path = request.url.path or "/"
+
+    if not on_auth_host:
+        if not should_redirect_to_auth_host(path):
+            return await call_next(request)
+        return redirect_to_auth_host(request, cfg, path)
+    else:
+        # On auth host: force UI endpoints at root
+        if should_redirect_auth_path_to_root(path):
+            return redirect_to_root_on_auth_host(request, cur, path)
+        return await call_next(request)

paskia/fastapi/authz.py

@@ -0,0 +1,110 @@
+import logging
+
+from fastapi import HTTPException
+
+from paskia.util import permutil, sessionutil
+
+logger = logging.getLogger(__name__)
+
+
+class AuthException(HTTPException):
+    """Exception raised during authentication/authorization with metadata for the UI.
+
+    Attributes:
+        status_code: HTTP status code (401 for auth, 403 for authz)
+        detail: Error message
+        mode: UI mode ('login' or 'reauth')
+        clear_session: Whether to clear the session cookie (True for invalid sessions)
+        metadata: Additional data to pass to the frontend
+    """
+
+    def __init__(
+        self,
+        status_code: int,
+        detail: str,
+        mode: str,
+        clear_session: bool = False,
+        **metadata,
+    ):
+        super().__init__(status_code=status_code, detail=detail)
+        self.mode = mode
+        self.clear_session = clear_session
+        self.metadata = metadata
+
+
+async def auth_error_content(exc: AuthException) -> dict:
+    """Generate JSON response content for an AuthException.
+
+    Returns a dict with detail, mode, and iframe URL for src embedding.
+    """
+    # Build hash fragment from mode and metadata
+    params = {"mode": exc.mode, **exc.metadata}
+    fragment = "&".join(f"{k}={v}" for k, v in params.items() if v is not None)
+    iframe_url = f"/auth/restricted/#{fragment}"
+    return {
+        "detail": exc.detail,
+        "auth": {
+            "mode": exc.mode,
+            "iframe": iframe_url,
+            **exc.metadata,
+        },
+    }
+
+
+async def verify(
+    auth: str | None,
+    perm: list[str],
+    match=permutil.has_all,
+    host: str | None = None,
+    max_age: str | None = None,
+):
+    """Validate session token and optional list of required permissions.
+
+    Returns the session context.
+
+    Raises AuthException on failure with metadata for UI rendering.
+    """
+    if not auth:
+        raise AuthException(
+            status_code=401,
+            detail="Authentication required",
+            mode="login",
+        )
+
+    ctx = await permutil.session_context(auth, host)
+    if not ctx:
+        raise AuthException(
+            status_code=401,
+            detail="Your session has expired. Please sign in again.",
+            mode="login",
+            clear_session=True,
+        )
+    # Check max_age requirement if specified
+    if max_age:
+        try:
+            if not sessionutil.check_session_age(ctx, max_age):
+                raise AuthException(
+                    status_code=401,
+                    detail="Additional authentication required",
+                    mode="reauth",
+                )
+        except ValueError as e:
+            # Invalid max_age format - log but don't fail the request
+            logger.warning(f"Invalid max_age format '{max_age}': {e}")
+
+    if not match(ctx, perm):
+        # Determine which permissions are missing for clearer diagnostics
+        missing = sorted(set(perm) - set(ctx.role.permissions))
+        logger.warning(
+            "Permission denied: user=%s role=%s missing=%s required=%s granted=%s",  # noqa: E501
+            getattr(ctx.user, "uuid", "?"),
+            getattr(ctx.role, "display_name", "?"),
+            missing,
+            perm,
+            ctx.role.permissions,
+        )
+        raise AuthException(
+            status_code=403, mode="forbidden", detail="Permission required"
+        )
+
+    return ctx

paskia/fastapi/mainapp.py

@@ -0,0 +1,122 @@
+import logging
+import os
+from contextlib import asynccontextmanager
+from pathlib import Path
+
+from fastapi import FastAPI, HTTPException, Request, Response
+from fastapi.responses import FileResponse, RedirectResponse
+from fastapi.staticfiles import StaticFiles
+
+from paskia.fastapi import admin, api, auth_host, ws
+from paskia.fastapi.session import AUTH_COOKIE
+from paskia.util import frontend, hostutil, passphrase
+
+# Path to examples/index.html when running from source tree
+_EXAMPLES_DIR = Path(__file__).parent.parent.parent / "examples"
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):  # pragma: no cover - startup path
+    """Application lifespan to ensure globals (DB, passkey) are initialized in each process.
+
+    Configuration is passed via PASKIA_CONFIG JSON env variable (set by the CLI entrypoint)
+    so that uvicorn reload / multiprocess workers inherit the settings.
+    All keys are guaranteed to exist; values are already normalized by __main__.py.
+    """
+    import json
+
+    from paskia import globals
+
+    config = json.loads(os.environ["PASKIA_CONFIG"])
+
+    try:
+        # CLI (__main__) performs bootstrap once; here we skip to avoid duplicate work
+        await globals.init(
+            rp_id=config["rp_id"],
+            rp_name=config["rp_name"],
+            origins=config["origins"],
+            bootstrap=False,
+        )
+    except ValueError as e:
+        logging.error(f"⚠️ {e}")
+        # Re-raise to fail fast
+        raise
+
+    yield
+    # (Optional) add shutdown cleanup here later
+
+
+app = FastAPI(lifespan=lifespan)
+
+# Apply redirections to auth-host if configured (deny access to restricted endpoints, remove /auth/)
+app.middleware("http")(auth_host.redirect_middleware)
+
+app.mount("/auth/api/admin/", admin.app)
+app.mount("/auth/api/", api.app)
+app.mount("/auth/ws/", ws.app)
+
+# In dev mode (PASKIA_DEVMODE=1), Vite serves assets directly; skip static files mount
+if not frontend.is_dev_mode():
+    app.mount(
+        "/auth/assets/",
+        StaticFiles(directory=frontend.file("auth", "assets")),
+        name="assets",
+    )
+
+
+@app.get("/auth/restricted/")
+async def restricted_view():
+    """Serve the restricted/authentication UI for iframe embedding."""
+    return Response(*await frontend.read("/auth/restricted/index.html"))
+
+
+# Navigable URLs are defined here. We support both / and /auth/ as the base path
+# / is used on a dedicated auth site, /auth/ on app domains with auth
+
+
+@app.get("/")
+@app.get("/auth/")
+async def frontapp(request: Request, response: Response, auth=AUTH_COOKIE):
+    """Serve the user profile app.
+
+    The frontend handles mode detection (host mode vs full profile) based on settings.
+    Access control is handled via APIs.
+    """
+    return Response(*await frontend.read("/auth/index.html"))
+
+
+@app.get("/admin", include_in_schema=False)
+@app.get("/auth/admin", include_in_schema=False)
+async def admin_root_redirect():
+    return RedirectResponse(f"{hostutil.ui_base_path()}admin/", status_code=307)
+
+
+@app.get("/admin/", include_in_schema=False)
+async def admin_root(request: Request, auth=AUTH_COOKIE):
+    return await admin.adminapp(request, auth)  # Delegated to admin app
+
+
+@app.get("/auth/examples/", include_in_schema=False)
+async def examples_page():
+    """Serve examples/index.html when running from source tree.
+
+    This provides a simple test page for API mode authentication flows
+    without depending on the Vue frontend build.
+    """
+    index_file = _EXAMPLES_DIR / "index.html"
+    if not index_file.is_file():
+        raise HTTPException(
+            status_code=404,
+            detail="Examples not available (not running from source tree)",
+        )
+    return FileResponse(index_file, media_type="text/html")
+
+
+# Note: this catch-all handler must be the last route defined
+@app.get("/{reset}")
+@app.get("/auth/{reset}")
+async def reset_link(reset: str):
+    """Serve the reset app directly with an injected reset token."""
+    if not passphrase.is_well_formed(reset):
+        raise HTTPException(status_code=404)
+    return Response(*await frontend.read("/int/reset/index.html"))

paskia/fastapi/reset.py

@@ -1,7 +1,7 @@
 """CLI support for creating user credential reset links.
 
 Usage (via main CLI):
-    passkey-auth reset [query]
+    paskia reset [query]
 
 If query is omitted, the master admin (first Administration role user in
 an organization granting auth:admin) is targeted. Otherwise query is
@@ -15,10 +15,10 @@ from __future__ import annotations
 import asyncio
 from uuid import UUID
 
-from passkey import authsession as _authsession
-from passkey import globals as _g
-from passkey.util import hostutil, passphrase
-from passkey.util import tokens as _tokens
+from paskia import authsession as _authsession
+from paskia import globals as _g
+from paskia.util import hostutil, passphrase
+from paskia.util import tokens as _tokens
 
 
 async def _resolve_targets(query: str | None):
@@ -63,11 +63,12 @@ async def _resolve_targets(query: str | None):
 
 async def _create_reset(user, role_name: str):
     token = passphrase.generate()
-    await _g.db.instance.create_session(
+    expiry = _authsession.reset_expires()
+    await _g.db.instance.create_reset_token(
         user_uuid=user.uuid,
         key=_tokens.reset_key(token),
-        expires=_authsession.expires(),
-        info={"type": "manual reset", "role": role_name},
+        expiry=expiry,
+        token_type="manual reset",
     )
     return hostutil.reset_link_url(token), token
 

paskia/fastapi/session.py

@@ -8,26 +8,45 @@ This module provides FastAPI-specific session management functionality:
 Generic session management functions have been moved to authsession.py
 """
 
-from fastapi import Request, Response, WebSocket
+from fastapi import Cookie, Request, Response, WebSocket
 
-from ..authsession import EXPIRES
+from paskia.authsession import EXPIRES
+
+AUTH_COOKIE_NAME = "__Host-paskia"
+AUTH_COOKIE = Cookie(None, alias=AUTH_COOKIE_NAME)
 
 
 def infodict(request: Request | WebSocket, type: str) -> dict:
     """Extract client information from request."""
     return {
-        "ip": request.client.host if request.client else "",
-        "user_agent": request.headers.get("user-agent", "")[:500],
-        "type": type,
+        "ip": request.client.host if request.client else None,
+        "user_agent": request.headers.get("user-agent", "")[:500] or None,
+        "session_type": type,
     }
 
 
 def set_session_cookie(response: Response, token: str) -> None:
     """Set the session token as an HTTP-only cookie."""
     response.set_cookie(
-        key="auth",
+        key=AUTH_COOKIE_NAME,
         value=token,
         max_age=int(EXPIRES.total_seconds()),
         httponly=True,
         secure=True,
+        path="/",
+        samesite="lax",
+    )
+
+
+def clear_session_cookie(response: Response) -> None:
+    # FastAPI's delete_cookie does not set the secure attribute
+    response.set_cookie(
+        key=AUTH_COOKIE_NAME,
+        value="",
+        max_age=0,
+        expires=0,
+        httponly=True,
+        secure=True,
+        path="/",
+        samesite="lax",
     )

paskia/fastapi/user.py

@@ -0,0 +1,162 @@
+from datetime import timezone
+from uuid import UUID
+
+from fastapi import (
+    Body,
+    FastAPI,
+    HTTPException,
+    Request,
+    Response,
+)
+from fastapi.responses import JSONResponse
+
+from paskia.authsession import (
+    delete_credential,
+    expires,
+    get_session,
+)
+from paskia.fastapi import authz, session
+from paskia.fastapi.session import AUTH_COOKIE
+from paskia.globals import db
+from paskia.util import hostutil, passphrase, tokens
+from paskia.util.tokens import decode_session_key, session_key
+
+app = FastAPI()
+
+
+@app.exception_handler(authz.AuthException)
+async def auth_exception_handler(_request, exc: authz.AuthException):
+    """Handle AuthException with auth info for UI."""
+    return JSONResponse(
+        status_code=exc.status_code,
+        content=await authz.auth_error_content(exc),
+    )
+
+
+@app.put("/display-name")
+async def user_update_display_name(
+    request: Request,
+    response: Response,
+    payload: dict = Body(...),
+    auth=AUTH_COOKIE,
+):
+    if not auth:
+        raise authz.AuthException(
+            status_code=401, detail="Authentication Required", mode="login"
+        )
+    try:
+        s = await get_session(auth, host=request.headers.get("host"))
+    except ValueError as e:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        ) from e
+    new_name = (payload.get("display_name") or "").strip()
+    if not new_name:
+        raise HTTPException(status_code=400, detail="display_name required")
+    if len(new_name) > 64:
+        raise HTTPException(status_code=400, detail="display_name too long")
+    await db.instance.update_user_display_name(s.user_uuid, new_name)
+    return {"status": "ok"}
+
+
+@app.post("/logout-all")
+async def api_logout_all(request: Request, response: Response, auth=AUTH_COOKIE):
+    if not auth:
+        return {"message": "Already logged out"}
+    try:
+        s = await get_session(auth, host=request.headers.get("host"))
+    except ValueError:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        )
+    await db.instance.delete_sessions_for_user(s.user_uuid)
+    session.clear_session_cookie(response)
+    return {"message": "Logged out from all hosts"}
+
+
+@app.delete("/session/{session_id}")
+async def api_delete_session(
+    request: Request,
+    response: Response,
+    session_id: str,
+    auth=AUTH_COOKIE,
+):
+    if not auth:
+        raise authz.AuthException(
+            status_code=401, detail="Authentication Required", mode="login"
+        )
+    try:
+        current_session = await get_session(auth, host=request.headers.get("host"))
+    except ValueError as exc:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        ) from exc
+
+    try:
+        target_key = decode_session_key(session_id)
+    except ValueError as exc:
+        raise HTTPException(
+            status_code=400, detail="Invalid session identifier"
+        ) from exc
+
+    target_session = await db.instance.get_session(target_key)
+    if not target_session or target_session.user_uuid != current_session.user_uuid:
+        raise HTTPException(status_code=404, detail="Session not found")
+
+    await db.instance.delete_session(target_key)
+    current_terminated = target_key == session_key(auth)
+    if current_terminated:
+        session.clear_session_cookie(response)  # explicit because 200
+    return {"status": "ok", "current_session_terminated": current_terminated}
+
+
+@app.delete("/credential/{uuid}")
+async def api_delete_credential(
+    request: Request,
+    response: Response,
+    uuid: UUID,
+    auth: str = AUTH_COOKIE,
+):
+    # Require recent authentication for sensitive operation
+    await authz.verify(auth, [], host=request.headers.get("host"), max_age="5m")
+    try:
+        await delete_credential(uuid, auth, host=request.headers.get("host"))
+    except ValueError as e:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        ) from e
+    return {"message": "Credential deleted successfully"}
+
+
+@app.post("/create-link")
+async def api_create_link(
+    request: Request,
+    response: Response,
+    auth=AUTH_COOKIE,
+):
+    # Require recent authentication for sensitive operation
+    await authz.verify(auth, [], host=request.headers.get("host"), max_age="5m")
+    try:
+        s = await get_session(auth, host=request.headers.get("host"))
+    except ValueError as e:
+        raise authz.AuthException(
+            status_code=401, detail="Session expired", mode="login"
+        ) from e
+    token = passphrase.generate()
+    expiry = expires()
+    await db.instance.create_reset_token(
+        user_uuid=s.user_uuid,
+        key=tokens.reset_key(token),
+        expiry=expiry,
+        token_type="device addition",
+    )
+    url = hostutil.reset_link_url(token)
+    return {
+        "message": "Registration link generated successfully",
+        "url": url,
+        "expires": (
+            expiry.astimezone(timezone.utc).isoformat().replace("+00:00", "Z")
+            if expiry.tzinfo
+            else expiry.replace(tzinfo=timezone.utc).isoformat().replace("+00:00", "Z")
+        ),
+    }

paskia/fastapi/ws.py

@@ -2,14 +2,15 @@ import logging
 from functools import wraps
 from uuid import UUID
 
-from fastapi import Cookie, FastAPI, WebSocket, WebSocketDisconnect
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
 from webauthn.helpers.exceptions import InvalidAuthenticationResponse
 
-from ..authsession import create_session, expires, get_reset, get_session
-from ..globals import db, passkey
-from ..util import passphrase
-from ..util.tokens import create_token, session_key
-from .session import infodict
+from paskia.authsession import create_session, get_reset, get_session
+from paskia.fastapi import authz
+from paskia.fastapi.session import AUTH_COOKIE, infodict
+from paskia.globals import db, passkey
+from paskia.util import passphrase
+from paskia.util.tokens import create_token, session_key
 
 
 # WebSocket error handling decorator
@@ -21,11 +22,18 @@ def websocket_error_handler(func):
             return await func(ws, *args, **kwargs)
         except WebSocketDisconnect:
             pass
+        except authz.AuthException as e:
+            await ws.send_json(
+                {
+                    "status": e.status_code,
+                    **(await authz.auth_error_content(e)),
+                }
+            )
         except (ValueError, InvalidAuthenticationResponse) as e:
-            await ws.send_json({"detail": str(e)})
+            await ws.send_json({"status": 401, "detail": str(e)})
         except Exception:
             logging.exception("Internal Server Error")
-            await ws.send_json({"detail": "Internal Server Error"})
+            await ws.send_json({"status": 500, "detail": "Internal Server Error"})
 
     return wrapper
 
@@ -34,21 +42,32 @@ def websocket_error_handler(func):
 app = FastAPI()
 
 
+def _validate_origin(ws: WebSocket) -> str:
+    """Extract and validate origin from WebSocket request headers.
+
+    Raises:
+        ValueError: If origin header is missing or not in allowed list
+    """
+    origin = ws.headers.get("origin")
+    if not origin:
+        raise ValueError("Origin header is required for WebSocket connections")
+    return passkey.instance.validate_origin(origin)
+
+
 async def register_chat(
     ws: WebSocket,
     user_uuid: UUID,
     user_name: str,
+    origin: str,
     credential_ids: list[bytes] | None = None,
-    origin: str | None = None,
 ):
     """Generate registration options and send them to the client."""
     options, challenge = passkey.instance.reg_generate_options(
         user_id=user_uuid,
         user_name=user_name,
         credential_ids=credential_ids,
-        origin=origin,
     )
-    await ws.send_json(options)
+    await ws.send_json({"optionsJSON": options})
     response = await ws.receive_json()
     return passkey.instance.reg_verify(response, challenge, user_uuid, origin=origin)
 
@@ -56,24 +75,31 @@ async def register_chat(
 @app.websocket("/register")
 @websocket_error_handler
 async def websocket_register_add(
-    ws: WebSocket, reset: str | None = None, name: str | None = None, auth=Cookie(None)
+    ws: WebSocket,
+    reset: str | None = None,
+    name: str | None = None,
+    auth=AUTH_COOKIE,
 ):
     """Register a new credential for an existing user.
 
     Supports either:
-    - Normal session via auth cookie
+    - Normal session via auth cookie (requires recent authentication)
     - Reset token supplied as ?reset=... (auth cookie ignored)
     """
-    origin = ws.headers["origin"]
+    origin = _validate_origin(ws)
+    host = origin.split("://", 1)[1]
     if reset is not None:
         if not passphrase.is_well_formed(reset):
-            raise ValueError("Invalid reset token")
+            raise ValueError(
+                f"The reset link for {passkey.instance.rp_name} is invalid or has expired"
+            )
         s = await get_reset(reset)
+        user_uuid = s.user_uuid
     else:
-        if not auth:
-            raise ValueError("Authentication Required")
-        s = await get_session(auth)
-    user_uuid = s.user_uuid
+        # Require recent authentication for adding a new passkey
+        ctx = await authz.verify(auth, perm=[], host=host, max_age="5m")
+        user_uuid = ctx.session.user_uuid
+        s = ctx.session
 
     # Get user information and determine effective user_name for this registration
     user = await db.instance.get_user_by_uuid(user_uuid)
@@ -85,18 +111,20 @@ async def websocket_register_add(
     challenge_ids = await db.instance.get_credentials_by_user_uuid(user_uuid)
 
     # WebAuthn registration
-    credential = await register_chat(ws, user_uuid, user_name, challenge_ids, origin)
+    credential = await register_chat(ws, user_uuid, user_name, origin, challenge_ids)
 
     # Create a new session and store everything in database
     token = create_token()
+    metadata = infodict(ws, "authenticated")
     await db.instance.create_credential_session(  # type: ignore[attr-defined]
         user_uuid=user_uuid,
         credential=credential,
         reset_key=(s.key if reset is not None else None),
         session_key=session_key(token),
-        session_expires=expires(),
-        session_info=infodict(ws, "authenticated"),
         display_name=user_name,
+        host=host,
+        ip=metadata.get("ip"),
+        user_agent=metadata.get("user_agent"),
     )
     auth = token
 
@@ -113,25 +141,55 @@ async def websocket_register_add(
 
 @app.websocket("/authenticate")
 @websocket_error_handler
-async def websocket_authenticate(ws: WebSocket):
-    origin = ws.headers["origin"]
-    options, challenge = passkey.instance.auth_generate_options()
-    await ws.send_json(options)
+async def websocket_authenticate(ws: WebSocket, auth=AUTH_COOKIE):
+    origin = _validate_origin(ws)
+    host = origin.split("://", 1)[1]
+
+    # If there's an existing session, restrict to that user's credentials (reauth)
+    session_user_uuid = None
+    credential_ids = None
+    if auth:
+        try:
+            session = await get_session(auth, host=host)
+            session_user_uuid = session.user_uuid
+            credential_ids = await db.instance.get_credentials_by_user_uuid(
+                session_user_uuid
+            )
+        except ValueError:
+            pass  # Invalid/expired session - allow normal authentication
+
+    options, challenge = passkey.instance.auth_generate_options(
+        credential_ids=credential_ids
+    )
+    await ws.send_json({"optionsJSON": options})
     # Wait for the client to use his authenticator to authenticate
     credential = passkey.instance.auth_parse(await ws.receive_json())
     # Fetch from the database by credential ID
-    stored_cred = await db.instance.get_credential_by_id(credential.raw_id)
+    try:
+        stored_cred = await db.instance.get_credential_by_id(credential.raw_id)
+    except ValueError:
+        raise ValueError(
+            f"This passkey is no longer registered with {passkey.instance.rp_name}"
+        )
+
+    # If reauth mode, verify the credential belongs to the session's user
+    if session_user_uuid and stored_cred.user_uuid != session_user_uuid:
+        raise ValueError("This passkey belongs to a different account")
+
     # Verify the credential matches the stored data
-    passkey.instance.auth_verify(credential, challenge, stored_cred, origin=origin)
+    passkey.instance.auth_verify(credential, challenge, stored_cred, origin)
     # Update both credential and user's last_seen timestamp
     await db.instance.login(stored_cred.user_uuid, stored_cred)
 
     # Create a session token for the authenticated user
     assert stored_cred.uuid is not None
+    metadata = infodict(ws, "auth")
     token = await create_session(
         user_uuid=stored_cred.user_uuid,
-        info=infodict(ws, "auth"),
         credential_uuid=stored_cred.uuid,
+        host=host,
+        ip=metadata.get("ip") or "",
+        user_agent=metadata.get("user_agent") or "",
     )
 
     await ws.send_json(

paskia/frontend-build/auth/admin/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Admin</title>
+    <script type="module" crossorigin src="/auth/assets/admin-D8zxJOk4.js"></script>
+    <link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
+    <link rel="modulepreload" crossorigin href="/auth/assets/helpers-CU0-cyzg.js">
+    <link rel="modulepreload" crossorigin href="/auth/assets/AccessDenied-guOGfNm-.js">
+    <link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
+    <link rel="stylesheet" crossorigin href="/auth/assets/AccessDenied-TAST_piX.css">
+    <link rel="stylesheet" crossorigin href="/auth/assets/admin-DIOoLLHy.css">
+  </head>
+  <body>
+    <div id="admin-app"></div>
+  </body>
+  </html>

paskia/frontend-build/auth/assets/AccessDenied-TAST_piX.css

@@ -0,0 +1 @@
+.breadcrumbs[data-v-2924b990]{margin:.25rem 0 .5rem;line-height:1.2;color:var(--color-text-muted)}.breadcrumbs ol[data-v-2924b990]{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}.breadcrumbs li[data-v-2924b990]{display:inline-flex;align-items:center;gap:.25rem;font-size:.9rem}.breadcrumbs a[data-v-2924b990]{text-decoration:none;color:var(--color-link);padding:0 .25rem;border-radius:4px;transition:color .2s ease,background .2s ease}.breadcrumbs a[data-v-2924b990]:hover,.breadcrumbs a[data-v-2924b990]:focus-visible{text-decoration:underline;color:var(--color-link-hover);outline:none}.breadcrumbs .sep[data-v-2924b990]{color:var(--color-text-muted);margin:0}.user-info[data-v-2994268a]{display:grid;grid-template-columns:auto 1fr;gap:10px}.user-info h3[data-v-2994268a]{grid-column:span 2}.org-role-sub[data-v-2994268a]{grid-column:span 2;display:flex;flex-direction:column;margin:-.15rem 0 .25rem}.org-line[data-v-2994268a]{font-size:.7rem;font-weight:600;line-height:1.1;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.role-line[data-v-2994268a]{font-size:.65rem;color:var(--color-text-muted);line-height:1.1}.user-info span[data-v-2994268a]{text-align:left}.user-name-heading[data-v-2994268a]{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0 0 .25rem}.user-name-row[data-v-2994268a]{display:inline-flex;align-items:center;gap:.35rem;max-width:100%}.user-name-row.editing[data-v-2994268a]{flex:1 1 auto}.icon[data-v-2994268a]{flex:0 0 auto}.display-name[data-v-2994268a]{font-weight:600;font-size:1.05em;line-height:1.2;max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.name-input[data-v-2994268a]{width:auto;flex:1 1 140px;min-width:120px;padding:6px 8px;font-size:.9em;border:1px solid var(--color-border-strong);border-radius:6px;background:var(--color-surface);color:var(--color-text)}.user-name-heading .name-input[data-v-2994268a]{width:auto}.name-input[data-v-2994268a]:focus{outline:none;border-color:var(--color-accent);box-shadow:var(--focus-ring)}.mini-btn[data-v-2994268a]{width:auto;padding:4px 6px;margin:0;font-size:.75em;line-height:1;background:var(--color-surface-muted);border:1px solid var(--color-border-strong);border-radius:6px;cursor:pointer;transition:background .2s,transform .15s,color .2s ease;color:var(--color-text)}.mini-btn[data-v-2994268a]:hover:not(:disabled){background:var(--color-accent-soft);color:var(--color-accent)}.mini-btn[data-v-2994268a]:active:not(:disabled){transform:translateY(1px)}.mini-btn[data-v-2994268a]:disabled{opacity:.5;cursor:not-allowed}@media(max-width:480px){.user-name-heading[data-v-2994268a]{flex-direction:column;align-items:flex-start}.user-name-row.editing[data-v-2994268a]{width:100%}.display-name[data-v-2994268a]{max-width:100%}}.modal-overlay[data-v-d5e0cc32]{position:fixed;inset:0;background:transparent;backdrop-filter:blur(.1rem) brightness(.7);-webkit-backdrop-filter:blur(.1rem) brightness(.7);display:flex;align-items:center;justify-content:center;z-index:1000}.modal[data-v-d5e0cc32]{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:calc(var(--space-lg) - var(--space-xs));max-width:500px;width:min(500px,90vw);max-height:90vh;overflow-y:auto}.modal[data-v-d5e0cc32] .modal-title,.modal[data-v-d5e0cc32] h3{margin:0 0 var(--space-md);font-size:1.25rem;font-weight:600;color:var(--color-heading)}.modal[data-v-d5e0cc32] form,.modal[data-v-d5e0cc32] .modal-form{display:flex;flex-direction:column;gap:var(--space-md)}.modal[data-v-d5e0cc32] .modal-form label{display:flex;flex-direction:column;gap:var(--space-xs);font-weight:500}.modal[data-v-d5e0cc32] .modal-form input,.modal[data-v-d5e0cc32] .modal-form textarea{padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);font-size:1rem;line-height:1.4;min-height:2.5rem}.modal[data-v-d5e0cc32] .modal-form input:focus,.modal[data-v-d5e0cc32] .modal-form textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px #c7d2fe}.modal[data-v-d5e0cc32] .modal-actions{display:flex;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-md);margin-bottom:var(--space-xs)}.name-edit-form[data-v-944620d3]{display:flex;flex-direction:column;gap:var(--space-md)}.error[data-v-944620d3]{color:var(--color-danger-text)}.small[data-v-944620d3]{font-size:.9rem}.session-meta-info{grid-column:span 2}[data-component=session-list-section] .session-list{display:flex;flex-direction:column;gap:1.5em}.session-group{display:flex;flex-direction:column;gap:.5em}.session-group-host{font-size:1em;font-weight:600;margin:0}.session-group-host a{color:inherit;text-decoration:none}.session-group-host a:hover{text-decoration:underline}.session-group-host.is-current-site{color:var(--color-accent)}.session-group-sessions{display:grid;grid-template-columns:repeat(Line truncated

paskia/frontend-build/auth/assets/AccessDenied-guOGfNm-.js

@@ -0,0 +1,8 @@
+import{D as Bt,r as J,E as kt,G as Ht,H as ae,I as It,J as jt,K as zt,L as $t,B as ue,M as Kt,c as z,w as Nt,N as Jt,O as Yt,q as Y,C as Gt,P as Qt,Q as xt,d as N,i as U,u as F,e as R,f as h,t as P,n as re,_ as Q,F as ne,x as le,R as Wt,S as Rt,o as At,l as ce,z as Zt,T as Xt,k as ye,U as en,V as tn}from"./_plugin-vue_export-helper-R4vr2A9I.js";import{f as G,g as Ge}from"./helpers-CU0-cyzg.js";let Tt;const de=e=>Tt=e,Mt=Symbol();function He(e){return e&&typeof e=="object"&&Object.prototype.toString.call(e)==="[object Object]"&&typeof e.toJSON!="function"}var se;(function(e){e.direct="direct",e.patchObject="patch object",e.patchFunction="patch function"})(se||(se={}));function Sr(){const e=Bt(!0),r=e.run(()=>J({}));let o=[],t=[];const n=kt({install(s){de(n),n._a=s,s.provide(Mt,n),s.config.globalProperties.$pinia=n,t.forEach(i=>o.push(i)),t=[]},use(s){return this._a?o.push(s):t.push(s),this},_p:o,_a:null,_e:e,_s:new Map,state:r});return n}const Pt=()=>{};function Qe(e,r,o,t=Pt){e.add(r);const n=()=>{e.delete(r)&&t()};return!o&&zt()&&$t(n),n}function X(e,...r){e.forEach(o=>{o(...r)})}const nn=e=>e(),xe=Symbol(),we=Symbol();function je(e,r){e instanceof Map&&r instanceof Map?r.forEach((o,t)=>e.set(t,o)):e instanceof Set&&r instanceof Set&&r.forEach(e.add,e);for(const o in r){if(!r.hasOwnProperty(o))continue;const t=r[o],n=e[o];He(n)&&He(t)&&e.hasOwnProperty(o)&&!ae(t)&&!It(t)?e[o]=je(n,t):e[o]=t}return e}const sn=Symbol();function rn(e){return!He(e)||!Object.prototype.hasOwnProperty.call(e,sn)}const{assign:K}=Object;function on(e){return!!(ae(e)&&e.effect)}function an(e,r,o,t){const{state:n,actions:s,getters:i}=r,u=o.state.value[e];let a;function c(){u||(o.state.value[e]=n?n():{});const f=Kt(o.state.value[e]);return K(f,s,Object.keys(i||{}).reduce((y,w)=>(y[w]=kt(z(()=>{de(o);const d=o._s.get(e);return i[w].call(d,d)})),y),{}))}return a=Lt(e,c,r,o,t,!0),a}function Lt(e,r,o={},t,n,s){let i;const u=K({actions:{}},o),a={deep:!0};let c,f,y=new Set,w=new Set,d;const l=t.state.value[e];!s&&!l&&(t.state.value[e]={}),J({});let _;function L(m){let g;c=f=!1,typeof m=="function"?(m(t.state.value[e]),g={type:se.patchFunction,storeId:e,events:d}):(je(t.state.value[e],m),g={type:se.patchObject,payload:m,storeId:e,events:d});const v=_=Symbol();ue().then(()=>{_===v&&(c=!0)}),f=!0,X(y,g,t.state.value[e])}const I=s?function(){const{state:g}=o,v=g?g():{};this.$patch(b=>{K(b,v)})}:Pt;function p(){i.stop(),y.clear(),w.clear(),t._s.delete(e)}const C=(m,g="")=>{if(xe in m)return m[we]=g,m;const v=function(){de(t);const b=Array.from(arguments),B=new Set,k=new Set;function T(D){B.add(D)}function V(D){k.add(D)}X(w,{args:b,name:v[we],store:M,after:T,onError:V});let q;try{q=m.apply(this&&this.$id===e?this:M,b)}catch(D){throw X(k,D),D}return q instanceof Promise?q.then(D=>(X(B,D),D)).catch(D=>(X(k,D),Promise.reject(D))):(X(B,q),q)};return v[xe]=!0,v[we]=g,v},A={_p:t,$id:e,$onAction:Qe.bind(null,w),$patch:L,$reset:I,$subscribe(m,g={}){const v=Qe(y,m,g.detached,()=>b()),b=i.run(()=>Nt(()=>t.state.value[e],B=>{(g.flush==="sync"?f:c)&&m({storeId:e,type:se.direct,events:d},B)},K({},a,g)));return v},$dispose:p},M=Ht(A);t._s.set(e,M);const E=(t._a&&t._a.runWithContext||nn)(()=>t._e.run(()=>(i=Bt()).run(()=>r({action:C}))));for(const m in E){const g=E[m];if(ae(g)&&!on(g)||It(g))s||(l&&rn(g)&&(ae(g)?g.value=l[m]:je(g,l[m])),t.state.value[e][m]=g);else if(typeof g=="function"){const v=C(g,m);E[m]=v,u.actions[m]=g}}return K(M,E),K(jt(M),E),Object.defineProperty(M,"$state",{get:()=>t.state.value[e],set:m=>{L(g=>{K(g,m)})}}),t._p.forEach(m=>{K(M,i.run(()=>m({store:M,app:t._a,pinia:t,options:u})))}),l&&s&&o.hydrate&&o.hydrate(M.$state,l),c=!0,f=!0,M}function un(e,r,o){let t;const n=typeof r=="function";t=n?o:r;function s(i,u){const a=Yt();return i=i||(a?Jt(Mt,null):null),i&&de(i),i=Tt,i._s.has(e)||(n?Lt(e,r,t,i):an(e,t,i)),i._s.get(e)}return s.$id=e,s}const ze=un("auth",{state:()=>({userInfo:null,isLoading:!1,settings:null,currentView:"login",status:{message:"",type:"info",show:!1}}),getters:{},actions:{setLoading(e){this.isLoading=!!e},showMessage(e,r="info",o=3e3){this.status={message:e,type:r,show:!0},o>0&&setTimeout(()=>{this.status.show=!1},o)},async setSessionCookie(e){if(!e?.session_token)throw console.error("setSessionCookie called with missing session_token:",e),new Error("Authentication response missing session_token");return await Y("/auth/api/set-session",{method:"POST",headers:{Authorization:`Bearer ${e.session_token}`}})},async register(){this.isLoading=!0;try{const e=await xt();return await this.setSessionCookie(e),await this.loadUserInfo(),this.selectView(),e}finally{this.isLoading=!1}},async authenticate(){this.isLoading=!0;try{const e=await Qt();return await this.setSessionCookie(e),await this.loadUserInfo(),this.selectView(),e}finally{this.isLoading=!1}},selectView(){this.userInfo?this.currentView="profile":this.currentView="login"},async loadSettings(){this.settings=await Gt()},async loadUserInfo(){try{this.userInfo=await Y("/auth/aLine truncated
+]))+`;O.KANJI=new RegExp(o,"g"),O.BYTE_KANJI=new RegExp("[^A-Z0-9 $%*+\\-./:]+","g"),O.BYTE=new RegExp(t,"g"),O.NUMERIC=new RegExp(e,"g"),O.ALPHANUMERIC=new RegExp(r,"g");const n=new RegExp("^"+o+"$"),s=new RegExp("^"+e+"$"),i=new RegExp("^[A-Z0-9 $%*+\\-./:]+$");return O.testKanji=function(a){return n.test(a)},O.testNumeric=function(a){return s.test(a)},O.testAlphanumeric=function(a){return i.test(a)},O}var dt;function W(){return dt||(dt=1,(function(e){const r=Ut(),o=qt();e.NUMERIC={id:"Numeric",bit:1,ccBits:[10,12,14]},e.ALPHANUMERIC={id:"Alphanumeric",bit:2,ccBits:[9,11,13]},e.BYTE={id:"Byte",bit:4,ccBits:[8,16,16]},e.KANJI={id:"Kanji",bit:8,ccBits:[8,10,12]},e.MIXED={bit:-1},e.getCharCountIndicator=function(s,i){if(!s.ccBits)throw new Error("Invalid mode: "+s);if(!r.isValid(i))throw new Error("Invalid version: "+i);return i>=1&&i<10?s.ccBits[0]:i<27?s.ccBits[1]:s.ccBits[2]},e.getBestModeForData=function(s){return o.testNumeric(s)?e.NUMERIC:o.testAlphanumeric(s)?e.ALPHANUMERIC:o.testKanji(s)?e.KANJI:e.BYTE},e.toString=function(s){if(s&&s.id)return s.id;throw new Error("Invalid mode")},e.isValid=function(s){return s&&s.bit&&s.ccBits};function t(n){if(typeof n!="string")throw new Error("Param is not a string");switch(n.toLowerCase()){case"numeric":return e.NUMERIC;case"alphanumeric":return e.ALPHANUMERIC;case"kanji":return e.KANJI;case"byte":return e.BYTE;default:throw new Error("Unknown mode: "+n)}}e.from=function(s,i){if(e.isValid(s))return s;try{return t(s)}catch{return i}}})(Re)),Re}var ft;function Ns(){return ft||(ft=1,(function(e){const r=x(),o=Dt(),t=$e(),n=W(),s=Ut(),i=7973,u=r.getBCHDigit(i);function a(w,d,l){for(let _=1;_<=40;_++)if(d<=e.getCapacity(_,l,w))return _}function c(w,d){return n.getCharCountIndicator(w,d)+4}function f(w,d){let l=0;return w.forEach(function(_){const L=c(_.mode,d);l+=L+_.getBitsLength()}),l}function y(w,d){for(let l=1;l<=40;l++)if(f(w,l)<=e.getCapacity(l,d,n.MIXED))return l}e.from=function(d,l){return s.isValid(d)?parseInt(d,10):l},e.getCapacity=function(d,l,_){if(!s.isValid(d))throw new Error("Invalid QR Code version");typeof _>"u"&&(_=n.BYTE);const L=r.getSymbolTotalCodewords(d),I=o.getTotalCodewordsCount(d,l),p=(L-I)*8;if(_===n.MIXED)return p;const C=p-c(_,d);switch(_){case n.NUMERIC:return Math.floor(C/10*3);case n.ALPHANUMERIC:return Math.floor(C/11*2);case n.KANJI:return Math.floor(C/13);case n.BYTE:default:return Math.floor(C/8)}},e.getBestVersionForData=function(d,l){let _;const L=t.from(l,t.M);if(Array.isArray(d)){if(d.length>1)return y(d,L);if(d.length===0)return 1;_=d[0]}else _=d;return a(_.mode,_.getLength(),L)},e.getEncodedBits=function(d){if(!s.isValid(d)||d<7)throw new Error("Invalid QR Code version");let l=d<<12;for(;r.getBCHDigit(l)-u>=0;)l^=i<<r.getBCHDigit(l)-u;return d<<12|l}})(Ne)),Ne}var Te={},ht;function Rs(){if(ht)return Te;ht=1;const e=x(),r=1335,o=21522,t=e.getBCHDigit(r);return Te.getEncodedBits=function(s,i){const u=s.bit<<3|i;let a=u<<10;for(;e.getBCHDigit(a)-t>=0;)a^=r<<e.getBCHDigit(a)-t;return(u<<10|a)^o},Te}var Me={},Pe,gt;function As(){if(gt)return Pe;gt=1;const e=W();function r(o){this.mode=e.NUMERIC,this.data=o.toString()}return r.getBitsLength=function(t){return 10*Math.floor(t/3)+(t%3?t%3*3+1:0)},r.prototype.getLength=function(){return this.data.length},r.prototype.getBitsLength=function(){return r.getBitsLength(this.data.length)},r.prototype.write=function(t){let n,s,i;for(n=0;n+3<=this.data.length;n+=3)s=this.data.substr(n,3),i=parseInt(s,10),t.put(i,10);const u=this.data.length-n;u>0&&(s=this.data.substr(n),i=parseInt(s,10),t.put(i,u*3+1))},Pe=r,Pe}var Le,mt;function Ts(){if(mt)return Le;mt=1;const e=W(),r=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"," ","$","%","*","+","-",".","/",":"];function o(t){this.mode=e.ALPHANUMERIC,this.data=t}return o.getBitsLength=function(n){return 11*Math.floor(n/2)+6*(n%2)},o.prototype.getLength=function(){return this.data.length},o.prototype.getBitsLength=function(){return o.getBitsLength(this.data.length)},o.prototype.write=function(n){let s;for(s=0;s+2<=this.data.length;s+=2){let i=r.indexOf(this.data[s])*45;i+=r.indexOf(this.data[s+1]),n.put(i,11)}this.data.length%2&&n.put(r.indexOf(this.data[s]),6)},Le=o,Le}var De,yt;function Ms(){if(yt)return De;yt=1;const e=W();function r(o){this.mode=e.BYTE,typeof o=="string"?this.data=new TextEncoder().encode(o):this.data=new Uint8Array(o)}return r.getBitsLength=function(t){return t*8},r.prototype.getLength=function(){return this.data.length},r.prototype.getBitsLength=function(){return r.getBitsLength(this.data.length)},r.prototype.write=function(o){for(let t=0,n=this.data.length;t<n;t++)o.put(this.data[t],8)},De=r,De}var Ue,wt;function Ps(){if(wt)return Ue;wt=1;const e=W(),r=x();function o(t){this.mode=e.KANJI,this.data=t}return o.getBitsLength=function(n){return n*13},o.prototype.getLength=function(){return this.data.length},o.prototype.getBitsLength=funct
Line truncated
+Make sure your charset is UTF-8`);s=(s>>>8&255)*192+(s&255),t.put(s,13)}},Ue=o,Ue}var qe={exports:{}},pt;function Ls(){return pt||(pt=1,(function(e){var r={single_source_shortest_paths:function(o,t,n){var s={},i={};i[t]=0;var u=r.PriorityQueue.make();u.push(t,0);for(var a,c,f,y,w,d,l,_,L;!u.empty();){a=u.pop(),c=a.value,y=a.cost,w=o[c]||{};for(f in w)w.hasOwnProperty(f)&&(d=w[f],l=y+d,_=i[f],L=typeof i[f]>"u",(L||_>l)&&(i[f]=l,u.push(f,l),s[f]=c))}if(typeof n<"u"&&typeof i[n]>"u"){var I=["Could not find a path from ",t," to ",n,"."].join("");throw new Error(I)}return s},extract_shortest_path_from_predecessor_list:function(o,t){for(var n=[],s=t;s;)n.push(s),o[s],s=o[s];return n.reverse(),n},find_path:function(o,t,n){var s=r.single_source_shortest_paths(o,t,n);return r.extract_shortest_path_from_predecessor_list(s,n)},PriorityQueue:{make:function(o){var t=r.PriorityQueue,n={},s;o=o||{};for(s in t)t.hasOwnProperty(s)&&(n[s]=t[s]);return n.queue=[],n.sorter=o.sorter||t.default_sorter,n},default_sorter:function(o,t){return o.cost-t.cost},push:function(o,t){var n={value:o,cost:t};this.queue.push(n),this.queue.sort(this.sorter)},pop:function(){return this.queue.shift()},empty:function(){return this.queue.length===0}}};e.exports=r})(qe)),qe.exports}var vt;function Ds(){return vt||(vt=1,(function(e){const r=W(),o=As(),t=Ts(),n=Ms(),s=Ps(),i=qt(),u=x(),a=Ls();function c(I){return unescape(encodeURIComponent(I)).length}function f(I,p,C){const A=[];let M;for(;(M=I.exec(C))!==null;)A.push({data:M[0],index:M.index,mode:p,length:M[0].length});return A}function y(I){const p=f(i.NUMERIC,r.NUMERIC,I),C=f(i.ALPHANUMERIC,r.ALPHANUMERIC,I);let A,M;return u.isKanjiModeEnabled()?(A=f(i.BYTE,r.BYTE,I),M=f(i.KANJI,r.KANJI,I)):(A=f(i.BYTE_KANJI,r.BYTE,I),M=[]),p.concat(C,A,M).sort(function(E,m){return E.index-m.index}).map(function(E){return{data:E.data,mode:E.mode,length:E.length}})}function w(I,p){switch(p){case r.NUMERIC:return o.getBitsLength(I);case r.ALPHANUMERIC:return t.getBitsLength(I);case r.KANJI:return s.getBitsLength(I);case r.BYTE:return n.getBitsLength(I)}}function d(I){return I.reduce(function(p,C){const A=p.length-1>=0?p[p.length-1]:null;return A&&A.mode===C.mode?(p[p.length-1].data+=C.data,p):(p.push(C),p)},[])}function l(I){const p=[];for(let C=0;C<I.length;C++){const A=I[C];switch(A.mode){case r.NUMERIC:p.push([A,{data:A.data,mode:r.ALPHANUMERIC,length:A.length},{data:A.data,mode:r.BYTE,length:A.length}]);break;case r.ALPHANUMERIC:p.push([A,{data:A.data,mode:r.BYTE,length:A.length}]);break;case r.KANJI:p.push([A,{data:A.data,mode:r.BYTE,length:c(A.data)}]);break;case r.BYTE:p.push([{data:A.data,mode:r.BYTE,length:c(A.data)}])}}return p}function _(I,p){const C={},A={start:{}};let M=["start"];for(let S=0;S<I.length;S++){const E=I[S],m=[];for(let g=0;g<E.length;g++){const v=E[g],b=""+S+g;m.push(b),C[b]={node:v,lastCount:0},A[b]={};for(let B=0;B<M.length;B++){const k=M[B];C[k]&&C[k].node.mode===v.mode?(A[k][b]=w(C[k].lastCount+v.length,v.mode)-w(C[k].lastCount,v.mode),C[k].lastCount+=v.length):(C[k]&&(C[k].lastCount=v.length),A[k][b]=w(v.length,v.mode)+4+r.getCharCountIndicator(v.mode,p))}}M=m}for(let S=0;S<M.length;S++)A[M[S]].end=0;return{map:A,table:C}}function L(I,p){let C;const A=r.getBestModeForData(I);if(C=r.from(p,A),C!==r.BYTE&&C.bit<A.bit)throw new Error('"'+I+'" cannot be encoded with mode '+r.toString(C)+`.
+ Suggested mode is: `+r.toString(A));switch(C===r.KANJI&&!u.isKanjiModeEnabled()&&(C=r.BYTE),C){case r.NUMERIC:return new o(I);case r.ALPHANUMERIC:return new t(I);case r.KANJI:return new s(I);case r.BYTE:return new n(I)}}e.fromArray=function(p){return p.reduce(function(C,A){return typeof A=="string"?C.push(L(A,null)):A.data&&C.push(L(A.data,A.mode)),C},[])},e.fromString=function(p,C){const A=y(p,u.isKanjiModeEnabled()),M=l(A),S=_(M,C),E=a.find_path(S.map,"start","end"),m=[];for(let g=1;g<E.length-1;g++)m.push(S.table[E[g]].node);return e.fromArray(d(m))},e.rawSplit=function(p){return e.fromArray(y(p,u.isKanjiModeEnabled()))}})(Me)),Me}var Ct;function Us(){if(Ct)return ve;Ct=1;const e=x(),r=$e(),o=Cs(),t=bs(),n=_s(),s=Ss(),i=Es(),u=Dt(),a=Is(),c=Ns(),f=Rs(),y=W(),w=Ds();function d(S,E){const m=S.size,g=s.getPositions(E);for(let v=0;v<g.length;v++){const b=g[v][0],B=g[v][1];for(let k=-1;k<=7;k++)if(!(b+k<=-1||m<=b+k))for(let T=-1;T<=7;T++)B+T<=-1||m<=B+T||(k>=0&&k<=6&&(T===0||T===6)||T>=0&&T<=6&&(k===0||k===6)||k>=2&&k<=4&&T>=2&&T<=4?S.set(b+k,B+T,!0,!0):S.set(b+k,B+T,!1,!0))}}function l(S){const E=S.size;for(let m=8;m<E-8;m++){const g=m%2===0;S.set(m,6,g,!0),S.set(6,m,g,!0)}}function _(S,E){const m=n.getPositions(E);for(let g=0;g<m.length;g++){const v=m[g][0],b=m[g][1];for(let B=-2;B<=2;B++)for(let k=-2;k<=2;k++)B===-2||B===2||k===-2||k===2||B===0&&k===0?S.set(v+B,b+k,!0,!0):S.set(v+B,b+k,!1,!0)}}function L(S,E){const m=S.size,g=c.getEncodedBits(E);let v,b,B;for(let k=0;k<18;k++)v=Math.floor(k/3),b=k%3+m-8-3,B=(g>>k&1)===1,S.set(v,b,B,!0),S.set(b,v,B,!0)}function I(S,E,m){const g=S.size,v=f.getEncodedBits(E,m);let b,B;for(b=0;b<15;b++)B=(v>>b&1)===1,b<6?S.set(b,8,B,!0):b<8?S.set(b+1,8,B,!0):S.set(g-15+b,8,B,!0),b<8?S.set(8,g-b-1,B,!0):b<9?S.set(8,15-b-1+1,B,!0):S.set(8,15-b-1,B,!0);S.set(g-8,8,1,!0)}function p(S,E){const m=S.size;let g=-1,v=m-1,b=7,B=0;for(let k=m-1;k>0;k-=2)for(k===6&&k--;;){for(let T=0;T<2;T++)if(!S.isReserved(v,k-T)){let V=!1;B<E.length&&(V=(E[B]>>>b&1)===1),S.set(v,k-T,V),b--,b===-1&&(B++,b=7)}if(v+=g,v<0||m<=v){v-=g,g=-g;break}}}function C(S,E,m){const g=new o;m.forEach(function(T){g.put(T.mode.bit,4),g.put(T.getLength(),y.getCharCountIndicator(T.mode,S)),T.write(g)});const v=e.getSymbolTotalCodewords(S),b=u.getTotalCodewordsCount(S,E),B=(v-b)*8;for(g.getLengthInBits()+4<=B&&g.put(0,4);g.getLengthInBits()%8!==0;)g.putBit(0);const k=(B-g.getLengthInBits())/8;for(let T=0;T<k;T++)g.put(T%2?17:236,8);return A(g,S,E)}function A(S,E,m){const g=e.getSymbolTotalCodewords(E),v=u.getTotalCodewordsCount(E,m),b=g-v,B=u.getBlocksCount(E,m),k=g%B,T=B-k,V=Math.floor(g/B),q=Math.floor(b/B),D=q+1,Ke=V-q,Vt=new a(Ke);let fe=0;const oe=new Array(B),Je=new Array(B);let he=0;const Ot=new Uint8Array(S.buffer);for(let Z=0;Z<B;Z++){const me=Z<T?q:D;oe[Z]=Ot.slice(fe,fe+me),Je[Z]=Vt.encode(oe[Z]),fe+=me,he=Math.max(he,me)}const ge=new Uint8Array(g);let Ye=0,H,j;for(H=0;H<he;H++)for(j=0;j<B;j++)H<oe[j].length&&(ge[Ye++]=oe[j][H]);for(H=0;H<Ke;H++)for(j=0;j<B;j++)ge[Ye++]=Je[j][H];return ge}function M(S,E,m,g){let v;if(Array.isArray(S))v=w.fromArray(S);else if(typeof S=="string"){let V=E;if(!V){const q=w.rawSplit(S);V=c.getBestVersionForData(q,m)}v=w.fromString(S,V||40)}else throw new Error("Invalid data");const b=c.getBestVersionForData(v,m);if(!b)throw new Error("The amount of data is too big to be stored in a QR Code");if(!E)E=b;else if(E<b)throw new Error(`
+The chosen QR Code version cannot contain this amount of data.
+Minimum version required to store current data is: `+b+`.
+`);const B=C(E,m,v),k=e.getSymbolSize(E),T=new t(k);return d(T,E),l(T),_(T,E),I(T,m,0),E>=7&&L(T,E),p(T,B),isNaN(g)&&(g=i.getBestMask(T,I.bind(null,T,m))),i.applyMask(g,T),I(T,m,g),{modules:T,version:E,errorCorrectionLevel:m,maskPattern:g,segments:v}}return ve.create=function(E,m){if(typeof E>"u"||E==="")throw new Error("No input text");let g=r.M,v,b;return typeof m<"u"&&(g=r.from(m.errorCorrectionLevel,r.M),v=c.from(m.version),b=i.from(m.maskPattern),m.toSJISFunc&&e.setToSJISFunction(m.toSJISFunc)),M(E,v,g,b)},ve}var Fe={},Ve={},bt;function Ft(){return bt||(bt=1,(function(e){function r(o){if(typeof o=="number"&&(o=o.toString()),typeof o!="string")throw new Error("Color should be defined as hex string");let t=o.slice().replace("#","").split("");if(t.length<3||t.length===5||t.length>8)throw new Error("Invalid hex color: "+o);(t.length===3||t.length===4)&&(t=Array.prototype.concat.apply([],t.map(function(s){return[s,s]}))),t.length===6&&t.push("F","F");const n=parseInt(t.join(""),16);return{r:n>>24&255,g:n>>16&255,b:n>>8&255,a:n&255,hex:"#"+t.slice(0,6).join("")}}e.getOptions=function(t){t||(t={}),t.color||(t.color={});const n=typeof t.margin>"u"||t.margin===null||t.margin<0?4:t.margin,s=t.width&&t.width>=21?t.width:void 0,i=t.scale||4;return{width:s,scale:s?4:i,margin:n,color:{dark:r(t.color.dark||"#000000ff"),light:r(t.color.light||"#ffffffff")},type:t.type,rendererOpts:t.rendererOpts||{}}},e.getScale=function(t,n){return n.width&&n.width>=t+n.margin*2?n.width/(t+n.margin*2):n.scale},e.getImageWidth=function(t,n){const s=e.getScale(t,n);return Math.floor((t+n.margin*2)*s)},e.qrToImageData=function(t,n,s){const i=n.modules.size,u=n.modules.data,a=e.getScale(i,s),c=Math.floor((i+s.margin*2)*a),f=s.margin*a,y=[s.color.light,s.color.dark];for(let w=0;w<c;w++)for(let d=0;d<c;d++){let l=(w*c+d)*4,_=s.color.light;if(w>=f&&d>=f&&w<c-f&&d<c-f){const L=Math.floor((w-f)/a),I=Math.floor((d-f)/a);_=y[u[L*i+I]?1:0]}t[l++]=_.r,t[l++]=_.g,t[l++]=_.b,t[l]=_.a}}})(Ve)),Ve}var _t;function qs(){return _t||(_t=1,(function(e){const r=Ft();function o(n,s,i){n.clearRect(0,0,s.width,s.height),s.style||(s.style={}),s.height=i,s.width=i,s.style.height=i+"px",s.style.width=i+"px"}function t(){try{return document.createElement("canvas")}catch{throw new Error("You need to specify a canvas element")}}e.render=function(s,i,u){let a=u,c=i;typeof a>"u"&&(!i||!i.getContext)&&(a=i,i=void 0),i||(c=t()),a=r.getOptions(a);const f=r.getImageWidth(s.modules.size,a),y=c.getContext("2d"),w=y.createImageData(f,f);return r.qrToImageData(w.data,s,a),o(y,c,f),y.putImageData(w,0,0),c},e.renderToDataURL=function(s,i,u){let a=u;typeof a>"u"&&(!i||!i.getContext)&&(a=i,i=void 0),a||(a={});const c=e.render(s,i,a),f=a.type||"image/png",y=a.rendererOpts||{};return c.toDataURL(f,y.quality)}})(Fe)),Fe}var Oe={},St;function Fs(){if(St)return Oe;St=1;const e=Ft();function r(n,s){const i=n.a/255,u=s+'="'+n.hex+'"';return i<1?u+" "+s+'-opacity="'+i.toFixed(2).slice(1)+'"':u}function o(n,s,i){let u=n+s;return typeof i<"u"&&(u+=" "+i),u}function t(n,s,i){let u="",a=0,c=!1,f=0;for(let y=0;y<n.length;y++){const w=Math.floor(y%s),d=Math.floor(y/s);!w&&!c&&(c=!0),n[y]?(f++,y>0&&w>0&&n[y-1]||(u+=c?o("M",w+i,.5+d+i):o("m",a,0),a=0,c=!1),w+1<s&&n[y+1]||(u+=o("h",f),f=0)):a++}return u}return Oe.render=function(s,i,u){const a=e.getOptions(i),c=s.modules.size,f=s.modules.data,y=c+a.margin*2,w=a.color.light.a?"<path "+r(a.color.light,"fill")+' d="M0 0h'+y+"v"+y+'H0z"/>':"",d="<path "+r(a.color.dark,"stroke")+' d="'+t(f,c,a.margin)+'"/>',l='viewBox="0 0 '+y+" "+y+'"',L='<svg xmlns="http://www.w3.org/2000/svg" '+(a.width?'width="'+a.width+'" height="'+a.width+'" ':"")+l+' shape-rendering="crispEdges">'+w+d+`</svg>
+`;return typeof u=="function"&&u(null,L),L},Oe}var Et;function Vs(){if(Et)return ee;Et=1;const e=vs(),r=Us(),o=qs(),t=Fs();function n(s,i,u,a,c){const f=[].slice.call(arguments,1),y=f.length,w=typeof f[y-1]=="function";if(!w&&!e())throw new Error("Callback required as last argument");if(w){if(y<2)throw new Error("Too few arguments provided");y===2?(c=u,u=i,i=a=void 0):y===3&&(i.getContext&&typeof c>"u"?(c=a,a=void 0):(c=a,a=u,u=i,i=void 0))}else{if(y<1)throw new Error("Too few arguments provided");return y===1?(u=i,i=a=void 0):y===2&&!i.getContext&&(a=u,u=i,i=void 0),new Promise(function(d,l){try{const _=r.create(u,a);d(s(_,i,a))}catch(_){l(_)}})}try{const d=r.create(u,a);c(null,s(d,i,a))}catch(d){c(d)}}return ee.create=r.create,ee.toCanvas=n.bind(null,o.render),ee.toDataURL=n.bind(null,o.renderToDataURL),ee.toString=n.bind(null,function(s,i,u){return t.render(s,u)}),ee}var Os=Vs();const Hs=ps(Os),js={class:"device-dialog",role:"dialog","aria-modal":"true","aria-labelledby":"regTitle"},zs={class:"reg-header-row"},$s={id:"regTitle",class:"reg-title"},Ks={key:0},Js={key:1},Ys={class:"device-link-section"},Gs={class:"qr-container"},Qs=["href"],xs={class:"reg-help"},Ws={key:0},Zs={key:1},Xs={class:"reg-actions"},er={key:1,class:"registration-inline-wrapper"},tr={class:"registration-inline-block section-block"},nr={class:"section-header"},sr={class:"inline-heading"},rr={key:0},or={key:1},ir={class:"section-body"},ar={class:"device-link-section"},ur={class:"qr-container"},lr=["href"],cr={class:"reg-help"},dr={key:0},fr={key:1},hr={class:"button-row",style:{"margin-top":"1rem"}},gr={__name:"RegistrationLinkModal",props:{endpoint:{type:String,required:!0},autoCopy:{type:Boolean,default:!0},userName:{type:String,default:null},inline:{type:Boolean,default:!1},showCloseInInline:{type:Boolean,default:!1},prefixCopyWithUserName:{type:Boolean,default:!1}},emits:["close","generated","copied"],setup(e,{emit:r}){const o=ze(),t=e,n=r,s=J(null),i=J(null),u=J(null),a=z(()=>s.value?s.value.replace(/^[^:]+:\/\//,""):""),c=z(()=>{const d=G(i.value);return`⚠️ Expires ${d.startsWith("In ")?d.substring(3):d} and can only be used once.`});async function f(){try{const d=await Y(t.endpoint,{method:"POST"});s.value=d.url,i.value=d.expires,n("generated",{url:d.url,expires:d.expires}),await ue(),y(),t.autoCopy&&w()}catch(d){console.error("Failed to create link",d),en(d)&&o.showMessage(tn(d),"error",4e3),n("close")}}async function y(){s.value&&(await ue(),u.value&&Hs.toCanvas(u.value,s.value,{scale:8},d=>{d&&console.error(d)}))}async function w(){if(!s.value)return;let d=s.value;t.prefixCopyWithUserName&&t.userName&&(d=`${t.userName} ${d}`);try{await navigator.clipboard.writeText(d),n("copied",d),t.inline||n("close")}catch{}}return At(f),Nt(s,()=>y(),{flush:"post"}),(d,l)=>!e.inline&&s.value?(R(),N("div",{key:0,class:"dialog-overlay",onKeydown:l[2]||(l[2]=Rt(ye(_=>d.$emit("close"),["prevent"]),["esc"]))},[h("div",js,[h("div",zs,[h("h2",$s,[l[4]||(l[4]=ce(" 📱 ",-1)),e.userName?(R(),N("span",Ks,"Registration for "+P(e.userName),1)):(R(),N("span",Js,"Device Registration Link"))]),h("button",{class:"icon-btn",onClick:l[0]||(l[0]=_=>d.$emit("close")),"aria-label":"Close"},"❌")]),h("div",Ys,[h("div",Gs,[h("a",{href:s.value,onClick:ye(w,["prevent"]),class:"qr-link"},[h("canvas",{ref_key:"qrCanvas",ref:u,class:"qr-code"},null,512),h("p",null,P(a.value),1)],8,Qs),h("p",xs,[e.userName?(R(),N("span",Ws,"The user should open this link on the device where they want to register.")):(R(),N("span",Zs,"Open or scan this link on the device you wish to register to your account.")),l[5]||(l[5]=h("br",null,null,-1)),h("small",null,P(c.value),1)])])]),h("div",Xs,[h("button",{class:"btn-secondary",onClick:l[1]||(l[1]=_=>d.$emit("close"))},"Close"),h("button",{class:"btn-primary",onClick:w},"Copy Link")])])],32)):e.inline&&s.value?(R(),N("div",er,[h("div",tr,[h("div",nr,[h("h2",sr,[l[6]||(l[6]=ce("📱 ",-1)),e.userName?(R(),N("span",rr,"Registration for "+P(e.userName),1)):(R(),N("span",or,"Device Registration Link"))])]),h("div",ir,[h("div",ar,[h("div",ur,[h("a",{href:s.value,onClick:ye(w,["prevent"]),class:"qr-link"},[h("canvas",{ref_key:"qrCanvas",ref:u,class:"qr-code"},null,512),h("p",null,P(a.value),1)],8,lr),h("p",cr,[e.userName?(R(),N("span",dr,"The user should open this link on the device where they want to register.")):(R(),N("span",fr,"Open this link on the device you wish to connect with.")),l[7]||(l[7]=h("br",null,null,-1)),h("small",null,P(c.value),1)])])]),h("div",hr,[h("button",{class:"btn-primary",onClick:w},"Copy Link"),e.showCloseInInline?(R(),N("button",{key:0,class:"btn-secondary",onClick:l[3]||(l[3]=_=>d.$emit("close"))},"Close")):U("",!0)])])])])):U("",!0)}},Tr=Q(gr,[["__scopeId","data-v-5d6bcbcb"]]),mr={class:"loading-container"},yr={__name:"LoadingView",props:{message:{type:String,default:"Loading..."}},setup(e){return(r,o)=>(R(),N("div",mr,[o[0]||(o[0]=h("div",{class:"loading-spinner"},null,-1)),h("p",null,P(e.message),1)]))}},
Line truncated

paskia/frontend-build/auth/assets/RestrictedAuth-BIGLs28V.js

@@ -0,0 +1 @@
+import{_ as z,G as E,r as g,c as y,o as L,d,e as h,i as f,f as n,t as _,n as N,R as O,C as Y,Y as w,V as T,p as D}from"./_plugin-vue_export-helper-R4vr2A9I.js";const q={class:"app-shell"},G={key:0,class:"global-status",style:{display:"block"}},J={class:"view-root"},W={key:0,class:"surface surface--tight"},j={class:"view-header center"},H={key:0,class:"user-line"},K={class:"view-lede"},Q={class:"section-block"},X={class:"section-body center"},Z={class:"button-row center"},ee=["disabled"],te=["disabled"],ae=["disabled"],se=["disabled"],ne={__name:"RestrictedAuth",props:{mode:{type:String,default:"login",validator:o=>["login","reauth","forbidden"].includes(o)}},emits:["authenticated","forbidden","logout","back","home","auth-error"],setup(o,{expose:V,emit:$}){const v=o,m=$,i=E({show:!1,message:"",type:"info"}),b=g(!0),t=g(!1),S=g(null),r=g(null),l=g("initial");let p=null;const u=y(()=>!!r.value?.authenticated),k=y(()=>b.value?!1:v.mode==="reauth"?!0:l.value!=="forbidden"),U=y(()=>v.mode==="reauth"?"🔐 Additional Authentication":l.value==="forbidden"?"🚫 Forbidden":`🔐 ${S.value?.rp_name||location.origin}`),B=y(()=>v.mode==="reauth"?"Please verify your identity to continue with this action.":l.value==="forbidden"?"You lack the required permissions.":"Please sign in with your passkey."),F=y(()=>r.value?.user?.user_name||"User");function c(e,a="info",s=3e3){i.show=!0,i.message=e,i.type=a,p&&clearTimeout(p),s>0&&(p=setTimeout(()=>{i.show=!1},s))}async function I(){try{const e=await Y();if(S.value=e,e?.rp_name){const a=v.mode==="reauth"?"Verify Identity":u.value?"Forbidden":"Sign In";document.title=`${e.rp_name} · ${a}`}}catch(e){console.warn("Unable to load settings",e)}}async function M(){try{r.value=await w("/auth/api/user-info",{method:"POST"}),u.value&&v.mode!=="reauth"?(l.value="forbidden",m("forbidden",r.value)):l.value="login"}catch(e){console.error("Failed to load user info",e),e.status!==401&&e.status!==403&&c(T(e),"error",4e3),r.value=null,l.value="login"}}async function A(){if(!k.value||t.value)return;t.value=!0,c("Starting authentication…","info");let e;try{e=await D.authenticate()}catch(a){t.value=!1;const s=a?.message||"Passkey authentication cancelled",P=s==="Passkey authentication cancelled";c(s,P?"info":"error",4e3),m("auth-error",{message:s,cancelled:P});return}try{await x(e)}catch(a){t.value=!1;const s=a?.message||"Failed to establish session";c(s,"error",4e3),m("auth-error",{message:s,cancelled:!1});return}t.value=!1,m("authenticated",e)}async function C(){if(!t.value){t.value=!0;try{await w("/auth/api/logout",{method:"POST"}),r.value=null,l.value="login",c("Logged out. You can sign in with a different account.","info",3e3)}catch(e){c(T(e),"error",4e3)}finally{t.value=!1}m("logout")}}function R(){const e=window.open("/auth/","passkey_auth_profile");e&&e.focus()}async function x(e){if(!e?.session_token)throw console.error("setSessionCookie called with missing session_token:",e),new Error("Authentication response missing session_token");return await w("/auth/api/set-session",{method:"POST",headers:{Authorization:`Bearer ${e.session_token}`}})}return L(async()=>{await I(),await M(),b.value=!1}),V({showMessage:c,isAuthenticated:u,userInfo:r}),(e,a)=>(h(),d("div",q,[i.show?(h(),d("div",G,[n("div",{class:N(["status",i.type])},_(i.message),3)])):f("",!0),n("main",J,[b.value?f("",!0):(h(),d("div",W,[n("header",j,[n("h1",null,_(U.value),1),u.value?(h(),d("p",H,"👤 "+_(F.value),1)):f("",!0),n("p",K,_(B.value),1)]),n("section",Q,[n("div",X,[n("div",Z,[O(e.$slots,"actions",{loading:t.value,canAuthenticate:k.value,isAuthenticated:u.value,authenticate:A,logout:C,mode:o.mode},()=>[n("button",{class:"btn-secondary",disabled:t.value,onClick:a[0]||(a[0]=s=>e.$emit("back"))},"Back",8,ee),k.value?(h(),d("button",{key:0,class:"btn-primary",disabled:t.value,onClick:A},_(t.value?o.mode==="reauth"?"Verifying…":"Signing in…":o.mode==="reauth"?"Verify":"Login"),9,te)):f("",!0),u.value&&o.mode!=="reauth"?(h(),d("button",{key:1,class:"btn-danger",disabled:t.value,onClick:C},"Logout",8,ae)):f("",!0),u.value&&o.mode!=="reauth"?(h(),d("button",{key:2,class:"btn-primary",disabled:t.value,onClick:R},"Profile",8,se)):f("",!0)])])])])]))])]))}},ie=z(ne,[["__scopeId","data-v-d00079a6"]]);export{ie as R};

paskia/frontend-build/auth/assets/RestrictedAuth-CMHKrNJh.css

@@ -0,0 +1 @@
+.button-row.center[data-v-d00079a6]{display:flex;justify-content:center;gap:.75rem}.user-line[data-v-d00079a6]{margin:.5rem 0 0;font-weight:500;color:var(--color-text)}main.view-root[data-v-d00079a6]{min-height:100vh;align-items:center;justify-content:center;padding:2rem 1rem}.surface.surface--tight[data-v-d00079a6]{max-width:520px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1.75rem}

paskia/frontend-build/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css

@@ -0,0 +1 @@
+:root{--font-sans: "Inter", "Inter var", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;--font-mono: "DM Mono", "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;--color-canvas: #f5f6f8;--color-surface: #ffffff;--color-surface-subtle: #f1f3f7;--color-border: #d0d5dd;--color-border-strong: #9aa2af;--color-heading: #101828;--color-text: #1f2933;--color-text-muted: #52616b;--color-link: #2563eb;--color-link-hover: #1d4ed8;--color-accent: #2563eb;--color-accent-strong: #1e3faa;--color-accent-contrast: #ffffff;--color-success-text: #0f5132;--color-success-bg: #d1fadf;--color-error-text: #b42318;--color-error-bg: #ffe3e3;--color-info-text: #0f609b;--color-info-bg: #d6ecff;--color-danger: #dc2626;--shadow-soft: 0 10px 30px rgba(15, 23, 42, .08);--radius-none: 0;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--space-xxs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.25rem;--space-xxl: 3.5rem;--layout-max-width: 1400px;--layout-padding: clamp(1.5rem, 3vw + 1rem, 3.25rem);--transition-base: .16s ease}@media(prefers-color-scheme:dark){:root{--color-canvas: #0f172a;--color-surface: #141b2f;--color-surface-subtle: #1b243b;--color-border: #25304a;--color-border-strong: #3d4d6b;--color-heading: #f8fafc;--color-text: #e2e8f0;--color-text-muted: #94a3b8;--color-link: #60a5fa;--color-link-hover: #93c5fd;--color-accent: #60a5fa;--color-accent-strong: #3b82f6;--color-accent-contrast: #0b1120;--color-success-text: #34d399;--color-success-bg: #1a4d2e;--color-error-text: #fca5a5;--color-error-bg: #4a1f1f;--color-info-text: #bae6fd;--color-info-bg: #1e3a5f;--color-danger: #f87171;--shadow-soft: 0 0 0 #000000}}*,*:before,*:after{box-sizing:border-box}html{height:100%;background:var(--color-canvas)}body{height:100%;margin:0;font-family:var(--font-sans);background:none;color:var(--color-text);line-height:1.55;-webkit-font-smoothing:antialiased}body,#app,#admin-app{display:flex;flex-direction:column;min-height:100vh}#app,#admin-app{flex:1}a,a:visited{color:var(--color-link);text-decoration:none}a:hover,a:focus-visible{color:var(--color-link-hover);text-decoration:underline}a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}.app-shell{flex:1;display:flex;flex-direction:column;min-height:100vh}.app-main{flex:1;display:flex;flex-direction:column}.view-root{flex:1;width:100%;display:flex;flex-direction:column;gap:2rem;padding:var(--layout-padding);box-sizing:border-box;margin:0 auto;width:min(100%,var(--layout-max-width))}.view-root--wide{width:min(100%,1200px)}.view-root--narrow{max-width:540px}.view-header{display:flex;flex-direction:column;gap:.75rem}.view-header h1{margin:0;font-weight:600;color:var(--color-heading)}.view-lede{margin:0;color:var(--color-text-muted);font-size:1rem}.section-block{display:flex;flex-direction:column;gap:1rem}.section-block h2{margin:0;font-size:clamp(1.25rem,1.5vw + 1rem,1.65rem);font-weight:600;color:var(--color-heading)}.section-body{display:flex;flex-direction:column;gap:1rem}.button-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-start}.surface{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);box-shadow:var(--shadow-soft)}.surface--tight{padding:var(--space-md)}button{font-family:inherit;font-size:1rem;font-weight:500;border-radius:var(--radius-sm);border:1px solid transparent;padding:.65rem 1.1rem;cursor:pointer;transition:all var(--transition-base);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--color-surface);color:var(--color-text)}button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}button:disabled{cursor:not-allowed;filter:opacity(.6)}.btn-primary{background:var(--color-accent);color:var(--color-accent-contrast);border-color:var(--color-accent);box-shadow:var(--shadow-soft)}.btn-primary:hover:not(:disabled){background:var(--color-accent-strong);border-color:var(--color-accent-strong)}.btn-secondary{background:transparent;color:var(--color-text);border-color:var(--color-border)}.btn-secondary:hover:not(:disabled){border-color:var(--color-border-strong);background:var(--color-surface-subtle)}.btn-danger{background:var(--color-danger);color:var(--color-accent-contrast);border-color:transparent}.btn-danger:hover:not(:disabled){filter:brightness(.92)}input[type=text],input[type=search],input[type=email],textarea,select{font:inherit;width:100%;padding:.65rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);transition:border-color var(--transition-base),box-shadow var(--transition-base)}input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 3px #c7d2fe;outline:none}label{display:flex;flex-direction:column;gap:.5rem;color:var(--color-text)}p{margiLine truncated

paskia/frontend-build/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js

@@ -0,0 +1,2 @@
+(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))s(r);new MutationObserver(r=>{for(const i of r)if(i.type==="childList")for(const o of i.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&s(o)}).observe(document,{childList:!0,subtree:!0});function n(r){const i={};return r.integrity&&(i.integrity=r.integrity),r.referrerPolicy&&(i.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?i.credentials="include":r.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function s(r){if(r.ep)return;r.ep=!0;const i=n(r);fetch(r.href,i)}})();function Zn(e){const t=Object.create(null);for(const n of e.split(","))t[n]=1;return n=>n in t}const K={},ft=[],Ae=()=>{},ir=()=>!1,un=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&(e.charCodeAt(2)>122||e.charCodeAt(2)<97),es=e=>e.startsWith("onUpdate:"),re=Object.assign,ts=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},Si=Object.prototype.hasOwnProperty,U=(e,t)=>Si.call(e,t),T=Array.isArray,ut=e=>jt(e)==="[object Map]",bt=e=>jt(e)==="[object Set]",As=e=>jt(e)==="[object Date]",P=e=>typeof e=="function",J=e=>typeof e=="string",pe=e=>typeof e=="symbol",V=e=>e!==null&&typeof e=="object",or=e=>(V(e)||P(e))&&P(e.then)&&P(e.catch),lr=Object.prototype.toString,jt=e=>lr.call(e),xi=e=>jt(e).slice(8,-1),cr=e=>jt(e)==="[object Object]",dn=e=>J(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,At=Zn(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),hn=e=>{const t=Object.create(null);return(n=>t[n]||(t[n]=e(n)))},vi=/-\w/g,qe=hn(e=>e.replace(vi,t=>t.slice(1).toUpperCase())),Ai=/\B([A-Z])/g,Ye=hn(e=>e.replace(Ai,"-$1").toLowerCase()),ar=hn(e=>e.charAt(0).toUpperCase()+e.slice(1)),Rn=hn(e=>e?`on${ar(e)}`:""),Je=(e,t)=>!Object.is(e,t),zt=(e,...t)=>{for(let n=0;n<e.length;n++)e[n](...t)},fr=(e,t,n,s=!1)=>{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,writable:s,value:n})},pn=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let Rs;const gn=()=>Rs||(Rs=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function ns(e){if(T(e)){const t={};for(let n=0;n<e.length;n++){const s=e[n],r=J(s)?Ci(s):ns(s);if(r)for(const i in r)t[i]=r[i]}return t}else if(J(e)||V(e))return e}const Ri=/;(?![^(]*\))/g,Ti=/:([^]+)/,Oi=/\/\*[^]*?\*\//g;function Ci(e){const t={};return e.replace(Oi,"").split(Ri).forEach(n=>{if(n){const s=n.split(Ti);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function ss(e){let t="";if(J(e))t=e;else if(T(e))for(let n=0;n<e.length;n++){const s=ss(e[n]);s&&(t+=s+" ")}else if(V(e))for(const n in e)e[n]&&(t+=n+" ");return t.trim()}const Ii="itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly",Pi=Zn(Ii);function ur(e){return!!e||e===""}function Mi(e,t){if(e.length!==t.length)return!1;let n=!0;for(let s=0;n&&s<e.length;s++)n=lt(e[s],t[s]);return n}function lt(e,t){if(e===t)return!0;let n=As(e),s=As(t);if(n||s)return n&&s?e.getTime()===t.getTime():!1;if(n=pe(e),s=pe(t),n||s)return e===t;if(n=T(e),s=T(t),n||s)return n&&s?Mi(e,t):!1;if(n=V(e),s=V(t),n||s){if(!n||!s)return!1;const r=Object.keys(e).length,i=Object.keys(t).length;if(r!==i)return!1;for(const o in e){const l=e.hasOwnProperty(o),c=t.hasOwnProperty(o);if(l&&!c||!l&&c||!lt(e[o],t[o]))return!1}}return String(e)===String(t)}function rs(e,t){return e.findIndex(n=>lt(n,t))}const dr=e=>!!(e&&e.__v_isRef===!0),Ni=e=>J(e)?e:e==null?"":T(e)||V(e)&&(e.toString===lr||!P(e.toString))?dr(e)?Ni(e.value):JSON.stringify(e,hr,2):String(e),hr=(e,t)=>dr(t)?hr(e,t.value):ut(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,r],i)=>(n[Tn(s,i)+" =>"]=r,n),{})}:bt(t)?{[`Set(${t.size})`]:[...t.values()].map(n=>Tn(n))}:pe(t)?Tn(t):V(t)&&!T(t)&&!cr(t)?String(t):t,Tn=(e,t="")=>{var n;return pe(e)?`Symbol(${(n=e.description)!=null?n:t})`:e};let z;class pr{constructor(t=!1){this.detached=t,this._active=!0,this._on=0,this.effects=[],this.cleanups=[],this._isPaused=!1,this.parent=z,!t&&z&&(this.index=(z.scopes||(z.scopes=[])).push(this)-1)}get active(){return this._active}pause(){if(this._active){this._isPaused=!0;let t,n;if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].pause();for(t=0,n=this.effects.length;t<n;t++)this.effects[t].pause()}}resume(){if(this._active&&this._isPaused){this._isPaused=!1;let t,n;if(this.scopes)for(t=0,n=this.scopes.length;t<n;t++)this.scopes[t].resume();for(t=0,n=this.effects.length;t<n;t++)this.effects[t].resume()}}run(t){if(this._active){const n=z;try{return z=this,t()}finally{z=n}}}on(){++this._on===1&&(this.prevScope=z,z=this)}off(){this._on>0&&--this._on===0&&(z=this.prevScope,this.prevScope=void 0)}stop(t){if(this._active){this._active=!1;let n,s;for(n=0,s=this.effects.length;n<s;n++)this.effects[n].stop();for(this.effects.length=0,n=0,s=this.cleanups.length;n<s;n++)this.cleaLine truncated
+`,t)}function ic(){if(!_s())return Kn.stubThis(new Promise(t=>t(!1)));const e=globalThis.PublicKeyCredential;return e?.isConditionalMediationAvailable===void 0?Kn.stubThis(new Promise(t=>t(!1))):Kn.stubThis(e.isConditionalMediationAvailable())}const Kn={stubThis:e=>e};function oc({error:e,options:t}){const{publicKey:n}=t;if(!n)throw Error("options was missing required publicKey property");if(e.name==="AbortError"){if(t.signal instanceof AbortSignal)return new Y({message:"Authentication ceremony was sent an abort signal",code:"ERROR_CEREMONY_ABORTED",cause:e})}else{if(e.name==="NotAllowedError")return new Y({message:e.message,code:"ERROR_PASSTHROUGH_SEE_CAUSE_PROPERTY",cause:e});if(e.name==="SecurityError"){const s=globalThis.location.hostname;if(pi(s)){if(n.rpId!==s)return new Y({message:`The RP ID "${n.rpId}" is invalid for this domain`,code:"ERROR_INVALID_RP_ID",cause:e})}else return new Y({message:`${globalThis.location.hostname} is an invalid domain`,code:"ERROR_INVALID_DOMAIN",cause:e})}else if(e.name==="UnknownError")return new Y({message:"The authenticator was unable to process the specified options, or could not create a new assertion signature",code:"ERROR_AUTHENTICATOR_GENERAL_ERROR",cause:e})}return e}async function lc(e){!e.optionsJSON&&e.challenge&&(console.warn("startAuthentication() was not called correctly. It will try to continue with the provided options, but this call should be refactored to use the expected call structure instead. See https://simplewebauthn.dev/docs/packages/browser#typeerror-cannot-read-properties-of-undefined-reading-challenge for more information."),e={optionsJSON:e});const{optionsJSON:t,useBrowserAutofill:n=!1,verifyBrowserAutofillInput:s=!0}=e;if(!_s())throw new Error("WebAuthn is not supported in this browser");let r;t.allowCredentials?.length!==0&&(r=t.allowCredentials?.map(hi));const i={...t,challenge:fn(t.challenge),allowCredentials:r},o={};if(n){if(!await ic())throw Error("Browser does not support WebAuthn autofill");if(document.querySelectorAll("input[autocomplete$='webauthn']").length<1&&s)throw Error('No <input> with "webauthn" as the only or last value in its `autocomplete` attribute was detected');o.mediation="conditional",i.allowCredentials=[]}o.publicKey=i,o.signal=gi.createNewAbortSignal();let l;try{l=await navigator.credentials.get(o)}catch(v){throw oc({error:v,options:o})}if(!l)throw new Error("Authentication was not completed");const{id:c,rawId:d,response:u,type:p}=l;let S;return u.userHandle&&(S=ve(u.userHandle)),{id:c,rawId:ve(d),response:{authenticatorData:ve(u.authenticatorData),clientDataJSON:ve(u.clientDataJSON),signature:ve(u.signature),userHandle:S},type:p,clientExtensionResults:l.getClientExtensionResults(),authenticatorAttachment:mi(l.authenticatorAttachment)}}class cc extends WebSocket{#n=[];#e=[];#t=null;#s=!1;constructor(t,n,s,r,i){super(new URL(s,document.baseURI.replace(/^http/,"ws")),r),this.binaryType=i||"blob",this.onopen=()=>{this.#s=!0,t(this)},this.onmessage=o=>{this.#e.length?this.#e.shift().resolve(o.data):this.#n.push(o.data)},this.onclose=o=>{if(!this.#s){n(new Error(`WebSocket ${this.url} failed to connect, code ${o.code}`));return}this.#t=o.wasClean?new Error(`Websocket ${this.url} closed ${o.code}`):new Error(`WebSocket ${this.url} closed with error ${o.code}`),this.#e.splice(0).forEach(l=>l.reject(this.#t))}}receive(){return this.#n.length?Promise.resolve(this.#n.shift()):this.#t?Promise.reject(this.#t):new Promise((t,n)=>this.#e.push({resolve:t,reject:n}))}async receive_bytes(){const t=await this.receive();if(typeof t=="string")throw console.error("WebSocket received text data, expected a binary message",t),new Error("WebSocket received text data, expected a binary message");return t instanceof Blob?t.bytes():new Uint8Array(t)}async receive_json(){const t=await this.receive();if(typeof t!="string")throw console.error("WebSocket received binary data, expected JSON string",t),new Error("WebSocket received binary data, expected JSON string");try{return JSON.parse(t)}catch(n){throw console.error("Failed to parse JSON from WebSocket message",t,n),new Error("Failed to parse JSON from WebSocket message")}}send_json(t){let n;try{n=JSON.stringify(t)}catch(s){throw new Error(`Failed to stringify data for WebSocket: ${s.message}`)}this.send(n)}}function bi(e,t={}){const{protocols:n,binaryType:s}=t;return new Promise((r,i)=>{new cc(r,i,e,n,s)})}let Yt=null,nt=null;async function ac(){return nt||Yt||(Yt=fetch("/auth/api/settings").then(e=>e.ok?e.json():{}).then(e=>(nt=e||{},nt)).catch(()=>(nt={},nt)),Yt)}function Pt(){const e=nt?.ui_base_path||"/auth/";return e==="/"?"/":e.endsWith("/")?e:e+"/"}function Ic(){return Pt()==="/"?"/admin/":Pt()+"admin/"}function Pc(e=""){const t=e.startsWith("/")?e.slice(1):e;return t?Pt()==="/"?"/"+t:Pt()+t:Pt()}const fc=1e3;class xn extends Error{constructor(t,n,s){super(s?.detail||`Request failed: ${n.status}`),this.name="ApiError",this.url=t,this.status=n.status,this.statusText=n.statusText,this.dat
Line truncated

paskia/frontend-build/auth/assets/admin-D8zxJOk4.js

@@ -0,0 +1 @@
+import{_ as j,c as L,d as r,e as o,f as i,i as O,t as f,F as p,x as I,y as ee,k as ae,r as v,h as M,g as B,q as h,w as se,j as Ee,l as N,z,A as q,u as Q,B as X,o as Ne,C as Te,a as Ae,m as Me,b as Ie,v as Le}from"./_plugin-vue_export-helper-R4vr2A9I.js";import{u as ie,U as _e,_ as Ve,a as ze,R as qe,N as G,M as Be,b as je,L as Fe,A as xe,B as Ge,c as He}from"./AccessDenied-guOGfNm-.js";import"./helpers-CU0-cyzg.js";const Je={class:"permissions-section"},We={class:"actions"},Ye={class:"org-table"},Ze={key:0},Ke=["onClick"],Qe=["onClick"],Xe={class:"role-names"},ea={class:"center"},aa={key:0,class:"center"},sa=["onClick"],ia={key:0,class:"permissions-section"},ta={class:"matrix-wrapper"},na={class:"matrix-scroll"},oa=["title"],la=["title"],ra={class:"display-text"},da=["checked","onChange"],ua={class:"actions"},ma={class:"org-table"},ca={class:"perm-name-cell"},ga={class:"perm-title"},ya={class:"display-text"},va=["onClick"],pa={class:"perm-id-info"},fa={class:"id-text"},ha={class:"perm-members center"},$a={class:"perm-actions center"},ba=["onClick"],wa={__name:"AdminOverview",props:{info:Object,orgs:Array,permissions:Array,permissionSummary:Object},emits:["createOrg","openOrg","updateOrg","deleteOrg","toggleOrgPermission","openDialog","deletePermission","renamePermissionDisplay"],setup(a,{emit:C}){const D=a,U=L(()=>[...D.orgs].sort((m,s)=>{const t=m.display_name.localeCompare(s.display_name);return t!==0?t:m.uuid.localeCompare(s.uuid)})),k=L(()=>[...D.permissions].sort((m,s)=>m.id.localeCompare(s.id)));function R(m){return m.roles.slice().sort((s,t)=>s.display_name.localeCompare(t.display_name)).map(s=>s.display_name).join(", ")}return(m,s)=>(o(),r(p,null,[i("div",Je,[i("h2",null,f(a.info.is_global_admin?"Organizations":"Your Organizations"),1),i("div",We,[a.info.is_global_admin?(o(),r("button",{key:0,onClick:s[0]||(s[0]=t=>m.$emit("createOrg"))},"+ Create Org")):O("",!0)]),i("table",Ye,[i("thead",null,[i("tr",null,[s[2]||(s[2]=i("th",null,"Name",-1)),s[3]||(s[3]=i("th",null,"Roles",-1)),s[4]||(s[4]=i("th",null,"Members",-1)),a.info.is_global_admin?(o(),r("th",Ze,"Actions")):O("",!0)])]),i("tbody",null,[(o(!0),r(p,null,I(U.value,t=>(o(),r("tr",{key:t.uuid},[i("td",null,[i("a",{href:"#org/{{o.uuid}}",onClick:ae(u=>m.$emit("openOrg",t),["prevent"])},f(t.display_name),9,Ke),a.info.is_global_admin||a.info.is_org_admin?(o(),r("button",{key:0,onClick:u=>m.$emit("updateOrg",t),class:"icon-btn edit-org-btn","aria-label":"Rename organization",title:"Rename organization"},"✏️",8,Qe)):O("",!0)]),i("td",Xe,f(R(t)),1),i("td",ea,f(t.roles.reduce((u,c)=>u+c.users.length,0)),1),a.info.is_global_admin?(o(),r("td",aa,[i("button",{onClick:u=>m.$emit("deleteOrg",t),class:"icon-btn delete-icon","aria-label":"Delete organization",title:"Delete organization"},"❌",8,sa)])):O("",!0)]))),128))])])]),a.info.is_global_admin?(o(),r("div",ia,[s[8]||(s[8]=i("h2",null,"Permissions",-1)),i("div",ta,[i("div",na,[i("div",{class:"perm-matrix-grid",style:ee({gridTemplateColumns:"minmax(180px, 1fr) "+U.value.map(()=>"2.2rem").join(" ")})},[s[5]||(s[5]=i("div",{class:"grid-head perm-head"},"Permission",-1)),(o(!0),r(p,null,I(U.value,t=>(o(),r("div",{key:"head-"+t.uuid,class:"grid-head org-head",title:t.display_name},[i("span",null,f(t.display_name),1)],8,oa))),128)),(o(!0),r(p,null,I(k.value,t=>(o(),r(p,{key:t.id},[i("div",{class:"perm-name",title:t.id},[i("span",ra,f(t.display_name),1)],8,la),(o(!0),r(p,null,I(U.value,u=>(o(),r("div",{key:u.uuid+"-"+t.id,class:"matrix-cell"},[i("input",{type:"checkbox",checked:u.permissions.includes(t.id),onChange:c=>m.$emit("toggleOrgPermission",u,t.id,c.target.checked)},null,40,da)]))),128))],64))),128))],4)]),s[6]||(s[6]=i("p",{class:"matrix-hint muted"},"Toggle which permissions each organization can grant to its members.",-1))]),i("div",ua,[a.info.is_global_admin?(o(),r("button",{key:0,onClick:s[1]||(s[1]=t=>m.$emit("openDialog","perm-create",{display_name:"",id:""}))},"+ Create Permission")):O("",!0)]),i("table",ma,[s[7]||(s[7]=i("thead",null,[i("tr",null,[i("th",{scope:"col"},"Permission"),i("th",{scope:"col",class:"center"},"Members"),i("th",{scope:"col",class:"center"},"Actions")])],-1)),i("tbody",null,[(o(!0),r(p,null,I(k.value,t=>(o(),r("tr",{key:t.id},[i("td",ca,[i("div",ga,[i("span",ya,f(t.display_name),1),i("button",{onClick:u=>m.$emit("renamePermissionDisplay",t),class:"icon-btn edit-display-btn","aria-label":"Edit display name",title:"Edit display name"},"✏️",8,va)]),i("div",pa,[i("span",fa,f(t.id),1)])]),i("td",ha,f(a.permissionSummary[t.id]?.userCount||0),1),i("td",$a,[i("button",{onClick:u=>m.$emit("deletePermission",t),class:"icon-btn delete-icon","aria-label":"Delete permission",title:"Delete permission"},"❌",8,ba)])]))),128))])])])):O("",!0)],64))}},ka=j(wa,[["__scopeId","data-v-3b9e6d03"]]),Da=["title"],Oa={class:"org-name"},Ua={class:"matrix-wrapper"},Ca={class:"matrix-scroll"},Ra=["title"],Sa=["title"],Pa=["checked","onChange"],Ea={class:"roles-grid"},Na=["onDrop"],Ta={classLine truncated

paskia/frontend-build/auth/assets/admin-DIOoLLHy.css

@@ -0,0 +1 @@
+.permissions-section[data-v-3b9e6d03]{margin-bottom:var(--space-xl)}.permissions-section h2[data-v-3b9e6d03]{margin-bottom:var(--space-md)}.actions[data-v-3b9e6d03]{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}.actions button[data-v-3b9e6d03]{width:auto}.org-table a[data-v-3b9e6d03]{text-decoration:none;color:var(--color-link)}.org-table a[data-v-3b9e6d03]:hover{text-decoration:underline}.org-table .center[data-v-3b9e6d03]{width:6rem;min-width:6rem}.org-table .role-names[data-v-3b9e6d03]{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.perm-name-cell[data-v-3b9e6d03]{display:flex;flex-direction:column;gap:.3rem}.perm-title[data-v-3b9e6d03]{font-weight:600;color:var(--color-heading)}.perm-id-info[data-v-3b9e6d03]{font-size:.8rem;color:var(--color-text-muted)}.icon-btn[data-v-3b9e6d03]{background:none;border:none;color:var(--color-text-muted);padding:.2rem;border-radius:var(--radius-sm);cursor:pointer;transition:background .2s ease,color .2s ease}.icon-btn[data-v-3b9e6d03]:hover{color:var(--color-heading);background:var(--color-surface-muted)}.delete-icon[data-v-3b9e6d03]{color:var(--color-danger)}.delete-icon[data-v-3b9e6d03]:hover{background:var(--color-danger-bg);color:var(--color-danger-text)}.matrix-wrapper[data-v-3b9e6d03]{margin:var(--space-md) 0;padding:var(--space-lg)}.matrix-scroll[data-v-3b9e6d03]{overflow-x:auto}.matrix-hint[data-v-3b9e6d03]{font-size:.8rem;color:var(--color-text-muted)}.perm-matrix-grid[data-v-3b9e6d03]{display:inline-grid;gap:.25rem;align-items:stretch}.perm-matrix-grid[data-v-3b9e6d03]>*{padding:.35rem .45rem;font-size:.75rem}.perm-matrix-grid .grid-head[data-v-3b9e6d03]{color:var(--color-text-muted);text-transform:uppercase;font-weight:600;letter-spacing:.05em}.perm-matrix-grid .perm-head[data-v-3b9e6d03]{display:flex;align-items:flex-end;justify-content:flex-start;padding:.35rem .45rem;font-size:.75rem}.perm-matrix-grid .org-head[data-v-3b9e6d03]{display:flex;align-items:flex-end;justify-content:center}.perm-matrix-grid .org-head span[data-v-3b9e6d03]{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.65rem}.perm-name[data-v-3b9e6d03]{font-weight:600;color:var(--color-heading);padding:.35rem .45rem;font-size:.75rem}.display-text[data-v-3b9e6d03]{margin-right:var(--space-xs)}.edit-display-btn[data-v-3b9e6d03]{padding:.1rem .2rem;font-size:.8rem}.edit-org-btn[data-v-3b9e6d03]{padding:.1rem .2rem;font-size:.8rem;margin-left:var(--space-xs)}.perm-actions[data-v-3b9e6d03],.center[data-v-3b9e6d03]{text-align:center}.muted[data-v-3b9e6d03]{color:var(--color-text-muted)}.card.surface[data-v-b8b4bfbc]{padding:var(--space-lg)}.org-title[data-v-b8b4bfbc]{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}.org-name[data-v-b8b4bfbc]{font-size:1.5rem;font-weight:600;color:var(--color-heading)}.icon-btn[data-v-b8b4bfbc]{background:none;border:none;color:var(--color-text-muted);padding:.2rem;border-radius:var(--radius-sm);cursor:pointer;transition:background .2s ease,color .2s ease}.icon-btn[data-v-b8b4bfbc]:hover{color:var(--color-heading);background:var(--color-surface-muted)}.matrix-wrapper[data-v-b8b4bfbc]{margin:var(--space-md) 0;padding:var(--space-lg)}.matrix-scroll[data-v-b8b4bfbc]{overflow-x:auto}.matrix-hint[data-v-b8b4bfbc]{font-size:.8rem;color:var(--color-text-muted)}.perm-matrix-grid[data-v-b8b4bfbc]{display:inline-grid;gap:.25rem;align-items:stretch}.perm-matrix-grid[data-v-b8b4bfbc]>*{padding:.35rem .45rem;font-size:.75rem}.perm-matrix-grid .grid-head[data-v-b8b4bfbc]{color:var(--color-text-muted);text-transform:uppercase;font-weight:600;letter-spacing:.05em}.perm-matrix-grid .perm-head[data-v-b8b4bfbc]{display:flex;align-items:flex-end;justify-content:flex-start;padding:.35rem .45rem;font-size:.75rem}.perm-matrix-grid .role-head[data-v-b8b4bfbc]{display:flex;align-items:flex-end;justify-content:center}.perm-matrix-grid .role-head span[data-v-b8b4bfbc]{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.65rem}.perm-matrix-grid .add-role-head[data-v-b8b4bfbc]{cursor:pointer}.perm-name[data-v-b8b4bfbc]{font-weight:600;color:var(--color-heading);padding:.35rem .45rem;font-size:.75rem}.roles-grid[data-v-b8b4bfbc]{display:flex;gap:var(--space-lg);margin-top:var(--space-lg)}.role-column[data-v-b8b4bfbc]{flex:1;min-width:200px;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-md)}.role-header[data-v-b8b4bfbc]{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.role-name[data-v-b8b4bfbc]{display:flex;align-items:center;gap:var(--space-xs);font-size:1.1rem;color:var(--color-heading)}.role-actions[data-v-b8b4bfbc]{display:flex;gap:var(--space-xs)}.plus-btn[data-v-b8b4bfbc]{background:var(--color-accent-soft);color:var(--color-accent);border:none;border-radius:var(--radius-sm);padding:.25rem .45rem;font-size:1.1rem;cursor:pointer}.plus-btn[data-v-b8b4bfbc]:hover{background:#2563eb2e}.user-list[data-v-b8b4bfbc]{lLine truncated

paskia/frontend-build/auth/assets/auth-CBojJKUK.css

@@ -0,0 +1 @@
+.view-lede[data-v-0cc830bd]{margin:0;color:var(--color-text-muted);font-size:1rem}.section-header[data-v-0cc830bd]{display:flex;flex-direction:column;gap:.4rem}.section-description[data-v-0cc830bd]{margin:0;color:var(--color-text-muted)}.empty-state[data-v-0cc830bd]{margin:0;color:var(--color-text-muted);text-align:center;padding:1rem 0}.logout-button[data-v-0cc830bd]{align-self:flex-start}.logout-row[data-v-0cc830bd]{gap:1rem}.logout-row.single[data-v-0cc830bd]{justify-content:flex-start}.logout-note[data-v-0cc830bd]{margin:.75rem 0 0;color:var(--color-text-muted);font-size:.875rem}@media(max-width:720px){.logout-button[data-v-0cc830bd]{width:100%}}.host-view[data-v-88828278]{padding:3rem 1.5rem 4rem}.host-actions[data-v-88828278]{display:flex;flex-direction:column;gap:.75rem}.host-actions .button-row[data-v-88828278]{gap:.75rem;flex-wrap:wrap}.host-actions .button-row button[data-v-88828278]{flex:0 0 auto}.note[data-v-88828278],.empty-state[data-v-88828278]{margin:0;color:var(--color-text-muted)}@media(max-width:600px){.host-actions .button-row[data-v-88828278]{flex-direction:column}.host-actions .button-row button[data-v-88828278]{width:100%}}

paskia/frontend-build/auth/assets/auth-a0yJ_sei.js

@@ -0,0 +1 @@
+import{_ as F,r as m,w as Y,o as T,a as z,c as v,m as O,b as j,d as k,e as l,f as t,g as N,h as $,i as C,u as o,j as J,k as K,n as G,F as Q,l as H,t as b,p as X,q as E,s as Z,v as ee}from"./_plugin-vue_export-helper-R4vr2A9I.js";import{u as x,B as se,U as R,_ as te,a as oe,N as ae,M as ne,R as ie,L as le,b as re,A as ue,c as de}from"./AccessDenied-guOGfNm-.js";import{g as U}from"./helpers-CU0-cyzg.js";const ce={class:"view-root","data-view":"profile"},ve={class:"view-header"},fe={class:"section-block"},ge={class:"section-block"},me={class:"section-body"},pe={class:"button-row"},he={class:"section-block"},ye=["disabled"],we=["disabled"],_e=["disabled"],be={key:0,class:"logout-note"},ke={key:1,class:"logout-note"},Ie={__name:"ProfileView",setup(V){const e=x(),f=m(null),r=m(!1),p=m(!1),y=m(""),w=m(!1),A=m(null),_=m(null);Y(r,d=>{d&&(y.value=e.userInfo?.user?.user_name||"")}),T(()=>{f.value=setInterval(()=>{e.userInfo&&(e.userInfo={...e.userInfo})},6e4)}),z(()=>{f.value&&clearInterval(f.value)});const c=async()=>{try{await X.register(null,null,()=>{e.showMessage("Adding new passkey...","info")}),await e.loadUserInfo(),e.showMessage("New passkey added successfully!","success",3e3)}catch(d){console.error("Failed to add new passkey:",d),e.showMessage(d.message,"error")}},S=async d=>{const s=d?.credential_uuid;if(s&&confirm("Are you sure you want to delete this passkey?"))try{await e.deleteCredential(s),e.showMessage("Passkey deleted successfully!","success",3e3)}catch(n){e.showMessage(`Failed to delete passkey: ${n.message}`,"error")}},L=v(()=>e.settings?.rp_name||"this service"),u=v(()=>e.userInfo?.sessions||[]),i=v(()=>u.value.find(s=>s.is_current)?.host||"this host"),h=m({}),B=async d=>{const s=d?.id;if(s){h.value={...h.value,[s]:!0};try{await e.terminateSession(s)}catch(n){e.showMessage(n.message||"Failed to terminate session","error",5e3)}finally{const n={...h.value};delete n[s],h.value=n}}},P=async()=>{await e.logoutEverywhere()},M=async()=>{await e.logout()},a=()=>{y.value=e.userInfo?.user?.user_name||"",r.value=!0},g=v(()=>!!(e.userInfo?.is_global_admin||e.userInfo?.is_org_admin)),I=v(()=>u.value.length>1),D=v(()=>{const d=[{label:"Auth",href:O()}];return g.value&&d.push({label:"Admin",href:j()}),d}),W=async()=>{const d=y.value.trim();if(!d){e.showMessage("Name cannot be empty","error");return}try{w.value=!0,await E("/auth/api/user/display-name",{method:"PUT",body:{display_name:d}}),r.value=!1,await e.loadUserInfo(),e.showMessage("Name updated successfully!","success",3e3)}catch(s){e.showMessage(s.message||"Failed to update name","error")}finally{w.value=!1}};return(d,s)=>(l(),k("section",ce,[t("header",ve,[s[10]||(s[10]=t("h1",null,"👋 Welcome!",-1)),N(se,{entries:D.value},null,8,["entries"]),s[11]||(s[11]=t("p",{class:"view-lede"},"Manage your account details and passkeys.",-1))]),t("section",fe,[o(e).userInfo?.user?(l(),$(R,{key:0,name:o(e).userInfo.user.user_name,visits:o(e).userInfo.user.visits||0,"created-at":o(e).userInfo.user.created_at,"last-seen":o(e).userInfo.user.last_seen,loading:o(e).isLoading,"update-endpoint":"/auth/api/user/display-name",onSaved:s[0]||(s[0]=n=>o(e).loadUserInfo()),onEditName:a},null,8,["name","visits","created-at","last-seen","loading"])):C("",!0)]),t("section",ge,[s[12]||(s[12]=t("div",{class:"section-header"},[t("h2",null,"Your Passkeys"),t("p",{class:"section-description"},"Keep at least one trusted passkey so you can always sign in.")],-1)),t("div",me,[N(te,{credentials:o(e).userInfo?.credentials||[],"aaguid-info":o(e).userInfo?.aaguid_info||{},loading:o(e).isLoading,"hovered-credential-uuid":A.value,"hovered-session-credential-uuid":_.value?.credential_uuid,"allow-delete":"",onDelete:S,onCredentialHover:s[1]||(s[1]=n=>A.value=n)},null,8,["credentials","aaguid-info","loading","hovered-credential-uuid","hovered-session-credential-uuid"]),t("div",pe,[t("button",{onClick:c,class:"btn-primary"},"Add New Passkey"),t("button",{onClick:s[2]||(s[2]=n=>p.value=!0),class:"btn-secondary"},"Add Another Device")])])]),N(oe,{sessions:u.value,"terminating-sessions":h.value,"hovered-credential-uuid":A.value,onTerminate:B,onSessionHover:s[3]||(s[3]=n=>_.value=n),"section-description":"Review where you're signed in and end any sessions you no longer recognize."},null,8,["sessions","terminating-sessions","hovered-credential-uuid"]),r.value?(l(),$(ne,{key:0,onClose:s[6]||(s[6]=n=>r.value=!1)},{default:J(()=>[s[13]||(s[13]=t("h3",null,"Edit Display Name",-1)),t("form",{onSubmit:K(W,["prevent"]),class:"modal-form"},[N(ae,{label:"Display Name",modelValue:y.value,"onUpdate:modelValue":s[4]||(s[4]=n=>y.value=n),busy:w.value,onCancel:s[5]||(s[5]=n=>r.value=!1)},null,8,["modelValue","busy"])],32)]),_:1})):C("",!0),t("section",he,[t("div",{class:G(["button-row logout-row",{single:!I.value}])},[t("button",{type:"button",class:"btn-secondary",onClick:s[7]||(s[7]=(...n)=>o(U)&&o(U)(...n))}," Back "),I.value?(l(),k(Q,{key:1},[t("button",{onClick:M,class:"btn-danger logout-button",disabled:o(e).isLLine truncated

paskia/frontend-build/auth/assets/forward-BHNzlQhM.js

@@ -0,0 +1 @@
+import{c as o,W as d,o as i,h as s,e as m,u as l,v as h}from"./_plugin-vue_export-helper-R4vr2A9I.js";import{R as p}from"./RestrictedAuth-BIGLs28V.js";import{g as n}from"./helpers-CU0-cyzg.js";const f={__name:"RestrictedForward",setup(w){const a=o(()=>d()),r=o(()=>{const t=document.documentElement.getAttribute("data-mode");return t==="reauth"?"reauth":t==="forbidden"?"forbidden":"login"});function c(){location.reload()}function u(){const e=a.value||"/auth/";window.location.pathname!==e&&history.replaceState(null,"",e),window.location.href=e}return i(()=>{window.addEventListener("keydown",e=>{e.key==="Escape"&&n()})}),(e,t)=>(m(),s(p,{mode:r.value,onAuthenticated:c,onBack:l(n),onHome:u},null,8,["mode","onBack"]))}};h(f).mount("#app");

paskia/frontend-build/auth/assets/helpers-CU0-cyzg.js

@@ -0,0 +1 @@
+function f(r){if(!r)return"Never";const s=new Date(r),u=s-new Date,e=u>0,a=Math.abs(u),n=Math.round(a/(1e3*60)),o=Math.round(a/(1e3*60*60)),t=Math.round(a/(1e3*60*60*24));return a<1e3*60?"Now":n<=60?e?`In ${n} minute${n===1?"":"s"}`:n===1?"a minute ago":`${n} minutes ago`:o<=24?e?`In ${o} hour${o===1?"":"s"}`:o===1?"an hour ago":`${o} hours ago`:t<=14?e?`In ${t} day${t===1?"":"s"}`:t===1?"a day ago":`${t} days ago`:s.toLocaleDateString(void 0,{year:"numeric",month:"long",day:"numeric"})}const c=()=>history.back()||window.close();export{f,c as g};

paskia/frontend-build/auth/assets/reset-DXzuKgh6.css

@@ -0,0 +1 @@
+.center[data-v-4f202f9a]{text-align:center}.button-row.center[data-v-4f202f9a]{display:flex;justify-content:center}.section-body[data-v-4f202f9a]{gap:1.25rem}.name-edit span[data-v-4f202f9a]{color:var(--color-text-muted);font-size:.9rem}

paskia/frontend-build/auth/assets/reset-YnZxhnI5.js

@@ -0,0 +1 @@
+import{_ as M,G as F,r as i,c as v,W as b,o as U,d as c,e as u,i as V,f as t,t as g,n as $,z,A as E,S as I,C as N,q as R,X as D,V as K,p as O,v as j}from"./_plugin-vue_export-helper-R4vr2A9I.js";const q={class:"app-shell"},G={key:0,class:"global-status",style:{display:"block"}},H={class:"view-root"},J={class:"surface surface--tight",style:{"max-width":"560px",margin:"0 auto",width:"100%"}},L={class:"view-header",style:{"text-align":"center"}},W={class:"view-lede"},X={key:0,class:"section-block"},Y={key:1,class:"section-block"},Q={class:"section-body center"},Z={key:2,class:"section-block"},ee={class:"section-body"},se={class:"name-edit"},te=["disabled"],ae=["disabled"],ne={__name:"ResetApp",setup(ie){const o=F({show:!1,message:"",type:"info"}),d=i(!0),n=i(!1),r=i(""),x=i(null),p=i(null),f=i(""),m=i("");let h=null;const P=v(()=>p.value?.session_type||"your enrollment"),S=v(()=>d.value?"Preparing your secure enrollment…":y.value?`Finish up ${P.value}. You may edit the name below if needed, and it will be saved to your passkey.`:"This reset link is no longer valid.");v(()=>b());const y=v(()=>!!(r.value&&p.value));function l(e,s="info",a=3e3){o.show=!0,o.message=e,o.type=s,h&&clearTimeout(h),a>0&&(h=setTimeout(()=>{o.show=!1},a))}async function T(){try{const e=await N();x.value=e,e?.rp_name&&(document.title=`${e.rp_name} · Passkey Setup`)}catch(e){console.warn("Unable to load settings",e)}}async function C(){if(r.value)try{p.value=await R(`/auth/api/user-info?reset=${encodeURIComponent(r.value)}`,{method:"POST"}),f.value=p.value?.user?.user_name||""}catch(e){console.error("Failed to load user info",e);const s=e instanceof D?e.data?.detail||"Reset link is invalid or expired.":K(e);m.value=s,l(s,"error",0)}}async function _(){if(!y.value||n.value)return;n.value=!0,l("Starting passkey registration…","info");let e;try{const s=f.value.trim()||null;e=await O.register(r.value,s)}catch(s){n.value=!1;const a=s?.message||"Passkey registration cancelled",k=a==="Passkey registration cancelled";l(k?a:`Registration failed: ${a}`,k?"info":"error",4e3);return}try{await A(e)}catch(s){n.value=!1;const a=s?.message||"Failed to establish session";l(a,"error",4e3);return}l("Passkey registered successfully!","success",800),setTimeout(()=>{n.value=!1,w()},800)}async function A(e){if(!e?.session_token)throw new Error("Registration response missing session_token");return await R("/auth/api/set-session",{method:"POST",headers:{Authorization:`Bearer ${e.session_token}`}})}function w(){const e=b.value||"/auth/";window.location.pathname!==e&&history.replaceState(null,"",e),window.location.reload()}function B(){const e=window.location.pathname.split("/").filter(Boolean);if(!e.length)return"";const s=e[e.length-1],a=e.slice(0,-1);return a.length>1||a.length===1&&a[0]!=="auth"||!s.includes(".")?"":s}return U(async()=>{if(r.value=B(),await T(),!r.value){const e="Reset link is missing or malformed.";m.value=e,l(e,"error",0),d.value=!1;return}await C(),d.value=!1}),(e,s)=>(u(),c("div",q,[o.show?(u(),c("div",G,[t("div",{class:$(["status",o.type])},g(o.message),3)])):V("",!0),t("main",H,[t("div",J,[t("header",L,[s[1]||(s[1]=t("h1",null,"🔑 Registration",-1)),t("p",W,g(S.value),1)]),d.value?(u(),c("section",X,[...s[2]||(s[2]=[t("div",{class:"section-body center"},[t("p",null,"Loading reset details…")],-1)])])):y.value?(u(),c("section",Z,[t("div",ee,[t("label",se,[s[3]||(s[3]=t("span",null,"👤 Name",-1)),z(t("input",{type:"text","onUpdate:modelValue":s[0]||(s[0]=a=>f.value=a),disabled:n.value,maxlength:"64",onKeyup:I(_,["enter"])},null,40,te),[[E,f.value]])]),t("button",{class:"btn-primary",disabled:n.value,onClick:_},g(n.value?"Registering…":"Register Passkey"),9,ae)])])):(u(),c("section",Y,[t("div",Q,[t("p",null,g(m.value),1),t("div",{class:"button-row center",style:{"justify-content":"center"}},[t("button",{class:"btn-secondary",onClick:w},"Return to sign-in")])])]))])])]))}},oe=M(ne,[["__scopeId","data-v-4f202f9a"]]);j(oe).mount("#app");

paskia/frontend-build/auth/assets/restricted-DVCvYFGN.js

@@ -0,0 +1 @@
+import{c as r,o as c,h as i,e as d,v as u}from"./_plugin-vue_export-helper-R4vr2A9I.js";import{R as p}from"./RestrictedAuth-BIGLs28V.js";const h={__name:"RestrictedApi",setup(m){const a=r(()=>{const n=new URLSearchParams(window.location.hash.slice(1)).get("mode");return n==="reauth"?"reauth":n==="forbidden"?"forbidden":"login"});function t(e){window.parent&&window.parent!==window&&window.parent.postMessage(e,"*")}function s(e){t({type:"auth-success",authenticated:!0,sessionToken:e.session_token})}function o(){t({type:"auth-back"})}return c(()=>{t({type:"auth-ready"}),window.addEventListener("keydown",e=>{e.key==="Escape"&&o()})}),(e,n)=>(d(),i(p,{mode:a.value,onAuthenticated:s,onBack:o},null,8,["mode"]))}};u(h).mount("#app");

paskia/frontend-build/auth/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Auth Profile</title>
+    <script type="module" crossorigin src="/auth/assets/auth-a0yJ_sei.js"></script>
+    <link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
+    <link rel="modulepreload" crossorigin href="/auth/assets/helpers-CU0-cyzg.js">
+    <link rel="modulepreload" crossorigin href="/auth/assets/AccessDenied-guOGfNm-.js">
+    <link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
+    <link rel="stylesheet" crossorigin href="/auth/assets/AccessDenied-TAST_piX.css">
+    <link rel="stylesheet" crossorigin href="/auth/assets/auth-CBojJKUK.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

paskia/frontend-build/auth/restricted/index.html

@@ -0,0 +1,9 @@
+<html style="background: transparent">
+<script type="module" crossorigin src="/auth/assets/restricted-DVCvYFGN.js"></script>
+<link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
+<link rel="modulepreload" crossorigin href="/auth/assets/RestrictedAuth-BIGLs28V.js">
+<link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
+<link rel="stylesheet" crossorigin href="/auth/assets/RestrictedAuth-CMHKrNJh.css">
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<div id="app"></div>

paskia/frontend-build/int/forward/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Access Restricted</title>
+    <script type="module" crossorigin src="/auth/assets/forward-BHNzlQhM.js"></script>
+    <link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
+    <link rel="modulepreload" crossorigin href="/auth/assets/RestrictedAuth-BIGLs28V.js">
+    <link rel="modulepreload" crossorigin href="/auth/assets/helpers-CU0-cyzg.js">
+    <link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
+    <link rel="stylesheet" crossorigin href="/auth/assets/RestrictedAuth-CMHKrNJh.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

paskia/frontend-build/int/reset/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Complete Passkey Setup</title>
+    <script type="module" crossorigin src="/auth/assets/reset-YnZxhnI5.js"></script>
+    <link rel="modulepreload" crossorigin href="/auth/assets/_plugin-vue_export-helper-R4vr2A9I.js">
+    <link rel="stylesheet" crossorigin href="/auth/assets/_plugin-vue_export-helper-Bx2cFCEC.css">
+    <link rel="stylesheet" crossorigin href="/auth/assets/reset-DXzuKgh6.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

paskia/globals.py

@@ -1,7 +1,7 @@
 from typing import Generic, TypeVar
 
-from .db import DatabaseInterface
-from .sansio import Passkey
+from paskia.db import DatabaseInterface
+from paskia.sansio import Passkey
 
 T = TypeVar("T")
 
@@ -29,9 +29,7 @@ class Manager(Generic[T]):
 async def init(
     rp_id: str = "localhost",
     rp_name: str | None = None,
-    origin: str | None = None,
-    default_admin: str | None = None,
-    default_org: str | None = None,
+    origins: list[str] | None = None,
     *,
     bootstrap: bool = True,
 ) -> None:
@@ -45,7 +43,7 @@ async def init(
     passkey.instance = Passkey(
         rp_id=rp_id,
         rp_name=rp_name or rp_id,
-        origin=origin,
+        origins=origins,
     )
 
     # Test if we have a database already initialized, otherwise use SQL
@@ -60,7 +58,7 @@ async def init(
         # Bootstrap system if needed
         from .bootstrap import bootstrap_if_needed
 
-        await bootstrap_if_needed(default_admin, default_org)
+        await bootstrap_if_needed()
 
 
 # Global instances

paskia/sansio.py

@@ -8,7 +8,7 @@ This module provides a unified interface for WebAuthn operations including:
 """
 
 import json
-from datetime import datetime
+from datetime import datetime, timezone
 from urllib.parse import urlparse
 from uuid import UUID
 
@@ -37,7 +37,7 @@ from webauthn.helpers.structs import (
     UserVerificationRequirement,
 )
 
-from .db import Credential
+from paskia.db import Credential
 
 
 class Passkey:
@@ -47,7 +47,7 @@ class Passkey:
         self,
         rp_id: str,
         rp_name: str | None = None,
-        origin: str | None = None,
+        origins: list[str] | None = None,
         supported_pub_key_algs: list[COSEAlgorithmIdentifier] | None = None,
     ):
         """
@@ -56,40 +56,58 @@ class Passkey:
         Args:
             rp_id: Your security domain (e.g. "example.com")
             rp_name: The relying party display name (e.g. "Example App"). May be shown in authenticators.
-            origin: The origin URL of the application (e.g. "https://app.example.com").
-                   If no scheme is provided, "https://" will be prepended.
-                   Must be a subdomain or same as rp_id, with port and scheme but no path included.
+            origins: List of allowed origin URLs (e.g. ["https://app.example.com", "https://auth.example.com"]).
+                    Each must be a subdomain or same as rp_id. If not provided, any subdomain of rp_id is allowed.
             supported_pub_key_algs: List of supported COSE algorithms (default is EDDSA, ECDSA_SHA_256, RSASSA_PKCS1_v1_5_SHA_256).
 
         Raises:
-            ValueError: If the origin domain doesn't match or isn't a subdomain of rp_id.
+            ValueError: If any origin domain doesn't match or isn't a subdomain of rp_id.
         """
         self.rp_id = rp_id
         self.rp_name = rp_name or rp_id
-        self.origin = self._normalize_and_validate_origin(origin, rp_id)
+        self.allowed_origins: set[str] | None = None
+        if origins:
+            # Validate and deduplicate origins into a set for O(1) lookups
+            for o in origins:
+                self._validate_origin(o, rp_id)
+            self.allowed_origins = set(origins)
         self.supported_pub_key_algs = supported_pub_key_algs or [
             COSEAlgorithmIdentifier.EDDSA,
             COSEAlgorithmIdentifier.ECDSA_SHA_256,
             COSEAlgorithmIdentifier.RSASSA_PKCS1_v1_5_SHA_256,
         ]
 
-    def _normalize_and_validate_origin(self, origin: str | None, rp_id: str) -> str:
-        if origin is None:
-            origin = f"https://{rp_id}"
-        elif "://" not in origin:
-            origin = f"https://{origin}"
-
+    def _validate_origin(self, origin: str, rp_id: str) -> None:
+        """Validate an origin URL against the rp_id."""
         hostname = urlparse(origin).hostname
         if not hostname:
             raise ValueError(f"Invalid origin URL: no hostname found in '{origin}'")
 
         if hostname == rp_id or hostname.endswith(f".{rp_id}"):
-            return origin
+            return
 
         raise ValueError(
             f"Origin domain '{hostname}' must be the same as or a subdomain of rp_id '{rp_id}'"
         )
 
+    def validate_origin(self, origin: str) -> str:
+        """Validate that origin is allowed and return it.
+
+        Args:
+            origin: The origin URL to validate (from WebSocket request header)
+
+        Returns:
+            The validated origin URL
+
+        Raises:
+            ValueError: If origin is not in the allowed list (when origins are configured)
+                       or if origin is not a valid subdomain of rp_id
+        """
+        self._validate_origin(origin, self.rp_id)
+        if self.allowed_origins is not None and origin not in self.allowed_origins:
+            raise ValueError(f"Origin '{origin}' is not in the allowed origins list")
+        return origin
+
     ### Registration Methods ###
 
     def reg_generate_options(
@@ -137,14 +155,16 @@ class Passkey:
         response_json: dict | str,
         expected_challenge: bytes,
         user_uuid: UUID,
-        origin: str | None = None,
+        origin: str,
     ) -> Credential:
         """
         Verify registration response.
 
         Args:
-            credential: The credential response from the client
+            response_json: The credential response from the client
             expected_challenge: The expected challenge bytes
+            user_uuid: The user's UUID
+            origin: The origin URL (required, must be pre-validated)
 
         Returns:
             Registration verification result
@@ -153,7 +173,7 @@ class Passkey:
         registration = verify_registration_response(
             credential=credential,
             expected_challenge=expected_challenge,
-            expected_origin=origin or self.origin,
+            expected_origin=origin,
             expected_rp_id=self.rp_id,
         )
         return Credential(
@@ -163,7 +183,7 @@ class Passkey:
             aaguid=UUID(registration.aaguid),
             public_key=registration.credential_public_key,
             sign_count=registration.sign_count,
-            created_at=datetime.now(),
+            created_at=datetime.now(timezone.utc),
         )
 
     ### Authentication Methods ###
@@ -184,7 +204,7 @@ class Passkey:
             authopts: Additional arguments to generate_authentication_options.
 
         Returns:
-            Tuple of (JSON to be sent to client, challenge bytes to store)
+            Tuple of (JSON dict to be sent to client, challenge bytes to store)
         """
         options = generate_authentication_options(
             rp_id=self.rp_id,
@@ -206,7 +226,7 @@ class Passkey:
         credential: AuthenticationCredential,
         expected_challenge: bytes,
         stored_cred: Credential,
-        origin: str | None = None,
+        origin: str,
     ) -> VerifiedAuthentication:
         """
         Verify authentication response against locally stored credential data.
@@ -215,19 +235,19 @@ class Passkey:
             credential: The authentication credential response from the client
             expected_challenge: The earlier generated challenge bytes
             stored_cred: The server stored credential record (modified by this function)
+            origin: The origin URL (required, must be pre-validated)
         """
-        expected_origin = origin or self.origin
         # Verify the authentication response
         verification = verify_authentication_response(
             credential=credential,
             expected_challenge=expected_challenge,
-            expected_origin=expected_origin,
+            expected_origin=origin,
             expected_rp_id=self.rp_id,
             credential_public_key=stored_cred.public_key,
             credential_current_sign_count=stored_cred.sign_count,
         )
         stored_cred.sign_count = verification.new_sign_count
-        now = datetime.now()
+        now = datetime.now(timezone.utc)
         stored_cred.last_used = now
         if verification.user_verified:
             stored_cred.last_verified = now