Update fastapi-vue-setup 1.6.1 with major changes.

The restricted entry validates the session before rendering anything
(no load-time flash): 401/403 switches to the existing login component
in place of the profile, success renders the panel fully populated via
props, other failures show a minimal card with Back only. The dialog
drops the standalone page's heading and help text.

.gitignore

@@ -5,7 +5,10 @@ dist/
 *.lock
 package-lock.json
 paskia.sqlite
-paskia.jsonl
+*.paskiadb
+*.converted-bak
+*.kantadb
+*.data
 /paskia/frontend-build
 /paskia/_version.py
 coverage-html/

README.md

@@ -20,7 +20,7 @@ An easy to install passkey-based authentication service that protects any web ap
 ## Authenticate to get to your app, or in your app
 
 - API fetch: auth checks and login without leaving your app
-- Forward-auth proxy: protect any unprotected site or service (Caddy, Nginx)
+- Forward-auth proxy: protect any unprotected site or service ([Caddy](docs/proxy/caddy.md), [Nginx](docs/proxy/nginx.md), and [others](docs/proxy/index.md))
 
 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.
 
@@ -35,61 +35,58 @@ Paskia includes set of login, reauthentication and forbidden dialogs that it can
 
 Install [UV](https://docs.astral.sh/uv/getting-started/installation/) and run:
 
-```fish
-uvx paskia --rp-id example.com
+```sh
+uvx paskia init example.com
+uvx paskia
 ```
 
-On the first run it downloads the software and prints a registration link for the Admin. The server starts on [localhost:4401](http://localhost:4401), serving authentication for `*.example.com`. For local testing, leave out `--rp-id`.
+The first command bootstraps the database and prints a registration link for the Admin. The second starts the server on [localhost:4401](http://localhost:4401), serving authentication for `*.example.com`. For local testing, leave out the rp-id (defaults to `localhost`).
 
 For production you 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 (see documentation below).
 
 For a permanent install of `paskia` CLI command, not needing `uvx`:
 
-```fish
+```sh
 uv tool install paskia
 ```
 
 ## Configuration
 
-All configuration is passed by CLI arguments, of which there are just a few.
+Bootstrapping is done once with `paskia init`; after that, `paskia` serves all configured domains from the database `paskia.kantadb` in the current directory. Domain configuration (rp-name, auth host, origins) is managed via the admin web interface, including adding further domains (rp-ids).
 
 ```text
-paskia [options]
+paskia init [rp-id] [rp-name] [options]  # one-time bootstrap; with an existing
+                                         # database, adds the rp-id (or renames it)
+paskia migrate [rp-id]                   # convert a legacy {rp-id}.paskiadb database
+paskia [-l endpoint]                     # serve
 ```
 
-| Option | Description | Default |
+| init option | Description | Default |
 |--------|-------------|---------|
-| -l, --listen *endpoint* | Listen address: *host*:*port*, :*port* (all interfaces), or */path.sock* | **localhost:4401** |
-| --rp-id *domain* | Main/top domain for passkeys | **localhost** |
-| --rp-name *"text"* | Name shown during passkey registration | Same as rp-id |
-| --origin *url* | Restrict allowed origins for WebSocket auth (repeatable) | All under rp-id |
-| --auth-host *url* | Dedicated authentication site, e.g. **auth.example.com** | Use **/auth/** path on each site |
+| -l, --listen *endpoint* | Listen address: *host*:*port*, :*port* (all interfaces), or */path.sock* (stored in the database) | **localhost:4401** |
+| *rp-id* (positional) | Main/top domain for passkeys | **localhost** |
+| *rp-name* (positional) | Branding name of the domain (passkey auth, login dialog) | Same as rp-id |
+
+Origins, auth hosts and related domains are configured afterwards in the admin panel's Domains section.
+
+The `paskia` serve command accepts only `--listen` (overriding the stored value) and never converts databases: with no `paskia.kantadb` it tells you to run `paskia init`, or `paskia migrate` when a legacy `{rp-id}.paskiadb` database is present. `paskia migrate` converts the legacy database; with several candidates, the positional rp-id selects one by name and the rest are left in place.
 
 ## Tutorial: From Local Testing to Production
 
 This section walks you through a complete example, from running Paskia locally to protecting a real site in production.
 
-### Step 1: Local Testing
+### Step 1: Production Configuration
 
-For development and testing, run Paskia without any arguments:
+For a real deployment, bootstrap Paskia with your domain name (rp-id). This enables SSO setup for that domain and any subdomains.
 
-```fish
-paskia
+```sh
+uvx paskia init example.com "Example Corp"
+uvx paskia
 ```
 
-This starts the server on [localhost:4401](http://localhost:4401) with passkeys bound to `localhost`. On first run, Paskia prints a registration link for the Master Admin—click it to register your first passkey.
+This binds passkeys to the rp-id, allowing them to be used there or on any subdomain of it. The rp-name is the branding shown in UI and registered with passkeys for everything on your domain (rp id). Init prints a registration link—use it to create your Admin account. You may enter your real name here for a more suitable account name.
 
-### Step 2: Production Configuration
-
-For a real deployment, configure Paskia with your domain name (rp-id). This enables SSO setup for that domain and any subdomains.
-
-```fish
-paskia --rp-id example.com --rp-name "Example Corp"
-```
-
-This binds passkeys to `*.example.com`. The `--rp-name` is shown to users during passkey registration.
-
-### Step 3: Set Up Caddy
+### Step 2: Set Up Caddy
 
 Install [Caddy](https://caddyserver.com/) and copy the [auth folder](caddy/auth) to `/etc/caddy/auth`. Say your current unprotected Caddyfile looks like this:
 
@@ -113,7 +110,7 @@ app.example.com {
 
 Run `systemctl reload caddy`. Now `app.example.com` requires the `myapp:login` permission. Try accessing it and you'll land on a login dialog.
 
-### Step 4: Assign Permissions via Admin Panel
+### Step 3: Assign Permissions via Admin Panel
 
 ![Admin panel permissions](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/master-permissions.webp)
 
@@ -126,7 +123,7 @@ Now you have granted yourself the new permission.
 
 Permission scopes are text identifiers with colons as separators that we can use for permission checks. The `myapp:` prefix is a convention to namespace permissions per application—you but you can use other forms as you see fit (urlsafe characters, no spaces allowed).
 
-### Step 5: Add API Authentication to Your App
+### Step 4: Add API Authentication to Your App
 
 Your backend already receives `Remote-*` headers from Caddy's forward-auth. For frontend API calls, we provide a [JS paskia module](https://www.npmjs.com/package/paskia):
 
@@ -167,13 +164,23 @@ You may also remove the `myapp:login` protection from the rest of your site path
     }
 ```
 
-### Step 6: Run Paskia as a Service
+### Step 5: Run Paskia as a Service
 
 Create a system user paskia, install UV on the system, and create a systemd unit:
 
-```fish
+```sh
 sudo useradd --system --home-dir /srv/paskia --create-home paskia
+```
+
+Install UV on the system (or arch btw `pacman -S uv`):
+
+```sh
 curl -LsSf https://astral.sh/uv/install.sh | sudo env UV_INSTALL_DIR=/usr/local/bin sh
+```
+
+Create a systemd unit:
+
+```sh
 sudo systemctl edit --force --full paskia.service
 ```
 
@@ -181,28 +188,51 @@ Paste the following and save:
 
 ```ini
 [Unit]
-Description=Paskia Authentication Server
+Description=Paskia authentication system
 
 [Service]
 Type=simple
 User=paskia
+SyslogIdentifier=paskia
 WorkingDirectory=/srv/paskia
-ExecStart=uvx paskia --rp-id example.com --rp-name "Example Corp"
+ExecStart=uvx paskia@latest
 
 [Install]
 WantedBy=multi-user.target
 ```
 
-Then enable and start, view output for registration link:
+Run the service and view log:
 
-```fish
-sudo systemctl enable --now paskia && sudo journalctl -u paskia -f -n 20 -o cat
+```sh
+sudo systemctl enable --now paskia && sudo journalctl -n30 -ocat -fu paskia
 ```
 
+### Optional: Dedicated Authentication Site
+
+Add a Caddy configuration for the authentication domain:
+
+```caddyfile
+auth.example.com {
+    reverse_proxy :4401
+}
+```
+
+Now all authentication happens at `auth.example.com` instead of `/auth/` paths on your apps. Your existing protected sites continue to work as before but they just forward to the dedicated site for user profile and other such functionality.
+
+Set the auth host in the admin panel's Domains section.
+
+## Multiple Domains and Related Origins
+
+One Paskia instance can serve several domains (rp-ids) from the same database: users, orgs and permissions are shared, while passkeys are registered per domain. The master admin adds domains in the admin panel's Domains section; no restart is needed.
+
+A domain can also let *other* domain names use its passkeys via WebAuthn [Related Origin Requests](https://passkeys.dev/docs/advanced/related-origins/) — list them in the domain's allowed origins (they show as related domains), and paskia serves the required `/.well-known/webauthn` declaration on the domain's main site. In-domain entries of the same list restrict which sites of the domain's own name may authenticate (a new domain defaults to `**.{domain}` — the apex and all subdomains over https).
+
+See [Multi-Site documentation](docs/MultiSite.md) for details.
+
 
 ## Further Documentation
 
-- [Caddy configuration](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Caddy.md)
+- [Forward-Auth Guides](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/proxy/index.md) (Caddy, Nginx, ...)
 - [Trusted Headers for Backend Apps](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Headers.md)
 - [Frontend integration](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Integration.md)
 - [Paskia API](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/API.md)

caddy/Caddyfile

@@ -10,7 +10,7 @@ localhost {
 	@public path /favicon.ico /.well-known/*
 	handle @public {
 		root * /var/www/
-        file_server
+		file_server
 	}
 	# Respond with user's display name
 	handle_path /hello {

caddy/Caddyfile.dev

@@ -1,9 +1,12 @@
 localhost {
-	# Forwards API by caddy, bypassing the Vite dev proxy
+	# WebSockets bypass directly to backend (workaround for bun proxy bug)
 	# Avoids bug https://github.com/oven-sh/bun/issues/9882
-	handle /api/* {
+	handle /auth/ws/* {
 		reverse_proxy :4402   # directly to backend
 	}
+	# Everything else goes to or via Vite
+	# (Vite proxies /auth/api, /.well-known/openid-configuration and
+	# /.well-known/webauthn to the backend)
 	handle {
 		reverse_proxy :4403   # vite dev server
 	}

caddy/auth/require

@@ -2,11 +2,13 @@
 # Argument is mandatory and provides a query string to /auth/api/forward
 #   "" means just authentication
 #   perm=yourservice:login to require specific permission
+#   public=1 to allow public access (backend must check Remote-Public)
 forward_auth {$AUTH_UPSTREAM:localhost:4401} {
     uri /auth/api/forward?{args[0]}
     header_up Connection keep-alive  # Much higher performance
     header_up -Upgrade  # Disable Upgrade: WebSocket
     copy_headers {
+        Remote-Public
         Remote-User
         Remote-Name
         Remote-Groups

caddy/auth/setup

@@ -4,3 +4,10 @@ header -Remote-*
 handle @auth_api {
     reverse_proxy {$AUTH_UPSTREAM::4401}
 }
+# Paskia-served well-known endpoints: OIDC discovery and WebAuthn Related
+# Origin Requests (must reach paskia even when other /.well-known/* files
+# are served statically)
+@auth_wellknown path /.well-known/openid-configuration /.well-known/webauthn
+handle @auth_wellknown {
+    reverse_proxy {$AUTH_UPSTREAM::4401}
+}

docs/API.md

@@ -1,64 +1,117 @@
 # Paskia API
 
+[Integration](Integration.md) · [Proxy guides](proxy/index.md)
+
 For integrating Paskia with your app frontend, see [integration](Integration.md).
 
 ## Web Interface
 
-| Method | Path | What it is for | Notes |
+| Method | Path | What it is for | Responses |
 |---:|---|---|---|
-| GET | `/auth/` | User profile page | |
-| GET | `/auth/admin/` | Admin panel | Requires auth:admin (master) or org admin permissions. |
-| GET | `/auth/{token}` | Reset / add credential URL (QR code link) | E.g. `/auth/fun.cotton.fresh.xray.lava` |
+| GET | /auth/ | User profile page | HTML 200/401 |
+| GET | /auth/admin/ | Admin panel, requires auth:admin or org admin permissions | HTML 200/401/403 |
+| GET | /auth/{token} | Reset / add credential URL (QR code link), e.g. /auth/fun.cotton.fresh.xray.lava | HTML 200 |
 
-### Public JSON API: `/auth/api/*`
+### Public JSON API: /auth/api/*
 
-| Method | Path | Used for | Notes |
+| Method | Path | Used for | Expected responses |
 |---:|---|---|---|
-| GET | `/auth/api/settings` | Paskia configuration | Returns RP info + base paths + session cookie name |
-| POST | `/auth/api/user-info` | Full user profile | Basic information, credentials, sessions, permissions |
-| POST | `/auth/api/logout` | Terminate session and delete session cookie | Signs out of the current site |
-| POST | `/auth/api/validate` | Validate and renew session cookie | Optional query: `perm=` (repeatable), `max_age=` |
-| GET | `/auth/api/forward` | Validate access (Caddy/Nginx) | 204 on success; 401/403 otherwise (HTML if requested) |
+| GET | /auth/api/settings | Paskia configuration: RP info, base paths, session cookie name | 200 |
+| GET | /auth/api/user-info | Full user profile: info, credentials, sessions, permissions | 200/401 |
+| POST | /auth/api/logout | Terminate session and delete session cookie on the current host | 200 |
+| POST | [/auth/api/validate](api/validate.md) | Validate and renew the session cookie; query [perm](api/perm.md), [max_age](api/max-age.md), [renew](api/validate.md#query-parameters) | 200/401/403 |
+| GET | [/auth/api/forward](api/forward.md) | Forward-auth with reverse proxies; see [proxy guides](proxy/index.md), query [perm](api/perm.md), [max_age](api/max-age.md) | 204/401/403 empty, json or html|
 
-The `validate` and `forward` endpoints take query arguments `perm=` and `max_age=` for specific requirements on the validation of the current session.
+### User JSON API: /auth/api/user/*
 
-### User JSON API: `/auth/api/user/*`
-
-| Method | Path | Used for | Notes |
+| Method | Path | Used for | Responses |
 |---:|---|---|---|
-| PUT | `/auth/api/user/display-name` | Update the user’s display name | Body: JSON `{ "display_name": "..." }` |
-| POST | `/auth/api/user/logout-all` | Terminate all user sessions | Clears current host cookie |
-| DELETE | `/auth/api/user/session/{session_id}` | Terminate one session | Session IDs are server-issued |
-| DELETE | `/auth/api/user/credential/{uuid}` | Delete a credential | Requires recent authentication |
-| POST | `/auth/api/user/create-link` | Create a device-add link | Requires recent authentication |
+| PATCH | /auth/api/user/display-name | Update the user's display name | 200/401 |
+| POST | /auth/api/user/logout-all | Terminate all user sessions | 200/401 |
+| DELETE | /auth/api/user/session/{session_id} | Terminate one session | 200/401 |
+| DELETE | /auth/api/user/credential/{uuid} | Delete a credential; requires recent authentication | 200/401/403 |
+| POST | /auth/api/user/create-link | Create a device-add link; requires recent authentication | 200/401/403 |
+| GET | /auth/api/user/{uuid}/profile.webp | Canonical avatar image URL, public on the auth host | 200/304/404 |
+| PUT | /auth/api/user/{uuid}/profile.webp | Upload or replace an avatar; square WebP prepared in the browser | 200/401/403 |
+| DELETE | /auth/api/user/{uuid}/profile.webp | Remove an avatar; allowed for the user or an admin | 200/401/403 |
 
-These are used mostly from the user profile panel and modify the current user.
+These are used mostly from the user profile panel by the user himself, but the profile pictures are public for all to read.
 
-### Admin API: `/auth/api/admin/*`
+### Admin API: /auth/api/admin/*
 
 Normally only used via admin panel, requires auth admin permissions and can modify any users, orgs and permissions the session has access to.
 
-E.g. Org admin cannot see anything of the other orgs that he has no admin access to. Master admin `auth:admin` can see everything and create and manage orgs.
+E.g. Org admin cannot see anything of the other orgs that he has no admin access to. Master admin auth:admin can see everything and create and manage orgs.
 
-### WebSockets: `/auth/ws/*`
+| Method | Path | Used for | Responses |
+|---:|---|---|---|
+| GET | /auth/api/admin/info | Admin overview: orgs, permissions, OIDC clients | 200/401/403 |
+| POST | /auth/api/admin/permissions/ | Create permission | 200/401/403 |
+| PATCH | /auth/api/admin/permissions/{uuid} | Update permission | 200/401/403 |
+| DELETE | /auth/api/admin/permissions/{uuid} | Delete permission | 200/401/403 |
+| POST | /auth/api/admin/orgs/ | Create organization | 200/401/403 |
+| GET | /auth/api/admin/orgs/{uuid} | Get organization details | 200/401/403 |
+| PATCH | /auth/api/admin/orgs/{uuid} | Update organization | 200/401/403 |
+| DELETE | /auth/api/admin/orgs/{uuid} | Delete organization | 200/401/403 |
+| POST | /auth/api/admin/orgs/{uuid}/users | Create user in org | 200/401/403 |
+| POST | /auth/api/admin/orgs/{uuid}/roles | Create role in org | 200/401/403 |
+| POST | /auth/api/admin/orgs/{uuid}/permission | Grant permission to org | 200/401/403 |
+| DELETE | /auth/api/admin/orgs/{uuid}/permission | Revoke permission from org | 200/401/403 |
+| PATCH | /auth/api/admin/roles/{uuid} | Update role | 200/401/403 |
+| POST | /auth/api/admin/roles/{uuid}/permissions/{uuid} | Add permission to role | 200/401/403 |
+| DELETE | /auth/api/admin/roles/{uuid}/permissions/{uuid} | Remove permission from role | 200/401/403 |
+| DELETE | /auth/api/admin/roles/{uuid} | Delete role | 200/401/403 |
+| PATCH | /auth/api/admin/users/{uuid}/role | Update user role | 200/401/403 |
+| PATCH | /auth/api/admin/users/{uuid}/info | Update user info | 200/401/403 |
+| GET | /auth/api/admin/users/{uuid} | Get user details | 200/401/403 |
+| DELETE | /auth/api/admin/users/{uuid} | Delete user | 200/401/403 |
+| POST | /auth/api/admin/users/{uuid}/create-link | Create device add link | 200/401/403 |
+| DELETE | /auth/api/admin/users/{uuid}/credentials/{uuid} | Delete user credential | 200/401/403 |
+| DELETE | /auth/api/admin/users/{uuid}/sessions/{key} | Delete user session | 200/401/403 |
+| POST | /auth/api/admin/oidc-clients/ | Create OIDC client | 200/401/403 |
+| PATCH | /auth/api/admin/oidc-clients/{uuid} | Update OIDC client | 200/401/403 |
+| PATCH | /auth/api/admin/oidc-clients/{uuid}/reset-secret | Reset client secret | 200/401/403 |
+| DELETE | /auth/api/admin/oidc-clients/{uuid} | Delete OIDC client | 200/401/403 |
+| GET | /auth/api/admin/domains/ | List domains (rp-ids) with derived URLs | 200/401/403 |
+| POST | /auth/api/admin/domains/ | Create domain `{rp_id, rp_name?, origins?, related?}` | 200/400/401/403 |
+| PATCH | /auth/api/admin/domains/{rp_id} | Update domain rp_name/origins/related | 200/400/401/403 |
+| DELETE | /auth/api/admin/domains/{rp_id} | Delete domain (refused while credentials remain) | 200/400/401/403 |
+
+Domain endpoints require the `auth:admin` permission; writes additionally require recent authentication (5 minutes). Changes are validated cross-domain and apply immediately.
+
+`origins` is a single object keyed by all of the domain's sign-in sites. Entries *within* the rp-id domain are in-domain sites: bare hosts, wildcards under the rp-id following the shell-glob convention (`**.example.com` covers the apex and subdomains at any depth, `*.example.com` exactly one subdomain level — https only, any scheme and port under localhost; plain `*` is not accepted), or full origins when not https. Entries *outside* the rp-id domain are related origins that may assert this domain's rp-id (WebAuthn Related Origin Requests, max 5, no wildcards); those are published at `/.well-known/webauthn` on the rp-id host. An empty object allows nothing of the domain itself. A value of `true` marks presence; `{"auth_host": true}` additionally marks an in-domain entry as the domain's authentication host.
+
+### WebSockets: /auth/ws/*
 
 | Path | Used for | Notes |
 |---|---|---|
-| `WS /auth/ws/authenticate` | Passkey authentication | Returns a session token |
-| `WS /auth/ws/register` | Register a new credential | Adding another passkey to current user or via reset token |
-| `WS /auth/ws/remote-auth/request` | Start a cross-device login/registration request | Used from unauthenticated client |
-| `WS /auth/ws/remote-auth/permit` | Approve/deny a pairing code | Used to accept the request, if same words are entered |
+| WS /auth/ws/authenticate | Passkey authentication | Returns a session token |
+| WS /auth/ws/register | Register a new credential | Adding another passkey to current user or via reset token |
+| WS /auth/ws/remote-auth/request | Start a cross-device login/registration request | Used from unauthenticated client |
+| WS /auth/ws/remote-auth/permit | Approve/deny a pairing code | Used to accept the request, if same words are entered |
 
 These are for internal use only, but are documented here because they are the core piece in all passkey operations.
 
-### Auth host mode (`--auth-host`)
+### Auth host mode (dedicated auth site)
+
+A domain may configure a dedicated authentication host (auth-host, a subdomain of the rp-id) via the Domains admin panel.
 
 #### On the auth host:
-- The Web UI is served at site root (e.g. admin UI at `/admin/`), and the `/auth/...` equivalents (e.g. `/auth/admin/`) redirect to the root paths.
-- All of the API stays under `/auth/api/*`
-- Auth WebSockets remain at `/auth/ws/*` but take connections from other hosts to issue sessions for each of those.
+- The Web UI is served at site root instead of /auth/* (that redirects to root paths)
+- All of the API stays under /auth/api/*
+- Auth WebSockets remain at /auth/ws/* but take connections from other hosts to issue sessions for each of those.
 
 #### On non-auth hosts:
-- `/auth/` shows only minimal profile and allows logging out of the current site
-- `/auth/api/*` is served normally.
-- `/auth/api/user/*`, `/auth/api/admin/*`, and `/auth/ws/*` don't exist.
+- /auth/ shows only minimal profile and allows logging out of the current site, link to full profile on auth host
+- /auth/api/* is served normally.
+- /auth/api/user/*, /auth/api/admin/*, and /auth/ws/* don't exist.
+
+The WebSocket connections are directed to the auth host, and must have an allowed origin corresponding to the host where the user is logging in, that the session is tied with.
+
+#### Auth hosts and other domains
+
+Auth hosts are strictly per-domain: a domain without its own auth host uses its own hosts for the WebSocket flows, and `/auth/api/settings` reports `auth_host` (and the identical `own_auth_host`) as null. One domain's auth host never serves another domain implicitly. To consolidate logins on one host, mark that host as the auth host on each domain that should use it (possible when the host lies under each domain's rp-id, i.e. nested rp-ids); dispatch resolves a shared host to the best-matching (longest rp-id suffix) domain.
+
+### Related Origin Requests: /.well-known/webauthn
+
+`GET /.well-known/webauthn` returns `{"origins": [...]}` listing the domain's related origins (configured origins on domains unrelated to the rp-id), per WebAuthn Related Origin Requests. Browsers fetch this from the rp-id domain when an unrelated origin runs a ceremony with this domain's rp-id. Returns 404 when the domain has no related origins. If the rp-id's main site is hosted elsewhere, serve the JSON statically there (copy it from this instance).

docs/Headers.md

@@ -1,16 +1,29 @@
 # Paskia Trusted Headers for Backend Apps
 
+[Proxy guides](proxy/index.md) · [`/auth/api/forward`](api/forward.md)
+
 | HTTP Header | Meaning | Example |
 |---|---|---|
-| `Remote-User` | Authenticated user UUID | **01c03276-b8f0-**… (string) |
-| `Remote-Name` | User display name | **John Doe** |
-| `Remote-Org` | Organization UUID | Identifier for user's org (string) |
-| `Remote-Org-Name` | Organization display name | **The Company Ltd.** |
-| `Remote-Role` | Role UUID | Identifier for user's role (string) |
-| `Remote-Role-Name` | Role display name | **Employee** |
-| `Remote-Groups` | Permissions the user has, comma separated | **auth:admin,yourapp:reports** |
-| `Remote-Session-Expires` | Session expiry timestamp (ISO 8601 UTC) | **2030-12-31T23:59:59Z** |
-| `Remote-Credential` | Credential UUID | Identifier for the sign-in passkey (string) |
+| Remote-User | Authenticated user UUID | **01c03276-b8f0-**… (string) |
+| Remote-Name | User display name | **John Doe** |
+| Remote-Org | Organization UUID | Identifier for user's org (string) |
+| Remote-Org-Name | Organization display name | **The Company Ltd.** |
+| Remote-Role | Role UUID | Identifier for user's role (string) |
+| Remote-Role-Name | Role display name | **Employee** |
+| Remote-Groups | Permissions the user has, comma separated | **auth:admin,yourapp:reports** |
+| Remote-Session-Expires | Session expiry timestamp (ISO 8601 UTC) | **2030-12-31T23:59:59Z** |
+| Remote-Credential | Credential UUID | Identifier for the sign-in passkey (string) |
+| Remote-Public | Public-access marker, only present on routes using [`public=1`](api/forward.md#public-access) | **authenticated**, **forbidden** or **anonymous** |
+
+### Public access
+
+On routes configured with `public=1`, every forwarded request carries `Remote-Public` and the backend must check it before treating the request as authorized:
+
+- `authenticated` — the user has everything the route asked for; full `Remote-*` headers.
+- `forbidden` — the user is logged in but the route's `perm` check failed. Full identity headers are sent, including `Remote-Groups` — it is trustworthy, it just lacks the requested permission.
+- `anonymous` — no valid session; no identity headers are sent.
+
+Without `public=1` the header is absent and every request reaching the backend is fully authorized.
 
 Similar headers are also used by other authentication systems like [Authelia](https://www.authelia.com/integration/trusted-header-sso/introduction/) to signal the backend application information about the signed in user.
 
@@ -18,6 +31,6 @@ When a request is allowed, the auth service adds these headers by the forward-au
 
 Only the UUID values should be used for identification needs, because they never change, even when things are renamed (display names change), and are never reused (created on authentication server). They are UUIDv7 so you can also extract the creation timestamp from them.
 
-Any `Remote-*` headers from clients are stripped by our [Caddy configuration](Caddy.md) to avoid dealing with any fake headers.
+Any `Remote-*` headers from clients are stripped by the proxy configuration (see our [Caddy configuration](proxy/caddy.md) and [Forward-Auth Proxy Guides](proxy/index.md)) to avoid dealing with any fake headers.
 
 Note: the headers are intended primarily for the backend, while either frontend or backend (passing the session cookie) can request `/auth/api/user-info` for more complete information, and that is the recommended way to do it in the frontend. See [integration](Integration.md) for more.

docs/Integration.md

@@ -1,6 +1,8 @@
 # Integrating Paskia with your App
 
-This guide covers frontend and backend integration with Paskia. For Caddy forward-auth setup, see [Caddy configuration](Caddy.md).
+[API overview](API.md) · [Proxy guides](proxy/index.md)
+
+This guide covers frontend and backend integration with Paskia. For forward-auth setup, see the [Forward-Auth Proxy Guides](proxy/index.md); Caddy users can also start from the dedicated [Caddy configuration](proxy/caddy.md).
 
 ## Frontend Integration
 
@@ -58,7 +60,7 @@ validator.start()  // start polling (pauses on idle)
 validator.stop()   // stop polling
 ```
 
-The validator calls `/auth/api/validate` periodically to:
+The validator calls `/auth/api/validate` (see below) periodically to:
 - Renew the session cookie (24h lifetime)
 - Detect if the user logged out or switched accounts
 - Pause polling when the page is idle, allowing sessions to expire when not used
@@ -91,7 +93,7 @@ if (response.status === 401 || response.status === 403) {
 Get current user details:
 
 ```js
-const user = await apiJson('/auth/api/user-info', { method: 'POST' })
+const user = await apiJson('/auth/api/user-info', { method: 'GET' })
 // Returns: { uuid, display_name, credentials, sessions, permissions, ... }
 ```
 
@@ -101,7 +103,7 @@ Or link to the built-in profile page: `/auth/`
 
 ### Using Forward-Auth Headers
 
-When using Caddy forward-auth, your backend receives `Remote-*` headers on authenticated requests. See [Headers](Headers.md) for the full list.
+When using forward-auth, your backend receives `Remote-*` headers on authenticated requests. See [Headers](Headers.md) for the full list and [Forward-Auth Proxy Guides](proxy/index.md) for proxy configuration.
 
 ```python
 # Example: Python/FastAPI
@@ -115,47 +117,45 @@ def get_data(request: Request):
 
 ### Direct Validation from Backend
 
-Your backend can validate sessions directly by calling Paskia's validate endpoint:
+This is useful for:
+- Apps/APIs not behind proxy Forward-Auth protection
+- Background jobs that need to verify a stored session
+- Check extra permissions, get user context or renew session
+
+Your backend can validate sessions directly by calling Paskia's validate endpoint [`/auth/api/validate`](api/validate.md). It generally expects client headers proxied as is, while on the URL you can specify exact requirements. To verify a session without extending its lifetime or updating its IP / user-agent, pass `renew=0`.
+
+Usually it is sufficient to simply forward the headers the client sent, assuming your proxy already preserved `Host` and set `X-Forwarded-For` (otherwise set them here with original host and IP). `User-Agent` should also be forwarded if available, omitted if not: do not let your backend HTTP client add its own header.
+
+Be sure to REMOVE connection hop-by-hop headers (these will break WebSockets among other things):
 
 ```python
-import httpx
-
-async def validate_session(request) -> dict:
-    """Validate a session cookie and check permissions."""
-    authcookie = request.get("__Host-paskia")
-    response = await httpx.post(
-        "http://localhost:4401/auth/api/validate?perm=myapp:login+myapp:api",
-        headers={
-            "Host": request.headers["host"]
-            "X-Forwarded-For": request.client.host,
-            "Cookie": f"__Host-paskia={}",
-        },
-    )
-    if response.status_code != 200:
-        return response.json()  # Return to client
-    # User authenticated... We are good to go!
-    ctx = response.json()  # User and session information
+"Connection", "Keep-Alive", "Proxy-Connection", "TE", "Transfer-Encoding", "Upgrade"
 ```
 
-This is useful for:
-- WebSocket connections where headers aren't available after handshake
-- Background jobs that need to verify a stored session
-- APIs not behind forward-auth (auth/restrict)
+## Public access
 
-### Validate Endpoint Parameters
+For apps where authentication is optional, configure the proxy route with `public=1` (see your [proxy guide](proxy/index.md)). The auth check then always lets the request through, and your backend branches on the `Remote-Public` header:
 
-`POST /auth/api/validate` accepts query parameters:
+- `anonymous` — no valid session; no `Remote-*` identity headers are present.
+- `forbidden` — the user is logged in (identity headers are present and trustworthy) but the route's `perm` was not granted.
+- `authenticated` — session valid and all requested permissions met.
 
-| Parameter | Description |
-|-----------|-------------|
-| `perm=scope:name` | Require this permission (repeatable) |
-| `max_age=5min` | Require recent passkey use |
+```python
+# Example: Python/FastAPI
+@app.get("/api/reports")
+def reports(request: Request):
+    public = request.headers.get("Remote-Public")
+    if public != "authenticated":
+        raise HTTPException(401)  # or serve a limited public view
+    user_id = request.headers.get("Remote-User")
+    # ...
+```
 
-Returns 200 with user info on success, 401/403 on failure.
+Login-on-demand still works unchanged: any 401 your app itself returns for privileged operations carries the `auth.iframe` URL that the [paskia](https://www.npmjs.com/package/paskia) module handles automatically (see [API Fetch with Automatic Auth](#api-fetch-with-automatic-auth)). A `max_age` reauth requirement on the route still returns the 401 auth flow directly from the proxy. See [public access](api/forward.md#public-access) and [Headers](Headers.md#public-access).
 
 ## Proxying /auth/ to Paskia
 
-Your app server needs to proxy `/auth/` paths to Paskia. This can be done by your application but is much easier done by Caddy or Nginx.
+Your app server needs to proxy `/auth/` paths to Paskia. This can be done by your application but is much easier done by a reverse proxy. The [Forward-Auth Proxy Guides](proxy/index.md) cover Caddy, Nginx, Traefik, Apache APISIX, Envoy and HAProxy.
 
 ### Caddy
 

docs/MultiSite.md

@@ -0,0 +1,205 @@
+# Multiple Domains (Multi-Site)
+
+One Paskia instance on one port serves several domains from a single
+database. Typical uses:
+
+- `app1.company.com` and `app2.com` cannot share passkeys, but user
+  management should stay under one roof.
+- A few alternative brand names should accept the _same_ passkeys.
+
+## Shared vs. per-domain
+
+**Shared across all domains:** user accounts, organizations, roles,
+permissions, and OIDC clients. A user account exists once and can sign in
+on every domain.
+
+**Per domain:** passkeys and sessions.
+
+- A passkey is registered to one domain name (enforced by the browser): a
+  passkey created for `company.com` works on `company.com` and its
+  subdomains, never on an unrelated name — unless that name is configured
+  as a [related origin](#related-origins-sharing-passkeys-across-domain-names).
+  A user active on two domains simply holds one passkey per domain.
+- A session is bound to the exact host that issued it.
+
+## The simplest case: several sites on one domain
+
+Multi-site does not require several domains. Sites under one name —
+`app1.company.com`, `app2.company.com` and so on — share the domain
+`company.com`: one passkey works on all of them (WebAuthn natively allows
+the domain and its subdomains), and the default `**.company.com` origin
+entry already lets every one of them sign in. Add explicit entries only
+to restrict which sites may sign in, and mark an auth host (see below)
+if you want sign-in centralized on one site.
+
+## Managing domains
+
+The admin panel's **Domains** section (master admins only) lists every
+domain with its allowed origins. There you can add, edit and delete
+domains; changes apply immediately without a restart and require a recent
+sign-in (within 5 minutes). The 🔑 and 🔗 markers in the origins column
+identify the auth host and related origins (below).
+
+A domain consists of:
+
+- **Domain (rp-id)** — the domain name passkeys belong to, e.g.
+  `company.com`. ("rp-id" is the WebAuthn term; read it as "domain name".)
+  It cannot be changed after creation, because existing passkeys are bound
+  to it — delete and re-create the domain instead.
+- **Display name (rp-name)** — branding shown in sign-in dialogs and
+  registered with passkeys.
+- **Allowed origins** — the sites where this domain's passkeys may sign
+  in, plus any related origins.
+
+Deleting a domain is refused while any passkey is still registered to it,
+when it is the last remaining domain, or when it is the domain you are
+currently using. Users and organizations are never deleted with a domain
+— they are shared. An edit that would lock you out (your current site
+could no longer run passkey ceremonies for that domain) is refused as
+well.
+
+## Allowed origins (sign-in sites)
+
+This list controls which sites may sign in with the domain's passkeys.
+Everything is explicit: an empty list allows nothing of the domain itself
+(related origins, below, still work — a domain can in principle run
+entirely on related origins). A new domain starts with one entry,
+`**.{domain}`, which suits most deployments.
+
+Entry forms:
+
+- `**.company.com` — the domain itself and its subdomains at any depth,
+  https only. The default entry of a new domain.
+- `*.company.com` — exactly one subdomain level: `app.company.com` yes,
+  but neither the apex `company.com` nor `a.b.company.com`. Use this when
+  the apex or deeper subdomains should not serve sign-ins.
+- `app.company.com` — exactly this host, https only.
+- `http://localhost:8080` — a full origin with scheme, for non-https
+  exceptions.
+
+Under `localhost`, both wildcard forms match any scheme and any port, as
+a development convenience. An entry on a different domain name
+automatically becomes a related origin (🔗) instead — see below.
+
+### Wildcard syntax
+
+Wildcards follow the shell-glob convention — the same one permission
+scopes use (`*` within a segment, `**` across segments, see
+[the perm argument](api/perm.md)): `**` spans any number of hostname
+labels including none, `*` spans exactly one. Wildcards must stay within
+the domain, and plain `*` is not accepted — it would suggest "anything
+goes".
+
+Conventions elsewhere differ: DNS, TLS and nginx take `*.example.com` to
+mean subdomains only (TLS: exactly one level), while browser-extension
+match patterns take it as apex plus any depth. The `*`/`**` split
+sidesteps that ambiguity, and the less obvious forms `*example.com` and
+`.example.com` remain unsupported on purpose.
+
+## The auth host (🔑)
+
+Marking one allowed origin as the **auth host** (row menu ⋮ → "Set as
+auth host") centralizes the account and admin interface on that site,
+e.g. `auth.company.com`:
+
+- On the auth host the web UI is served at the site root (`/` instead of
+  `/auth/`), and all passkey operations for the domain happen there.
+- The domain's other sites show only a minimal profile page at `/auth/`
+  with logout and a link to the full profile; their sign-in dialogs talk
+  to the auth host behind the scenes. Every sign-in site still needs to
+  be listed in (or covered by) the allowed origins.
+
+The auth host is strictly per-domain — domains never borrow each other's
+auth host. To consolidate several domains on one sign-in site, that site
+must lie under each domain's name (nested domains, e.g. domains
+`company.com` and `auth.company.com`) and be marked on each of them.
+
+## Related origins: sharing passkeys across domain names
+
+Sometimes a few different domain names should accept the _same_ passkeys
+— for example after a rebrand, when `app2.com` should keep working with
+existing `company.com` passkeys. Adding `app2.com` to `company.com`'s
+allowed origins makes it a **related origin**: browsers then let
+`app2.com` use `company.com` passkeys directly — no redirects, no
+cross-domain cookies. (This uses the WebAuthn "Related Origin Requests"
+mechanism, which is why the UI also says ROR.)
+
+Rules:
+
+- At most **5 related origins per domain** — a browser limit. This is for
+  a small family of equally trusted sites, not for hundreds of customer
+  domains; use separate domains for those.
+- Exact hosts only — no wildcards — and always outside the domain's own
+  name.
+- The browser verifies the setup against
+  `https://<domain>/.well-known/webauthn`. Paskia serves that document
+  automatically when it hosts the domain's main site; if the main site is
+  hosted elsewhere, copy the JSON document shown in the domain dialog and
+  publish it there. The dialog also checks the published document for
+  you.
+- A related origin shares the domain's security boundary completely — do
+  not mix trust levels within one domain.
+- When several domains could claim a host: a host that _is_ a configured
+  domain name always serves its own domain; otherwise an explicit related
+  origin listing wins over merely falling under another domain's name.
+
+Passkeys never move between domains. If you later consolidate separate
+domains onto one, users re-enroll: sign in once via remote authorization
+(below), then register a new passkey for the common domain from the
+profile page.
+
+## Signing in across domains
+
+Users exist once, but need a passkey per domain. Two mechanisms smooth
+this over:
+
+- **Remote authorization:** a user without a passkey for the current
+  domain can start a login request and approve it from any device already
+  signed in — on _any_ domain of the instance. The approval screen shows
+  which site is requesting access.
+- **Enroll on the spot:** when the signed-in user has no passkey for the
+  current domain, the profile page offers "Add Passkey for {domain}", so
+  everyday sign-in stays local from then on.
+
+## OIDC with multiple domains
+
+OIDC clients are shared by the whole instance: register a client once and
+it works through every domain. Each domain serves its own discovery URL
+(`https://<host>/.well-known/openid-configuration`), listed in the admin
+OIDC client view. Have each app pick **one** discovery URL and use it
+consistently, so its tokens always validate against the same issuer.
+
+## Command line
+
+The admin panel covers all domain management after bootstrap. On the
+command line:
+
+- `paskia init [domain] [name]` — creates the database `paskia.kantadb`
+  with the first domain. Run again with an existing database to add
+  another domain (or update a display name).
+- `paskia migrate [domain]` — converts a legacy 1.x `{domain}.paskiadb`
+  database to `paskia.kantadb`; see below.
+- `paskia` — serves all configured domains; takes no domain options, only
+  `--listen` as a per-run override.
+
+## Upgrading from 1.x
+
+2.0 intentionally changes the on-disk layout and the domain configuration
+model:
+
+- The database is the single file **`paskia.kantadb`** in the working
+  directory; user files (avatars) live in **`paskia.data/users/`**.
+  `paskia migrate` performs the conversion and renames the old database
+  aside to `{domain}.paskiadb.converted-bak`. With several legacy
+  databases, the positional argument selects one by name. Legacy wildcard
+  origins convert as-is (https only, except any scheme and port under
+  `localhost`); a legacy database without configured origins — where that
+  meant the whole domain was allowed — gets an explicit `**.{domain}`
+  entry.
+- Origins, auth hosts and related origins are no longer environment
+  settings — they live in the database and are managed in the admin
+  panel's Domains section. `PASKIA_AUTH_HOST` remains only as a
+  development-server (vite) setting.
+- OIDC becomes instance-global: one signing key and one client set,
+  reachable through every domain's discovery URL (previously each rp-id
+  had its own). Existing clients keep working through any domain.

docs/api/forward.md

@@ -0,0 +1,84 @@
+# GET /auth/api/forward
+
+[API overview](../API.md) · [Proxy guides](../proxy/index.md)
+
+Forward-auth validation for reverse proxies. The proxy calls this endpoint for every incoming request; Paskia validates the session and either authorizes the request by returning 204 with `Remote-*` headers, or rejects it with 401/403 error responses with an HTML login page if `text/html` was requested (i.e. it's a browser viewing the page), or otherwise JSON with details on the error and a URL to initiate API authentication flow.
+
+The proxy server follows the 204 response with the original request to protected service, adding those remote headers to original user request, sent to the service. Any error response is sent directly back to client, never connecting to the protected service.
+
+See [Forward-Auth Proxy Guides](../proxy/index.md) for Caddy, Nginx, Traefik, Apache APISIX, Envoy and HAProxy configuration examples. Caddy users can also start from the dedicated [Caddy configuration guide](../proxy/caddy.md).
+
+
+## Query parameters
+
+| Parameter | Description |
+|-----------|-------------|
+| perm | Required permissions. See the [perm argument](perm.md). |
+| max_age | Require recent passkey use. See the [max_age argument](max-age.md). |
+| public | `public=1` allows public access: instead of 401 (no/expired session) or 403 (permission denied), the request passes with a `Remote-Public` header marking the bypass. Reauth (`max_age`) still requires the auth flow. |
+
+## Public access
+
+With `public=1` the endpoint returns 204 in every case except reauth and malformed arguments, and always sets `Remote-Public`:
+
+| Value | Meaning | Identity headers |
+|---|---|---|
+| `authenticated` | Session valid, all requested permissions met | Full `Remote-*` set |
+| `forbidden` | Session valid, but the `perm` check failed | Full `Remote-*` set (including `Remote-Groups` — it is trustworthy, it just lacks the requested permission) |
+| `anonymous` | No valid session | None |
+
+The backend must check `Remote-Public` before treating the request as authorized. See [Trusted Headers](../Headers.md) and the "Public access" section in the [proxy guides](../proxy/index.md).
+
+## Request headers
+
+| Header | Expected value / note | How Paskia uses it |
+|---|---|---|
+| Host | Forwarded directly from the client | Verifying the session's bound host |
+| Cookie | Forwarded directly or just cookie `__Host-paskia` | Session ID |
+| X-Forwarded-Method | The HTTP method, e.g. POST | Logging of original request |
+| X-Forwarded-Uri | Request path and query, e.g. /reports?foo=bar | Logging of original request |
+| Accept | text/html or anything else | Determines whether failures return an HTML page or JSON |
+
+Connection hop-by-hop headers (Connection, Upgrade, Transfer-Encoding, etc.) must not be forwarded.
+
+## Response
+
+### Success (204)
+
+No response body. Only [Remote headers](../Headers.md) are set on the response and your proxy should forward them to the backend request. The headers, not a response body, are the whole point of this endpoint: they are how the authenticated identity reaches the protected service, which can trust them because it is only reachable through the proxy.
+
+### Failure (400 / 401 / 403)
+
+| Status | Meaning |
+|---|---|
+| 400 | Malformed perm argument (see [perm](perm.md#syntax-errors)). The error detail names `/auth/api/forward` as the origin and never echoes query arguments. |
+| 401 | Session missing or expired, or max_age not satisfied — the user needs to (re)authenticate. |
+| 403 | Requested permissions are missing — the forbidden flow allows signing in with another account. |
+
+Failure responses come in two flavors, chosen by the Accept header, because the audience differs:
+
+- A browser asking for a page (Accept includes text/html) gets a full authentication page it can show directly — the proxy simply passes the response through and the user can sign in without any application involvement.
+- Any other request (fetch, img, ...) gets JSON intended for programmatic handling. Besides the error detail, it carries an auth section whose iframe URL points to a ready-made authentication dialog your frontend can embed, so the user can sign in without leaving your app:
+
+```json
+{
+  "detail": "Additional authentication required",
+  "auth": {
+    "mode": "reauth",
+    "iframe": "/auth/restricted/iframe#mode=reauth&theme=dark"
+  }
+}
+```
+
+The mode field:
+- login: no valid session, need to sign in
+- reauth: additional authentication required (using same passkey)
+- forbidden: lacking required permissions
+
+Extra metadata such as the user's theme override may appear as additional fields and iframe fragment parameters.
+
+Note: we provide a JavaScript package [paskia](https://www.npmjs.com/package/paskia) with helpers for the embedding, fetch 401/403 handling, session renewals and more.
+
+## Session renewal
+
+The forward endpoint **does not renew** the session because in the forward-auth mechanism it could not send the client a renewed session cookie. It only validates the current cookie and returns the trusted headers. Use [/auth/api/validate](validate.md) when you need to refresh the session lifetime. Otherwise the user will have to sign in again every 24h even if they are actively using the service.

docs/api/max-age.md

@@ -0,0 +1,47 @@
+# The max_age argument
+
+[API overview](../API.md) · [`/auth/api/validate`](validate.md) · [`/auth/api/forward`](../forward.md)
+
+The max_age argument is used by endpoints that validate sessions to require a recent passkey use. It is supported by:
+
+- [POST /auth/api/validate](validate.md)
+- [GET /auth/api/forward](forward.md)
+
+## What it checks
+
+max_age limits how long ago the user last authenticated with their passkey. It is intended for high-risk actions where you want to be sure the user recently proved possession of their credential, not just that they still have a valid session cookie.
+
+The check compares the elapsed time since the credential was last used against the given limit:
+
+- If the credential has a last_used timestamp, that time is used.
+- Otherwise, the session's validated timestamp is used as a fallback.
+
+If the authentication is older than max_age, the endpoint returns 401 with mode reauth, prompting the user to re-authenticate.
+
+## Time units
+
+max_age accepts a number followed by one of these units:
+
+| Unit | Meaning |
+|---|---|
+| s | seconds |
+| m / min | minutes |
+| h | hours |
+| d | days |
+
+Examples:
+
+```text
+?max_age=30s
+?max_age=5m
+?max_age=5min
+?max_age=1h
+?max_age=1d
+```
+
+An invalid format is logged as a warning but does not cause the request to fail; the requirement is simply ignored in that case.
+
+## Important notes
+
+- Session renewal by /auth/api/validate does **not** count as fresh authentication. The check is based on the credential's last_used time, not on how recently the session cookie was renewed.
+- max_age is independent of perm. You can use either or both at the same time.

docs/api/perm.md

@@ -0,0 +1,96 @@
+# The perm argument
+
+[API overview](../API.md) · [`/auth/api/validate`](validate.md) · [`/auth/api/forward`](../forward.md)
+
+The perm argument is used by endpoints that validate sessions to require one or more permission scopes. It is supported by:
+
+- [POST /auth/api/validate](validate.md)
+- [GET /auth/api/forward](forward.md)
+
+## Passing the argument
+
+Repeat the query parameter for each required scope:
+
+```text
+?perm=myapp:read&perm=myapp:write
+```
+
+You can also pass multiple scopes in one parameter by separating them with whitespace (a literal space, i.e. `+` or `%20` in the query string):
+
+```text
+?perm=myapp:read%20myapp:write
+```
+
+Both forms produce the same result.
+
+## Semantics
+
+The perm argument uses **AND** semantics between groups: **every** listed scope group must be satisfied by the effective permissions for the request to succeed. If any required group is not satisfied, the endpoint returns 403.
+
+Within a single group, use `|` to list alternatives with **OR** semantics — the group is satisfied when **any one** of the alternatives is present:
+
+```text
+?perm=myapp:read|myapp:write+myapp:login
+```
+
+This requires `myapp:login` **and** (`myapp:read` **or** `myapp:write`). No whitespace is allowed around the `|` operator.
+
+## Syntax errors
+
+Parsing is strict: anything out of spec is rejected with **400 Bad Request** rather than guessed at. This includes:
+
+- Empty values or alternatives (`?perm=`, `?perm=a||b`, `?perm=|a`, `?perm=a|`)
+- Whitespace around `|` (`?perm=a+|+b`)
+- Characters not allowed in scopes other than the operators (space and `|`); scopes match `^[A-Za-z0-9:._~/-]+$` plus the `*` wildcard. In particular a literal `+` in the decoded value (from a `%2B` in the query string) is rejected — use `+` or `%20` to encode a space, never `%2B`.
+
+Extra spaces between groups (leading, trailing, or repeated) are tolerated, since they can easily result from URL formatting and carry no ambiguity — they only ever add required permissions, never remove them. The `|` operator is parsed strictly: `?perm=foo&perm=|bar` is an error, never a way to make `foo` optional.
+
+## Wildcards
+
+Wildcards work like filenames, with `:` and `/` acting as path separators:
+
+- `*` matches any sequence of characters **within a single segment** (it never crosses a `:` or `/`)
+- `**` matches any sequence of characters, **across separators**
+- Part of a segment can be wildcarded, with required text on either or both sides
+
+```text
+?perm=myapp:*
+```
+
+This matches myapp:read and myapp:write, but **not** myapp:read:all — use `myapp:**` for that. Partial wildcards like `myapp:re*` or `myapp:r*d` match myapp:read. The same applies to path-based scopes: `myapp:path:/api/*` matches myapp:path:/api/clients but not myapp:path:/api/v2/clients — use `myapp:path:/api/**` to span path segments.
+
+## Effective permissions
+
+The permissions available to a session are determined as follows:
+
+1. **Role permissions** — the role assigned to the user contains a set of permission UUIDs.
+2. **Org grantable permissions** — only permissions that the user's organization is allowed to grant are effective.
+3. **Domain filtering** — a permission can be restricted to a specific domain via its domain field. If the request's Host header does not match that domain, the permission is excluded.
+
+The result is the set of effective permission scopes used for the perm check. Domain-restricted permissions let you grant a scope only for a specific site or subdomain without making it global.
+
+## Examples
+
+Require a single permission:
+
+```text
+?perm=myapp:login
+```
+
+Require two permissions:
+
+```text
+?perm=myapp:login&perm=myapp:api
+```
+
+Require any scope under myapp:
+
+```text
+?perm=myapp:*
+```
+
+Require myapp:login and either myapp:read or myapp:write:
+
+```text
+?perm=myapp:login&perm=myapp:read|myapp:write
+```

docs/api/validate.md

@@ -0,0 +1,67 @@
+# POST /auth/api/validate
+
+[API overview](../API.md) · [`/auth/api/forward`](../forward.md) · [max_age](max-age.md) · [perm](perm.md)
+
+Validate a session and renew its lifetime when needed. This endpoint is normally called by the browser/session validator, but backends may also call it directly when not behind a forward-auth proxy.
+
+See also the [API overview](../API.md) and the [integration guide](../Integration.md).
+
+## Query parameters
+
+| Parameter | Description |
+|-----------|-------------|
+| perm | Required permissions. See the [perm argument](perm.md). |
+| max_age | Require recent passkey use. See the [max_age argument](max-age.md). |
+| renew | Pass `renew=0` to skip renewal: does no session updates, auth check only. |
+
+## Request headers
+
+| Header | Expected value / note | How Paskia uses it |
+|---|---|---|
+| Host | Forwarded directly from the client | Verifying the session's bound host |
+| Cookie | Forwarded directly or just cookie `__Host-paskia` | Session ID |
+| X-Forwarded-For | Real client IP | Recorded in logs and session data instead of the backend/proxy IP; requires FORWARDED_ALLOW_IPS to trust the immediate peer |
+| User-Agent | Forward the original client UA if available; do not let your backend client add its own default | Recorded in session data only when the header is present; omitting it preserves the existing value |
+
+See [integration documentation for backend validate requests](../Integration.md) for more detailed instructions, in particular for forwarding of client-provided headers.
+
+## Response
+
+The endpoint always responds with JSON.
+
+### Success (200)
+
+```json
+{
+  "valid": true,
+  "renewed": false,
+  "ctx": {
+    "user": {
+      "uuid": "...",
+      "display_name": "John Smith",
+      "theme": "dark"
+    },
+    "org": {
+      "uuid": "...",
+      "display_name": "The Company Ltd."
+    },
+    "role": {
+      "uuid": "...",
+      "display_name": "Employee"
+    },
+    "permissions": ["auth:admin", "myapp:login"]
+  }
+}
+```
+
+If the response includes a Set-Cookie header, the session has been renewed (renewed is true) and you should forward that cookie to the client so the browser updates its expiry. Not forwarding it means the session lifetime is not extended, so the user may need to re-authenticate sooner. Renewals are throttled, so frequent calls usually return renewed: false with no Set-Cookie.
+
+### Failure (400 / 401 / 403)
+
+| Status | Meaning |
+|---|---|
+| 400 | Malformed perm argument (see [perm](perm.md#syntax-errors)). |
+| 401 | Session missing, expired, or max_age not satisfied. The response body includes auth metadata for the login/reauth iframe. |
+| 403 | Session is valid but one or more requested permissions are missing. |
+
+A failure response never contains a refreshed Set-Cookie.

docs/proxy/apisix.md

@@ -0,0 +1,176 @@
+# Apache APISIX Forward-Auth
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+This guide uses the Apache APISIX [`forward-auth`](https://apisix.apache.org/docs/apisix/plugins/forward-auth/) plugin to ask Paskia whether each request is allowed.
+
+## Overview
+
+APISIX adds the standard `X-Forwarded-*` headers automatically, but we still tell the plugin to forward `Host`, `Cookie`, and `Accept` from the client request. On a `204` response from Paskia we copy the `Remote-*` headers to the backend request.
+
+## Admin API example
+
+```sh
+# Route that proxies /auth/ to Paskia without forward-auth.
+curl "http://127.0.0.1:9180/apisix/admin/routes" -X PUT \
+  -H "X-API-KEY: ${admin_key}" \
+  -H 'Content-Type: application/json' \
+  -d '{
+    "id": "paskia-auth-ui",
+    "uri": "/auth/*",
+    "upstream": {
+      "nodes": { "localhost:4401": 1 },
+      "type": "roundrobin"
+    }
+  }'
+
+# Protected route that uses Paskia forward-auth.
+curl "http://127.0.0.1:9180/apisix/admin/routes" -X PUT \
+  -H "X-API-KEY: ${admin_key}" \
+  -H 'Content-Type: application/json' \
+  -d '{
+    "id": "app-protected",
+    "uri": "/*",
+    "priority": 10,
+    "plugins": {
+      "forward-auth": {
+        "uri": "http://localhost:4401/auth/api/forward?perm=myapp:login",
+        "request_headers": [
+          "Host",
+          "Cookie",
+          "Accept",
+          "X-Forwarded-Method",
+          "X-Forwarded-Uri",
+          "X-Forwarded-Host",
+          "X-Forwarded-Proto",
+          "X-Forwarded-For"
+        ],
+        "upstream_headers": [
+          "Remote-User",
+          "Remote-Name",
+          "Remote-Groups",
+          "Remote-Org",
+          "Remote-Org-Name",
+          "Remote-Role",
+          "Remote-Role-Name",
+          "Remote-Session-Expires",
+          "Remote-Credential",
+          "Remote-Public"
+        ]
+      }
+    },
+    "upstream": {
+      "nodes": { "localhost:3000": 1 },
+      "type": "roundrobin"
+    }
+  }'
+```
+
+The `paskia-auth-ui` route has a higher priority (`priority` defaults to the same value for both routes; you can also rely on the more specific `/auth/*` URI matching first). Because it does not use the `forward-auth` plugin, users can reach the login/profile pages without already being authenticated.
+
+## ADC / declarative example
+
+```yaml
+services:
+  - name: paskia-auth-ui
+    routes:
+      - name: auth-route
+        uris:
+          - /auth/*
+        upstream:
+          type: roundrobin
+          nodes:
+            - host: localhost
+              port: 4401
+              weight: 1
+
+  - name: app-protected
+    routes:
+      - name: app-route
+        uris:
+          - /*
+        plugins:
+          forward-auth:
+            uri: http://localhost:4401/auth/api/forward?perm=myapp:login
+            request_headers:
+              - Host
+              - Cookie
+              - Accept
+              - X-Forwarded-Method
+              - X-Forwarded-Uri
+              - X-Forwarded-Host
+              - X-Forwarded-Proto
+              - X-Forwarded-For
+            upstream_headers:
+              - Remote-User
+              - Remote-Name
+              - Remote-Groups
+              - Remote-Org
+              - Remote-Org-Name
+              - Remote-Role
+              - Remote-Role-Name
+              - Remote-Session-Expires
+              - Remote-Credential
+              - Remote-Public
+        upstream:
+          type: roundrobin
+          nodes:
+            - host: localhost
+              port: 3000
+              weight: 1
+```
+
+Apply it with:
+
+```sh
+adc sync -f paskia.yaml
+```
+
+## What APISIX sends to Paskia
+
+APISIX automatically adds these headers to the auth request:
+
+| Header | Value |
+|---|---|
+| `X-Forwarded-Method` | Original HTTP method |
+| `X-Forwarded-Proto` | Request scheme (`http`/`https`) |
+| `X-Forwarded-Host` | Original host |
+| `X-Forwarded-Uri` | Original request URI |
+| `X-Forwarded-For` | Client IP address |
+
+We list them again in `request_headers` to make sure they are not accidentally filtered out when the list is explicit.
+
+## Response headers
+
+`upstream_headers` lists the `Remote-*` headers that APISIX copies from the auth response to the backend request. The plugin does not support a wildcard here, so each header must be named.
+
+If you want Paskia's failure-response headers (such as `Content-Type` or `Set-Cookie`) to reach the client, list them in `client_headers`. For Paskia this is usually not needed; the response body already contains the JSON auth URL or the HTML login page.
+
+## Adjusting requirements
+
+Change the `uri` query string to require different permissions or recent authentication:
+
+```yaml
+uri: http://localhost:4401/auth/api/forward?perm=myapp:login
+uri: http://localhost:4401/auth/api/forward?perm=myapp:admin&max_age=5min
+uri: http://localhost:4401/auth/api/forward
+```
+
+The last form requires only authentication. See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md).
+
+## Public access
+
+For routes where anonymous visitors are allowed but logged-in users should still be identified, add `public=1` to the `forward-auth` URI:
+
+```yaml
+uri: http://localhost:4401/auth/api/forward?public=1
+uri: http://localhost:4401/auth/api/forward?public=1&perm=myapp:reports
+```
+
+The auth check then always returns 204 (except reauth with `max_age`, which still returns the 401 auth flow), and the `Remote-Public` header — included in the `upstream_headers` lists above — marks each request as `anonymous`, `forbidden` or `authenticated`. The backend always runs and must check `Remote-Public` before treating the request as authorized. See [public access](../api/forward.md#public-access) and [trusted headers](../Headers.md#public-access).
+
+## Notes
+
+- The auth request is `GET` by default. Since the `forward-auth` plugin does not forward the request body unless `request_method` is set to `POST`, the default `GET` is the right choice for Paskia.
+- Hop-by-hop headers are handled by APISIX when it builds the auth request, so no extra configuration is needed for `Connection`/`Upgrade`.
+- If Paskia is running on a different host, replace `localhost:4401` with the Paskia service address. For a dedicated authentication host (the domain's auth-host setting), route `auth.example.com` to Paskia instead of `/auth/`.

docs/proxy/caddy.md

@@ -1,13 +1,15 @@
 # Paskia Caddy Configuration
 
-[Caddy](https://caddyserver.com/) is a modern web server that makes setting up web services easy. We provide a few Caddy snippets that make the configuration even easier, although the `forward_auth` directive of Caddy can be used directly as well. Place the [auth folder](../caddy/auth) with the snippets `require` and `setup` where your config file is (e.g. `/etc/caddy/auth`)
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+[Caddy](https://caddyserver.com/) is a modern web server that makes setting up web services easy. We provide a few Caddy snippets that make the configuration even easier, although the `forward_auth` directive of Caddy can be used directly as well. Place the [auth folder](../../caddy/auth) with the snippets `require` and `setup` where your config file is (e.g. `/etc/caddy/auth`)
 
 What these snippets do
 - `setup`: Mount the auth UI at `/auth/` proxying to `:4401`
 - `require`: Use `/auth/api/forward` for access control
 - Render a login page or a permission denied page if needed (without changing URL)
 
-Your backend may not use authentication at all, or it can make use of the user information passed via `Remote-*` headers by the authentication system, see [trusted headers](Headers.md) for details.
+Your backend may not use authentication at all, or it can make use of the user information passed via `Remote-*` headers by the authentication system, see [trusted headers](../Headers.md) for details.
 
 We assume the normal unprotected **Caddyfile** for your site looks like this:
 
@@ -56,6 +58,19 @@ app.example.com {
 
 The above setup allows unauthenticated access to certain files, then implements two different access controls for your backend app depending on which path is accessed. Note that the perm and max-age options may be combined, e.g. `perm=myapp:admin&max-age=5min` on a very sensitive endpoint. This will require additional authentication if the passkey hasn't been used in the last 5 minutes (automatic session renewals don't affect this). Use `""` if you only want the user to be authenticated with no time or perm requirements.
 
+### Public access (public=1)
+
+For routes where anonymous visitors are allowed but logged-in users should still be identified, add `public=1` to the same snippet:
+
+```caddyfile
+handle {
+    import auth/require "public=1"
+    reverse_proxy :3000
+}
+```
+
+The auth check then always passes (204): anonymous requests and users lacking a requested `perm` reach your backend marked with a `Remote-Public` header (`anonymous`, `forbidden` or `authenticated`) instead of getting a 401/403. Your backend must check `Remote-Public` before treating the request as authorized — see [trusted headers](../Headers.md#public-access). A `max_age` reauth requirement still renders the authentication page, even on public routes.
+
 ### Dedicated Authentication Site
 
 When you setup a separate subdomain for the authentication site, just add to your config another section for the auth host:
@@ -66,7 +81,7 @@ auth.example.com {
 }
 ```
 
-Remember to specify `paskia serve --auth-host auth.example.com` to restrict the authentication services to this domain.
+Remember to set the auth host for the domain in the admin panel's Domains section to restrict the authentication services to this domain.
 
 Note that we still reserve `/auth/` on each site for logout page and any APIs your application may require, while full user profile and global options are only available on the auth host.
 

docs/proxy/envoy.md

@@ -0,0 +1,181 @@
+# Envoy External Authorization (ext_authz)
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+This guide uses Envoy's [external authorization filter](https://www.envoyproxy.io/docs/envoy/latest/configuration/http/http_filters/ext_authz_filter) (`ext_authz`) to ask Paskia whether each request is allowed.
+
+## Overview
+
+Envoy's `ext_authz` HTTP filter calls an external HTTP service before forwarding a request to the upstream. The filter needs to know which headers from the original request to send to Paskia, and which headers from Paskia's response to add to the upstream request or to the client response.
+
+A minimal static configuration looks like this:
+
+```yaml
+static_resources:
+  listeners:
+    - name: app_listener
+      address:
+        socket_address:
+          address: 0.0.0.0
+          port_value: 8080
+      filter_chains:
+        - filters:
+            - name: envoy.filters.network.http_connection_manager
+              typed_config:
+                "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
+                stat_prefix: ingress_http
+                use_remote_address: true
+                route_config:
+                  name: local_route
+                  virtual_hosts:
+                    - name: app
+                      domains: ["*"]
+                      routes:
+                        # Pass /auth/ straight to Paskia, bypassing ext_authz.
+                        - match:
+                            prefix: "/auth/"
+                          route:
+                            cluster: paskia
+                          typed_per_filter_config:
+                            envoy.filters.http.ext_authz:
+                              "@type": type.googleapis.com/envoy.extensions.filters.http.ext_authz.v3.ExtAuthzPerRoute
+                              disabled: true
+
+                        # Protect everything else.
+                        - match:
+                            prefix: "/"
+                          route:
+                            cluster: app_backend
+                http_filters:
+                  - name: envoy.filters.http.ext_authz
+                    typed_config:
+                      "@type": type.googleapis.com/envoy.extensions.filters.http.ext_authz.v3.ExtAuthz
+                      transport_api_version: v3
+                      http_service:
+                        server_uri:
+                          uri: localhost:4401
+                          cluster: paskia
+                          timeout: 0.5s
+                        # Send every auth check to /auth/api/forward with the
+                        # required permission, regardless of the original path.
+                        path_override: "/auth/api/forward?perm=myapp:login"
+                        authorization_request:
+                          allowed_headers:
+                            patterns:
+                              - exact: Host
+                              - exact: Cookie
+                              - exact: Accept
+                          # Add the headers Paskia logs / expects.
+                          headers_to_add:
+                            - key: X-Forwarded-Method
+                              value: "%REQ(:METHOD)%"
+                            - key: X-Forwarded-Uri
+                              value: "%REQ(:PATH)%"
+                            - key: X-Forwarded-Proto
+                              value: "%REQ(:SCHEME)%"
+                            - key: X-Forwarded-For
+                              value: "%REQ(X-Forwarded-For)%"
+                        authorization_response:
+                          # Forward every Remote-* header to the backend.
+                          allowed_upstream_headers:
+                            patterns:
+                              - prefix: Remote-
+                          # Forward the response Content-Type to the client on 401/403.
+                          allowed_client_headers:
+                            patterns:
+                              - exact: Content-Type
+                      failure_mode_allow: false
+                  - name: envoy.filters.http.router
+                    typed_config:
+                      "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
+
+  clusters:
+    - name: app_backend
+      connect_timeout: 0.25s
+      type: logical_dns
+      lb_policy: round_robin
+      load_assignment:
+        cluster_name: app_backend
+        endpoints:
+          - lb_endpoints:
+              - endpoint:
+                  address:
+                    socket_address:
+                      address: localhost
+                      port_value: 3000
+
+    - name: paskia
+      connect_timeout: 0.25s
+      type: logical_dns
+      lb_policy: round_robin
+      load_assignment:
+        cluster_name: paskia
+        endpoints:
+          - lb_endpoints:
+              - endpoint:
+                  address:
+                    socket_address:
+                      address: localhost
+                      port_value: 4401
+```
+
+## Important configuration details
+
+- **`path_override`** — the auth request always goes to `/auth/api/forward?perm=myapp:login`, no matter which path the client requested. The original path is sent in `X-Forwarded-Uri` for Paskia to log.
+- **`authorization_request.allowed_headers`** — Envoy only forwards the headers you explicitly allow. We allow `Host`, `Cookie`, and `Accept`. The `X-Forwarded-*` headers are added via `headers_to_add` so they are based on Envoy's view of the request, not spoofed client values.
+- **`headers_to_add`** — Envoy supports substitution format strings such as `%REQ(:METHOD)%` and `%REQ(:PATH)%`. These set the headers Paskia uses for logging and host validation.
+- **`authorization_response.allowed_upstream_headers`** — `prefix: Remote-` tells Envoy to copy every response header starting with `Remote-` to the upstream request. This also removes any client-supplied `Remote-*` headers, so the backend can trust them.
+- **`authorization_response.allowed_client_headers`** — on a 401/403 response, Envoy forwards only the allowed response headers to the client. Paskia returns HTML or JSON with a `Content-Type` header, so we allow that. (Paskia does not set cookies on the forward-auth response.)
+- **`typed_per_filter_config`** on the `/auth/` route disables `ext_authz` so users can reach the login/profile pages without already being authenticated.
+
+## Per-route requirements
+
+Different routes often need different permissions or `max_age` values. Use `typed_per_filter_config` on each route to override the `http_service.path_override`:
+
+```yaml
+routes:
+  - match:
+      prefix: "/reports"
+    route:
+      cluster: app_backend
+    typed_per_filter_config:
+      envoy.filters.http.ext_authz:
+        "@type": type.googleapis.com/envoy.extensions.filters.http.ext_authz.v3.ExtAuthzPerRoute
+        check_settings:
+          http_service:
+            path_override: "/auth/api/forward?perm=myapp:reports&max_age=5min"
+
+  - match:
+      prefix: "/"
+    route:
+      cluster: app_backend
+    typed_per_filter_config:
+      envoy.filters.http.ext_authz:
+        "@type": type.googleapis.com/envoy.extensions.filters.http.ext_authz.v3.ExtAuthzPerRoute
+        check_settings:
+          http_service:
+            path_override: "/auth/api/forward?perm=myapp:login"
+```
+
+See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md) for query parameter syntax.
+
+## WebSocket support for `/auth/`
+
+If you use a dedicated authentication host (the domain's auth-host setting), route `auth.example.com` to the Paskia cluster and you do not need the `/auth/` bypass above. Otherwise, make sure the `/auth/` route keeps the `Upgrade` and `Connection` headers so passkey WebSocket endpoints work. The default Envoy router handles `Upgrade` headers when the client requests them.
+
+## Public access
+
+For routes where anonymous visitors are allowed but logged-in users should still be identified, add `public=1` to `path_override` (globally or per route):
+
+```yaml
+path_override: "/auth/api/forward?public=1"
+path_override: "/auth/api/forward?public=1&perm=myapp:reports"
+```
+
+The auth check then always returns 204 (except reauth with `max_age`, which still returns the 401 auth flow), and the `Remote-Public` header — matched by the `prefix: Remote-` rule in `allowed_upstream_headers` — marks each request as `anonymous`, `forbidden` or `authenticated`. The backend always runs and must check `Remote-Public` before treating the request as authorized. See [public access](../api/forward.md#public-access) and [trusted headers](../Headers.md#public-access).
+
+## Notes
+
+- Envoy's `ext_authz` filter does not send the request body to the auth server by default. For Paskia this is fine.
+- If Paskia is running behind TLS, use `https://` in `server_uri.uri` and configure the cluster's transport socket.
+- The `failure_mode_allow: false` setting means that if Paskia cannot be reached, Envoy will reject the request. In testing you may prefer `true`, but use `false` in production so a failed auth service cannot accidentally allow traffic.

docs/proxy/haproxy.md

@@ -0,0 +1,126 @@
+# HAProxy Forward-Auth
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+HAProxy does not have a built-in forward-auth primitive, but the community [`haproxy-auth-request`](https://github.com/TimWolla/haproxy-auth-request) Lua script provides an `auth-intercept` action that works very similarly to Nginx's `auth_request`. It makes an internal HTTP request to Paskia and copies the response headers to the backend request.
+
+## Requirements
+
+- HAProxy 2.2 or newer (2.0+ may work but 2.2+ supports all features shown here).
+- Compiled with `USE_LUA=1`.
+- The [`haproxy-auth-request`](https://github.com/TimWolla/haproxy-auth-request) Lua script loaded.
+- The [`haproxy-lua-http`](https://github.com/haproxytech/haproxy-lua-http) dependency in the Lua path.
+
+## Overview
+
+```haproxy
+global
+    lua-load /usr/share/haproxy/auth-request.lua
+
+defaults
+    mode http
+    timeout connect 5s
+    timeout client 30s
+    timeout server 30s
+
+# Backend that runs the Paskia auth check.
+backend paskia_auth
+    server paskia 127.0.0.1:4401
+
+# Backend that runs the Paskia UI / WebSocket / API.
+backend paskia_ui
+    server paskia 127.0.0.1:4401
+
+# Your protected application.
+backend app_backend
+    server app 127.0.0.1:3000
+
+frontend app
+    bind *:80
+
+    # 1. Route /auth/ straight to Paskia, bypassing the auth check.
+    acl is_auth path_beg /auth/
+    use_backend paskia_ui if is_auth
+
+    # 2. Add the headers Paskia logs / expects. These are then copied to the
+    #    auth subrequest by auth-intercept.
+    http-request set-header X-Forwarded-Method %[method]
+    http-request set-header X-Forwarded-Uri %[url]
+
+    # 3. Run the auth check. The parameters are:
+    #    backend       path                                   method
+    #    req-headers   success-headers                        failure-headers
+    #
+    #    - req-headers:   headers copied from client to Paskia.
+    #    - success-headers: headers copied from Paskia response to backend request.
+    #    - failure-headers: headers copied from Paskia response to client response.
+    http-request lua.auth-intercept paskia_auth /auth/api/forward?perm=myapp:login GET Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri Remote-* *
+
+    # 4. If the subrequest was not successful, deny the request.
+    http-request deny if ! { var(txn.auth_response_successful) -m bool }
+
+    default_backend app_backend
+```
+
+## What the configuration does
+
+1. **Route `/auth/` to Paskia** — users must be able to reach the login/profile UI without already being authenticated. HAProxy will proxy WebSocket upgrade headers automatically for this backend when the client requests them.
+2. **Set `X-Forwarded-Method` and `X-Forwarded-Uri`** — HAProxy adds these headers to the incoming request so the Lua script can copy them to the auth subrequest. `%[method]` returns the HTTP method and `%[url]` returns the path and query string.
+3. **`lua.auth-intercept`** — sends a `GET` request to `/auth/api/forward?perm=myapp:login` on the `paskia_auth` backend. It copies the listed request headers (including the dynamic ones we just set) to the auth subrequest.
+4. **On success (`2xx`)** — copies every response header matching `Remote-*` from Paskia to the backend request. This overrides any client-supplied `Remote-*` headers, so the backend can trust them.
+5. **On failure (`4xx`)** — copies all response headers (`*`) to the client response and uses Paskia's response body, so the browser gets the login HTML or the JSON auth URL.
+6. **Deny if auth failed** — the final `http-request deny` rule is a safety net. In practice, `auth-intercept` with `*` as the failure-headers already terminates the transaction with Paskia's response.
+
+## Backend definition for the auth subrequest
+
+The `paskia_auth` backend can be the same physical server as `paskia_ui`, but using a separate backend is convenient because the Lua script will use the first available server in the backend. The auth subrequest is a plain HTTP request, so no special WebSocket options are needed here.
+
+```haproxy
+backend paskia_auth
+    server paskia 127.0.0.1:4401
+```
+
+## Per-route permissions
+
+You can run different auth checks for different paths by using HAProxy ACLs. Place the more specific rules before the generic one:
+
+```haproxy
+frontend app
+    bind *:80
+
+    acl is_auth path_beg /auth/
+    use_backend paskia_ui if is_auth
+
+    acl is_reports path_beg /reports
+    http-request set-header X-Forwarded-Method %[method] if is_reports
+    http-request set-header X-Forwarded-Uri %[url] if is_reports
+    http-request lua.auth-intercept paskia_auth /auth/api/forward?perm=myapp:reports&max_age=5min GET Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri Remote-* * if is_reports
+
+    http-request set-header X-Forwarded-Method %[method]
+    http-request set-header X-Forwarded-Uri %[url]
+    http-request lua.auth-intercept paskia_auth /auth/api/forward?perm=myapp:login GET Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri Remote-* *
+
+    http-request deny if ! { var(txn.auth_response_successful) -m bool }
+    default_backend app_backend
+```
+
+See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md) for query parameter syntax.
+
+## Public access
+
+For routes where anonymous visitors are allowed but logged-in users should still be identified, add `public=1` to the auth subrequest path:
+
+```haproxy
+http-request lua.auth-intercept paskia_auth /auth/api/forward?public=1 GET Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri Remote-* *
+# or with a permission the backend will check itself:
+http-request lua.auth-intercept paskia_auth /auth/api/forward?public=1&perm=myapp:reports GET Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri Remote-* *
+```
+
+The `Remote-*` success-headers glob already copies the `Remote-Public` header that marks each request as `anonymous`, `forbidden` or `authenticated`. With `public=1` the backend always runs and must check `Remote-Public` before treating the request as authorized; only reauth (`max_age`) still returns the 401 auth flow, so the `http-request deny` safety net simply never triggers on public routes. See [public access](../api/forward.md#public-access) and [trusted headers](../Headers.md#public-access).
+
+## Notes
+
+- The Lua script strips the request body from the auth subrequest, so Paskia's `/auth/api/forward` will only see the headers.
+- HAProxy variables are limited to alphanumeric characters, dots, and underscores, but the script already normalizes header names for you (e.g. `Remote-User` becomes `req.auth_response_header.remote_user`). The `Remote-*` glob pattern in the success-headers argument handles this automatically.
+- The auth backend must be reachable without TLS. If you need TLS to Paskia, run a local TCP forwarder or use HAProxy's Lua HTTP support directly (not covered by this script).
+- If you use a dedicated authentication host (the domain's auth-host setting), route `auth.example.com` to the Paskia backend instead of exposing `/auth/` on every site.

docs/proxy/index.md

@@ -0,0 +1,48 @@
+# Forward-Auth Proxy Guides
+
+[`/auth/api/forward`](../api/forward.md) · [Trusted headers](../Headers.md)
+
+These guides show how to protect a backend application with Paskia using the forward-auth (also called "external authentication") mechanism. The reverse proxy asks Paskia whether a request is allowed before forwarding it to the protected service.
+
+For details about the endpoint the proxy calls, see [`/auth/api/forward`](../api/forward.md). For the headers your backend receives on successful requests, see [Trusted Headers](../Headers.md).
+
+## Available guides
+
+- [Caddy](caddy.md) — fully supported with ready-to-use snippets (`auth/setup` and `auth/require`).
+- [Nginx](nginx.md) — using the `auth_request` module.
+- [Traefik](traefik.md) — using the `ForwardAuth` middleware.
+- [Apache APISIX](apisix.md) — using the `forward-auth` plugin.
+- [Envoy](envoy.md) — using the `ext_authz` HTTP filter.
+- [HAProxy](haproxy.md) — using a Lua auth request.
+
+## Common requirements
+
+No matter which proxy you use, the auth subrequest must:
+
+1. Be sent to `GET /auth/api/forward` on the Paskia backend. By default Paskia listens on `localhost:4401`; set the `AUTH_UPSTREAM` environment variable in our Caddy snippets, or point your proxy at wherever Paskia is running.
+2. Include the query parameters Paskia needs for access control:
+   - `perm` — required permission scope, repeatable (e.g. `perm=myapp:login`). See [perm argument](../api/perm.md).
+   - `max_age` — how recently the user must have authenticated (e.g. `max_age=5min`). See [max_age argument](../api/max-age.md).
+   - `public=1` — optional; allow public access (anonymous visitors and users missing `perm` pass through, marked with a `Remote-Public` header instead of a 401/403). See [public access](../api/forward.md#public-access).
+3. Forward these request headers from the original client request:
+   - `Host` — the site the user is visiting.
+   - `Cookie` — the session cookie, normally `__Host-paskia`.
+   - `X-Forwarded-Method` — the original HTTP method (e.g. `GET`, `POST`).
+   - `X-Forwarded-Uri` — the original path and query string (e.g. `/reports?foo=bar`).
+   - `Accept` — decides whether a 401/403 response should be HTML (browser) or JSON (API/fetch).
+4. Strip hop-by-hop headers (`Connection`, `Upgrade`, `Transfer-Encoding`, `Keep-Alive`, `Proxy-Connection`, `TE`) from the auth subrequest. The auth check is a plain HTTP request and must not carry WebSocket/body framing headers.
+5. On a `204 No Content` response, copy the `Remote-*` response headers to the request that is forwarded to the protected backend. The headers are the whole point of the auth check. With `public=1`, also copy `Remote-Public` — it marks whether the request is `authenticated`, `forbidden` or `anonymous`, and the backend must check it.
+6. On a 401/403 response, send Paskia's response back to the client without contacting the protected backend. (With `public=1` these only occur for reauth requirements.)
+7. Also proxy the `/auth/` path prefix to Paskia so the login/profile UI, API endpoints, and WebSockets are reachable. Paskia's WebSocket endpoints need `Upgrade` and `Connection` headers passed through for that path.
+
+## Backend usage
+
+After the proxy forwards the request, your backend can read the trusted headers. For example, in Python/FastAPI:
+
+```python
+user_id = request.headers.get("Remote-User")
+org_id = request.headers.get("Remote-Org")
+permissions = request.headers.get("Remote-Groups", "").split(",")
+```
+
+Only trust headers that come from the proxy; never trust `Remote-*` headers that arrive directly from the internet. Your proxy configuration should strip any client-supplied `Remote-*` headers before the auth check.

docs/proxy/nginx.md

@@ -0,0 +1,143 @@
+# Nginx Forward-Auth
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+This guide uses the [Nginx `auth_request`](http://nginx.org/en/docs/http/ngx_http_auth_request_module.html) module to ask Paskia whether each request is allowed before proxying it to your backend.
+
+## Overview
+
+```nginx
+server {
+    listen 80;
+    server_name app.example.com;
+
+    # 1. Proxy /auth/ to Paskia (HTTP + WebSocket).
+    location /auth/ {
+        proxy_pass http://localhost:4401;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+    }
+
+    # 2. All other paths are protected.
+    location / {
+        auth_request /auth-internal;
+
+        # 3. Capture the Remote-* headers from the auth response and
+        #    pass them to the backend request.
+        auth_request_set $remote_user        $upstream_http_remote_user;
+        auth_request_set $remote_name        $upstream_http_remote_name;
+        auth_request_set $remote_groups      $upstream_http_remote_groups;
+        auth_request_set $remote_org         $upstream_http_remote_org;
+        auth_request_set $remote_org_name    $upstream_http_remote_org_name;
+        auth_request_set $remote_role        $upstream_http_remote_role;
+        auth_request_set $remote_role_name   $upstream_http_remote_role_name;
+        auth_request_set $remote_session_exp $upstream_http_remote_session_expires;
+        auth_request_set $remote_credential  $upstream_http_remote_credential;
+        auth_request_set $remote_public      $upstream_http_remote_public;
+
+        proxy_set_header Remote-User             $remote_user;
+        proxy_set_header Remote-Name             $remote_name;
+        proxy_set_header Remote-Groups           $remote_groups;
+        proxy_set_header Remote-Org              $remote_org;
+        proxy_set_header Remote-Org-Name         $remote_org_name;
+        proxy_set_header Remote-Role             $remote_role;
+        proxy_set_header Remote-Role-Name        $remote_role_name;
+        proxy_set_header Remote-Session-Expires  $remote_session_exp;
+        proxy_set_header Remote-Credential       $remote_credential;
+        proxy_set_header Remote-Public           $remote_public;
+
+        # 4. The proxy_set_header lines above override any client-supplied
+        #    Remote-* headers, so the backend receives only the values from
+        #    Paskia's auth response.
+
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    # 5. Internal endpoint used by auth_request.
+    location = /auth-internal {
+        internal;
+        proxy_pass http://localhost:4401/auth/api/forward?perm=myapp:login;
+        proxy_http_version 1.1;
+        proxy_pass_request_body off;
+        proxy_set_header Content-Length "";
+        proxy_set_header X-Forwarded-Method $request_method;
+        proxy_set_header X-Forwarded-Uri $request_uri;
+        proxy_set_header Host $host;
+        proxy_set_header Cookie $http_cookie;
+        proxy_set_header Accept $http_accept;
+        # Drop hop-by-hop headers that must not reach the auth subrequest.
+        proxy_set_header Connection "";
+        proxy_set_header Upgrade "";
+        proxy_set_header Transfer-Encoding "";
+        proxy_set_header Keep-Alive "";
+        proxy_set_header Proxy-Connection "";
+        proxy_set_header TE "";
+    }
+}
+
+# WebSocket upgrade map.
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    ''      close;
+}
+```
+
+## What the configuration does
+
+1. **`/auth/`** is proxied straight to Paskia. The `Upgrade` and `Connection` headers are passed through so WebSocket endpoints such as `/auth/ws/authenticate` work.
+2. **`/`** is protected by `auth_request /auth-internal`. Nginx makes an internal subrequest to that location before proxying the original request to the app.
+3. **`auth_request_set`** captures each `Remote-*` header from the Paskia response. Nginx does not have wildcard capture, so every header must be listed explicitly. The captured values are then attached to the backend request with `proxy_set_header`.
+4. The `proxy_set_header` lines override any `Remote-*` headers the client might have sent, so the backend can trust the headers that come from Paskia.
+5. **`/auth-internal`** is the actual forward-auth call. It must:
+   - point to `/auth/api/forward`,
+   - not forward the request body (`proxy_pass_request_body off;`),
+   - pass `Host`, `Cookie`, `Accept`, `X-Forwarded-Method`, and `X-Forwarded-Uri`,
+   - strip hop-by-hop headers.
+
+## Adjusting requirements
+
+Change the query string on the `proxy_pass` line inside `/auth-internal` to require different permissions or recent authentication:
+
+```nginx
+proxy_pass http://localhost:4401/auth/api/forward?perm=myapp:login;
+proxy_pass http://localhost:4401/auth/api/forward?perm=myapp:admin&max_age=5min;
+proxy_pass http://localhost:4401/auth/api/forward?"";
+```
+
+The last form (`?""`) requires only authentication and no specific permission. See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md) for details.
+
+## Public paths
+
+To leave some paths unprotected (for example `/.well-known/` or `/static/`), add `location` blocks before the protected `location /` block:
+
+```nginx
+location /.well-known/ {
+    root /var/www;
+}
+
+location /static/ {
+    root /var/www;
+}
+```
+
+## Public access
+
+For routes where anonymous visitors are allowed but logged-in users should still be identified, add `public=1` to the auth subrequest URI inside `/auth-internal`:
+
+```nginx
+proxy_pass http://localhost:4401/auth/api/forward?public=1;
+proxy_pass http://localhost:4401/auth/api/forward?public=1&perm=myapp:reports;
+```
+
+The auth check then always returns 204 (except reauth with `max_age`, which still returns the 401 auth flow), and `Remote-Public` marks each request as `anonymous`, `forbidden` or `authenticated`. It is captured and forwarded by the `auth_request_set $remote_public` / `proxy_set_header Remote-Public` lines added in the overview above — the backend always runs and must check `Remote-Public` before treating the request as authorized. See [public access](../api/forward.md#public-access) and [trusted headers](../Headers.md#public-access).
+
+## Notes
+
+- Nginx `auth_request` always makes the auth subrequest with the same HTTP method as the original request, but the body is suppressed by the configuration above. Paskia uses the `X-Forwarded-Method` and `X-Forwarded-Uri` headers for logging.
+- The `auth_request_set` variables are empty when the auth request fails, so on 401/403 the backend is never contacted; Nginx returns Paskia's response directly.
+- For HTTPS, add `listen 443 ssl;` and your certificate configuration as usual.

docs/proxy/traefik.md

@@ -0,0 +1,138 @@
+# Traefik ForwardAuth
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+This guide uses Traefik's [ForwardAuth middleware](https://doc.traefik.io/traefik/reference/routing-configuration/http/middlewares/forwardauth/) to ask Paskia whether each request is allowed.
+
+## Overview
+
+A typical dynamic (YAML) configuration looks like this:
+
+```yaml
+http:
+  routers:
+    app:
+      rule: "Host(`app.example.com`)"
+      service: app-backend
+      middlewares:
+        - paskia-auth
+
+    # Route /auth/ straight to Paskia, bypassing the auth middleware.
+    auth:
+      rule: "Host(`app.example.com`) && PathPrefix(`/auth/`)"
+      service: paskia
+      middlewares: []
+
+  middlewares:
+    paskia-auth:
+      forwardAuth:
+        address: "http://localhost:4401/auth/api/forward?perm=myapp:login"
+        # Forward every Remote-* header from the auth response to the backend.
+        authResponseHeadersRegex: "^Remote-"
+        # Explicitly pass the headers Paskia needs. If left empty, all headers
+        # are forwarded; being explicit avoids accidentally leaking hop-by-hop
+        # headers to the auth server.
+        authRequestHeaders:
+          - Host
+          - Cookie
+          - Accept
+          - X-Forwarded-Method
+          - X-Forwarded-Uri
+          - X-Forwarded-Host
+          - X-Forwarded-Proto
+          - X-Forwarded-For
+
+  services:
+    app-backend:
+      loadBalancer:
+        servers:
+          - url: "http://localhost:3000"
+
+    paskia:
+      loadBalancer:
+        servers:
+          - url: "http://localhost:4401"
+```
+
+## What Traefik sends automatically
+
+Traefik's ForwardAuth middleware sends the auth request to the configured `address` and includes the following headers derived from the original request:
+
+| Header | Value |
+|---|---|
+| `X-Forwarded-Method` | Original HTTP method |
+| `X-Forwarded-Proto` | Original protocol (`http`/`https`) |
+| `X-Forwarded-Host` | Original host |
+| `X-Forwarded-Uri` | Original request URI (path and query) |
+| `X-Forwarded-For` | Client IP address |
+
+These are exactly the headers Paskia logs. You should still include them in `authRequestHeaders` if you set that list explicitly, to make sure they are not filtered out.
+
+## Response headers
+
+`authResponseHeadersRegex: "^Remote-"` tells Traefik to copy every response header starting with `Remote-` from Paskia's `204` response and add it to the request that is forwarded to your backend. It also strips any `Remote-*` headers that the client may have sent, so the backend can trust the values.
+
+For stricter control, you can list the headers explicitly instead of using the regex:
+
+```yaml
+authResponseHeaders:
+  - Remote-User
+  - Remote-Name
+  - Remote-Groups
+  - Remote-Org
+  - Remote-Org-Name
+  - Remote-Role
+  - Remote-Role-Name
+  - Remote-Session-Expires
+  - Remote-Credential
+  - Remote-Public
+```
+
+## Proxying `/auth/` to Paskia
+
+The `/auth/` router above forwards all authentication UI, API, and WebSocket traffic to Paskia. Because this router does **not** use the `paskia-auth` middleware, users can reach the login page and profile UI without being authenticated first. Traefik handles WebSocket upgrades automatically when the client requests them.
+
+If you are using a dedicated authentication host instead of `/auth/`, create a separate router for `auth.example.com` pointing to the Paskia service and set the domain's auth host in the admin panel's Domains section.
+
+## Adjusting requirements
+
+Change the `address` query string to require different permissions or recent authentication:
+
+```yaml
+address: "http://localhost:4401/auth/api/forward?perm=myapp:login"
+address: "http://localhost:4401/auth/api/forward?perm=myapp:admin&max_age=5min"
+address: "http://localhost:4401/auth/api/forward"
+```
+
+The last form requires only authentication, no specific permission. See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md).
+
+## Docker labels example
+
+When using Traefik with Docker Compose, you can define the middleware with labels:
+
+```yaml
+labels:
+  - "traefik.enable=true"
+  - "traefik.http.routers.myapp.rule=Host(`app.example.com`)"
+  - "traefik.http.routers.myapp.middlewares=paskia-auth"
+  - "traefik.http.middlewares.paskia-auth.forwardauth.address=http://localhost:4401/auth/api/forward?perm=myapp:login"
+  - "traefik.http.middlewares.paskia-auth.forwardauth.authResponseHeadersRegex=^Remote-"
+  - "traefik.http.middlewares.paskia-auth.forwardauth.authRequestHeaders=Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri"
+```
+
+## Public access
+
+For routes where anonymous visitors are allowed but logged-in users should still be identified, add `public=1` to the middleware `address`:
+
+```yaml
+address: "http://localhost:4401/auth/api/forward?public=1"
+address: "http://localhost:4401/auth/api/forward?public=1&perm=myapp:reports"
+```
+
+The auth check then always returns 204 (except reauth with `max_age`, which still returns the 401 auth flow), and the `Remote-Public` header — copied by `authResponseHeadersRegex: "^Remote-"` — marks each request as `anonymous`, `forbidden` or `authenticated`. The backend always runs and must check `Remote-Public` before treating the request as authorized. See [public access](../api/forward.md#public-access) and [trusted headers](../Headers.md#public-access).
+
+## Notes
+
+- By default ForwardAuth sends a request without the original body. If you need to forward the body for logging/validation, set `forwardBody: true` and a sensible `maxBodySize`, but for Paskia this is not required.
+- Paskia does not set cookies on the forward-auth response; it only returns `Remote-*` headers. Use the JavaScript helpers from the [paskia](https://www.npmjs.com/package/paskia) package for session renewal in the frontend.
+- For HTTPS, use `https://` in the `address` and configure TLS options (`tls.insecureSkipVerify: true` only for testing).

e2e/README.md

@@ -75,18 +75,22 @@ Runs tests with Playwright Inspector for step-by-step debugging.
 
 ```
 e2e/
-├── playwright.config.ts      # Playwright configuration
+├── playwright.config.js      # Playwright configuration
 ├── package.json
 ├── tsconfig.json
 ├── test-data/                # Test database (created at runtime)
-│   └── test.sqlite
+│   └── paskia.kantadb
 └── tests/
-    ├── global-setup.ts       # Creates fresh DB, captures reset token
+    ├── global-setup.ts       # Creates fresh DB (localhost + test.localhost domains), captures reset token
     ├── global-teardown.ts    # Cleanup
-    ├── passkey.spec.ts       # Main E2E tests
+    ├── 10-passkey.spec.ts    # Registration, authentication, session tests
+    ├── 20-api-auth.spec.ts   # API-mode iframe flows (401/403/reauth)
+    ├── 50-multidomain.spec.ts# Multi-domain dispatch, related origins, auth hosts, remote login
+    ├── 99-logout.spec.ts     # Logout (runs last)
     └── fixtures/
         ├── virtual-authenticator.ts  # Virtual authenticator setup
-        └── passkey-helpers.ts        # WebSocket helpers
+        ├── passkey-helpers.ts        # WebSocket helpers
+        └── remote-auth.ts            # Pairing-code remote auth helpers
 ```
 
 ## What's Tested
@@ -107,6 +111,13 @@ e2e/
 - Logout (`/auth/api/logout`)
 - Invalid/missing token rejection
 
+### Multi-Domain
+- Host-based domain dispatch (`localhost` vs `test.localhost`, 421 for unknown hosts)
+- Related Origin Requests well-known endpoint and admin domain API
+- Per-domain auth hosts (UI at the site root)
+- WebSocket cross-domain rules
+- Cross-domain remote login via pairing code
+
 ## How Virtual Authenticator Works
 
 The tests use Chrome DevTools Protocol (CDP) to create a virtual authenticator:
@@ -142,12 +153,12 @@ This creates an in-browser authenticator that:
 ## 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
+2. **Multi-domain via `*.localhost`**: Chrome resolves any `*.localhost` hostname to loopback, which the tests use for cross-domain scenarios; non-localhost domains are exercised only via explicit Host headers (Node-side requests)
 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
+1. **Check test database**: `e2e/test-data/paskia.kantadb` is removed during teardown; comment out the cleanup in `global-teardown.ts` to inspect it after a run
 2. **View server output**: Global setup echoes server bootstrap to console
 3. **Use trace viewer**: `npx playwright show-trace` on failure traces
 

e2e/package-lock.json

@@ -10,7 +10,7 @@
       "devDependencies": {
         "@playwright/test": "^1.49.0",
         "@simplewebauthn/browser": "^13.1.2",
-        "@types/bun": "^1.3.3",
+        "@types/node": "*",
         "c8": "^10.1.3"
       }
     },
@@ -92,11 +92,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.57.0",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.57.0"
+        "playwright": "1.58.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -107,17 +109,11 @@
     },
     "node_modules/@simplewebauthn/browser": {
       "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/@simplewebauthn/browser/-/browser-13.2.2.tgz",
+      "integrity": "sha512-FNW1oLQpTJyqG5kkDg5ZsotvWgmBaC6jCHR7Ej0qUNep36Wl9tj2eZu7J5rP+uhXgHaLk+QQ3lqcw2vS5MX1IA==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/bun": {
-      "version": "1.3.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bun-types": "1.3.3"
-      }
-    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -126,7 +122,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "24.10.1",
+      "version": "25.2.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.3.tgz",
+      "integrity": "sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -176,14 +174,6 @@
         "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/bun-types": {
-      "version": "1.3.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/c8": {
       "version": "10.1.3",
       "resolved": "https://registry.npmjs.org/c8/-/c8-10.1.3.tgz",
@@ -412,6 +402,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -426,6 +431,7 @@
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
       "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -674,11 +680,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.57.0",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.57.0"
+        "playwright-core": "1.58.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -691,7 +699,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.57.0",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -712,9 +722,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -894,6 +904,8 @@
     },
     "node_modules/undici-types": {
       "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "dev": true,
       "license": "MIT"
     },

e2e/package.json

@@ -5,18 +5,18 @@
   "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"
+    "test": "npx playwright test",
+    "test:headed": "npx playwright test --headed",
+    "test:debug": "npx playwright test --debug",
+    "test:ui": "npx playwright test --ui",
+    "test:coverage": "COVERAGE=1 npx playwright test",
+    "report": "npx playwright show-report",
+    "install:browsers": "npx playwright install chromium"
   },
   "devDependencies": {
     "@playwright/test": "^1.49.0",
     "@simplewebauthn/browser": "^13.1.2",
-    "@types/bun": "^1.3.3",
+    "@types/node": "*",
     "c8": "^10.1.3"
   }
 }

e2e/playwright.config.js

@@ -4,7 +4,7 @@ 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
+ * Run with: npm test
  */
 
 export default defineConfig({

e2e/tests/10-passkey.spec.ts

@@ -148,10 +148,10 @@ test.describe('Passkey Authentication E2E', () => {
 
     const userInfo = await getUserInfo(page, baseUrl, sessionToken)
 
-    expect(userInfo.ctx.user.uuid).toBe(userUuid)
-    expect(userInfo.ctx.user.display_name).toBe('Admin User')
+    expect(userInfo.user.uuid).toBe(userUuid)
+    expect(userInfo.user.display_name).toBe('Admin User')
     expect(userInfo.credentials).toBeDefined()
-    expect(userInfo.credentials.length).toBeGreaterThanOrEqual(1)
+    expect(Object.keys(userInfo.credentials).length).toBeGreaterThanOrEqual(1)
 
     // Navigate to profile and take screenshot
     const cookieName = getSessionCookieName()
@@ -169,8 +169,8 @@ test.describe('Passkey Authentication E2E', () => {
     await page.screenshot({ path: 'test-results/profile-view.png' })
     console.log('✓ Screenshot saved: test-results/profile-view.png')
 
-    console.log(`✓ User info retrieved: ${userInfo.ctx.user.display_name}`)
-    console.log(`✓ Credentials count: ${userInfo.credentials.length}`)
+    console.log(`✓ User info retrieved: ${userInfo.user.display_name}`)
+    console.log(`✓ Credentials count: ${Object.keys(userInfo.credentials).length}`)
   })
 
   test('should authenticate with existing passkey', async ({ page, virtualAuthenticator }) => {

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

@@ -10,6 +10,12 @@ import {
   logout,
 } from './fixtures/passkey-helpers'
 import type { Page, Frame } from '@playwright/test'
+import { readFileSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 /**
  * E2E tests for API mode authentication flows.
@@ -55,8 +61,18 @@ async function clearSessionCookie(page: Page): Promise<void> {
 /**
  * Set up the test page using the examples page directly.
  * The examples page already has iframe handling - we just add a Promise wrapper.
+ * We route the paskia-js module request to serve from the local dist.
  */
 async function setupTestHarness(page: Page): Promise<void> {
+  // Serve paskia.js from the local filesystem since the server doesn't serve /paskia-js/
+  const paskiaJsPath = join(__dirname, '..', '..', 'paskia-js', 'dist', 'paskia.js')
+  await page.route('**/paskia-js/dist/paskia.js', async route => {
+    const body = readFileSync(paskiaJsPath, 'utf-8')
+    await route.fulfill({
+      body,
+      contentType: 'application/javascript',
+    })
+  })
   // Navigate to the examples page which already has the auth iframe handling
   await page.goto(`${baseUrl}/auth/examples/`)
 }
@@ -143,8 +159,8 @@ async function makeApiCall(page: Page, url: string, method = 'GET'): Promise<{ s
  * 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')
+  await page.waitForSelector('#paskia-iframe', { timeout })
+  const iframe = page.frameLocator('#paskia-iframe')
   // Wait for iframe content to load
   await iframe.locator('.view-root').waitFor({ timeout })
   return page.frame({ url: /\/auth\/restricted\// })!
@@ -154,14 +170,14 @@ async function waitForAuthIframe(page: Page, timeout = 5000): Promise<Frame> {
  * Wait for auth iframe to disappear.
  */
 async function waitForAuthIframeHidden(page: Page, timeout = 5000): Promise<void> {
-  await page.waitForSelector('#auth-iframe', { state: 'detached', timeout })
+  await page.waitForSelector('#paskia-iframe', { state: 'detached', timeout })
 }
 
 /**
  * Click Back button in auth iframe.
  */
 async function clickBackInIframe(page: Page): Promise<void> {
-  const iframe = page.frameLocator('#auth-iframe')
+  const iframe = page.frameLocator('#paskia-iframe')
   await iframe.getByRole('button', { name: 'Back' }).click()
 }
 
@@ -169,7 +185,7 @@ async function clickBackInIframe(page: Page): Promise<void> {
  * Click Login button in auth iframe.
  */
 async function clickLoginInIframe(page: Page): Promise<void> {
-  const iframe = page.frameLocator('#auth-iframe')
+  const iframe = page.frameLocator('#paskia-iframe')
   await iframe.getByRole('button', { name: 'Login' }).click()
 }
 
@@ -177,7 +193,7 @@ async function clickLoginInIframe(page: Page): Promise<void> {
  * Click Verify button in auth iframe (for reauth mode).
  */
 async function clickVerifyInIframe(page: Page): Promise<void> {
-  const iframe = page.frameLocator('#auth-iframe')
+  const iframe = page.frameLocator('#paskia-iframe')
   await iframe.getByRole('button', { name: 'Verify' }).click()
 }
 
@@ -185,7 +201,7 @@ async function clickVerifyInIframe(page: Page): Promise<void> {
  * Click Logout button in auth iframe (for forbidden mode).
  */
 async function clickLogoutInIframe(page: Page): Promise<void> {
-  const iframe = page.frameLocator('#auth-iframe')
+  const iframe = page.frameLocator('#paskia-iframe')
   await iframe.getByRole('button', { name: 'Logout' }).click()
 }
 
@@ -200,11 +216,11 @@ test.describe('API Mode - 401 Login Flow', () => {
     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)
+    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'GET').catch(e => e)
     console.log('✓ Auth iframe appeared on 401')
 
     // Verify it's in login mode (not reauth)
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     await expect(iframe.locator('h1')).toContainText('🔐')
     await expect(iframe.getByRole('button', { name: 'Login' })).toBeVisible()
 
@@ -252,7 +268,7 @@ test.describe('API Mode - 401 Login Flow', () => {
     await setupTestHarness(page)
 
     // Make API call that triggers 401
-    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'POST')
+    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'GET')
 
     // Wait for auth iframe to appear
     await waitForAuthIframe(page)
@@ -268,7 +284,7 @@ test.describe('API Mode - 401 Login Flow', () => {
     // Wait for API call to complete and verify result
     const result = await apiCallPromise
     expect(result.status).toBe(200)
-    expect(result.data.ctx).toBeDefined()
+    expect(result.data.user).toBeDefined()
     console.log('✓ API call succeeded after authentication')
 
     // Save the session for other tests
@@ -314,7 +330,7 @@ test.describe('API Mode - 401 Reauth Flow', () => {
     console.log('✓ Reauth iframe appeared (session older than max_age)')
 
     // Verify it's in reauth mode
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     await expect(iframe.locator('h1')).toContainText('Additional Authentication')
     await expect(iframe.getByRole('button', { name: 'Verify' })).toBeVisible()
 
@@ -362,7 +378,7 @@ test.describe('API Mode - 401 Reauth Flow', () => {
     await waitForAuthIframe(page)
     console.log('✓ Reauth iframe appeared')
 
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     await expect(iframe.locator('h1')).toContainText('Additional Authentication')
 
     // Click Verify - virtual authenticator handles passkey
@@ -394,7 +410,7 @@ test.describe('API Mode - 403 Forbidden Flow', () => {
     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)
+    const iframeAppeared = await page.waitForSelector('#paskia-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
 
     if (!iframeAppeared) {
       // User might already have admin permission
@@ -410,7 +426,7 @@ test.describe('API Mode - 403 Forbidden Flow', () => {
 
     // Wait for view to stabilize and check mode
     await page.waitForTimeout(500)
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     const headingText = await iframe.locator('h1').textContent()
     console.log(`  Heading: ${headingText}`)
 
@@ -459,7 +475,7 @@ test.describe('API Mode - 403 Forbidden Flow', () => {
     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)
+    const iframeAppeared = await page.waitForSelector('#paskia-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
 
     if (!iframeAppeared) {
       const result = await apiCallPromise
@@ -470,7 +486,7 @@ test.describe('API Mode - 403 Forbidden Flow', () => {
     }
 
     await waitForAuthIframe(page)
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     await page.waitForTimeout(500)
 
     const headingText = await iframe.locator('h1').textContent()
@@ -534,7 +550,7 @@ test.describe('API Mode - Direct API Response Format', () => {
     expect(data.auth).toBeDefined()
     expect(data.auth.iframe).toBeDefined()
     expect(data.auth.mode).toBe('login')
-    expect(data.auth.iframe).toContain('/auth/restricted/')
+    expect(data.auth.iframe).toContain('/auth/restricted/iframe')
 
     console.log(`✓ 401 response includes auth.iframe: ${data.auth.iframe}`)
   })

e2e/tests/50-multidomain.spec.ts

@@ -0,0 +1,258 @@
+import { test, expect } from './fixtures/virtual-authenticator'
+import {
+  registerPasskey,
+  getSessionCookieName,
+  popDeviceToken,
+} from './fixtures/passkey-helpers'
+import {
+  startRemoteAuthRequest,
+  awaitRemoteAuthSession,
+  permitRemoteAuth,
+} from './fixtures/remote-auth'
+
+/**
+ * Multi-domain E2E tests.
+ *
+ * The server is bootstrapped with two domains: localhost (default) and
+ * test.localhost. Chrome resolves any *.localhost hostname to loopback, so
+ * both domains are reachable over real HTTP from the browser.
+ *
+ * Covers:
+ * - Host-based domain dispatch (settings, 421 for unknown hosts)
+ * - Related Origin Requests well-known endpoint + admin domain API,
+ *   including HTTP dispatch to a related hostname
+ * - Per-domain auth hosts: settings, UI at the site root, /auth/ redirect
+ * - WebSocket cross-domain rule: rejected unless the Host is the origin
+ *   domain's own auth host
+ * - Cross-domain remote login: a passkey registered on localhost permits a
+ *   session on test.localhost via pairing code
+ * - The profile enrollment prompt on a domain where the user has no passkey
+ */
+
+test.describe('Multi-domain E2E', () => {
+  test.describe.configure({ mode: 'serial' })
+
+  const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
+  const domainUrl = 'http://test.localhost:4404'
+
+  test('dispatches domains by host header', async ({ page }) => {
+    // Browser navigation: Chrome maps *.localhost to loopback
+    const domainResp = await page.goto(`${domainUrl}/auth/api/settings`)
+    expect(domainResp?.status()).toBe(200)
+    const domainSettings = await domainResp?.json()
+    expect(domainSettings.rp_id).toBe('test.localhost')
+    expect(domainSettings.own_auth_host).toBeNull()
+    expect(domainSettings.auth_host).toBeNull()
+    expect(domainSettings.ui_base_path).toBe('/auth/')
+
+    const defaultResp = await page.goto(`${baseUrl}/auth/api/settings`)
+    expect(defaultResp?.status()).toBe(200)
+    const defaultSettings = await defaultResp?.json()
+    expect(defaultSettings.rp_id).toBe('localhost')
+    expect(defaultSettings.auth_host).toBeNull()
+    expect(defaultSettings.ui_base_path).toBe('/auth/')
+
+    // Unknown host is rejected with 421 Misdirected Request.
+    // page.request is Node-side, so target loopback with an explicit Host.
+    const unknownResp = await page.request.get(`${baseUrl}/auth/api/settings`, {
+      headers: { Host: 'unknown.example.org' },
+    })
+    expect(unknownResp.status()).toBe(421)
+  })
+
+  test('well-known webauthn endpoint reflects related origins', async ({ page }) => {
+    // No related origins configured initially → 404
+    const before = await page.request.get(`${baseUrl}/.well-known/webauthn`)
+    expect(before.status()).toBe(404)
+  })
+
+  test('master admin manages domains and related origins via API', async ({ page, virtualAuthenticator }) => {
+    // Fresh session via device token (domain writes require recent auth)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'No device tokens available')
+    await page.goto('/auth/')
+    const reg = await registerPasskey(page, baseUrl, { resetToken: deviceToken })
+    expect(reg.session_token).toBeTruthy()
+
+    const headers = { Cookie: `${getSessionCookieName()}=${reg.session_token}` }
+
+    // List domains
+    const list = await page.request.get(`${baseUrl}/auth/api/admin/domains/`, { headers })
+    expect(list.ok()).toBeTruthy()
+    const domains = await list.json()
+    expect(domains.map((r: any) => r.rp_id).sort()).toEqual(['localhost', 'test.localhost'])
+    const localhostDomain = domains.find((r: any) => r.rp_id === 'localhost')
+    expect(localhostDomain.origins).toEqual({ '**.localhost': true })
+
+    // Add a related origin (unrelated domain) to the localhost domain —
+    // same origins table; classification is derived from the rp-id
+    const patch = await page.request.patch(`${baseUrl}/auth/api/admin/domains/localhost`, {
+      headers,
+      data: { rp_name: '', origins: { '**.localhost': true, 'app.example.com': true } },
+    })
+    expect(patch.ok()).toBeTruthy()
+
+    // The well-known endpoint now lists it
+    const wk = await page.request.get(`${baseUrl}/.well-known/webauthn`)
+    expect(wk.ok()).toBeTruthy()
+    const wkJson = await wk.json()
+    expect(wkJson.origins).toContain('https://app.example.com')
+
+    // The related hostname now dispatches to the listing domain (HTTP).
+    // page.request is Node-side, so target loopback with an explicit Host.
+    const relResp = await page.request.get(`${baseUrl}/auth/api/settings`, {
+      headers: { Host: 'app.example.com' },
+    })
+    expect(relResp.ok()).toBeTruthy()
+    expect((await relResp.json()).rp_id).toBe('localhost')
+
+    // Restore: back to the pristine seeded state for later tests
+    const restore = await page.request.patch(`${baseUrl}/auth/api/admin/domains/localhost`, {
+      headers,
+      data: { rp_name: '', origins: { '**.localhost': true } },
+    })
+    expect(restore.ok()).toBeTruthy()
+    const after = await page.request.get(`${baseUrl}/.well-known/webauthn`)
+    expect(after.status()).toBe(404)
+
+    // ...and the related hostname is unknown again
+    const relGone = await page.request.get(`${baseUrl}/auth/api/settings`, {
+      headers: { Host: 'app.example.com' },
+    })
+    expect(relGone.status()).toBe(421)
+  })
+
+  test('per-domain auth host serves the domain UI at its site root', async ({ page, virtualAuthenticator }) => {
+    // Fresh session via device token (domain writes require recent auth)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'No device tokens available')
+    await page.goto('/auth/')
+    const reg = await registerPasskey(page, baseUrl, { resetToken: deviceToken })
+    expect(reg.session_token).toBeTruthy()
+
+    const headers = { Cookie: `${getSessionCookieName()}=${reg.session_token}` }
+    const authHost = 'auth.test.localhost:4404'
+
+    try {
+      // Mark an auth host on the test.localhost domain. Chrome resolves any
+      // *.localhost hostname to loopback, so the auth host is reachable.
+      const patch = await page.request.patch(`${baseUrl}/auth/api/admin/domains/test.localhost`, {
+        headers,
+        data: { rp_name: '', origins: { [`http://${authHost}`]: { auth_host: true }, '**.test.localhost': true } },
+      })
+      expect(patch.ok()).toBeTruthy()
+
+      // The auth host dispatches to its domain and reports itself in settings
+      const settingsResp = await page.goto(`http://${authHost}/auth/api/settings`)
+      expect(settingsResp?.status()).toBe(200)
+      const settings = await settingsResp?.json()
+      expect(settings.rp_id).toBe('test.localhost')
+      expect(settings.auth_host).toBe(authHost)
+      expect(settings.own_auth_host).toBe(authHost)
+      expect(settings.ui_base_path).toBe('/')
+
+      // The UI lives at the site root on the auth host
+      const rootResp = await page.goto(`http://${authHost}/`)
+      expect(rootResp?.status()).toBe(200)
+      expect(rootResp?.headers()['content-type']).toContain('text/html')
+
+      // /auth/ on the auth host redirects to the root
+      const redir = await page.request.get(`${baseUrl}/auth/`, {
+        headers: { Host: authHost },
+        maxRedirects: 0,
+      })
+      expect(redir.status()).toBe(307)
+      expect(redir.headers()['location']).toMatch(/^http:\/\/auth\.test\.localhost(:\d+)?\/$/)
+    } finally {
+      // Restore: back to the pristine seeded state (later tests sign in on
+      // test.localhost, and an empty table would allow nothing)
+      const restore = await page.request.patch(`${baseUrl}/auth/api/admin/domains/test.localhost`, {
+        headers,
+        data: { rp_name: '', origins: { '**.test.localhost': true } },
+      })
+      expect(restore.ok()).toBeTruthy()
+    }
+
+    const after = await page.request.get(`${baseUrl}/auth/api/settings`, {
+      headers: { Host: 'test.localhost:4404' },
+    })
+    expect((await after.json()).auth_host).toBeNull()
+  })
+
+  test('WebSocket cross-domain connections require the origin domain\'s own auth host', async ({ page }) => {
+    await page.goto(`${domainUrl}/auth/`)
+
+    // Same-domain WebSocket receives authentication options...
+    const sameDomain: any = await page.evaluate(async () => {
+      return new Promise((resolve) => {
+        const ws = new WebSocket(`ws://${location.host}/auth/ws/authenticate`)
+        const timer = setTimeout(() => { ws.close(); resolve({ message: false }) }, 5000)
+        ws.onmessage = () => { clearTimeout(timer); ws.close(); resolve({ message: true }) }
+        ws.onerror = () => { clearTimeout(timer); resolve({ message: false }) }
+      })
+    })
+    expect(sameDomain.message).toBe(true)
+
+    // ...but a cross-domain connection is closed pre-accept: test.localhost
+    // has no auth host of its own, so no other host may serve its logins
+    const crossDomain: any = await page.evaluate(async (host) => {
+      return new Promise((resolve) => {
+        const ws = new WebSocket(`ws://${host}/auth/ws/authenticate`)
+        let message = false
+        const timer = setTimeout(() => { ws.close(); resolve({ message, code: -1 }) }, 5000)
+        ws.onmessage = () => { message = true }
+        ws.onclose = (event) => {
+          clearTimeout(timer)
+          resolve({ message, code: event.code, wasClean: event.wasClean })
+        }
+      })
+    }, new URL(baseUrl).host)
+    expect(crossDomain.message).toBe(false)
+    expect(crossDomain.wasClean).toBe(false)
+  })
+
+  test('cross-domain remote login via pairing code', async ({ page, virtualAuthenticator }) => {
+    // Register a fresh passkey on localhost (this test's virtual authenticator)
+    const deviceToken = popDeviceToken()
+    test.skip(!deviceToken, 'No device tokens available')
+    await page.goto('/auth/')
+    const reg = await registerPasskey(page, baseUrl, { resetToken: deviceToken })
+    expect(reg.session_token).toBeTruthy()
+
+    // Requester page on the other domain (no session there)
+    const reqPage = await page.context().newPage()
+    await reqPage.goto(`${domainUrl}/auth/`)
+
+    const pairingCode = await startRemoteAuthRequest(reqPage)
+    expect(pairingCode.split('.')).toHaveLength(3)
+
+    // Approver permits with the localhost passkey; the "found" message names
+    // the requesting domain
+    const found = await permitRemoteAuth(page, pairingCode)
+    expect(found.rp_id).toBe('test.localhost')
+
+    // The requester redeems the exchange code on its own domain and the
+    // session validates there for the same user
+    const validation = await awaitRemoteAuthSession(reqPage)
+    expect(validation.ctx.user.uuid).toBe(reg.user)
+
+    // The session is recorded with the requesting host
+    const userInfo = await reqPage.evaluate(async () => {
+      const resp = await fetch('/auth/api/user-info')
+      if (!resp.ok) throw new Error(`user-info failed: ${resp.status}`)
+      return resp.json()
+    })
+    const current = Object.values(userInfo.sessions as any[]).find((s: any) => s.is_current) as any
+    expect(current.host).toContain('test.localhost')
+
+    // The profile on test.localhost prompts adding a passkey for this domain,
+    // and the existing localhost passkey carries a domain badge
+    await reqPage.goto(`${domainUrl}/auth/`)
+    const notice = reqPage.locator('.domain-enroll-notice')
+    await expect(notice).toBeVisible({ timeout: 15000 })
+    await expect(notice).toContainText('test.localhost')
+    await expect(reqPage.locator('.badge-domain').first()).toHaveText('localhost')
+
+    await reqPage.close()
+  })
+})

e2e/tests/fixtures/passkey-helpers.ts

@@ -44,7 +44,7 @@ export interface UserInfo {
     sign_count: number
     is_current_session: boolean
   }>
-  aaguid_info: Record<string, { name: string; icon_light?: string; icon_dark?: string }>
+  aaguid_info: Record<string, { name: string; icon?: string; icon_dark?: string }>
   sessions: Array<{
     id: string
     credential: string
@@ -193,7 +193,8 @@ export async function registerPasskey(
   baseUrl: string,
   options: { resetToken?: string; displayName?: string } = {}
 ): Promise<RegistrationResult> {
-  return await page.evaluate(async ({ baseUrl, resetToken, displayName }) => {
+  // Step 1: Do WebSocket registration + exchange code in browser context
+  const wsResult = 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[] = []
@@ -203,6 +204,7 @@ export async function registerPasskey(
 
     return new Promise<any>((resolve, reject) => {
       const ws = new WebSocket(wsUrl)
+      let done = false
 
       ws.onopen = () => {
         console.log('WebSocket connected for registration')
@@ -213,15 +215,31 @@ export async function registerPasskey(
 
         // Check for error response
         if (data.detail) {
+          done = true
           ws.close()
           reject(new Error(data.detail))
           return
         }
 
-        // Check if this is the final success response
-        if (data.session_token) {
+        // Check if this is the final success response (exchange_code flow)
+        if (data.exchange_code) {
+          done = true
           ws.close()
-          resolve(data)
+          // Exchange the code for a session cookie
+          try {
+            const resp = await fetch(`${baseUrl}/auth/api/set-session`, {
+              method: 'POST',
+              headers: { 'Authorization': `Bearer ${data.exchange_code}` },
+            })
+            if (!resp.ok) throw new Error(`Exchange failed: ${resp.status}`)
+            resolve({
+              user: data.user,
+              credential: data.credential,
+              message: data.message || 'Registration successful',
+            })
+          } catch (err: any) {
+            reject(new Error(`Code exchange failed: ${err.message}`))
+          }
           return
         }
 
@@ -293,12 +311,21 @@ export async function registerPasskey(
       }
 
       ws.onclose = (event) => {
-        if (!event.wasClean && event.code !== 1000) {
+        if (!done && !event.wasClean && event.code !== 1000) {
           reject(new Error(`WebSocket closed unexpectedly: ${event.code}`))
         }
       }
     })
   }, { baseUrl, resetToken: options.resetToken, displayName: options.displayName })
+
+  // Step 2: Extract the session token from the cookie set by the exchange
+  const cookies = await page.context().cookies()
+  const cookieName = getSessionCookieName()
+  const sessionCookie = cookies.find(c => c.name === cookieName)
+  return {
+    ...wsResult,
+    session_token: sessionCookie?.value || '',
+  }
 }
 
 /**
@@ -309,11 +336,13 @@ export async function authenticatePasskey(
   page: Page,
   baseUrl: string
 ): Promise<AuthenticationResult> {
-  return await page.evaluate(async ({ baseUrl }) => {
+  // Step 1: Do WebSocket authentication + exchange code in browser context
+  const wsResult = 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)
+      let done = false
 
       ws.onopen = () => {
         console.log('WebSocket connected for authentication')
@@ -324,15 +353,27 @@ export async function authenticatePasskey(
 
         // Check for error response
         if (data.detail) {
+          done = true
           ws.close()
           reject(new Error(data.detail))
           return
         }
 
-        // Check if this is the final success response
-        if (data.session_token) {
+        // Check if this is the final success response (exchange_code flow)
+        if (data.exchange_code) {
+          done = true
           ws.close()
-          resolve(data)
+          // Exchange the code for a session cookie
+          try {
+            const resp = await fetch(`${baseUrl}/auth/api/set-session`, {
+              method: 'POST',
+              headers: { 'Authorization': `Bearer ${data.exchange_code}` },
+            })
+            if (!resp.ok) throw new Error(`Exchange failed: ${resp.status}`)
+            resolve({ user: data.user })
+          } catch (err: any) {
+            reject(new Error(`Code exchange failed: ${err.message}`))
+          }
           return
         }
 
@@ -395,12 +436,21 @@ export async function authenticatePasskey(
       }
 
       ws.onclose = (event) => {
-        if (!event.wasClean && event.code !== 1000) {
+        if (!done && !event.wasClean && event.code !== 1000) {
           reject(new Error(`WebSocket closed unexpectedly: ${event.code}`))
         }
       }
     })
   }, { baseUrl })
+
+  // Step 2: Extract the session token from the cookie set by the exchange
+  const cookies = await page.context().cookies()
+  const cookieName = getSessionCookieName()
+  const sessionCookie = cookies.find(c => c.name === cookieName)
+  return {
+    ...wsResult,
+    session_token: sessionCookie?.value || '',
+  }
 }
 
 /**
@@ -429,7 +479,7 @@ export async function getUserInfo(
   sessionToken: string
 ): Promise<UserInfo> {
   const cookieName = getSessionCookieName()
-  const response = await page.request.post(`${baseUrl}/auth/api/user-info`, {
+  const response = await page.request.get(`${baseUrl}/auth/api/user-info`, {
     headers: {
       'Cookie': `${cookieName}=${sessionToken}`,
     },

e2e/tests/fixtures/remote-auth.ts

@@ -0,0 +1,187 @@
+import { type Page } from '@playwright/test'
+
+/**
+ * Remote authentication (pairing code) helpers for E2E tests.
+ * These drive the /auth/ws/remote-auth/* protocol directly in browser context,
+ * so requests carry the page origin's cookies and Chrome's host resolution.
+ */
+
+// PBKDF2-SHA512 PoW solver; must match frontend/src/utils/pow.js.
+// Passed as source into page.evaluate and instantiated with eval there.
+const solvePoWSource = `async (challengeBytes, work) => {
+  const baseKey = await crypto.subtle.importKey('raw', challengeBytes, 'PBKDF2', false, ['deriveBits'])
+  const solution = new Uint8Array(8 * work)
+  const nonce = new Uint32Array(2)
+  const mask = 0x7FF
+  for (let i = 0; i < work; i++) {
+    let result
+    do {
+      if (++nonce[0] === 0x100000000) ++nonce[1]
+      result = new Uint32Array(await crypto.subtle.deriveBits(
+        { name: 'PBKDF2', salt: nonce, iterations: 128, hash: 'SHA-512' }, baseKey, 32))
+    } while (result[0] & mask)
+    solution.set(new Uint8Array(nonce.buffer), i * 8)
+  }
+  return solution
+}`
+
+const b64helpersSource = `
+  const b64dec = (s) => Uint8Array.from(atob(s.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0))
+  const b64enc = (buf) => btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '')
+`
+
+/**
+ * Start a remote auth request on the given page (the device wanting to log in).
+ * The page must already be navigated to the requesting domain's origin.
+ * Keeps the WebSocket open on window.__raWs and collects later messages into
+ * window.__raMsgs; resolves with the pairing code.
+ */
+export async function startRemoteAuthRequest(page: Page): Promise<string> {
+  return page.evaluate(async ({ powSrc, b64src }) => {
+    const solvePoW = eval(`(${powSrc})`)
+    const { b64dec, b64enc } = eval(`(() => { ${b64src}; return { b64dec, b64enc } })()`)
+    const w = window as any
+    w.__raMsgs = []
+    return new Promise<string>((resolve, reject) => {
+      const ws = new WebSocket(`ws://${location.host}/auth/ws/remote-auth/request`)
+      w.__raWs = ws
+      ws.onmessage = async (event) => {
+        const data = JSON.parse(event.data)
+        w.__raMsgs.push(data)
+        if (typeof data.status === 'number' && data.status >= 400) {
+          ws.close()
+          reject(new Error(data.detail || `request failed: ${data.status}`))
+          return
+        }
+        if (data.pow && !data.pairing_code) {
+          const solution = await solvePoW(b64dec(data.pow.challenge), data.pow.work)
+          ws.send(JSON.stringify({ pow: b64enc(solution), action: 'login' }))
+          return
+        }
+        if (data.pairing_code) {
+          resolve(data.pairing_code)
+        }
+      }
+      ws.onerror = () => reject(new Error('WebSocket error during remote auth request'))
+      ws.onclose = (event) => {
+        if (!event.wasClean && event.code !== 1000) reject(new Error(`WebSocket closed unexpectedly: ${event.code}`))
+      }
+    })
+  }, { powSrc: solvePoWSource, b64src: b64helpersSource })
+}
+
+/**
+ * Wait for the remote auth request on the page to complete, redeem the
+ * exchange code via set-session, and return the /auth/api/validate response.
+ */
+export async function awaitRemoteAuthSession(page: Page, timeoutMs = 90000): Promise<any> {
+  return page.evaluate(async ({ timeoutMs }) => {
+    const w = window as any
+    const msgs: any[] = w.__raMsgs
+    if (!msgs) throw new Error('No remote auth request started on this page')
+    const exchangeCode: string = await new Promise((resolve, reject) => {
+      const timer = setTimeout(() => reject(new Error('Timed out waiting for remote auth completion')), timeoutMs)
+      const iv = setInterval(() => {
+        const done = msgs.find(m => m.status === 'authenticated' && m.exchange_code)
+        const failed = msgs.find(m => ['denied', 'expired', 'timeout', 'cancelled'].includes(m.status) || (typeof m.status === 'number' && m.status >= 400))
+        if (done) {
+          clearTimeout(timer); clearInterval(iv)
+          resolve(done.exchange_code)
+        } else if (failed) {
+          clearTimeout(timer); clearInterval(iv)
+          reject(new Error(failed.detail || `Remote auth ${failed.status}`))
+        }
+      }, 50)
+    })
+    const resp = await fetch('/auth/api/set-session', {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${exchangeCode}` },
+    })
+    if (!resp.ok) throw new Error(`set-session failed: ${resp.status}`)
+    const validate = await fetch('/auth/api/validate', { method: 'POST' })
+    if (!validate.ok) throw new Error(`validate failed: ${validate.status}`)
+    return await validate.json()
+  }, { timeoutMs })
+}
+
+/**
+ * Permit a remote auth request from the given page (the authenticating device).
+ * The page must be on the approver's origin with a valid session cookie and a
+ * virtual authenticator holding a credential for that domain.
+ * Resolves with the "found" message (includes the requesting domain's rp_id).
+ */
+export async function permitRemoteAuth(page: Page, code: string): Promise<any> {
+  return page.evaluate(async ({ code, powSrc, b64src }) => {
+    const solvePoW = eval(`(${powSrc})`)
+    const { b64dec, b64enc } = eval(`(() => { ${b64src}; return { b64dec, b64enc } })()`)
+    return new Promise((resolve, reject) => {
+      const ws = new WebSocket(`ws://${location.host}/auth/ws/remote-auth/permit`)
+      let stage = 0
+      let foundMsg: any = null
+      ws.onmessage = async (event) => {
+        const data = JSON.parse(event.data)
+        try {
+          if (typeof data.status === 'number' && data.status >= 400) {
+            ws.close()
+            reject(new Error(data.detail || `permit failed: ${data.status}`))
+            return
+          }
+          if (data.pow && stage === 0) {
+            const solution = await solvePoW(b64dec(data.pow.challenge), data.pow.work)
+            stage = 1
+            ws.send(JSON.stringify({ code, pow: b64enc(solution) }))
+            return
+          }
+          if (data.status === 'found') {
+            foundMsg = data
+            const solution = await solvePoW(b64dec(data.pow.challenge), data.pow.work)
+            stage = 2
+            ws.send(JSON.stringify({ authenticate: true, pow: b64enc(solution) }))
+            return
+          }
+          if (data.optionsJSON) {
+            const opts = data.optionsJSON
+            const credential = await navigator.credentials.get({
+              publicKey: {
+                challenge: b64dec(opts.challenge),
+                rpId: opts.rpId,
+                timeout: opts.timeout,
+                userVerification: opts.userVerification,
+                allowCredentials: opts.allowCredentials?.map((cred: any) => ({
+                  type: cred.type,
+                  id: b64dec(cred.id),
+                  transports: cred.transports,
+                })) || [],
+              }
+            }) as PublicKeyCredential | null
+            if (!credential) throw new Error('Failed to get credential')
+            const response = credential.response as AuthenticatorAssertionResponse
+            ws.send(JSON.stringify({
+              id: credential.id,
+              rawId: b64enc(credential.rawId),
+              response: {
+                clientDataJSON: b64enc(response.clientDataJSON),
+                authenticatorData: b64enc(response.authenticatorData),
+                signature: b64enc(response.signature),
+                userHandle: response.userHandle ? b64enc(response.userHandle) : null,
+              },
+              type: credential.type,
+              clientExtensionResults: credential.getClientExtensionResults(),
+              authenticatorAttachment: (credential as any).authenticatorAttachment,
+            }))
+            return
+          }
+          if (data.status === 'success') {
+            ws.close()
+            resolve(foundMsg)
+            return
+          }
+        } catch (err: any) {
+          ws.close()
+          reject(new Error(err.message || 'Permit failed'))
+        }
+      }
+      ws.onerror = () => reject(new Error('WebSocket error during permit'))
+    })
+  }, { code, powSrc: solvePoWSource, b64src: b64helpersSource })
+}

e2e/tests/global-setup.ts

@@ -1,6 +1,6 @@
-import { spawn } from 'child_process'
+import { execFileSync, spawn, spawnSync } from 'child_process'
 import { join, dirname } from 'path'
-import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import { existsSync, mkdirSync, rmSync, writeFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -20,45 +20,81 @@ interface TestState {
 /**
  * Global setup for E2E tests.
  *
- * Uses in-memory SQLite database for fast, isolated tests.
- * Captures the bootstrap reset token for initial user registration.
+ * Bootstraps a fresh combined database (paskia.kantadb) with two domains —
+ * localhost (default) and test.localhost — then starts the server with the
+ * test data directory as its working directory. Captures the bootstrap reset
+ * token from 'paskia init' output 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 })
-  }
+  // Start from a clean slate: the test data directory doubles as the server
+  // working directory, so paskia.kantadb and paskia.data/ are created here
+  rmSync(testDataDir, { recursive: true, force: true })
+  mkdirSync(testDataDir, { recursive: true })
+
+  // Build the package first
+  console.log('  Building package with uv build...')
+  execFileSync('uv', ['build'], { cwd: projectRoot, stdio: 'inherit' })
+  console.log('  ✅ Build complete\n')
 
-  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
+  // Bootstrap the database: two domains, localhost and test.localhost
+  console.log('  Bootstrapping database with paskia init...')
+  const initResult = spawnSync(
+    'uv',
+    [
+      'run', '--project', projectRoot,
+      'paskia', 'init', '-l', 'localhost:4404', 'localhost',
+    ],
+    { cwd: testDataDir, encoding: 'utf-8' }
+  )
+  const initOutput = `${initResult.stdout}${initResult.stderr}`
+  process.stdout.write(initOutput)
+  if (initResult.status !== 0) {
+    throw new Error(`paskia init failed with exit code ${initResult.status}`)
+  }
+  const addResult = spawnSync(
+    'uv',
+    ['run', '--project', projectRoot, 'paskia', 'init', 'test.localhost'],
+    { cwd: testDataDir, encoding: 'utf-8' }
+  )
+  process.stdout.write(`${addResult.stdout}${addResult.stderr}`)
+  if (addResult.status !== 0) {
+    throw new Error(`paskia init test.localhost failed with exit code ${addResult.status}`)
+  }
+
+  // Parse the reset token from init output
+  // Format: http://localhost:4404/auth/{token} where token is dot-separated words
+  const match = initOutput.match(/https?:\/\/localhost(?::\d+)?\/auth\/([a-z]+(?:\.[a-z]+)+)/)
+  if (!match) {
+    throw new Error('Failed to capture reset token from paskia init output')
+  }
+  state.resetToken = match[1]
+  console.log(`\n  ✅ Captured reset token: ${state.resetToken}\n`)
+
+  // Start the server (serve mode: all configuration comes from the database)
+  console.log('  Starting server...')
   const serverArgs = COLLECT_COVERAGE
     ? [
-        'run', 'coverage', 'run', '--parallel-mode',
-        '-m', 'paskia.fastapi', 'localhost:4404',
-        '--rp-id', 'localhost'
+        'run', '--project', projectRoot,
+        'coverage', 'run', '--parallel-mode',
+        '-m', 'paskia', '-l', 'localhost:4404'
       ]
     : [
-        'run', 'paskia', 'localhost:4404',
-        '--rp-id', 'localhost'
+        'run', '--project', projectRoot,
+        'paskia', '-l', 'localhost:4404'
       ]
 
-  // Use a temporary jsonl file for test database
-  const testDbFile = join(testDataDir, 'test-db.jsonl')
-
-  // Start the server using Node's spawn
   const serverProcess = spawn('uv', serverArgs, {
-    cwd: projectRoot,
+    cwd: testDataDir,
     env: {
       ...process.env,
-      PASKIA_DB: testDbFile,
       COVERAGE_FILE: join(projectRoot, '.coverage'),
     },
     stdio: ['ignore', 'pipe', 'pipe'],
@@ -66,66 +102,38 @@ export default async function globalSetup() {
 
   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)
+  serverProcess.stdout?.on('data', (data: Buffer) => process.stdout.write(data))
+  serverProcess.stderr?.on('data', (data: Buffer) => process.stderr.write(data))
 
-    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.on('exit', (code) => {
+    if (code !== 0 && code !== null) {
+      console.error(`Server exited unexpectedly with code ${code}`)
     }
-
-    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
+  // Wait for the server to become ready and fetch the session cookie name
+  console.log('  Waiting for server readiness...')
+  const deadline = Date.now() + 30000
+  let settings: any = null
+  while (Date.now() < deadline) {
+    try {
+      const response = await fetch('http://localhost:4404/auth/api/settings')
+      if (response.ok) {
+        settings = await response.json()
+        break
+      }
+    } catch {
+      // Not up yet
+    }
+    await new Promise(r => setTimeout(r, 250))
   }
-
-  // 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)
+  if (!settings) {
     serverProcess.kill()
-    throw err
+    throw new Error('Server did not become ready in time (30s)')
   }
+  state.sessionCookie = settings.session_cookie
+  console.log(`  ✅ Session cookie name: ${state.sessionCookie}`)
+  console.log(`  ✅ Domain: ${settings.rp_id} (${settings.rp_name})\n`)
 
   // Save state for tests
   writeFileSync(stateFile, JSON.stringify(state, null, 2))

e2e/tests/global-teardown.ts

@@ -59,11 +59,13 @@ export default async function globalTeardown() {
     rmSync(stateFile, { force: true })
   }
 
-  // Clean up test database
-  const testDbFile = join(testDataDir, 'test-db.jsonl')
-  if (existsSync(testDbFile)) {
-    console.log('  Removing test database...')
-    rmSync(testDbFile)
+  // Clean up test database and auxiliary data
+  for (const name of ['paskia.kantadb', 'paskia.data']) {
+    const p = join(testDataDir, name)
+    if (existsSync(p)) {
+      console.log(`  Removing ${name}...`)
+      rmSync(p, { force: true, recursive: true })
+    }
   }
 
   // Generate Python coverage report if coverage was collected

e2e/tsconfig.json

@@ -8,7 +8,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "types": ["bun-types"]
+    "types": ["node"]
   },
   "include": ["tests/**/*.ts", "playwright.config.ts"],
   "exclude": ["node_modules"]

examples/index.html

@@ -8,6 +8,17 @@
         :root {
             color-scheme: light dark;  /* Automatic themes by browser */
         }
+        .section a, .section button {
+            display: inline-block;
+            padding: 0.4em;
+            margin-right: 0.3em;
+            border: none;
+            background: #aaa2;
+            color: inherit;
+            font: inherit;
+            text-decoration: none;
+            cursor: pointer;
+        }
     </style>
 </head>
 <body>
@@ -20,14 +31,15 @@
         <div class="content">
             <div class="section">
                 <h2>Management Site</h2>
-                <button onclick="window.open('/auth/', '_blank')">👤 User Profile</button>
-                <button onclick="window.open('/auth/admin/', '_blank')">⚙️ Admin Panel</button>
+                <a href="/auth/">👤 User Profile</a>
+                <a href="/auth/admin/">⚙️ Admin Panel</a>
             </div>
 
             <div class="section">
                 <h2>API Mode (not leaving the page)</h2>
                 <p>For SPAs and fetch() calls - shows auth in an iframe overlay:</p>
-                <button onclick="apiCall('/auth/api/user-info', 'POST')">📋 Get User Info</button>
+                <button onclick="profileDemo()">👤 Login/Profile</button>
+                <button onclick="apiCall('/auth/api/user-info', 'GET')">📋 Get User Info</button>
                 <button onclick="apiCall('/auth/api/forward?max_age=10s')">🔄 Reauth (max_age=10s)</button>
                 <button onclick="apiCall('/auth/api/forward?perm=auth:admin')">🛡️ Admin Only</button>
                 <button onclick="logout()">🚪 Logout</button>
@@ -35,10 +47,10 @@
 
             <div class="section">
                 <h2>Browser Mode (full page)</h2>
-                <p>Block access to otherwise open site - intended for forward-auth mechanism (Caddy, Nginx):</p>
-                <button onclick="browserNav('/auth/api/forward')">🔐 Basic Auth</button>
-                <button onclick="browserNav('/auth/api/forward?max_age=10s')">🔄 Reauth (max_age=10s)</button>
-                <button onclick="browserNav('/auth/api/forward?perm=auth:admin')">🛡️ Admin Only</button>
+                <p>Block access to otherwise open site - intended for forward-auth mechanism (Caddy, Nginx). If not authenticated, you'll see the login page; after auth, a 204 response (blank page = success). Back returns here:</p>
+                <a href="/auth/api/forward">🔐 Basic Auth</a>
+                <a href="/auth/api/forward?max_age=10s">🔄 Reauth (max_age=10s)</a>
+                <a href="/auth/api/forward?perm=auth:admin">🛡️ Admin Only</a>
             </div>
 
             <pre id="output">Click a button to test...</pre>
@@ -46,52 +58,51 @@
     </div>
 
     <script type="module">
-        import { apiFetch, apiJson, AuthCancelledError } from '/paskia-js/dist/paskia.js'
-
-        const output = document.getElementById('output');
+        import { apiFetch, apiJson, AuthCancelledError, profile } from '/paskia-js/dist/paskia.js'
 
         function log(msg) {
-            output.textContent = msg;
+            console.log(msg)
+            document.getElementById('output').textContent = msg
         }
 
         // Make an API call using paskia module (handles 401/403 automatically)
         window.apiCall = async function(url, method = 'GET') {
-            log(`${method} ${url}...`);
+            log(`${method} ${url}...`)
             try {
-                const response = await apiFetch(url, { method });
+                const response = await apiFetch(url, { method })
 
                 // Forward endpoint returns 204 on success
                 if (response.status === 204) {
-                    log('✓ Success (204 No Content)');
-                    return;
+                    log('✓ Success (204 No Content)')
+                    return
                 }
 
                 if (!response.ok) {
-                    log(`Error: ${response.status} ${response.statusText}`);
-                    return;
+                    log(`Error: ${response.status} ${response.statusText}`)
+                    return
                 }
 
-                const data = await response.json();
-                log('✓ Response:\n' + JSON.stringify(data, null, 2));
+                const data = await response.json()
+                log('✓ Response:\n' + JSON.stringify(data, null, 2))
             } catch (e) {
                 if (e instanceof AuthCancelledError) {
-                    log('Authentication cancelled');
+                    log('Authentication cancelled')
                 } else {
-                    log(`Error: ${e.message}`);
+                    log(`Error: ${e.message}`)
                 }
             }
         }
 
         window.logout = async function() {
-            await fetch('/auth/api/logout', { method: 'POST' });
-            log('Logged out');
+            await fetch('/auth/api/logout', { method: 'POST' })
+            log('Logged out')
         }
 
-        // Browser mode: open the forward endpoint directly in a new window.
-        window.browserNav = function(url) {
-            log('Opening in new window...\nIf not authenticated, you\'ll see the login page.\nAfter auth, you\'ll see a 204 response (blank page = success).');
-            window.open(url, '_blank');
+        // Profile dialog: resolves 'login' / 'logout' / 'back'
+        window.profileDemo = async function() {
+            log(`Profile return: ${await profile()}`)
         }
+
     </script>
 </body>
 </html>

frontend/auth/App.vue

@@ -2,7 +2,14 @@
   <div class="app-shell">
     <StatusMessage />
     <main class="app-main">
-      <HostProfileView v-if="viewState === 'profile' && isHostMode" />
+      <HostProfileView
+        v-if="viewState === 'profile' && isHostMode"
+        :ctx="store.ctx"
+        :user-info="store.userInfo"
+        :settings="store.settings"
+        @back="goBack"
+        @logout="onHostLogout"
+      />
       <ProfileView v-else-if="viewState === 'profile'" />
       <LoadingView v-else-if="viewState === 'loading'" :message="loadingMessage" />
       <AccessDenied v-else-if="viewState === 'terminal'" />
@@ -13,8 +20,9 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useAuthStore } from '@/stores/auth'
-import { apiJson, SessionValidator, createAuthIframe, removeAuthIframe } from 'paskia'
-import { getAuthIframeUrl } from '@/utils/api'
+import { apiJson, SessionValidator, settings as paskiaSettings } from 'paskia'
+import { updateThemeFromSession } from '@/utils/theme'
+import { goBack } from '@/utils/helpers'
 import StatusMessage from '@/components/StatusMessage.vue'
 import ProfileView from '@/components/ProfileView.vue'
 import HostProfileView from '@/components/HostProfileView.vue'
@@ -37,90 +45,66 @@ function normalizeHost(raw) {
 }
 
 /**
- * Host mode is active when an auth_host is configured AND the current host differs from it.
+ * Host mode is active when an own_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
+  const authHost = store.settings?.own_auth_host
   if (!authHost) return false
   const currentHost = normalizeHost(window.location.host)
   const configuredHost = normalizeHost(authHost)
   return currentHost !== configuredHost
 })
-const userUuid = computed(() => store.userInfo?.ctx.user.uuid)
 
-function terminateSession() {
-  store.userInfo = null
-  viewState.value = 'terminal'
+// HostProfileView already posted /auth/api/logout; clear local state and reload.
+function onHostLogout() {
+  sessionStorage.clear()
+  window.location.reload()
 }
 
-const userUuidGetter = () => store.userInfo?.ctx.user.uuid
-const sessionValidator = new SessionValidator(userUuidGetter, terminateSession)
+function onSessionLost(e) {
+  store.userInfo = null
+  store.ctx = null
+  if (e?.name === 'AuthCancelledError') {
+    viewState.value = 'terminal'
+  } else {
+    store.showMessage(e?.message || 'Session lost', 'error', 5000)
+    viewState.value = 'terminal'
+  }
+}
+
+const userUuidGetter = () => store.ctx?.user.uuid
+const sessionValidator = new SessionValidator(userUuidGetter, onSessionLost)
 
 onMounted(() => sessionValidator.start())
 onUnmounted(() => sessionValidator.stop())
 
 async function loadUserInfo() {
+  viewState.value = 'loading'
+  loadingMessage.value = 'Loading...'
   try {
-    store.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
+    // apiJson handles 401/403 with auth.iframe automatically:
+    // shows overlay iframe, waits for auth, retries the request.
+    const [validateData, userInfoData] = await Promise.all([
+      apiJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms }),
+      apiJson('/auth/api/user-info', { method: 'GET', timeout: paskiaSettings.auth_ms })
+    ])
+    store.userInfo = userInfoData
+    store.ctx = validateData.ctx
+    updateThemeFromSession(store.userInfo)
+    // Verify that the user UUIDs match between user-info and validate responses
+    if (store.userInfo.user.uuid !== store.ctx.user.uuid) {
+      console.error('User UUID mismatch between user-info and validate responses')
+      window.location.reload()
+      return
+    }
     viewState.value = 'profile'
-    return true
-  } catch {
-    store.userInfo = null
-    return false
-  }
-}
-
-async function showAuthIframe() {
-  const url = await getAuthIframeUrl('login')
-  createAuthIframe(url)
-  loadingMessage.value = 'Authentication required...'
-}
-
-function handleAuthMessage(event) {
-  const data = event.data
-  if (!data?.type) return
-
-  switch (data.type) {
-    case 'auth-success':
-      // Authentication successful - reload user info
-      removeAuthIframe()
-      viewState.value = 'loading'
-      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 terminal state
-      removeAuthIframe()
-      terminateSession()
-      break
-
-    case 'auth-close-request':
-      // Legacy support - treat as back
-      removeAuthIframe()
-      break
+  } catch (e) {
+    onSessionLost(e)
   }
 }
 
 onMounted(async () => {
-  // Listen for postMessage from auth iframe
-  window.addEventListener('message', handleAuthMessage)
-
   // Load settings
   await store.loadSettings()
 
@@ -129,25 +113,12 @@ onMounted(async () => {
   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 authHost = store.settings?.own_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)
-  removeAuthIframe()
+  // Load user info (apiJson handles auth iframe if needed)
+  await loadUserInfo()
 })
 </script>
-
-<style scoped>
-</style>

frontend/auth/admin/AdminApp.vue

@@ -9,12 +9,15 @@ import AccessDenied from '@/components/AccessDenied.vue'
 import AdminOverview from '@/admin/AdminOverview.vue'
 import AdminOrgDetail from '@/admin/AdminOrgDetail.vue'
 import AdminUserDetail from '@/admin/AdminUserDetail.vue'
+import AdminOidcDetail from '@/admin/AdminOidcDetail.vue'
 import AdminDialogs from '@/admin/AdminDialogs.vue'
 import { useAuthStore } from '@/stores/auth'
 import { adminUiPath, makeUiHref } from '@/utils/settings'
-import { apiJson, SessionValidator } from 'paskia'
+import { apiJson, SessionValidator, settings as paskiaSettings } from 'paskia'
+import { updateThemeFromSession } from '@/utils/theme'
+import { uuidv7 } from 'uuidv7'
 import { getDirection } from '@/utils/keynav'
-import { goBack } from '@/utils/helpers'
+import { originDisplayEntries } from '@/utils/helpers'
 
 const info = ref(null)
 const loading = ref(true)
@@ -24,9 +27,13 @@ const showBackMessage = ref(false)
 const error = ref(null)
 const orgs = ref([])
 const permissions = ref([])
+const oidcClients = ref([])
+const domains = ref([])
 const currentOrgId = ref(null) // UUID of selected org for detail view
 const currentUserId = ref(null) // UUID for user detail view
+const currentOidcId = ref(null) // UUID for OIDC client detail view
 const userDetail = ref(null) // cached user detail object
+const editingOidcClient = ref(null) // OIDC client being edited (with local changes)
 const authStore = useAuthStore()
 const addingOrgForPermission = ref(null)
 const PERMISSION_ID_PATTERN = '^[A-Za-z0-9:._~-]+$'
@@ -43,6 +50,7 @@ const breadcrumbsRef = ref(null)
 const adminOverviewRef = ref(null)
 const adminOrgDetailRef = ref(null)
 const adminUserDetailRef = ref(null)
+const adminOidcDetailRef = ref(null)
 
 // Check if any modal/dialog is open (blocks arrow key navigation)
 const hasActiveModal = computed(() => dialog.value.type !== null || showRegModal.value)
@@ -79,11 +87,12 @@ onUnmounted(() => {
 const permissionSummary = computed(() => {
   const summary = {}
   for (const o of orgs.value) {
-    const orgBase = { uuid: o.uuid, display_name: o.display_name }
-    const orgPerms = new Set(o.permissions || [])
+    const orgBase = { uuid: o.uuid, display_name: o.org.display_name }
+    // o.permissions is a dict[UUID, Permission]
+    const orgPermUuids = new Set(Object.keys(o.permissions || {}))
 
     // Org-level permissions (direct) - only count if org can grant them
-    for (const pid of o.permissions || []) {
+    for (const pid of Object.keys(o.permissions || {})) {
       if (!summary[pid]) summary[pid] = { orgs: [], orgSet: new Set(), userCount: 0 }
       if (!summary[pid].orgSet.has(o.uuid)) {
         summary[pid].orgs.push(orgBase)
@@ -92,17 +101,18 @@ const permissionSummary = computed(() => {
     }
 
     // Role-based permissions (inheritance) - only count if org can grant them
-    for (const r of o.roles) {
-      for (const pid of r.permissions) {
+    for (const [roleUuid, r] of Object.entries(o.roles || {})) {
+      // r.permissions is dict[UUID, bool]
+      for (const pid of Object.keys(r.permissions || {})) {
         // Only count if the org can grant this permission
-        if (!orgPerms.has(pid)) continue
+        if (!orgPermUuids.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)
           summary[pid].orgSet.add(o.uuid)
         }
-        summary[pid].userCount += r.users.length
+        summary[pid].userCount += roleUserCount(o, roleUuid)
       }
     }
   }
@@ -120,32 +130,86 @@ function parseHash() {
   const h = window.location.hash || ''
   currentOrgId.value = null
   currentUserId.value = null
+  currentOidcId.value = null
+  editingOidcClient.value = null
   if (h.startsWith('#org/')) {
     currentOrgId.value = h.slice(5)
   } else if (h.startsWith('#user/')) {
     currentUserId.value = h.slice(6)
+  } else if (h.startsWith('#oidc:')) {
+    const oidcUuid = h.slice(6)
+    currentOidcId.value = oidcUuid
+    // Initialize editing client data
+    if (oidcUuid === 'new') {
+      // Generate client_id and secret for new client
+      const bytes = new Uint8Array(32)
+      crypto.getRandomValues(bytes)
+      const client_secret = btoa(String.fromCharCode(...bytes))
+        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+      editingOidcClient.value = {
+        client_id: uuidv7(),
+        client_secret,
+        isNew: true,
+        name: '',
+        redirect_uris: []
+      }
+    } else {
+      const client = oidcClients.value.find(c => c.uuid === oidcUuid)
+      if (client) {
+        editingOidcClient.value = {
+          ...client,
+          client_id: client.uuid,
+          client_secret: null,
+          isNew: false
+        }
+      }
+    }
   }
 }
 
-async function loadOrgs() {
-  const data = await apiJson('/auth/api/admin/orgs')
-  orgs.value = data.map(o => {
-    const roles = o.roles.map(r => ({ ...r, org: o.uuid, users: [] }))
-    const roleMap = Object.fromEntries(roles.map(r => [r.display_name, r]))
-    for (const u of o.users || []) {
-      if (roleMap[u.role]) roleMap[u.role].users.push(u)
-    }
-    return { ...o, roles }
-  })
+async function loadAdminData() {
+  const data = await apiJson('/auth/api/admin/info')
+  // Convert dicts to arrays with uuid added
+  orgs.value = Object.entries(data.orgs).map(([uuid, o]) => ({ uuid, ...o }))
+  permissions.value = Object.entries(data.permissions).map(([uuid, p]) => ({ uuid, ...p }))
+  oidcClients.value = Object.entries(data.oidc_clients).map(([uuid, c]) => ({ uuid, ...c }))
 }
 
-async function loadPermissions() {
-  permissions.value = await apiJson('/auth/api/admin/permissions')
+// Domain list is master-admin only; callers guard on isMasterAdmin
+async function loadDomains() {
+  try {
+    domains.value = await apiJson('/auth/api/admin/domains/')
+  } catch (e) {
+    console.warn('Unable to load domains', e)
+    domains.value = []
+  }
+}
+
+// Helper to get users for a role as sorted array of [uuid, user]
+function roleUsers(org, roleUuid) {
+  return Object.entries(org.users)
+    .filter(([_, u]) => u.role === roleUuid)
+    .sort(([, a], [, b]) => {
+      const nameA = a.display_name.toLowerCase()
+      const nameB = b.display_name.toLowerCase()
+      return nameA.localeCompare(nameB)
+    })
+}
+
+// Helper to count users in a role
+function roleUserCount(org, roleUuid) {
+  return Object.values(org.users).filter(u => u.role === roleUuid).length
+}
+
+// Helper to count total users in an org
+function orgUserCount(org) {
+  return Object.keys(org.users).length
 }
 
 async function loadUserInfo() {
-  const data = await apiJson('/auth/api/validate', { method: 'POST' })
+  const data = await apiJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms })
   info.value = data
+  updateThemeFromSession(data.ctx)
   authenticated.value = true
 }
 
@@ -153,7 +217,10 @@ function clearSensitiveState() {
   info.value = null
   orgs.value = []
   permissions.value = []
+  oidcClients.value = []
+  domains.value = []
   userDetail.value = null
+  editingOidcClient.value = null
   authenticated.value = false
 }
 
@@ -178,15 +245,15 @@ async function load() {
   error.value = null
   try {
     // Load admin data first - apiJson will handle 401/403 with iframe authentication
-    await Promise.all([loadOrgs(), loadPermissions()])
+    await loadAdminData()
     // If we get here, user has admin access - now fetch user info for display
     await loadUserInfo()
+    if (isMasterAdmin.value) await loadDomains()
 
     if (!isMasterAdmin.value && isOrgAdmin.value && orgs.value.length === 1) {
       if (!window.location.hash || window.location.hash === '#overview') {
         currentOrgId.value = orgs.value[0].uuid
         window.location.hash = `#org/${currentOrgId.value}`
-        authStore.showMessage(`Navigating to ${orgs.value[0].display_name} Administration`, 'info', 3000)
       } else {
         parseHash()
       }
@@ -207,17 +274,17 @@ function editUserName(user) { openDialog('user-update-name', { user, name: user.
 
 async function performOrgDeletion(orgUuid) {
   await apiJson(`/auth/api/admin/orgs/${orgUuid}`, { method: 'DELETE' })
-  await Promise.all([loadOrgs(), loadPermissions()])
+  await Promise.all([loadAdminData()])
 }
 
 function deleteOrg(org) {
-  const userCount = org.roles.reduce((acc, r) => acc + r.users.length, 0)
+  const userCount = orgUserCount(org)
 
   if (userCount === 0) {
     // No users in the organization, safe to delete directly
     performOrgDeletion(org.uuid)
       .then(() => {
-        authStore.showMessage(`Organization "${org.display_name}" deleted.`, 'success', 2500)
+        authStore.showMessage(`Organization "${org.org.display_name}" deleted.`, 'success', 2500)
       })
       .catch(e => {
         authStore.showMessage(e.message || 'Failed to delete organization', 'error')
@@ -226,13 +293,14 @@ function deleteOrg(org) {
   }
 
   // Build detailed breakdown of users by role
-  const roleParts = org.roles
-    .filter(r => r.users.length > 0)
-    .map(r => `${r.users.length} ${r.display_name}`)
+  const roleParts = Object.entries(org.roles)
+    .map(([uuid, r]) => ({ role: r, count: roleUserCount(org, uuid) }))
+    .filter(x => x.count > 0)
+    .map(x => `${x.count} ${x.role.display_name}`)
 
   const affects = roleParts.join(', ')
 
-  openDialog('confirm', { message: `Delete organization "${org.display_name}", including accounts of ${affects})?`, action: async () => {
+  openDialog('confirm', { message: `Delete organization "${org.org.display_name}", including accounts of ${affects})?`, action: async () => {
     await performOrgDeletion(org.uuid)
   } })
 }
@@ -240,7 +308,7 @@ function deleteOrg(org) {
 function createUserInRole(org, role) { openDialog('user-create', { org, role }) }
 
 function deleteUser(user, userDetail) {
-  const credentialCount = userDetail?.credentials?.length || 0
+  const credentialCount = userDetail?.credentials ? Object.keys(userDetail.credentials).length : 0
   const userUuid = user.uuid
   const userName = user.display_name
   const orgUuid = user.org  // org UUID is stored in selectedUser
@@ -264,44 +332,29 @@ async function performUserDeletion(userUuid, userName, orgUuid) {
   try {
     await apiJson(`/auth/api/admin/users/${userUuid}`, { method: 'DELETE' })
     authStore.showMessage(`User "${userName}" deleted.`, 'success', 2500)
-    await loadOrgs()
+    await loadAdminData()
     window.location.hash = `#org/${orgUuid}`
   } catch (e) {
     authStore.showMessage(e.message || 'Failed to delete user', 'error')
   }
 }
 
-async function moveUserToRole(user, targetRoleUuid) {
-  if (user.role_uuid === targetRoleUuid) return
+async function moveUserToRole(userUuid, user, targetRoleUuid) {
+  if (user.role === targetRoleUuid) return
   try {
-    await apiJson(`/auth/api/admin/users/${user.uuid}/role`, {
+    await apiJson(`/auth/api/admin/users/${userUuid}/role`, {
       method: 'PATCH',
       body: { role_uuid: targetRoleUuid }
     })
-    await loadOrgs()
+    await loadAdminData()
   } catch (e) {
     authStore.showMessage(e.message || 'Failed to update user role')
   }
 }
 
-function onUserDragStart(e, user, org) {
-  e.dataTransfer.effectAllowed = 'move'
-  e.dataTransfer.setData('text/plain', JSON.stringify({ user_uuid: user.uuid, org }))
-}
-
-function onRoleDragOver(e) {
-  e.preventDefault()
-  e.dataTransfer.dropEffect = 'move'
-}
-
-function onRoleDrop(e, org, role) {
-  e.preventDefault()
-  try {
-    const data = JSON.parse(e.dataTransfer.getData('text/plain'))
-    if (data.org !== org.uuid) return // only within same org
-    const user = org.roles.flatMap(r => r.users).find(u => u.uuid === data.user_uuid)
-    if (user) moveUserToRole(user, role.uuid)
-  } catch (_) { /* ignore */ }
+function moveUserToRoleFromDrag(userUuid, newRoleUuid) {
+  const user = selectedOrg.value?.users?.[userUuid]
+  if (user) moveUserToRole(userUuid, user, newRoleUuid)
 }
 
 // Role actions
@@ -314,7 +367,7 @@ function deleteRole(role) {
   apiJson(`/auth/api/admin/roles/${role.uuid}`, { method: 'DELETE' })
     .then(() => {
       authStore.showMessage(`Role "${role.display_name}" deleted.`, 'success', 2500)
-      loadOrgs()
+      loadAdminData()
     })
     .catch(e => {
       authStore.showMessage(e.message || 'Failed to delete role', 'error')
@@ -322,11 +375,14 @@ function deleteRole(role) {
 }
 
 async function toggleRolePermission(role, pid, checked) {
-  // Optimistic update
-  const prevPermissions = [...role.permissions]
-  const newPermissions = checked
-    ? [...role.permissions, pid]
-    : role.permissions.filter(p => p !== pid)
+  // Optimistic update - role.permissions is dict[UUID, bool]
+  const prevPermissions = { ...role.permissions }
+  const newPermissions = { ...role.permissions }
+  if (checked) {
+    newPermissions[pid] = true
+  } else {
+    delete newPermissions[pid]
+  }
   role.permissions = newPermissions
 
   try {
@@ -334,7 +390,7 @@ async function toggleRolePermission(role, pid, checked) {
     await apiJson(`/auth/api/admin/roles/${role.uuid}/permissions/${pid}`, {
       method
     })
-    await loadOrgs()
+    await loadAdminData()
   } catch (e) {
     authStore.showMessage(e.message || 'Failed to update role permission')
     role.permissions = prevPermissions // revert
@@ -345,7 +401,7 @@ async function toggleRolePermission(role, pid, checked) {
 async function performPermissionDeletion(permissionUuid) {
   const params = new URLSearchParams({ permission_uuid: permissionUuid })
   await apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'DELETE' })
-  await loadPermissions()
+  await loadAdminData()
 }
 
 function deletePermission(p) {
@@ -354,8 +410,8 @@ function deletePermission(p) {
   // Count roles that have this permission
   let roleCount = 0
   for (const org of orgs.value) {
-    for (const role of org.roles) {
-      if (role.permissions.includes(p.uuid)) {
+    for (const role of Object.values(org.roles)) {
+      if (p.uuid in (role.permissions || {})) {
         roleCount++
       }
     }
@@ -383,6 +439,121 @@ function deletePermission(p) {
   } })
 }
 
+// OIDC Client actions
+async function sha256Hex(text) {
+  const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(text))
+  return [...new Uint8Array(hash)].map(b => b.toString(16).padStart(2, '0')).join('')
+}
+
+function createOidcClient() {
+  // Navigate to new OIDC client page
+  window.location.hash = '#oidc:new'
+}
+
+function openOidcClient(client) {
+  // Navigate to OIDC client detail page
+  window.location.hash = `#oidc:${client.uuid}`
+}
+
+function resetOidcSecret(clientId) {
+  // Generate new secret locally; it will be sent to server on Save
+  const bytes = new Uint8Array(32)
+  crypto.getRandomValues(bytes)
+  const client_secret = btoa(String.fromCharCode(...bytes))
+    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+  // Update editingOidcClient if we're on the detail page
+  if (editingOidcClient.value?.client_id === clientId) {
+    editingOidcClient.value = { ...editingOidcClient.value, client_secret }
+  }
+}
+
+function createPermissionForClient(clientId) {
+  openDialog('perm-create', { display_name: '', scope: '', domain: clientId })
+}
+
+function createDomain() {
+  openDialog('domain-edit', {
+    isNew: true,
+    rp_id: '',
+    rp_name: '',
+    auth_host: '',
+    origins: [],
+    originValidation: [],
+    wellKnownCheck: null,
+  })
+}
+
+function openDomain(domain) {
+  // One combined list for editing, in display order: in-domain sites and
+  // related origins, classified by hostname against the rp-id.
+  const rows = originDisplayEntries(domain)
+  openDialog('domain-edit', {
+    isNew: false,
+    rp_id: domain.rp_id,
+    rp_name: domain.rp_name || '',
+    auth_host: rows.find(r => r.auth)?.key || '',
+    origins: rows.map(r => r.key),
+    originValidation: rows.map(() => null),
+    wellKnownCheck: null,
+  })
+}
+
+function deleteDomain(domain) {
+  openDialog('confirm', {
+    message: `Delete domain "${domain.rp_id}"? This is refused while any passkeys remain registered for it.`,
+    action: async () => {
+      await apiJson(`/auth/api/admin/domains/${domain.rp_id}`, { method: 'DELETE' })
+      authStore.showMessage(`Domain "${domain.rp_id}" deleted.`, 'success', 2500)
+      await loadDomains()
+    }
+  })
+}
+
+function deleteOidcClient(client) {
+  openDialog('confirm', {
+    message: `Delete OIDC client "${client.name}"? This will break any applications using this client.`,
+    action: async () => {
+      await performOidcClientDeletion(client.uuid, client.name)
+      // Navigate back to overview if we were on the detail page
+      if (currentOidcId.value === client.uuid) {
+        window.location.hash = '#overview'
+      }
+    }
+  })
+}
+
+async function performOidcClientDeletion(clientUuid, clientName) {
+  await apiJson(`/auth/api/admin/oidc-clients/${clientUuid}`, { method: 'DELETE' })
+  authStore.showMessage(`OIDC client "${clientName}" deleted.`, 'success', 2500)
+  await loadAdminData()
+}
+
+async function handleOidcSave(data) {
+  const { client_id, client_secret, name, redirect_uris, isNew } = data
+
+  try {
+    if (client_secret) {
+      const secret_hash = await sha256Hex(client_secret)
+      if (isNew) {
+        await apiJson('/auth/api/admin/oidc-clients', { method: 'POST', body: { client_id, secret_hash, name, redirect_uris } })
+      } else {
+        await apiJson(`/auth/api/admin/oidc-clients/${client_id}`, { method: 'PATCH', body: { name, redirect_uris, secret_hash } })
+      }
+    } else {
+      await apiJson(`/auth/api/admin/oidc-clients/${client_id}`, { method: 'PATCH', body: { name, redirect_uris } })
+    }
+    authStore.showMessage(`OIDC client "${name}" ${isNew ? 'created' : 'updated'}.`, 'success', 2500)
+    await loadAdminData()
+    window.location.hash = '#overview'
+  } catch (e) {
+    authStore.showMessage(e.message || `Failed to ${isNew ? 'create' : 'update'} OIDC client`, 'error')
+  }
+}
+
+function handleOidcCancel() {
+  goOverview()
+}
+
 const selectedOrg = computed(() => orgs.value.find(o => o.uuid === currentOrgId.value) || null)
 
 function openOrg(o) {
@@ -400,34 +571,41 @@ function openUser(u) {
 const selectedUser = computed(() => {
   if (!currentUserId.value) return null
   for (const o of orgs.value) {
-    for (const r of o.roles) {
-      const u = r.users.find(x => x.uuid === currentUserId.value)
-      if (u) return { ...u, org: o.uuid, role_display_name: r.display_name }
+    const u = o.users[currentUserId.value]
+    if (u) {
+      const role = o.roles[u.role]
+      return { ...u, uuid: currentUserId.value, org: o.uuid, role_display_name: role?.display_name }
     }
   }
   return null
 })
 
-const pageHeading = computed(() => {
-  if (selectedUser.value) return 'Admin: User'
-  if (selectedOrg.value) return 'Admin: Org'
-  return ((authStore.settings?.rp_name) || 'Master') + ' Admin'
-})
-
 // Breadcrumb entries for admin app.
 const breadcrumbEntries = computed(() => {
   const entries = [
-    { label: 'Auth', href: makeUiHref() },
-    { label: 'Admin', href: adminUiPath() }
+    { label: 'My Profile', href: makeUiHref() }
   ]
+  // For org admins, combine Admin and their org
+  if (isOrgAdmin.value && !isMasterAdmin.value && orgs.value.length > 0) {
+    const org = orgs.value[0]
+    entries.push({ label: `Admin: ${org.org.display_name}`, href: `#org/${org.uuid}` })
+  } else {
+    entries.push({ label: 'Admin', href: adminUiPath() })
+  }
   // Determine organization for user view if selectedOrg not explicitly chosen.
   let orgForUser = null
   if (selectedUser.value) {
     orgForUser = orgs.value.find(o => o.uuid === selectedUser.value.org) || null
   }
   const orgToShow = selectedOrg.value || orgForUser
-  if (orgToShow) {
-    entries.push({ label: orgToShow.display_name, href: `#org/${orgToShow.uuid}` })
+  // Add org breadcrumb only if it's not already included in the Admin entry
+  const adminOrg = (isOrgAdmin.value && !isMasterAdmin.value && orgs.value.length > 0) ? orgs.value[0] : null
+  if (orgToShow && (!adminOrg || orgToShow.uuid !== adminOrg.uuid)) {
+    entries.push({ label: orgToShow.org.display_name, href: `#org/${orgToShow.uuid}` })
+  }
+  if (currentOidcId.value) {
+    const label = editingOidcClient.value?.isNew ? 'New Client' : (editingOidcClient.value?.name || 'OIDC Client')
+    entries.push({ label, href: `#oidc:${currentOidcId.value}` })
   }
   if (selectedUser.value) {
     entries.push({ label: selectedUser.value.display_name, href: `#user/${selectedUser.value.uuid}` })
@@ -450,18 +628,27 @@ function generateUserRegistrationLink(u) {
 }
 
 async function toggleOrgPermission(org, permId, checked) {
-  // Build next permission list
-  const has = org.permissions.includes(permId)
+  // org.permissions is dict[UUID, Permission]
+  const has = permId in org.permissions
   if (checked && has) return
   if (!checked && !has) return
-  const next = checked ? [...org.permissions, permId] : org.permissions.filter(p => p !== permId)
   // Optimistic update
-  const prev = [...org.permissions]
-  org.permissions = next
+  const prev = { ...org.permissions }
+  if (checked) {
+    // Need to fetch the permission object to add it
+    const perm = permissions.value.find(p => p.uuid === permId)
+    if (perm) {
+      org.permissions = { ...org.permissions, [permId]: perm }
+    }
+  } else {
+    const next = { ...org.permissions }
+    delete next[permId]
+    org.permissions = next
+  }
   try {
     const params = new URLSearchParams({ permission_uuid: permId })
     await apiJson(`/auth/api/admin/orgs/${org.uuid}/permission?${params.toString()}`, { method: checked ? 'POST' : 'DELETE' })
-    await loadOrgs()
+    await loadAdminData()
   } catch (e) {
     authStore.showMessage(e.message || 'Failed to update organization permission', 'error')
     org.permissions = prev // revert
@@ -571,7 +758,7 @@ function handlePanelNavigateOut(direction) {
 }
 
 async function refreshUserDetail() {
-  await loadOrgs()
+  await loadAdminData()
   if (selectedUser.value) {
     try {
       userDetail.value = await apiJson(`/auth/api/admin/users/${selectedUser.value.uuid}`)
@@ -579,10 +766,7 @@ async function refreshUserDetail() {
   }
 }
 
-async function onUserNameSaved() {
-  await refreshUserDetail()
-  authStore.showMessage('User renamed', 'success', 1500)
-}
+
 
 async function submitDialog() {
   if (!dialog.value.type || dialog.value.busy) return
@@ -597,7 +781,7 @@ async function submitDialog() {
       apiJson('/auth/api/admin/orgs', { method: 'POST', body: { display_name: name, permissions: [] } })
         .then(() => {
           authStore.showMessage(`Organization "${name}" created.`, 'success', 2500)
-          Promise.all([loadOrgs(), loadPermissions()])
+          loadAdminData()
         })
         .catch(e => {
           authStore.showMessage(e.message || 'Failed to create organization', 'error')
@@ -611,7 +795,7 @@ async function submitDialog() {
       apiJson(`/auth/api/admin/orgs/${org.uuid}`, { method: 'PATCH', body: { display_name: name } })
         .then(() => {
           authStore.showMessage(`Organization renamed to "${name}".`, 'success', 2500)
-          loadOrgs()
+          loadAdminData()
         })
         .catch(e => {
           authStore.showMessage(e.message || 'Failed to update organization', 'error')
@@ -625,7 +809,7 @@ async function submitDialog() {
       apiJson(`/auth/api/admin/orgs/${org.uuid}/roles`, { method: 'POST', body: { display_name: name, permissions: [] } })
         .then(() => {
           authStore.showMessage(`Role "${name}" created.`, 'success', 2500)
-          loadOrgs()
+          loadAdminData()
         })
         .catch(e => {
           authStore.showMessage(e.message || 'Failed to create role', 'error')
@@ -639,7 +823,7 @@ async function submitDialog() {
       apiJson(`/auth/api/admin/roles/${role.uuid}`, { method: 'PATCH', body: { display_name: name } })
         .then(() => {
           authStore.showMessage(`Role renamed to "${name}".`, 'success', 2500)
-          loadOrgs()
+          loadAdminData()
         })
         .catch(e => {
           authStore.showMessage(e.message || 'Failed to update role', 'error')
@@ -653,7 +837,7 @@ async function submitDialog() {
       apiJson(`/auth/api/admin/orgs/${org.uuid}/users`, { method: 'POST', body: { display_name: name, role: role.display_name } })
         .then(() => {
           authStore.showMessage(`User "${name}" added to ${role.display_name} role.`, 'success', 2500)
-          loadOrgs()
+          loadAdminData()
         })
         .catch(e => {
           authStore.showMessage(e.message || 'Failed to add user', 'error')
@@ -664,10 +848,10 @@ async function submitDialog() {
 
       // Close dialog immediately, then perform async operation
       closeDialog()
-      apiJson(`/auth/api/admin/users/${user.uuid}/display-name`, { method: 'PATCH', body: { display_name: name } })
+      apiJson(`/auth/api/admin/users/${user.uuid}/info`, { method: 'PATCH', body: { display_name: name } })
         .then(() => {
           authStore.showMessage(`User renamed to "${name}".`, 'success', 2500)
-          onUserNameSaved()
+          refreshUserDetail()
         })
         .catch(e => {
           authStore.showMessage(e.message || 'Failed to update user name', 'error')
@@ -699,7 +883,7 @@ async function submitDialog() {
       apiJson(`/auth/api/admin/permission?${params.toString()}`, { method: 'PATCH' })
         .then(() => {
           authStore.showMessage(`Permission "${newDisplay}" updated.`, 'success', 2500)
-          loadPermissions()
+          loadAdminData()
         })
         .catch(e => {
           authStore.showMessage(e.message || 'Failed to update permission', 'error')
@@ -715,12 +899,46 @@ async function submitDialog() {
       apiJson('/auth/api/admin/permissions', { method: 'POST', body: { scope, display_name, domain: domain || undefined } })
         .then(() => {
           authStore.showMessage(`Permission "${display_name}" created.`, 'success', 2500)
-          loadPermissions()
+          loadAdminData()
         })
         .catch(e => {
           authStore.showMessage(e.message || 'Failed to create permission', 'error')
         })
       return // Don't call closeDialog() again
+    } else if (t === 'domain-edit') {
+      const d = dialog.value.data
+      const rp_id = d.rp_id?.trim().toLowerCase()
+      if (!rp_id) throw new Error('Domain (rp-id) required')
+      const rp_name = d.rp_name?.trim() || ''
+      const auth_host = d.auth_host?.trim().toLowerCase() || ''
+      // One origins object holds in-domain sites and related origins
+      // (ROR) together; the server classifies each key against the rp-id.
+      // Keys are stored lowercased, without the https:// scheme.
+      const keyOf = o => o.replace(/^https:\/\//i, '').replace(/\/+$/, '').toLowerCase()
+      const origins = {}
+      for (const o of d.origins || []) {
+        const key = keyOf(o.trim())
+        if (!key) continue
+        origins[key] = key === auth_host ? { auth_host: true } : true
+      }
+
+      closeDialog()
+      const req = d.isNew
+        ? apiJson('/auth/api/admin/domains/', { method: 'POST', body: { rp_id, rp_name, origins } })
+        : apiJson(`/auth/api/admin/domains/${rp_id}`, { method: 'PATCH', body: { rp_name, origins } })
+      req
+        .then(() => {
+          authStore.showMessage(`Domain "${rp_id}" ${d.isNew ? 'created' : 'updated'}.`, 'success', 2500)
+          loadDomains()
+          // Reload settings to reflect rp_name changes
+          authStore.loadSettings(true).then(() => {
+            if (authStore.settings?.rp_name) document.title = authStore.settings.rp_name + ' Admin'
+          })
+        })
+        .catch(e => {
+          authStore.showMessage(e.message || 'Failed to save domain', 'error')
+        })
+      return // Don't call closeDialog() again
     } else if (t === 'confirm') {
       const action = dialog.value.data.action
       // Close dialog first, then perform action (errors shown via showMessage)
@@ -760,7 +978,6 @@ async function submitDialog() {
       />
       <section v-else-if="authenticated && (isMasterAdmin || isOrgAdmin)" class="view-root view-root--wide view-admin">
         <header class="view-header">
-          <h1>{{ pageHeading }}</h1>
           <Breadcrumbs ref="breadcrumbsRef" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
         </header>
 
@@ -768,11 +985,14 @@ async function submitDialog() {
           <div class="section-body admin-section-body">
             <div class="admin-panels">
                                   <AdminOverview
-                  v-if="!selectedUser && !selectedOrg && (isMasterAdmin || isOrgAdmin)"
+                  v-if="!selectedUser && !selectedOrg && !currentOidcId && (isMasterAdmin || isOrgAdmin)"
                   ref="adminOverviewRef"
                   :info="info"
                   :orgs="orgs"
                   :permissions="permissions"
+                  :oidc-clients="oidcClients"
+                  :domains="domains"
+                  :current-rp-id="authStore.settings?.rp_id || ''"
                   :navigation-disabled="hasActiveModal"
                   :permission-summary="permissionSummary"
                   @create-org="createOrg"
@@ -783,6 +1003,12 @@ async function submitDialog() {
                   @open-dialog="openDialog"
                   @delete-permission="deletePermission"
                   @rename-permission-display="renamePermissionDisplay"
+                  @create-oidc-client="createOidcClient"
+                  @open-oidc-client="openOidcClient"
+                  @delete-oidc-client="deleteOidcClient"
+                  @create-domain="createDomain"
+                  @open-domain="openDomain"
+                  @delete-domain="deleteDomain"
                   @navigate-out="handlePanelNavigateOut"
                 />
 
@@ -796,9 +1022,7 @@ async function submitDialog() {
                   :show-reg-modal="showRegModal"
                   :navigation-disabled="hasActiveModal"
                   @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"
@@ -818,10 +1042,24 @@ async function submitDialog() {
                   @create-user-in-role="createUserInRole"
                   @open-user="openUser"
                   @toggle-role-permission="toggleRolePermission"
-                  @on-role-drag-over="onRoleDragOver"
+                  @move-user-to-role="moveUserToRoleFromDrag"
+                  @navigate-out="handlePanelNavigateOut"
+                />
+
+                <AdminOidcDetail
+                  v-else-if="currentOidcId && editingOidcClient"
+                  ref="adminOidcDetailRef"
+                  :client="editingOidcClient"
+                  :permissions="permissions"
+                  :domains="domains"
+                  :is-new="editingOidcClient.isNew"
+                  :navigation-disabled="hasActiveModal"
+                  @save="handleOidcSave"
+                  @cancel="handleOidcCancel"
+                  @delete="deleteOidcClient"
+                  @reset-secret="resetOidcSecret"
+                  @create-permission="createPermissionForClient"
                   @navigate-out="handlePanelNavigateOut"
-                  @on-role-drop="onRoleDrop"
-                  @on-user-drag-start="onUserDragStart"
                 />
 
               </div>
@@ -832,7 +1070,6 @@ async function submitDialog() {
     <AdminDialogs
       :dialog="dialog"
       :permission-id-pattern="PERMISSION_ID_PATTERN"
-      :settings="authStore.settings"
       @submit-dialog="submitDialog"
       @close-dialog="closeDialog"
     />
@@ -841,8 +1078,6 @@ async function submitDialog() {
 
 <style scoped>
 .view-admin { padding-bottom: var(--space-3xl); }
-.view-header { display: flex; flex-direction: column; gap: var(--space-sm); }
-.admin-section { margin-top: var(--space-xl); }
 .admin-section-body { display: flex; flex-direction: column; gap: var(--space-xl); }
 .admin-panels { display: flex; flex-direction: column; gap: var(--space-xl); }
 </style>

frontend/auth/restricted/RestrictedApi.vue

@@ -1,7 +1,39 @@
 <template>
+  <template v-if="authMode === 'profile'">
+    <!--
+      Profile mode: render nothing until the session check completes (avoids
+      a load-time flash of the wrong view). Without a session, the login flow
+      runs in place of the profile; on success auth-success is posted and the
+      host resolves profile() with 'login'.
+    -->
+    <RestrictedAuth
+      v-if="profileState === 'login'"
+      mode="login"
+      @authenticated="handleAuthenticated"
+      @back="handleBack"
+    />
+    <HostProfileView
+      v-else-if="profileState === 'ready'"
+      :ctx="profileCtx"
+      :user-info="profileInfo"
+      :settings="profileSettings"
+      @back="handleBack"
+      @logout="handleLogout"
+    />
+    <div v-else class="view-root profile-pending">
+      <div class="surface surface--tight">
+        <p class="view-lede">{{ profileState === 'error' ? 'Could not load your account.' : 'Loading your account…' }}</p>
+        <div class="button-row">
+          <button type="button" class="btn-secondary" @click="handleBack">Back</button>
+        </div>
+      </div>
+    </div>
+  </template>
   <RestrictedAuth
+    v-else
     :mode="authMode"
     :remote-auth-token="remoteAuthToken"
+    :oidc-query-string="oidcQueryString"
     @authenticated="handleAuthenticated"
     @back="handleBack"
   />
@@ -10,11 +42,18 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import RestrictedAuth from '@/components/RestrictedAuth.vue'
+import HostProfileView from '@/components/HostProfileView.vue'
+import { fetchJson, settings as paskiaSettings } from 'paskia'
+import { getSettings } from '@/utils/settings'
+import { updateThemeFromSession } from '@/utils/theme'
 
 // Check if this is a remote auth URL: /auth/{token}
 // The token is a 5-word passphrase like "word1.word2.word3.word4.word5"
 const remoteAuthToken = ref(null)
 
+// For OIDC flow, pass the raw query string to preserve exact param values
+const oidcQueryString = window.location.search.includes('client_id=') ? window.location.search : null
+
 function extractRemoteToken() {
   const path = window.location.pathname
   // Match /auth/{token} where token is a passphrase with dots
@@ -32,7 +71,42 @@ function extractRemoteToken() {
 
 // Parse URL hash fragment
 const hashParams = new URLSearchParams(window.location.hash.slice(1))
-const authMode = ['reauth', 'forbidden'].includes(hashParams.get('mode')) ? hashParams.get('mode') : 'login'
+
+// Determine auth mode based on URL path
+// - /auth/restricted/oidc: OIDC flow, no session dependency
+// - /auth/restricted/iframe: iframe embedding, mode from hash params
+// - Other paths: forward auth, mode from hash params
+let authMode
+if (window.location.pathname === '/auth/restricted/oidc') {
+  authMode = 'oidc'
+} else {
+  // Both iframe and forward auth use hash params for mode (forbidden/login/reauth/profile)
+  authMode = ['reauth', 'forbidden', 'profile'].includes(hashParams.get('mode')) ? hashParams.get('mode') : 'login'
+}
+
+// Profile mode state: 'loading' | 'login' | 'ready' | 'error'
+const profileState = ref('loading')
+const profileCtx = ref(null)
+const profileInfo = ref(null)
+const profileSettings = ref(null)
+
+async function loadProfile() {
+  try {
+    const [validateData, infoData, settingsData] = await Promise.all([
+      fetchJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms }),
+      fetchJson('/auth/api/user-info', { method: 'GET', timeout: paskiaSettings.auth_ms }),
+      getSettings()
+    ])
+    profileCtx.value = validateData.ctx
+    profileInfo.value = infoData
+    profileSettings.value = settingsData
+    updateThemeFromSession(validateData.ctx)
+    profileState.value = 'ready'
+  } catch (error) {
+    // No/expired session: run the login flow in place of the profile
+    profileState.value = error.status === 401 || error.status === 403 ? 'login' : 'error'
+  }
+}
 
 function postToParent(message) {
   if (window.parent && window.parent !== window) {
@@ -41,10 +115,15 @@ function postToParent(message) {
 }
 
 function handleAuthenticated(result) {
+  if (result.redirect_url) {
+    // OIDC flow: redirect to client with auth code
+    window.location.href = result.redirect_url
+    return
+  }
   postToParent({
     type: 'auth-success',
     authenticated: true,
-    sessionToken: result.session_token
+    exchangeCode: result.exchange_code
   })
 }
 
@@ -54,10 +133,18 @@ function handleBack() {
   })
 }
 
+function handleLogout() {
+  postToParent({
+    type: 'auth-logout'
+  })
+}
+
 onMounted(() => {
   // Check for remote auth token in URL
   remoteAuthToken.value = extractRemoteToken()
 
+  if (authMode === 'profile') loadProfile()
+
   postToParent({
     type: 'auth-ready'
   })
@@ -69,3 +156,15 @@ onMounted(() => {
   })
 })
 </script>
+
+<style scoped>
+.view-root.profile-pending { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
+.profile-pending .surface {
+  max-width: 520px;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
+</style>

frontend/auth/restricted/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en" style="background: transparent">
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script>{let t=localStorage.getItem('paskia-theme');if(t!=='light'&&t!=='dark')t=new URLSearchParams(location.hash.slice(1)).get('theme');(t==='dark'||t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark')}</script>
+    <script>{let t=new URLSearchParams(location.hash.slice(1)).get('theme');if(t!=='light'&&t!=='dark')t=localStorage.getItem('paskia-theme');(t==='dark'||t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark');if(window.location.pathname==='/auth/restricted/iframe')document.documentElement.style.background='transparent'}</script>
     <link rel="stylesheet" href="/src/assets/style.css">
   </head>
   <body>

frontend/auth/restricted/theme.js

@@ -1,9 +1,9 @@
-// Early theme for restricted app - first URL param wins, then localStorage
+// Early theme for restricted app - user preference (localStorage) wins, then URL param
 import { applyTheme, getCachedTheme } from '@/utils/theme.js'
 
 function getTheme() {
   const params = new URLSearchParams(location.hash.slice(1))
-  return params.get('theme') || getCachedTheme() || ''
+  return getCachedTheme() || params.get('theme') || ''
 }
 
 // Apply theme class to document root

frontend/int/forward/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Access Restricted</title>
+    <script>(localStorage.getItem('paskia-theme')==='dark'||localStorage.getItem('paskia-theme')!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark')</script>
   </head>
   <body>
     <div id="app"></div>

frontend/int/reset/ResetApp.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="app-shell">
-    <div v-if="status.show" class="global-status" style="display: block;">
+    <div v-if="status.show" class="global-status show">
       <div :class="['status', status.type]">
         {{ status.message }}
       </div>
     </div>
 
     <main class="view-root">
-      <div class="surface surface--tight" style="max-width: 560px; margin: 0 auto; width: 100%;">
-        <header class="view-header" style="text-align: center;">
+      <div class="surface surface--tight reset-container">
+        <header class="view-header center">
           <h1>🔑 Registration</h1>
           <p class="view-lede">
             {{ subtitleMessage }}
@@ -23,7 +23,7 @@
 
         <section class="section-block" v-else-if="!canRegister">
           <div class="section-body center">
-            <div class="button-row center" style="justify-content: center;">
+            <div class="button-row button-row--center">
               <button class="btn-secondary" @click="goHome">Return to sign-in</button>
             </div>
           </div>
@@ -59,7 +59,8 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings, uiBasePath } from '@/utils/settings'
-import { apiJson, ApiError, getUserFriendlyErrorMessage } from 'paskia'
+import { apiJson, ApiError, getUserFriendlyErrorMessage, settings as paskiaSettings } from 'paskia'
+import { updateThemeFromSession } from '@/utils/theme'
 
 const status = reactive({
   show: false,
@@ -80,7 +81,7 @@ const sessionDescriptor = computed(() => tokenInfo.value?.token_type || 'your en
 const subtitleMessage = computed(() => {
   if (initializing.value) return 'Preparing your secure enrollment…'
   if (!canRegister.value) return 'This authentication link is no longer valid.'
-  return `Finish up ${sessionDescriptor.value}. You may edit the name below if needed, and it will be saved to your passkey.`
+  return `Finish up ${sessionDescriptor.value}. The name entered will be stored on your passkey and on our system.`
 })
 
 const basePath = computed(() => uiBasePath())
@@ -117,6 +118,7 @@ async function fetchTokenInfo() {
       headers: { 'Authorization': `Bearer ${token.value}` },
     })
     displayName.value = tokenInfo.value.display_name
+    if (tokenInfo.value.theme) updateThemeFromSession({ user: { theme: tokenInfo.value.theme } })
   } catch (error) {
     console.error('Failed to load token info', error)
     const message = error instanceof ApiError
@@ -144,7 +146,7 @@ async function registerPasskey() {
   }
 
   try {
-    await setSessionCookie(result)
+    await exchangeCode(result)
   } catch (error) {
     loading.value = false
     const message = error?.message || 'Failed to establish session'
@@ -156,15 +158,14 @@ async function registerPasskey() {
   setTimeout(() => { loading.value = false; goHome() }, 800)
 }
 
-async function setSessionCookie(result) {
-  if (!result?.session_token) {
-    throw new Error('Registration response missing session_token')
+async function exchangeCode(result) {
+  if (!result?.exchange_code) {
+    throw new Error('Registration response missing exchange_code')
   }
   return await apiJson('/auth/api/set-session', {
     method: 'POST',
-    headers: {
-      Authorization: `Bearer ${result.session_token}`
-    }
+    headers: { 'Authorization': `Bearer ${result.exchange_code}` },
+    timeout: paskiaSettings.auth_ms,
   })
 }
 
@@ -203,13 +204,14 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.center {
-  text-align: center;
-}
-
-.button-row.center {
+main.view-root { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
+.reset-container {
+  max-width: 520px;
+  margin: 0 auto;
+  width: 100%;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  gap: 1.75rem;
 }
 
 .section-body {

frontend/int/reset/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Complete Passkey Setup</title>
+    <script>(localStorage.getItem('paskia-theme')==='dark'||localStorage.getItem('paskia-theme')!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark')</script>
   </head>
   <body>
     <div id="app"></div>

frontend/package.json

@@ -14,7 +14,9 @@
     "pinia": "^3.0.3",
     "qrcode": "^1.5.4",
     "sirv": "^3.0.2",
-    "vue": "^3.5.17"
+    "uuidv7": "^1.1.0",
+    "vue": "^3.5.17",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",

frontend/src/admin/AdminDialogs.vue

@@ -1,117 +1,78 @@
 <script setup>
-import { computed } from 'vue'
-import Modal from '@/components/Modal.vue'
-import NameEditForm from '@/components/NameEditForm.vue'
+// Dispatcher: renders the dialog component matching dialog.type. Each
+// dialog component carries its own title and content.
+import OrgCreateDialog from './dialogs/OrgCreateDialog.vue'
+import OrgUpdateDialog from './dialogs/OrgUpdateDialog.vue'
+import RoleCreateDialog from './dialogs/RoleCreateDialog.vue'
+import RoleUpdateDialog from './dialogs/RoleUpdateDialog.vue'
+import UserCreateDialog from './dialogs/UserCreateDialog.vue'
+import UserUpdateNameDialog from './dialogs/UserUpdateNameDialog.vue'
+import PermissionDialog from './dialogs/PermissionDialog.vue'
+import DomainEditDialog from './dialogs/DomainEditDialog.vue'
+import ConfirmDialog from './dialogs/ConfirmDialog.vue'
 
-const props = defineProps({
+defineProps({
   dialog: Object,
-  PERMISSION_ID_PATTERN: String,
-  settings: Object
+  PERMISSION_ID_PATTERN: String
 })
 
-const emit = defineEmits(['submitDialog', 'closeDialog'])
-
-const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'])
-const rpId = computed(() => props.settings?.rp_id || 'the configured domain')
+defineEmits(['submitDialog', 'closeDialog'])
 </script>
 
 <template>
-  <Modal v-if="dialog.type" @close="$emit('closeDialog')">
-      <h3 class="modal-title">
-        <template v-if="dialog.type==='org-create'">Create Organization</template>
-        <template v-else-if="dialog.type==='org-update'">Rename Organization</template>
-        <template v-else-if="dialog.type==='role-create'">Create Role</template>
-        <template v-else-if="dialog.type==='role-update'">Edit Role</template>
-        <template v-else-if="dialog.type==='user-create'">Add User To Role</template>
-        <template v-else-if="dialog.type==='user-update-name'">Edit User Name</template>
-        <template v-else-if="dialog.type==='perm-create' || dialog.type==='perm-display'">{{ dialog.type === 'perm-create' ? 'Create Permission' : 'Edit Permission' }}</template>
-        <template v-else-if="dialog.type==='confirm'">Confirm</template>
-      </h3>
-      <form @submit.prevent="$emit('submitDialog')" class="modal-form">
-        <template v-if="dialog.type==='org-create'">
-          <label>Name
-            <input ref="nameInput" v-model="dialog.data.name" required />
-          </label>
-        </template>
-        <template v-else-if="dialog.type==='org-update'">
-          <NameEditForm
-            label="Organization Name"
-            v-model="dialog.data.name"
-            :busy="dialog.busy"
-            :error="dialog.error"
-            @cancel="$emit('closeDialog')"
-          />
-        </template>
-        <template v-else-if="dialog.type==='role-create'">
-          <label>Role Name
-            <input v-model="dialog.data.name" placeholder="Role name" required />
-          </label>
-        </template>
-        <template v-else-if="dialog.type==='role-update'">
-          <NameEditForm
-            label="Role Name"
-            v-model="dialog.data.name"
-            :busy="dialog.busy"
-            :error="dialog.error"
-            @cancel="$emit('closeDialog')"
-          />
-        </template>
-        <template v-else-if="dialog.type==='user-create'">
-          <p class="small muted">Role: {{ dialog.data.role.display_name }}</p>
-          <label>Display Name
-            <input v-model="dialog.data.name" placeholder="User display name" required />
-          </label>
-        </template>
-        <template v-else-if="dialog.type==='user-update-name'">
-          <NameEditForm
-            label="Display Name"
-            v-model="dialog.data.name"
-            :busy="dialog.busy"
-            :error="dialog.error"
-            @cancel="$emit('closeDialog')"
-          />
-        </template>
-        <template v-else-if="dialog.type==='perm-create' || dialog.type==='perm-display'">
-          <label>Display Name
-            <input ref="displayNameInput" v-model="dialog.data.display_name" required />
-          </label>
-          <label>Permission Scope
-            <input v-model="dialog.data.scope" :placeholder="dialog.type === 'perm-create' ? 'yourapp:permission' : dialog.data.permission.scope" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" data-form-type="other" />
-          </label>
-          <p class="small muted">E.g. yourapp:reports. Changing the scope name may break deployed applications.</p>
-          <label>Domain Scope
-            <input v-model="dialog.data.domain" placeholder="e.g. app.example.com" data-form-type="other" />
-          </label>
-          <p class="small muted">If set, this permission is effective only on the specified domain, which can be {{ rpId }} or its subdomain.</p>
-        </template>
-        <template v-else-if="dialog.type==='confirm'">
-          <p>{{ dialog.data.message }}</p>
-        </template>
-        <div v-if="dialog.error && !NAME_EDIT_TYPES.has(dialog.type)" class="error small">{{ dialog.error }}</div>
-        <div v-if="!NAME_EDIT_TYPES.has(dialog.type)" class="modal-actions">
-          <button
-            type="button"
-            class="btn-secondary"
-            @click="$emit('closeDialog')"
-            :disabled="dialog.busy"
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            class="btn-primary"
-            :disabled="dialog.busy"
-          >
-            {{ dialog.type==='confirm' ? 'OK' : 'Save' }}
-          </button>
-        </div>
-      </form>
-  </Modal>
+  <OrgCreateDialog
+    v-if="dialog.type === 'org-create'"
+    :dialog="dialog"
+    @submit="$emit('submitDialog')"
+    @close="$emit('closeDialog')"
+  />
+  <OrgUpdateDialog
+    v-else-if="dialog.type === 'org-update'"
+    :dialog="dialog"
+    @submit="$emit('submitDialog')"
+    @close="$emit('closeDialog')"
+  />
+  <RoleCreateDialog
+    v-else-if="dialog.type === 'role-create'"
+    :dialog="dialog"
+    @submit="$emit('submitDialog')"
+    @close="$emit('closeDialog')"
+  />
+  <RoleUpdateDialog
+    v-else-if="dialog.type === 'role-update'"
+    :dialog="dialog"
+    @submit="$emit('submitDialog')"
+    @close="$emit('closeDialog')"
+  />
+  <UserCreateDialog
+    v-else-if="dialog.type === 'user-create'"
+    :dialog="dialog"
+    @submit="$emit('submitDialog')"
+    @close="$emit('closeDialog')"
+  />
+  <UserUpdateNameDialog
+    v-else-if="dialog.type === 'user-update-name'"
+    :dialog="dialog"
+    @submit="$emit('submitDialog')"
+    @close="$emit('closeDialog')"
+  />
+  <PermissionDialog
+    v-else-if="dialog.type === 'perm-create' || dialog.type === 'perm-display'"
+    :dialog="dialog"
+    :permission-id-pattern="PERMISSION_ID_PATTERN"
+    @submit="$emit('submitDialog')"
+    @close="$emit('closeDialog')"
+  />
+  <DomainEditDialog
+    v-else-if="dialog.type === 'domain-edit'"
+    :dialog="dialog"
+    @submit="$emit('submitDialog')"
+    @close="$emit('closeDialog')"
+  />
+  <ConfirmDialog
+    v-else-if="dialog.type === 'confirm'"
+    :dialog="dialog"
+    @submit="$emit('submitDialog')"
+    @close="$emit('closeDialog')"
+  />
 </template>
-
-<style scoped>
-.error { color: var(--color-danger-text); }
-.small { font-size: 0.9rem; }
-.muted { color: var(--color-text-muted); }
-.optional { font-weight: normal; color: var(--color-text-muted); font-size: 0.85em; }
-</style>

frontend/src/admin/AdminOidcDetail.vue

@@ -0,0 +1,323 @@
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { getDirection, navigateButtonRow } from '@/utils/keynav'
+import { useAuthStore } from '@/stores/auth'
+
+const props = defineProps({
+  client: Object,
+  permissions: Array,
+  domains: Array,
+  isNew: { type: Boolean, default: false },
+  navigationDisabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['save', 'cancel', 'delete', 'resetSecret', 'createPermission', 'navigateOut'])
+
+const authStore = useAuthStore()
+const headerRef = ref(null)
+
+// Helper function to build URLs
+function authSitePath(path) {
+  const url = new URL(authStore.settings.auth_site_url)
+  url.pathname = path
+  return url.toString()
+}
+
+// Local form state
+const name = ref('')
+const redirectUris = ref('')
+const clientSecret = ref(null)
+
+// Computed
+const clientId = computed(() => props.client?.client_id || props.client?.uuid || '')
+// One discovery URL per domain (the OIDC provider is instance-global;
+// any configured host works — the RP must use its chosen one consistently)
+const discoveryUrls = computed(() => {
+  const origins = new Set()
+  for (const d of props.domains || []) {
+    const url = d.site_url && new URL(d.site_url)
+    if (url) origins.add(url.origin)
+  }
+  if (!origins.size) origins.add(new URL(authStore.settings.auth_site_url).origin)
+  return [...origins].sort().map(o => `${o}/.well-known/openid-configuration`)
+})
+const iconUrl = computed(() => authSitePath('/favicon.ico'))
+
+// Groups (permissions) scoped to this client
+const clientGroups = computed(() => {
+  if (!props.client || !props.permissions) return []
+  const clientUuid = props.client.uuid || props.client.client_id
+  return props.permissions.filter(p => p.domain === clientUuid).sort((a, b) => a.scope.localeCompare(b.scope))
+})
+
+// Initialize form data from props
+watch(() => props.client, (c) => {
+  if (c) {
+    name.value = c.name || ''
+    redirectUris.value = Array.isArray(c.redirect_uris) ? c.redirect_uris.join('\n') : (c.redirect_uris || '')
+    clientSecret.value = c.client_secret || null
+  }
+}, { immediate: true })
+
+// Copy-to-clipboard helper
+function copyText(value, label) {
+  navigator.clipboard.writeText(value).then(() => {
+    authStore.showMessage(`${label} copied to clipboard`, 'success', 1500)
+  })
+}
+
+function handleResetSecret() {
+  emit('resetSecret', clientId.value)
+}
+
+// When parent resets secret, update local state
+watch(() => props.client?.client_secret, (newSecret) => {
+  if (newSecret) {
+    clientSecret.value = newSecret
+  }
+})
+
+function handleSave() {
+  const trimmedName = name.value.trim()
+  if (!trimmedName) {
+    authStore.showMessage('Client name is required', 'error')
+    return
+  }
+  const uris = redirectUris.value.trim()
+  const redirect_uris = uris ? uris.split('\n').map(u => u.trim()).filter(u => u) : []
+
+  emit('save', {
+    client_id: clientId.value,
+    client_secret: clientSecret.value,
+    name: trimmedName,
+    redirect_uris,
+    isNew: props.isNew
+  })
+}
+
+function handleDelete() {
+  emit('delete', props.client)
+}
+
+function handleCreatePermission() {
+  emit('createPermission', clientId.value)
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+// Keyboard navigation
+function handleHeaderKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(headerRef.value, event.target, direction, { itemSelector: 'button, a' })
+  } else if (direction === 'up') {
+    emit('navigateOut', 'up')
+  }
+}
+
+function focusFirstElement() {
+  const firstFocusable = headerRef.value?.querySelector('button, a, input')
+  if (firstFocusable) firstFocusable.focus()
+}
+
+defineExpose({ focusFirstElement })
+</script>
+
+<template>
+  <div class="oidc-detail">
+    <form @submit.prevent="handleSave" class="oidc-form">
+      <!-- Client credentials section -->
+      <section class="section-block">
+        <div class="section-header">
+          <h2>Client Configuration</h2>
+          <p class="section-description">Configure these values in the client application.</p>
+        </div>
+        <div class="section-body">
+
+        <dl class="oidc-dl">
+          <dt>Authentication Name</dt>
+          <dd>
+            <output @click="copyText(authStore.settings.rp_name, 'Authentication Name')" title="Click to copy">{{ authStore.settings.rp_name }}</output>
+            <span class="small muted"> (Login With, may affect URLs – optional)</span>
+          </dd>
+
+          <dt>Client ID</dt>
+          <dd><output @click="copyText(clientId, 'Client ID')" title="Click to copy">{{ clientId }}</output></dd>
+
+          <dt>Client Secret <button v-if="!clientSecret" type="button" class="icon-btn" @click="handleResetSecret" title="Revoke and re-generate secret">🔄</button></dt>
+          <dd>
+            <output v-if="clientSecret" @click="copyText(clientSecret, 'Client Secret')" title="Click to copy">{{ clientSecret }}</output>
+            <span v-else class="small muted">(only stored in hashed form)</span>
+          </dd>
+
+          <dt class="discovery-dt">Auto Discovery URL
+            <span v-if="discoveryUrls.length > 1" class="small muted">Any one — pick the site your users should log in on, and use it consistently.</span>
+          </dt>
+          <dd class="discovery-dd">
+            <span class="discovery-urls">
+              <output v-for="url in discoveryUrls" :key="url" @click="copyText(url, 'OpenID Connect Auto Discovery URL')" title="Click to copy">{{ url }}</output>
+            </span>
+          </dd>
+
+          <dt>Icon URL</dt>
+          <dd>
+            <output @click="copyText(iconUrl, 'Icon URL')" title="Click to copy">{{ iconUrl }}</output>
+            <span class="small muted"> (optional)</span>
+          </dd>
+
+
+          <template v-if="clientGroups.length">
+            <dt>Groups Claim Name</dt>
+            <dd>
+              <output @click="copyText('groups', 'Groups Claim Name')" title="Click to copy">groups</output>
+            </dd>
+          </template>
+
+          <dt>Groups <button type="button" class="icon-btn" @click="handleCreatePermission" title="Add permission scoped to this client">➕</button></dt>
+          <dd class="oidc-groups">
+            <template v-if="clientGroups.length">
+              <output v-for="group in clientGroups" :key="group.uuid" class="oidc-group" @click="copyText(group.scope, 'Group Value')" :title="group.display_name">{{ group.scope }}</output>
+            </template>
+            <span v-else class="small muted">(no permissions defined)</span>
+          </dd>
+        </dl>
+
+        <span class="warning-text">
+          <strong v-if="clientSecret">⚠️ {{ isNew ? 'Save the secret now — it cannot be retrieved later.' : 'Saving will prevent access with the old secret.' }}</strong>
+          <span v-else>ℹ️ The client may use groups to check for required permissions.</span>
+        </span>
+        </div>
+      </section>
+
+      <!-- Editable fields -->
+      <section class="section-block">
+        <div class="section-header">
+          <h2>Paskia Configuration</h2>
+        </div>
+        <div class="section-body">
+        <label>Client Name
+          <input v-model="name" required />
+        </label>
+
+        <label>Redirect URIs
+          <p class="small muted">This should be provided by the client application.</p>
+          <textarea v-model="redirectUris" placeholder="(autodiscover one on first use)" rows="3"></textarea>
+        </label>
+        </div>
+      </section>
+
+      <!-- Actions -->
+      <div class="oidc-actions">
+        <button type="button" class="btn-secondary" @click="handleCancel">Cancel</button>
+        <button v-if="!isNew" type="button" class="btn-danger" @click="handleDelete">Delete Client</button>
+        <button type="submit" class="btn-primary">Save</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.oidc-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.oidc-header {
+  margin-bottom: 0;
+}
+
+.oidc-header h2 {
+  margin: 0;
+}
+
+.oidc-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.oidc-dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.3rem 1rem;
+  align-items: baseline;
+  margin: var(--space-sm) 0;
+}
+
+.oidc-dl dt {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.oidc-dl dd {
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: baseline;
+  gap: 0.5em;
+}
+
+.oidc-dl output {
+  font-family: var(--font-mono, monospace);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.discovery-dt {
+  white-space: normal;
+  max-width: 20em;
+}
+
+.discovery-dt .small {
+  display: block;
+  font-weight: normal;
+}
+
+.discovery-dd {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.25rem;
+}
+
+.discovery-urls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.warning-text {
+  display: block;
+  font-size: 0.9rem;
+  min-height: 1.4em;
+}
+
+.oidc-group { display: block; }
+.oidc-group { white-space: normal; word-break: break-all; }
+
+.section-body label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  font-weight: 500;
+}
+
+.oidc-actions {
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+  margin-top: var(--space-md);
+}
+</style>

frontend/src/admin/AdminOrgDetail.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue'
+import draggable from 'vuedraggable'
+import ProfilePicture from '@/components/ProfilePicture.vue'
 import { getDirection, navigateButtonRow, focusPreferred } from '@/utils/keynav'
 
 const props = defineProps({
@@ -8,7 +10,7 @@ const props = defineProps({
   navigationDisabled: { type: Boolean, default: false }
 })
 
-const emit = defineEmits(['updateOrg', 'createRole', 'updateRole', 'deleteRole', 'createUserInRole', 'openUser', 'toggleRolePermission', 'onRoleDragOver', 'onRoleDrop', 'onUserDragStart', 'navigateOut'])
+const emit = defineEmits(['updateOrg', 'createRole', 'updateRole', 'deleteRole', 'createUserInRole', 'openUser', 'toggleRolePermission', 'moveUserToRole', 'navigateOut'])
 
 // Template refs for navigation
 const orgTitleRef = ref(null)
@@ -16,7 +18,8 @@ const permMatrixRef = ref(null)
 const rolesGridRef = ref(null)
 
 const sortedRoles = computed(() => {
-  return [...props.selectedOrg.roles].sort((a, b) => {
+  // o.roles is dict[UUID, Role], convert to array for sorting with uuid added
+  return Object.entries(props.selectedOrg.roles).map(([uuid, r]) => ({ uuid, ...r })).sort((a, b) => {
     const nameA = a.display_name.toLowerCase()
     const nameB = b.display_name.toLowerCase()
     if (nameA !== nameB) {
@@ -28,12 +31,45 @@ const sortedRoles = computed(() => {
 
 // Get org's grantable permissions as full permission objects (with UUIDs)
 const orgPermissions = computed(() => {
-  const uuidSet = new Set(props.selectedOrg.permissions || [])
+  // props.selectedOrg.permissions is dict[UUID, Permission]
+  const uuidSet = new Set(Object.keys(props.selectedOrg.permissions || {}))
   return props.permissions.filter(p => uuidSet.has(p.uuid))
 })
 
-function permissionDisplayName(scope) {
-  return props.permissions.find(p => p.scope === scope)?.display_name || scope
+// Get users for a role as sorted array of { uuid, ...user }
+function getNormalizedName(name) {
+  let cleaned = name.replace(/\([^)]*\)/g, '').trim();
+  if (cleaned.includes(',')) {
+    return cleaned.toLowerCase();
+  } else {
+    const parts = cleaned.split(/\s+/);
+    const last = parts.pop();
+    const first = parts.join(' ');
+    return `${last}, ${first}`.toLowerCase();
+  }
+}
+
+function roleUsers(roleUuid) {
+  return Object.entries(props.selectedOrg.users)
+    .filter(([_, u]) => u.role === roleUuid)
+    .map(([uuid, u]) => ({ uuid, ...u }))
+    .sort((a, b) => {
+      const normA = getNormalizedName(a.display_name);
+      const normB = getNormalizedName(b.display_name);
+      return normA.localeCompare(normB);
+    })
+}
+
+function roleUserCount(roleUuid) {
+  return Object.values(props.selectedOrg.users).filter(u => u.role === roleUuid).length
+}
+
+function onUserChange(evt, targetRoleUuid) {
+  // Only handle 'added' events (when a user is dropped into this role)
+  if (evt.added) {
+    const userUuid = evt.added.element.uuid
+    emit('moveUserToRole', userUuid, targetRoleUuid)
+  }
 }
 
 function toggleRolePermission(role, pid, checked) {
@@ -83,7 +119,7 @@ function handleMatrixKeydown(event) {
 
   // Calculate grid dimensions
   const cols = sortedRoles.value.length
-  const rows = props.selectedOrg.permissions.length
+  const rows = Object.keys(props.selectedOrg.permissions).length
 
   const currentRow = Math.floor(currentIndex / cols)
   const currentCol = currentIndex % cols
@@ -219,7 +255,7 @@ function handleRoleHeaderKeydown(event, roleIndex) {
     if (checkboxes?.length) {
       // Focus the checkbox in the corresponding column
       const cols = sortedRoles.value.length
-      const rows = props.selectedOrg.permissions.length
+      const rows = Object.keys(props.selectedOrg.permissions).length
       const targetIndex = (rows - 1) * cols + roleIndex
       if (checkboxes[targetIndex]) checkboxes[targetIndex].focus()
       else checkboxes[checkboxes.length - 1].focus()
@@ -287,7 +323,7 @@ defineExpose({ focusFirstElement })
 
 <template>
   <h2 class="org-title" ref="orgTitleRef" @keydown="handleTitleKeydown" :title="selectedOrg.uuid">
-    <span class="org-name">{{ selectedOrg.display_name }}</span>
+    <span class="org-name">{{ selectedOrg.org.display_name }}</span>
     <button @click="$emit('updateOrg', selectedOrg)" class="icon-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
   </h2>
 
@@ -317,7 +353,7 @@ defineExpose({ focusFirstElement })
             >
               <input
                 type="checkbox"
-                :checked="r.permissions.includes(p.uuid)"
+                :checked="p.uuid in (r.permissions || {})"
                 @change="e => toggleRolePermission(r, p.uuid, e.target.checked)"
               />
             </div>
@@ -332,84 +368,87 @@ defineExpose({ focusFirstElement })
         v-for="(r, roleIndex) in sortedRoles"
         :key="r.uuid"
         class="role-column"
-        @dragover="$emit('onRoleDragOver', $event)"
-        @drop="e => $emit('onRoleDrop', e, selectedOrg, r)"
       >
         <div class="role-header" @keydown="e => handleRoleHeaderKeydown(e, roleIndex)">
           <strong class="role-name" :title="r.uuid">
             <span>{{ r.display_name }}</span>
             <button @click="$emit('updateRole', r)" class="icon-btn" aria-label="Edit role" title="Edit role">✏️</button>
-            <button v-if="r.users.length === 0" @click="$emit('deleteRole', r)" class="icon-btn delete-icon" aria-label="Delete role" title="Delete role">❌</button>
+            <button v-if="roleUserCount(r.uuid) === 0" @click="$emit('deleteRole', r)" class="icon-btn delete-icon" aria-label="Delete role" title="Delete role">❌</button>
           </strong>
           <div class="role-actions">
             <button @click="$emit('createUserInRole', selectedOrg, r)" class="plus-btn" aria-label="Add user" title="Add user">➕</button>
           </div>
         </div>
-        <template v-if="r.users.length > 0">
-          <ul class="user-list" @keydown="handleUserListKeydown">
-            <li
-              v-for="u in r.users.slice().sort((a, b) => {
-                const nameA = a.display_name.toLowerCase()
-                const nameB = b.display_name.toLowerCase()
-                if (nameA !== nameB) {
-                  return nameA.localeCompare(nameB)
-                }
-                return a.uuid.localeCompare(b.uuid)
-              })"
-              :key="u.uuid"
-              class="user-chip"
-              tabindex="0"
-              draggable="true"
-              @dragstart="e => $emit('onUserDragStart', e, u, selectedOrg.uuid)"
-              @click="$emit('openUser', u)"
-              @keydown.enter="$emit('openUser', u)"
-              :title="u.uuid"
-            >
-              <span class="name">{{ u.display_name }}</span>
-              <span class="meta">{{ u.last_seen ? new Date(u.last_seen).toLocaleDateString() : '—' }}</span>
-            </li>
-          </ul>
-        </template>
-        <div v-else class="empty-role">
-          <p class="empty-text muted">No members</p>
+        <div class="user-list-wrapper">
+          <draggable
+            :list="roleUsers(r.uuid)"
+            group="users"
+            item-key="uuid"
+            tag="ul"
+            class="user-list"
+            @change="evt => onUserChange(evt, r.uuid)"
+            @keydown="handleUserListKeydown"
+          >
+            <template #item="{ element: u }">
+              <li
+                class="user-chip"
+                tabindex="0"
+                @click="$emit('openUser', u)"
+                @keydown.enter="$emit('openUser', u)"
+                :title="u.uuid"
+              >
+                <ProfilePicture
+                  class="user-chip-picture"
+                  :src="u.avatar_url"
+                  :title="u.display_name"
+                  width="3.25rem"
+                  height="100%"
+                  radius="0"
+                  fallback-size="1.3rem"
+                />
+                <span class="user-chip-body">
+                  <span class="name">{{ u.display_name }}</span>
+                  <span class="meta">{{ u.last_seen ? new Date(u.last_seen).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '—' }}</span>
+                </span>
+              </li>
+            </template>
+          </draggable>
+          <div v-if="roleUserCount(r.uuid) === 0" class="empty-role">
+            <p class="empty-text muted">No members</p>
+          </div>
         </div>
       </div>
     </div>
+    <p v-if="sortedRoles.length >= 2" class="roles-hint muted">Members can be drag&dropped to different roles.</p>
 </template>
 
 <style scoped>
 .card.surface { padding: var(--space-lg); }
-.org-title { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
-.org-name { font-size: 1.5rem; font-weight: 600; color: var(--color-heading); }
-.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-wrapper { margin: var(--space-md) 0; padding: var(--space-lg); }
-.matrix-scroll { overflow-x: auto; }
-.matrix-hint { font-size: 0.8rem; color: var(--color-text-muted); }
-.perm-matrix-grid { display: inline-grid; gap: 0.25rem; align-items: stretch; }
-.perm-matrix-grid > * { padding: 0.35rem 0.45rem; font-size: 0.75rem; }
-.perm-matrix-grid .grid-head { color: var(--color-text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
-.perm-matrix-grid .perm-head { display: flex; align-items: flex-end; justify-content: flex-start; padding: 0.35rem 0.45rem; font-size: 0.75rem; }
+.org-title { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-size: 1.65rem; }
+.org-name { font-weight: 600; color: var(--color-heading); }
 .perm-matrix-grid .role-head { display: flex; align-items: flex-end; justify-content: center; }
 .perm-matrix-grid .role-head span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.65rem; }
 .perm-matrix-grid .add-role-head { cursor: pointer; }
-.perm-name { font-weight: 600; color: var(--color-heading); padding: 0.35rem 0.45rem; font-size: 0.75rem; }
-.roles-grid { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); }
-.role-column { flex: 1; min-width: 200px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
+.roles-grid { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--space-lg); justify-content: flex-start; align-items: stretch; }
+.role-column { flex: 0 0 17em; border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; }
 .role-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
 .role-name { display: flex; align-items: center; gap: var(--space-xs); font-size: 1.1rem; color: var(--color-heading); }
 .role-actions { display: flex; gap: var(--space-xs); }
-.plus-btn { background: var(--color-accent-soft); color: var(--color-accent); border: none; border-radius: var(--radius-sm); padding: 0.25rem 0.45rem; font-size: 1.1rem; cursor: pointer; }
+.plus-btn { background: none; color: var(--color-accent); border: none; border-radius: var(--radius-sm); padding: 0.25rem 0.45rem; font-size: 1.1rem; cursor: pointer; }
 .plus-btn:hover { background: rgba(37, 99, 235, 0.18); }
-.user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
-.user-chip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; display: flex; justify-content: space-between; gap: var(--space-sm); cursor: grab; }
+.user-list-wrapper { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 5.5rem; }
+.user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
+.user-chip { background: var(--color-accent-strong); color: var(--color-accent-contrast); border: none; border-radius: var(--radius-md); padding: 0; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: stretch; gap: 0; cursor: grab; overflow: hidden; min-height: 3.25rem; }
 .user-chip:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
-.user-chip .meta { font-size: 0.7rem; color: var(--color-text-muted); }
-.empty-role { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
+.user-chip-picture { align-self: stretch; }
+.user-chip-body { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.45rem 0.6rem; }
+.user-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.user-chip .meta { font-size: 0.7rem; opacity: 0.85; }
+.user-chip.sortable-ghost { opacity: 0.5; }
+.user-chip.sortable-chosen { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
+.empty-role { position: absolute; inset: 0; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.user-list:has(.sortable-ghost) + .empty-role { display: none; }
 .empty-text { margin: 0; }
-.delete-icon { color: var(--color-danger); }
-.delete-icon:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }
-.muted { color: var(--color-text-muted); }
 
 @media (max-width: 720px) {
   .roles-grid { flex-direction: column; }

frontend/src/admin/AdminOverview.vue

@@ -1,19 +1,22 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { getDirection, navigateButtonRow, focusPreferred, focusAtIndex } from '@/utils/keynav'
+import { formatDate, originDisplayEntries } from '@/utils/helpers'
 
 const props = defineProps({
   info: Object,
   orgs: Array,
   permissions: Array,
+  oidcClients: Array,
+  domains: Array,
+  currentRpId: { type: String, default: '' },
   permissionSummary: Object,
   navigationDisabled: { type: Boolean, default: false }
 })
 
-const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay', 'navigateOut'])
+const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay', 'createOidcClient', 'openOidcClient', 'deleteOidcClient', 'createDomain', 'openDomain', 'deleteDomain', 'navigateOut'])
 
 // Template refs for navigation
-const orgSection = ref(null)
 const orgActionsRef = ref(null)
 const orgTableRef = ref(null)
 const permMatrixRef = ref(null)
@@ -21,27 +24,61 @@ const permActionsRef = ref(null)
 const permTableRef = ref(null)
 
 const sortedOrgs = computed(() => [...props.orgs].sort((a,b)=> {
-  const nameCompare = a.display_name.localeCompare(b.display_name)
+  const nameCompare = a.org.display_name.localeCompare(b.org.display_name)
   return nameCompare !== 0 ? nameCompare : a.uuid.localeCompare(b.uuid)
 }))
+
+// Map OIDC client UUIDs to display names for permission domain column
+const oidcClientNames = computed(() => {
+  const map = {}
+  for (const c of props.oidcClients || []) map[c.uuid] = c.name
+  return map
+})
+function domainDisplay(domain) {
+  if (!domain) return '—'
+  return oidcClientNames.value[domain] || domain
+}
+
+// Domains display in alphabetical rp-id order.
+const sortedDomains = computed(() =>
+  [...(props.domains || [])].sort((a, b) => a.rp_id.localeCompare(b.rp_id))
+)
+
+// Map OIDC client UUIDs to their group permissions (sorted by scope)
+const clientGroups = computed(() => {
+  const map = {}
+  for (const p of props.permissions || []) {
+    if (p.domain) {
+      if (!map[p.domain]) map[p.domain] = []
+      map[p.domain].push(p)
+    }
+  }
+  // Sort each group array by scope
+  for (const key in map) {
+    map[key].sort((a, b) => a.scope.localeCompare(b.scope))
+  }
+  return map
+})
+
 const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.scope.localeCompare(b.scope)))
 
 // Derive admin status from permissions (info contains ctx from validate response)
 const isMasterAdmin = computed(() => props.info?.ctx.permissions.includes('auth:admin'))
 const isOrgAdmin = computed(() => props.info?.ctx.permissions.includes('auth:org:admin'))
 
-function permissionDisplayName(scope) {
-  return props.permissions.find(p => p.scope === scope)?.display_name || scope
-}
-
 function getRoleNames(org) {
-  return org.roles
+  // org.roles is dict[UUID, Role]
+  return Object.values(org.roles)
     .slice()
     .sort((a, b) => a.display_name.localeCompare(b.display_name))
     .map(r => r.display_name)
     .join(', ')
 }
 
+function orgUserCount(org) {
+  return Object.keys(org.users).length
+}
+
 // Table navigation for both org and permissions tables
 function handleTableKeydown(event, tableType) {
   if (props.navigationDisabled) return
@@ -265,11 +302,11 @@ defineExpose({ focusFirstElement })
       <tbody>
         <tr v-for="o in sortedOrgs" :key="o.uuid">
           <td>
-            <a href="#org/{{o.uuid}}" @click.prevent="$emit('openOrg', o)">{{ o.display_name }}</a>
+            <a href="#org/{{o.uuid}}" @click.prevent="$emit('openOrg', o)">{{ o.org.display_name }}</a>
             <button v-if="isMasterAdmin || isOrgAdmin" @click="$emit('updateOrg', o)" class="icon-btn edit-org-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
           </td>
           <td class="role-names">{{ getRoleNames(o) }}</td>
-          <td class="center">{{ o.roles.reduce((acc,r)=>acc + r.users.length,0) }}</td>
+          <td class="center">{{ orgUserCount(o) }}</td>
           <td v-if="isMasterAdmin" class="center">
             <button @click="$emit('deleteOrg', o)" class="icon-btn delete-icon" aria-label="Delete organization" title="Delete organization">❌</button>
           </td>
@@ -291,9 +328,9 @@ defineExpose({ focusFirstElement })
             v-for="o in sortedOrgs"
             :key="'head-' + o.uuid"
             class="grid-head org-head"
-            :title="o.display_name"
+            :title="o.org.display_name"
           >
-            <span>{{ o.display_name }}</span>
+            <span>{{ o.org.display_name }}</span>
           </div>
 
           <template v-for="p in sortedPermissions" :key="p.uuid">
@@ -307,7 +344,7 @@ defineExpose({ focusFirstElement })
             >
               <input
                 type="checkbox"
-                :checked="o.permissions.includes(p.uuid)"
+                :checked="p.uuid in o.permissions"
                 @change="e => $emit('toggleOrgPermission', o, p.uuid, e.target.checked)"
               />
             </div>
@@ -339,7 +376,7 @@ defineExpose({ focusFirstElement })
                 <span class="id-text">{{ p.scope }}</span>
               </div>
             </td>
-            <td class="perm-domain">{{ p.domain || '—' }}</td>
+            <td class="perm-domain">{{ domainDisplay(p.domain) }}</td>
             <td class="perm-members center">{{ permissionSummary[p.uuid]?.userCount || 0 }}</td>
             <td class="perm-actions center">
               <button @click="$emit('deletePermission', p)" class="icon-btn delete-icon" aria-label="Delete permission" title="Delete permission">❌</button>
@@ -348,13 +385,100 @@ defineExpose({ focusFirstElement })
         </tbody>
       </table>
   </div>
+
+  <div v-if="isMasterAdmin" class="oidc-clients-section">
+    <div class="section-header">
+      <h2>OAuth2 / OpenID Connect</h2>
+      <p class="section-description">
+        Allow external websites and applications to securely authenticate users through this system.
+        The clients are remote sites or applications that we allow to use Paskia for Single Sign-On.
+      </p>
+    </div>
+    <div ref="oidcActionsRef">
+      <button @click="$emit('createOidcClient')">+ Add Site</button>
+    </div>
+    <table class="org-table" ref="oidcTableRef">
+      <thead>
+        <tr>
+          <th scope="col">Client</th>
+          <th scope="col">Groups</th>
+          <th scope="col" class="center">Sessions</th>
+          <th scope="col" class="center">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!oidcClients || oidcClients.length === 0">
+          <td colspan="4" class="center muted">No OIDC clients configured</td>
+        </tr>
+        <tr v-for="client in oidcClients" :key="client.uuid">
+          <td class="perm-name-cell">
+            <div class="perm-title">
+              <a :href="'#oidc:' + client.uuid" @click.prevent="$emit('openOidcClient', client)">{{ client.name }}</a>
+            </div>
+            <div class="perm-id-info">
+              <span class="id-text">{{ client.uuid }}</span>
+            </div>
+          </td>
+          <td class="client-groups">
+            <span v-if="clientGroups[client.uuid]?.length">{{ clientGroups[client.uuid].map(g => g.scope).join(' ') }}</span>
+            <span v-else class="muted">—</span>
+          </td>
+          <td class="center">{{ client.active_sessions || 0 }}</td>
+          <td class="center">
+            <button @click="$emit('deleteOidcClient', client)" class="icon-btn delete-icon" aria-label="Delete OIDC client" title="Delete OIDC client">❌</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div v-if="isMasterAdmin" class="domains-section">
+    <div class="section-header">
+      <h2>Domains</h2>
+      <p class="section-description">
+        The domain names (rp-ids) served, along with hosts belonging to them. Each domain has its own passkeys, and each host will only accept passkeys from its own domain. To let several <em>different</em> domain names share the same passkeys, open the domain and configure related domains (WebAuthn Related Origins). Alternatively create entirely separate domains, or combine the two modes. Each domain's own origins may use wildcards; related origins are individual hosts only, at most five per domain.
+      </p>
+      <p class="section-description">
+        Related origins are your choice when you wish to keep existing credentials working on a few alternative domains. Configure separate domains only when there is more separation, or a need for wildcard hosts. Note that users are shared and remote logins remain possible across domains.
+      </p>
+    </div>
+    <div>
+      <button @click="$emit('createDomain')">+ Add Domain</button>
+    </div>
+    <table class="org-table">
+      <thead>
+        <tr>
+          <th>Domain (rp-id)</th>
+          <th>Allowed Origins</th>
+          <th class="center"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!domains || domains.length === 0">
+          <td colspan="3" class="center muted">No domains configured</td>
+        </tr>
+        <tr v-for="domain in sortedDomains" :key="domain.rp_id">
+          <td class="perm-name-cell">
+            <div class="perm-title">
+              <a :href="'#domain:' + domain.rp_id" @click.prevent="$emit('openDomain', domain)">{{ domain.rp_name || domain.rp_id }}</a>
+            </div>
+            <div class="perm-id-info">
+              <span class="id-text">{{ domain.rp_id }}</span>
+            </div>
+          </td>
+          <td class="domain-origins"><span v-for="(e, i) in originDisplayEntries(domain)" :key="e.key">{{ i ? ', ' : '' }}{{ e.key }}{{ e.auth ? '🔑' : '' }}{{ e.related ? '🔗' : '' }}</span></td>
+          <td class="center">
+            <button v-if="domain.rp_id !== currentRpId" @click="$emit('deleteDomain', domain)" class="icon-btn delete-icon" aria-label="Delete domain" title="Delete domain">❌</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <style scoped>
 .permissions-section { margin-bottom: var(--space-xl); }
 .permissions-section h2 { margin-bottom: var(--space-md); }
-.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
-.actions button { width: auto; }
 .org-table a { text-decoration: none; color: var(--color-link); }
 .org-table a:hover { text-decoration: underline; }
 .org-table .center { width: 6rem; min-width: 6rem; }
@@ -363,24 +487,21 @@ defineExpose({ focusFirstElement })
 .perm-title { font-weight: 600; color: var(--color-heading); }
 .perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
 .perm-domain { color: var(--color-text-muted); font-size: 0.9rem; }
-.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); }
-.delete-icon { color: var(--color-danger); }
-.delete-icon:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }
-.matrix-wrapper { margin: var(--space-md) 0; padding: var(--space-lg); }
-.matrix-scroll { overflow-x: auto; }
-.matrix-hint { font-size: 0.8rem; color: var(--color-text-muted); }
-.perm-matrix-grid { display: inline-grid; gap: 0.25rem; align-items: stretch; }
-.perm-matrix-grid > * { padding: 0.35rem 0.45rem; font-size: 0.75rem; }
-.perm-matrix-grid .grid-head { color: var(--color-text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
-.perm-matrix-grid .perm-head { display: flex; align-items: flex-end; justify-content: flex-start; padding: 0.35rem 0.45rem; font-size: 0.75rem; }
 .perm-matrix-grid .org-head { display: flex; align-items: flex-end; justify-content: center; }
 .perm-matrix-grid .org-head span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.65rem; }
-.perm-name { font-weight: 600; color: var(--color-heading); padding: 0.35rem 0.45rem; font-size: 0.75rem; }
 .display-text { margin-right: var(--space-xs); }
 .edit-display-btn { padding: 0.1rem 0.2rem; font-size: 0.8rem; }
 .edit-org-btn { padding: 0.1rem 0.2rem; font-size: 0.8rem; margin-left: var(--space-xs); }
 .perm-actions { text-align: center; }
-.center { text-align: center; }
-.muted { color: var(--color-text-muted); }
+
+/* OIDC Clients Section */
+.oidc-clients-section { margin-bottom: var(--space-xl); margin-top: var(--space-2xl); }
+.oidc-clients-section .section-header { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-md); }
+.client-groups { font-size: 0.85rem; color: var(--color-text-muted); max-width: 200px; font-family: var(--font-mono, monospace); }
+
+/* Domains Section */
+.domains-section { margin-top: var(--space-2xl); }
+.domains-section .section-header { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-md); }
+.domain-origins { font-family: var(--font-mono, monospace); font-size: 0.85rem; }
+.domains-section .perm-title { display: flex; align-items: center; gap: 0.5rem; }
 </style>

frontend/src/admin/AdminUserDetail.vue

@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import CredentialList from '@/components/CredentialList.vue'
+import ProfilePictureEditorModal from '@/components/ProfilePictureEditorModal.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
 import SessionList from '@/components/SessionList.vue'
 import { useAuthStore } from '@/stores/auth'
@@ -17,12 +18,19 @@ const props = defineProps({
   navigationDisabled: { type: Boolean, default: false }
 })
 
-const emit = defineEmits(['generateUserRegistrationLink', 'goOverview', 'openOrg', 'onUserNameSaved', 'closeRegModal', 'editUserName', 'refreshUserDetail', 'navigateOut', 'deleteUser'])
+const emit = defineEmits(['generateUserRegistrationLink', 'openOrg', 'closeRegModal', 'editUserName', 'refreshUserDetail', 'navigateOut', 'deleteUser'])
 
 const authStore = useAuthStore()
 const terminatingSessions = ref({})
 const hoveredCredentialUuid = ref(null)
 const hoveredSession = ref(null)
+const showPictureDialog = ref(false)
+const avatarRenderVersion = ref(0)
+
+// Convert credentials dict to array with uuid attached as 'credential'
+const credentials = computed(() =>
+  Object.entries(props.userDetail?.credentials || {}).map(([uuid, c]) => ({ ...c, credential: uuid }))
+)
 
 // Template refs for navigation
 const userInfoRef = ref(null)
@@ -43,32 +51,48 @@ function handleEditName() {
   emit('editUserName', props.selectedUser)
 }
 
+function openPictureDialog() {
+  if (!props.userDetail || props.userDetail.error) return
+  showPictureDialog.value = true
+}
+
+function closePictureDialog() {
+  showPictureDialog.value = false
+}
+
+function handlePictureUpdated() {
+  avatarRenderVersion.value += 1
+  emit('refreshUserDetail')
+}
+
 async function handleDelete(credential) {
   try {
     const data = await apiJson(`/auth/api/admin/users/${props.selectedUser.uuid}/credentials/${credential.credential}`, { method: 'DELETE' })
     if (data.status === 'ok') {
-      emit('onUserNameSaved') // Reuse to refresh user detail
+      emit('refreshUserDetail')
+      authStore.showMessage('Passkey removed', 'success', 2500)
     } else {
-      console.error('Failed to delete credential', data)
+      authStore.showMessage(data.detail || 'Failed to remove passkey', 'error')
     }
   } catch (err) {
+    authStore.showMessage(err.message || 'Failed to remove passkey', 'error')
     console.error('Delete credential error', err)
   }
 }
 
 async function handleTerminateSession(session) {
-  const sessionId = session?.id
-  if (!sessionId) return
-  terminatingSessions.value = { ...terminatingSessions.value, [sessionId]: true }
+  const sessionKey = session?.key
+  if (!sessionKey) return
+  terminatingSessions.value = { ...terminatingSessions.value, [sessionKey]: true }
   try {
-    const data = await apiJson(`/auth/api/admin/users/${props.selectedUser.uuid}/sessions/${sessionId}`, { method: 'DELETE' })
+    const data = await apiJson(`/auth/api/admin/users/${props.selectedUser.uuid}/sessions/${sessionKey}`, { method: 'DELETE' })
     if (data.status === 'ok') {
       if (data.current_session_terminated) {
         sessionStorage.clear()
         location.reload()
         return
       }
-      emit('refreshUserDetail') // Refresh without showing rename message
+      emit('refreshUserDetail')
       authStore.showMessage('Session terminated', 'success', 2500)
     } else {
       authStore.showMessage(data.detail || 'Failed to terminate session', 'error')
@@ -78,7 +102,7 @@ async function handleTerminateSession(session) {
     authStore.showMessage(err.message || 'Failed to terminate session', 'error')
   } finally {
     const next = { ...terminatingSessions.value }
-    delete next[sessionId]
+    delete next[sessionKey]
     terminatingSessions.value = next
   }
 }
@@ -97,7 +121,7 @@ function handleUserInfoKeydown(event) {
   event.preventDefault()
 
   if (direction === 'left' || direction === 'right') {
-    navigateButtonRow(userInfoRef.value, event.target, direction, { itemSelector: '.mini-btn' })
+    navigateButtonRow(userInfoRef.value, event.target, direction, { itemSelector: '.user-picture-btn, .mini-btn' })
   } else if (direction === 'up') {
     emit('navigateOut', 'up')
   } else if (direction === 'down') {
@@ -119,7 +143,7 @@ function handleRegActionsKeydown(event) {
     navigateButtonRow(regActionsRef.value, event.target, direction, { itemSelector: 'button' })
   } else if (direction === 'up') {
     // Move to user info edit button
-    focusPreferred(userInfoRef.value, { itemSelector: '.mini-btn' })
+    focusPreferred(userInfoRef.value, { itemSelector: '.user-picture-btn, .mini-btn' })
   } else if (direction === 'down') {
     // Move to credential list
     credentialListRef.value?.$el?.focus()
@@ -169,10 +193,22 @@ function handleBackButtonKeydown(event) {
 
 // Focus helper for external navigation
 function focusFirstElement() {
-  focusPreferred(userInfoRef.value, { itemSelector: '.mini-btn' })
+  focusPreferred(userInfoRef.value, { itemSelector: '.user-picture-btn, .mini-btn' })
 }
 
 defineExpose({ focusFirstElement })
+
+const currentPictureEndpoint = computed(() => {
+  if (!props.selectedUser?.uuid) return null
+  return `/auth/api/user/${props.selectedUser.uuid}/profile.webp`
+})
+
+const adminPictureTitle = computed(() => {
+  const username = props.userDetail?.user?.preferred_username || props.selectedUser?.preferred_username
+  const displayName = props.userDetail?.user?.display_name || props.selectedUser?.display_name
+  const label = username || displayName || 'User'
+  return `Profile Picture for ${label}`
+})
 </script>
 
 <template>
@@ -180,23 +216,29 @@ defineExpose({ focusFirstElement })
     <div ref="userInfoRef" @keydown="handleUserInfoKeydown">
       <UserBasicInfo
         v-if="userDetail && !userDetail.error"
-        :name="userDetail.display_name || selectedUser.display_name"
-        :visits="userDetail.visits"
-        :created-at="userDetail.created_at"
-        :last-seen="userDetail.last_seen"
+        :name="userDetail.user.display_name || selectedUser.display_name"
+        :avatar-url="userDetail.user.avatar_url"
+        :avatar-render-version="avatarRenderVersion"
+        avatar-clickable
+        :visits="userDetail.user.visits"
+        :created-at="userDetail.user.created_at"
+        :last-seen="userDetail.user.last_seen"
+        :email="userDetail.user.email"
+        :telephone="userDetail.user.telephone"
         :loading="loading"
         :org-display-name="userDetail.org.display_name"
-        :role-name="userDetail.role"
-        :update-endpoint="`/auth/api/admin/users/${selectedUser.uuid}/display-name`"
-        @saved="$emit('onUserNameSaved')"
-        @edit-name="handleEditName"
+        :role-name="userDetail.role.display_name"
+        :update-endpoint="`/auth/api/admin/users/${selectedUser.uuid}/info`"
+        @avatar-click="openPictureDialog"
+        @edit="handleEditName"
       >
         <div class="admin-actions">
           <button
             class="btn-primary"
             @click="$emit('generateUserRegistrationLink', selectedUser)"
             :disabled="loading"
-          >{{ userDetail?.credentials?.length ? 'Recovery Link' : 'Registration Link' }}</button>
+            title="Generate a one-time link for this user"
+          >{{ userDetail?.credentials && Object.keys(userDetail.credentials).length > 0 ? 'Recovery Link' : 'Registration Link' }}</button>
           <button
             class="btn-danger"
             @click="handleDeleteUser"
@@ -215,7 +257,7 @@ defineExpose({ focusFirstElement })
         <div class="section-body">
           <CredentialList
             ref="credentialListRef"
-            :credentials="userDetail.credentials"
+            :credentials="credentials"
             :aaguid-info="userDetail.aaguid_info"
             :allow-delete="true"
             :hovered-credential-uuid="hoveredCredentialUuid"
@@ -229,7 +271,7 @@ defineExpose({ focusFirstElement })
       </section>
       <SessionList
         ref="sessionListRef"
-        :sessions="userDetail.sessions || []"
+        :sessions="userDetail.sessions || {}"
         :terminating-sessions="terminatingSessions"
         :hovered-credential-uuid="hoveredCredentialUuid"
         :navigation-disabled="hasActiveModal"
@@ -246,21 +288,24 @@ defineExpose({ focusFirstElement })
     <RegistrationLinkModal
       v-if="showRegModal"
       :endpoint="`/auth/api/admin/users/${selectedUser.uuid}/create-link`"
-      :user-name="userDetail?.display_name || selectedUser.display_name"
+      :user-name="userDetail?.user?.display_name || selectedUser.display_name"
       @close="$emit('closeRegModal')"
       @copied="onLinkCopied"
     />
+    <ProfilePictureEditorModal
+      v-if="showPictureDialog && currentPictureEndpoint"
+      :endpoint="currentPictureEndpoint"
+      :picture-url="userDetail?.user?.avatar_url"
+      :render-version="avatarRenderVersion"
+      :title="adminPictureTitle"
+      @close="closePictureDialog"
+      @updated="handlePictureUpdated"
+    />
   </div>
 </template>
 
 <style scoped>
 .user-detail { display: flex; flex-direction: column; gap: var(--space-lg); }
 .admin-actions { display: flex; gap: 0.5rem; }
-.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
 .ancillary-actions { margin-top: -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); }
-.error { color: var(--color-danger-text); }
-.small { font-size: 0.9rem; }
-.muted { color: var(--color-text-muted); }
 </style>

frontend/src/admin/dialogs/AdminDialog.vue

@@ -0,0 +1,51 @@
+<script setup>
+import Modal from '@/components/Modal.vue'
+
+// Shared frame for the admin dialogs: Modal wrapper, title, form with
+// error display and Cancel/Save actions. The dialog's fields go in the
+// default slot; optional extra content attached next to the modal panel
+// (e.g. the domain origins diagnostics) goes in the 'attached' slot.
+defineProps({
+  title: { type: String, required: true },
+  busy: Boolean,
+  error: { type: String, default: '' },
+  submitLabel: { type: String, default: 'Save' },
+  // Block submit (e.g. while domain-origin validation has hard errors)
+  submitDisabled: Boolean,
+  // Name-edit dialogs render their own error message and action buttons
+  // — the frame then only provides the title and the form element
+  bare: Boolean
+})
+
+defineEmits(['submit', 'close'])
+</script>
+
+<template>
+  <Modal @close="$emit('close')">
+    <template #attached>
+      <slot name="attached" />
+    </template>
+    <h3 class="modal-title">{{ title }}</h3>
+    <form @submit.prevent="$emit('submit')" class="modal-form">
+      <slot />
+      <div v-if="error && !bare" class="error small">{{ error }}</div>
+      <div v-if="!bare" class="modal-actions">
+        <button
+          type="button"
+          class="btn-secondary"
+          @click="$emit('close')"
+          :disabled="busy"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          class="btn-primary"
+          :disabled="busy || submitDisabled"
+        >
+          {{ submitLabel }}
+        </button>
+      </div>
+    </form>
+  </Modal>
+</template>

frontend/src/admin/dialogs/ConfirmDialog.vue

@@ -0,0 +1,22 @@
+<script setup>
+import AdminDialog from './AdminDialog.vue'
+
+defineProps({
+  dialog: { type: Object, required: true }
+})
+
+defineEmits(['submit', 'close'])
+</script>
+
+<template>
+  <AdminDialog
+    title="Confirm"
+    submit-label="OK"
+    :busy="dialog.busy"
+    :error="dialog.error"
+    @submit="$emit('submit')"
+    @close="$emit('close')"
+  >
+    <p>{{ dialog.data.message }}</p>
+  </AdminDialog>
+</template>

frontend/src/admin/dialogs/DomainEditDialog.vue

@@ -0,0 +1,543 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import AdminDialog from './AdminDialog.vue'
+import { useAuthStore } from '@/stores/auth'
+import { compareOrigins } from '@/utils/helpers'
+
+const props = defineProps({
+  dialog: { type: Object, required: true }
+})
+
+defineEmits(['submit', 'close'])
+
+const title = computed(() =>
+  props.dialog.data?.isNew ? 'Add Domain' : `Edit Domain: ${props.dialog.data?.rp_id}`
+)
+
+// The rp-id of the domain being edited (lowercased: classification
+// compares against it, and hosts are case-insensitive)
+const dialogRpId = computed(() => (props.dialog.data?.rp_id || '').trim().toLowerCase())
+
+// Block submit on hard errors: malformed entries, an over-cap related
+// list (the server rejects the save), a save that would lock the admin
+// out of the domain they are using, or validation still in flight.
+// Connectivity and rp-id mismatch results are warnings only (entries may
+// be hosted elsewhere, or a new domain whose DNS is not routed to this
+// instance yet).
+const isValidationInvalid = computed(() => {
+  const d = props.dialog.data
+  const bad = v => v === 'invalid' || v === 'validating'
+  if (d.originValidation?.some(bad)) return true
+  if (relatedEntries.value.length > 5) return true
+  if (d.isNew && !isWellFormedDomain(d.rp_id || '')) return true
+  if (lockoutWarning.value) return true
+  return false
+})
+
+// A single origins list holds two kinds of entries: sites on the rp-id
+// domain form the in-domain sign-in allow-list; entries on other domain
+// names are related origins (WebAuthn ROR). Classification is automatic
+// from the hostname. A bare '*' or '**' is invalid (wildcards must sit
+// under the rp-id) and never a related origin.
+function isRelatedEntry(origin) {
+  if (isWildcardEntry(origin)) return false // wildcards are never related
+  const h = originHostname(origin)
+  return !!(h && dialogRpId.value && !isWithinDomain(origin, dialogRpId.value))
+}
+const relatedEntries = computed(() => {
+  const d = props.dialog.data
+  if (!d?.origins) return []
+  return d.origins.filter(isRelatedEntry)
+})
+
+// Well-known document browsers fetch from the rp-id domain to verify the
+// related-origin list (never from the auth host).
+const wellKnownUrl = computed(() => {
+  const host = (props.dialog.data?.rp_id || '').replace(/^https:\/\//, '').replace(/\/+$/, '')
+  return host ? `https://${host}/.well-known/webauthn` : ''
+})
+
+// ROR origins must be absolute https URLs in the well-known document.
+function asHttpsOrigin(origin) {
+  const o = origin.trim().replace(/\/+$/, '')
+  return o.startsWith('http') ? o : `https://${o}`
+}
+const wellKnownJson = computed(() =>
+  JSON.stringify({ origins: relatedEntries.value.map(asHttpsOrigin) })
+)
+
+// Copy-to-clipboard helper
+const authStore = useAuthStore()
+function copyText(value, label) {
+  navigator.clipboard.writeText(value).then(() => {
+    authStore.showMessage(`${label} copied to clipboard`, 'success', 1500)
+  })
+}
+
+// --- Lockout prevention (editing the domain in use) ---
+
+// When the admin edits the domain they are currently signed in on and no
+// auth host is marked (with one, ceremonies move there and saving is
+// always allowed), their current page origin must stay allowed to run
+// passkey ceremonies — otherwise saving locks them out. Mirrors the
+// backend check (Passkey.validate_origin): an in-domain origin matches a
+// row exactly (scheme+host+port) or a wildcard row — '**.base' covers
+// the apex and subdomains at any depth, '*.base' exactly one subdomain
+// level — over https, except under localhost (any scheme and port);
+// a related row matches only on exact equality (https://host).
+const lockoutWarning = computed(() => {
+  const d = props.dialog.data
+  if (d?.isNew || d?.auth_host) return null
+  const rpId = dialogRpId.value
+  if (!rpId || rpId !== authStore.settings?.rp_id) return null
+  return pageOriginAllowed(d.origins || [], rpId) ? null : window.location.host
+})
+
+// Whether any origin diagnostic is present
+const hasOriginDiagnostics = computed(() => {
+  const d = props.dialog.data
+  if (!d) return false
+  if (d.originValidation?.some(v => v === 'invalid' || v === 'unreachable' || v === 'mismatch')) return true
+  return relatedEntries.value.length > 5 || !!lockoutWarning.value
+})
+
+// Any runtime diagnostic to show in the dialog's attached feedback panel
+const hasDiagnostics = computed(
+  () => hasOriginDiagnostics.value || !!props.dialog.data?.wellKnownCheck
+)
+
+function pageOriginAllowed(rows, rpId) {
+  const toUrl = key => (isWildcardEntry(key) || key.includes('://')) ? key : 'https://' + key
+  const inDomain = []
+  const related = []
+  for (const row of rows) {
+    if (!originHostname(row)) continue
+    const key = entryKey(row).toLowerCase()
+    if (!key) continue
+    const bucket = isRelatedEntry(row) ? related : inDomain
+    bucket.push(toUrl(key))
+  }
+  const probe = origin => {
+    let hostname
+    try { hostname = new URL(origin).hostname } catch { return false }
+    if (hostname === rpId || hostname.endsWith('.' + rpId)) {
+      if (inDomain.includes(origin)) return true
+      return inDomain.some(e => {
+        const base = wildcardBase(e)
+        if (!base) return false
+        const matched = e.startsWith('**.')
+          ? hostname === base || hostname.endsWith('.' + base)
+          : hostname.endsWith('.' + base) && !hostname.slice(0, -base.length - 1).includes('.')
+        if (!matched) return false
+        // Under localhost a wildcard matches any scheme and port
+        return base === 'localhost' || base.endsWith('.localhost') || origin.startsWith('https://')
+      })
+    }
+    return related.includes(origin)
+  }
+  // The page scheme may be http (e.g. on localhost) — probe both
+  return probe(`https://${window.location.host}`) || probe(`http://${window.location.host}`)
+}
+
+const originInputs = ref([])
+
+async function addOrigin() {
+  const d = props.dialog.data
+  if (!d) return
+  d.origins.push('')
+  d.originValidation.push(null)
+  await nextTick()
+  originInputs.value[originInputs.value.length - 1]?.focus()
+}
+
+// Row validation runs after a short typing pause and immediately on
+// blur, so no error indication appears mid-edit. Empty rows are ignored.
+const originValidateTimers = new Map()
+
+function scheduleValidateOrigin(i) {
+  clearTimeout(originValidateTimers.get(i))
+  originValidateTimers.set(i, setTimeout(() => {
+    originValidateTimers.delete(i)
+    validateOrigin(i)
+  }, 600))
+}
+
+function onOriginBlur(i) {
+  clearTimeout(originValidateTimers.get(i))
+  originValidateTimers.delete(i)
+  validateOrigin(i)
+}
+
+function removeOrigin(i) {
+  const d = props.dialog.data
+  if (d) {
+    // Row indices shift on removal — drop all pending validations
+    for (const t of originValidateTimers.values()) clearTimeout(t)
+    originValidateTimers.clear()
+    d.origins.splice(i, 1)
+    d.originValidation.splice(i, 1)
+  }
+}
+
+function isWellFormedDomain(value) {
+  if (!value.trim()) return false
+  try {
+    const url = value.startsWith('http') ? new URL(value) : new URL('https://' + value)
+    // Any DNS label sequence (matching backend validate_rp_id): labels of
+    // 1-63 alnum/hyphen chars, no leading/trailing hyphen, dot-separated
+    return /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?(\.[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?)*$/i.test(url.hostname)
+  } catch {
+    return false
+  }
+}
+
+// Wildcard entries follow the shell-glob convention: '*.base' covers
+// exactly one subdomain level, '**.base' the apex and any depth.
+const isWildcardEntry = value => {
+  const v = value.trim()
+  return v.startsWith('*.') || v.startsWith('**.')
+}
+
+// Base domain of a wildcard entry (lowercased); null when the value is
+// not a wildcard pattern or has no base.
+function wildcardBase(value) {
+  const v = value.trim()
+  if (v.startsWith('**.')) return v.slice(3).replace(/\.+$/, '').toLowerCase() || null
+  if (v.startsWith('*.')) return v.slice(2).replace(/\.+$/, '').toLowerCase() || null
+  return null
+}
+
+function originHostname(origin) {
+  const v = origin.trim()
+  if (!v || v === '*' || v === '**') return null // a bare '*' or '**' is not a valid entry
+  if (isWildcardEntry(v)) {
+    const base = wildcardBase(v)
+    return base && isWellFormedDomain(base) ? base : null
+  }
+  try {
+    const url = v.startsWith('http') ? new URL(v) : new URL('https://' + v)
+    // The URL parser keeps malformed hostnames like '.localhost' or
+    // 'a..b.com' — reject anything that is not clean dot-separated labels
+    return url.hostname && isWellFormedDomain(url.hostname) ? url.hostname : null
+  } catch {
+    return null
+  }
+}
+
+function isWithinDomain(origin, rpId) {
+  const hostname = originHostname(origin)
+  if (!hostname) return false
+  return hostname === rpId || hostname.endsWith('.' + rpId)
+}
+
+async function validateOriginConnectivity(i) {
+  const d = props.dialog.data
+  if (!d) return
+  const value = d.origins[i]
+
+  d.originValidation[i] = 'validating'
+  try {
+    const cleanValue = value.replace(/\/+$/, '')
+    const testUrl = cleanValue.startsWith('http') ? cleanValue : 'https://' + cleanValue
+    const response = await fetch(testUrl + '/auth/api/settings', {
+      method: 'GET',
+      headers: { 'Accept': 'application/json' }
+    })
+    if (d.origins[i] !== value) return // entry changed while validating
+    if (response.ok) {
+      const data = await response.json()
+      // Valid when the entry is served by this instance for the edited domain
+      d.originValidation[i] = (data.rp_id && data.rp_id === dialogRpId.value) ? 'valid' : 'mismatch'
+    } else {
+      d.originValidation[i] = 'unreachable'
+    }
+  } catch (e) {
+    if (d.origins[i] === value) {
+      d.originValidation[i] = 'unreachable'
+    }
+  }
+}
+
+// A '*' typed into an empty field expands to '**.<rp-id>' with the second
+// asterisk selected: typing on (e.g. '.') replaces the selection —
+// yielding '*.<rp-id>' — while the rp-id stays at the end; Backspace
+// deletes the second asterisk; doing nothing keeps the any-depth form.
+// Only typed input into an empty field triggers this — never pasting or
+// deleting (e.g. backspacing '**' down to '*' must not re-expand).
+function onOriginInput(i, e) {
+  const d = props.dialog.data
+  if (!d) return
+  const el = e.target
+  const oldKey = entryKey(d.origins[i])
+  let value = el.value
+  if (value === '*' && dialogRpId.value && (e.inputType === 'insertText' || e.inputType === 'insertCompositionText')) {
+    value = '**.' + dialogRpId.value
+    el.value = value
+    el.setSelectionRange(1, 2)
+  }
+  d.origins[i] = value
+  // Keep the auth-host mark on a renamed entry, unless it no longer
+  // qualifies (wildcards and related origins cannot be the auth host)
+  if (d.auth_host && oldKey === d.auth_host) {
+    const key = entryKey(value)
+    d.auth_host = key && !key.startsWith('*') && !isRelatedEntry(value) ? key : ''
+  }
+  d.originValidation[i] = null
+  scheduleValidateOrigin(i)
+}
+
+function validateOrigin(i) {
+  const d = props.dialog.data
+  if (!d) return
+  const value = d.origins[i]
+  // Empty rows are ignored — never errors, and skipped on save
+  if (!value || !value.trim()) {
+    d.originValidation[i] = null
+    return
+  }
+  if (!originHostname(value)) {
+    d.originValidation[i] = 'invalid'
+    return
+  }
+  if (isWildcardEntry(value)) {
+    // Wildcards have no concrete site to probe, and are only allowed
+    // within the domain (related origins are individual hosts)
+    d.originValidation[i] = isWithinDomain(value, dialogRpId.value) ? null : 'invalid'
+    return
+  }
+  validateOriginConnectivity(i)
+}
+
+// Fetch the well-known document and check it lists every related origin.
+// Runs automatically whenever the related set changes; result is a
+// warning only, never a submit blocker (the rp-id site may be hosted
+// elsewhere, and cross-origin fetches can fail for unrelated reasons).
+async function testWellKnown() {
+  const d = props.dialog.data
+  if (!d) return
+  const related = relatedEntries.value.map(asHttpsOrigin)
+  if (!related.length) {
+    d.wellKnownCheck = null
+    return
+  }
+  const key = related.join('|')
+  d.wellKnownCheck = 'validating'
+  try {
+    const response = await fetch(wellKnownUrl.value, { headers: { 'Accept': 'application/json' } })
+    if (!response.ok) throw new Error('not ok')
+    const doc = await response.json()
+    if (related.join('|') !== key) return // list changed while fetching
+    const listed = new Set((doc.origins || []).map(o => String(o).replace(/\/+$/, '')))
+    const missing = related.filter(o => !listed.has(o))
+    d.wellKnownCheck = missing.length ? 'missing' : 'valid'
+    d.wellKnownMissing = missing
+  } catch {
+    if (related.join('|') === key) d.wellKnownCheck = 'unreachable'
+  }
+}
+watch(() => relatedEntries.value.map(asHttpsOrigin).join('|'), testWellKnown, { immediate: true })
+
+// Prefill a new domain's list with the real '**.<rp-id>' row once its
+// rp-id is known ('**.x' = the domain apex and all its subdomains over
+// https, any scheme and port under localhost). The row follows rp-id
+// edits while it is still the untouched prefilled row; once the admin
+// edits it, it is left alone. Seeding waits for a complete-looking rp-id
+// (letters after the final dot) so mid-typing states like 'something.'
+// don't prefill a broken '**.something'.
+function looksCompleteDomain(value) {
+  const host = (value || '').trim().replace(/\.$/, '')
+  return host === 'localhost' || /\.[a-z]{2,}$/i.test(host)
+}
+// Tracks the prefilled row so rp-id edits can keep updating it.
+let seededOrigin = null
+watch(dialogRpId, rp => {
+  const d = props.dialog.data
+  if (!d?.isNew) return
+  if (!looksCompleteDomain(rp) || !isWellFormedDomain(rp)) return
+  const seed = '**.' + rp.trim().replace(/\.$/, '')
+  if (!d.origins.length) {
+    d.origins.push(seed)
+    d.originValidation.push(null)
+    seededOrigin = seed
+  } else if (d.origins.length === 1 && d.origins[0] === seededOrigin && seed !== seededOrigin) {
+    d.origins[0] = seed
+    seededOrigin = seed
+  }
+})
+
+// --- Row menu: auth host assignment and entry removal ---
+
+const openMenu = ref(null)
+
+// Close the popup on any click outside it (the toggle button stops
+// propagation, so it never reaches this listener).
+function onDocumentClick(e) {
+  if (openMenu.value !== null && !e.target.closest('.row-menu')) openMenu.value = null
+}
+onMounted(() => document.addEventListener('click', onDocumentClick))
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+  for (const t of originValidateTimers.values()) clearTimeout(t)
+  originValidateTimers.clear()
+})
+
+// Origins-dict key form of an entry (https:// omitted), also used for the
+// auth_host value.
+function entryKey(value) {
+  return value?.trim().replace(/^https:\/\//, '').replace(/\/+$/, '') || ''
+}
+
+function isAuthHostEntry(origin) {
+  const d = props.dialog.data
+  const key = entryKey(origin)
+  return !!(key && d?.auth_host && key === d.auth_host)
+}
+
+function setAuthHost(i) {
+  const d = props.dialog.data
+  if (!d) return
+  let key = entryKey(d.origins[i])
+  let added = false
+  const wbase = wildcardBase(key)
+  if (wbase) {
+    // A wildcard cannot be the auth host — create a concrete auth.<base> entry
+    key = 'auth.' + wbase
+    if (!d.origins.some(o => entryKey(o) === key)) {
+      d.origins.push(key)
+      d.originValidation.push(null)
+      added = true
+    }
+  }
+  d.auth_host = key
+  openMenu.value = null
+  resortOrigins()
+  if (added) validateOrigin(d.origins.findIndex(o => entryKey(o) === key))
+}
+
+function clearAuthHost() {
+  const d = props.dialog.data
+  if (d) d.auth_host = ''
+  openMenu.value = null
+  resortOrigins()
+}
+
+// Display order, applied after row-menu actions (never while typing in an
+// input, to avoid focus loss): auth host first, then the rp-id, then
+// in-domain entries hierarchically, then related origins.
+function resortOrigins() {
+  const d = props.dialog.data
+  if (!d) return
+  const rank = o => isAuthHostEntry(o) ? 0 : o === dialogRpId.value ? 1 : isRelatedEntry(o) ? 3 : 2
+  const pairs = d.origins.map((o, i) => [o, d.originValidation[i]])
+  pairs.sort((a, b) => rank(a[0]) - rank(b[0]) || compareOrigins(a[0], b[0]))
+  d.origins = pairs.map(p => p[0])
+  d.originValidation = pairs.map(p => p[1])
+}
+
+function onRemoveOrigin(i) {
+  const d = props.dialog.data
+  if (!d) return
+  if (isAuthHostEntry(d.origins[i])) d.auth_host = ''
+  removeOrigin(i)
+  openMenu.value = null
+  resortOrigins()
+}
+</script>
+
+<template>
+  <AdminDialog
+    :title="title"
+    :busy="dialog.busy"
+    :error="dialog.error"
+    :submit-disabled="isValidationInvalid"
+    @submit="$emit('submit')"
+    @close="$emit('close')"
+  >
+    <template #attached>
+      <div v-if="relatedEntries.length || hasDiagnostics" class="attach-panel" @click.stop>
+        <template v-if="relatedEntries.length">
+          <p class="small muted">
+            Related origins are verified by browsers against
+            <a :href="wellKnownUrl" target="_blank" rel="noopener noreferrer">{{ wellKnownUrl }}</a>
+            — served automatically when this instance hosts {{ dialog.data.rp_id }}; otherwise publish this document there:
+          </p>
+          <pre class="wellknown-doc" title="Click to copy" tabindex="0" @click="copyText(wellKnownJson, 'Well-known document')" @keydown.enter.prevent="copyText(wellKnownJson, 'Well-known document')">{{ wellKnownJson }}</pre>
+        </template>
+        <ul v-if="hasDiagnostics" class="diag-list">
+          <li v-if="dialog.data.originValidation.some(v => v === 'invalid')" class="small error">Some entries are invalid — check for typos in the hostname; a bare '*' or '**' is not allowed, and wildcards only within the domain.</li>
+          <li v-if="dialog.data.originValidation.some(v => v === 'unreachable')" class="small">Some sites are unreachable — make sure they are routed to this instance.</li>
+          <li v-else-if="dialog.data.originValidation.some(v => v === 'mismatch')" class="small">Some sites are reachable but do not serve this domain.</li>
+          <li v-if="relatedEntries.length > 5" class="small error">At most 5 related origins are allowed ({{ relatedEntries.length }} listed) — the save is rejected.</li>
+          <li v-if="lockoutWarning" class="small error">Saving would lock you out: {{ lockoutWarning }} could no longer run sign-in ceremonies for this domain. Keep it listed, or mark an auth host.</li>
+          <li v-if="dialog.data.wellKnownCheck === 'validating'" class="small">Checking the published document…</li>
+          <li v-else-if="dialog.data.wellKnownCheck === 'valid'" class="small">✓ The published document lists all related origins.</li>
+          <li v-else-if="dialog.data.wellKnownCheck === 'missing'" class="small error">The published document does not list: {{ (dialog.data.wellKnownMissing || []).join(', ') }}</li>
+          <li v-else-if="dialog.data.wellKnownCheck === 'unreachable'" class="small">Could not fetch the published document to verify it.</li>
+        </ul>
+      </div>
+    </template>
+    <template v-if="dialog.data.isNew">
+      <label>Domain (rp-id)
+        <input v-model="dialog.data.rp_id" placeholder="example.com" data-form-type="other" required />
+      </label>
+      <p class="small muted">The domain name passkeys belong to — they work on this domain and its subdomains, and related domains. Cannot be changed later.</p>
+    </template>
+    <label>Display Name (rp-name)
+      <input v-model="dialog.data.rp_name" :placeholder="dialog.data.rp_id" />
+    </label>
+
+    <div class="origin-label">
+      Allowed Origins
+      <button type="button" class="icon-btn origin-add-btn" @click="addOrigin()" aria-label="Add origin" title="Add origin">➕</button>
+    </div>
+    <div v-if="dialog.data.origins.length" class="origin-list">
+      <div v-for="(_, i) in dialog.data.origins" :key="i" class="origin-row">
+        <input
+          ref="originInputs"
+          :value="dialog.data.origins[i]"
+          @input="e => onOriginInput(i, e)"
+          @blur="onOriginBlur(i)"
+          class="origin-input"
+          :class="{ 'input-error': dialog.data.originValidation[i] === 'invalid' }"
+        />
+        <span v-if="isAuthHostEntry(dialog.data.origins[i])" class="key-badge" title="Authentication site — the account and admin interface live here">🔑</span>
+        <span v-else-if="isRelatedEntry(dialog.data.origins[i])" class="key-badge" title="Related origin (WebAuthn ROR) — shares this domain's passkeys">🔗</span>
+        <div class="row-menu">
+          <button type="button" class="icon-btn" @click.stop="openMenu = openMenu === i ? null : i" aria-label="Origin actions" title="Actions">⋮</button>
+          <div v-if="openMenu === i" class="row-menu-popup">
+            <button v-if="isAuthHostEntry(dialog.data.origins[i])" type="button" @click="clearAuthHost()"><span class="menu-icon">🔑</span>Remove auth host</button>
+            <button v-else-if="!isRelatedEntry(dialog.data.origins[i]) && originHostname(dialog.data.origins[i])" type="button" @click="setAuthHost(i)"><span class="menu-icon">🔑</span>Set as auth host</button>
+            <button type="button" @click="onRemoveOrigin(i)"><span class="menu-icon delete-menu-icon">❌</span>Delete</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="small muted">
+      Only the listed sites may sign in with {{ dialog.data.rp_id }} passkeys. Wildcards may be used: <strong>**.{{ dialog.data.rp_id }}</strong> allows the whole domain, <strong>*.{{ dialog.data.rp_id }}</strong> only a single subdomain level.<template v-if="relatedEntries.length"> 🔗 means related host requiring WebAuthn ROR setup.</template><template v-if="dialog.data.auth_host"> 🔑 is the dedicated Paskia host for all account management.</template>
+    </p>
+  </AdminDialog>
+</template>
+
+<style scoped>
+/* Domain origins */
+.origin-label { font-weight: 600; font-size: 0.95rem; margin-top: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); }
+.origin-list { display: flex; flex-direction: column; gap: 0.4rem; }
+.origin-row { display: flex; align-items: center; gap: var(--space-xs); }
+.origin-input { flex: 1; min-width: 8rem; font-family: var(--font-mono, monospace); }
+.origin-add-btn { font-size: 1.2rem; }
+.key-badge { flex-shrink: 0; }
+.row-menu { position: relative; flex-shrink: 0; }
+.row-menu-popup { position: absolute; right: 0; top: 100%; z-index: 10; display: flex; flex-direction: column; min-width: 9rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border, #ccc); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
+.row-menu-popup button { display: flex; align-items: center; justify-content: flex-start; gap: 0.45em; text-align: left; padding: var(--space-xs) var(--space-sm); background: none; border: none; cursor: pointer; white-space: nowrap; }
+.row-menu-popup button:hover:not(:disabled) { background: var(--color-bg-soft, rgba(127,127,127,0.12)); }
+.row-menu-popup button:disabled { opacity: 0.5; cursor: default; }
+.row-menu-popup .menu-icon { flex-shrink: 0; width: 1.1em; text-align: center; }
+.row-menu-popup .delete-menu-icon { filter: saturate(1.4); }
+
+.wellknown-doc { margin: 0; padding: var(--space-xs) var(--space-sm); font-size: 0.8rem; background: var(--color-bg-soft, rgba(127,127,127,0.08)); border-radius: 4px; white-space: pre; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
+
+.input-error {
+  border-color: var(--color-error);
+  background: var(--color-error-bg, rgba(239, 68, 68, 0.05));
+}
+</style>

frontend/src/admin/dialogs/OrgCreateDialog.vue

@@ -0,0 +1,23 @@
+<script setup>
+import AdminDialog from './AdminDialog.vue'
+
+defineProps({
+  dialog: { type: Object, required: true }
+})
+
+defineEmits(['submit', 'close'])
+</script>
+
+<template>
+  <AdminDialog
+    title="Create Organization"
+    :busy="dialog.busy"
+    :error="dialog.error"
+    @submit="$emit('submit')"
+    @close="$emit('close')"
+  >
+    <label>Name
+      <input v-model="dialog.data.name" required />
+    </label>
+  </AdminDialog>
+</template>

frontend/src/admin/dialogs/OrgUpdateDialog.vue

@@ -0,0 +1,28 @@
+<script setup>
+import AdminDialog from './AdminDialog.vue'
+import NameEditForm from '@/components/NameEditForm.vue'
+
+defineProps({
+  dialog: { type: Object, required: true }
+})
+
+defineEmits(['submit', 'close'])
+</script>
+
+<template>
+  <AdminDialog
+    title="Rename Organization"
+    :busy="dialog.busy"
+    bare
+    @submit="$emit('submit')"
+    @close="$emit('close')"
+  >
+    <NameEditForm
+      label="Organization Name"
+      v-model="dialog.data.name"
+      :busy="dialog.busy"
+      :error="dialog.error"
+      @cancel="$emit('close')"
+    />
+  </AdminDialog>
+</template>

frontend/src/admin/dialogs/PermissionDialog.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { computed } from 'vue'
+import AdminDialog from './AdminDialog.vue'
+
+const props = defineProps({
+  dialog: { type: Object, required: true },
+  permissionIdPattern: { type: String, required: true }
+})
+
+defineEmits(['submit', 'close'])
+
+const title = computed(() =>
+  props.dialog.type === 'perm-create' ? 'Create Permission' : 'Edit Permission'
+)
+</script>
+
+<template>
+  <AdminDialog
+    :title="title"
+    :busy="dialog.busy"
+    :error="dialog.error"
+    @submit="$emit('submit')"
+    @close="$emit('close')"
+  >
+    <label>Display Name
+      <input v-model="dialog.data.display_name" required />
+    </label>
+    <label>Permission Scope
+      <input v-model="dialog.data.scope" required :pattern="permissionIdPattern" title="Allowed: A-Za-z0-9:._~-" data-form-type="other" />
+    </label>
+    <p class="small muted">E.g. yourapp:reports. Changing the scope name may break deployed applications.</p>
+    <label>Domain Scope
+      <input v-model="dialog.data.domain" data-form-type="other" />
+    </label>
+    <p class="small muted">A domain restricts this permission to that host (any configured domain's rp-id or a subdomain of it). An OIDC client UUID sends it as a <em>groups</em> claim to that client.</p>
+  </AdminDialog>
+</template>

frontend/src/admin/dialogs/RoleCreateDialog.vue

@@ -0,0 +1,23 @@
+<script setup>
+import AdminDialog from './AdminDialog.vue'
+
+defineProps({
+  dialog: { type: Object, required: true }
+})
+
+defineEmits(['submit', 'close'])
+</script>
+
+<template>
+  <AdminDialog
+    title="Create Role"
+    :busy="dialog.busy"
+    :error="dialog.error"
+    @submit="$emit('submit')"
+    @close="$emit('close')"
+  >
+    <label>Role Name
+      <input v-model="dialog.data.name" placeholder="Role name" required />
+    </label>
+  </AdminDialog>
+</template>

frontend/src/admin/dialogs/RoleUpdateDialog.vue

@@ -0,0 +1,28 @@
+<script setup>
+import AdminDialog from './AdminDialog.vue'
+import NameEditForm from '@/components/NameEditForm.vue'
+
+defineProps({
+  dialog: { type: Object, required: true }
+})
+
+defineEmits(['submit', 'close'])
+</script>
+
+<template>
+  <AdminDialog
+    title="Edit Role"
+    :busy="dialog.busy"
+    bare
+    @submit="$emit('submit')"
+    @close="$emit('close')"
+  >
+    <NameEditForm
+      label="Role Name"
+      v-model="dialog.data.name"
+      :busy="dialog.busy"
+      :error="dialog.error"
+      @cancel="$emit('close')"
+    />
+  </AdminDialog>
+</template>

frontend/src/admin/dialogs/UserCreateDialog.vue

@@ -0,0 +1,24 @@
+<script setup>
+import AdminDialog from './AdminDialog.vue'
+
+defineProps({
+  dialog: { type: Object, required: true }
+})
+
+defineEmits(['submit', 'close'])
+</script>
+
+<template>
+  <AdminDialog
+    title="Add User To Role"
+    :busy="dialog.busy"
+    :error="dialog.error"
+    @submit="$emit('submit')"
+    @close="$emit('close')"
+  >
+    <p class="small muted">Role: {{ dialog.data.role.display_name }}</p>
+    <label>Display Name
+      <input v-model="dialog.data.name" placeholder="User display name" required />
+    </label>
+  </AdminDialog>
+</template>

frontend/src/admin/dialogs/UserUpdateNameDialog.vue

@@ -0,0 +1,28 @@
+<script setup>
+import AdminDialog from './AdminDialog.vue'
+import NameEditForm from '@/components/NameEditForm.vue'
+
+defineProps({
+  dialog: { type: Object, required: true }
+})
+
+defineEmits(['submit', 'close'])
+</script>
+
+<template>
+  <AdminDialog
+    title="Edit User Name"
+    :busy="dialog.busy"
+    bare
+    @submit="$emit('submit')"
+    @close="$emit('close')"
+  >
+    <NameEditForm
+      label="Display Name"
+      v-model="dialog.data.name"
+      :busy="dialog.busy"
+      :error="dialog.error"
+      @cancel="$emit('close')"
+    />
+  </AdminDialog>
+</template>

frontend/src/assets/profile-generic.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="340" height="340">
+<path fill="#DDD" d="m169,.5a169,169 0 1,0 2,0zm0,86a76,76 0 1
+1-2,0zM57,287q27-35 67-35h92q40,0 67,35a164,164 0 0,1-226,0"/>
+</svg>

frontend/src/assets/style.css

@@ -9,70 +9,82 @@
   --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: white;
-  --color-surface: oklch(0.97 0.005 var(--hue));
-  --color-surface-subtle: oklch(0.94 0.01 var(--hue));
-  --color-dialog: white;
-  --color-border: oklch(0.8 0.02 var(--hue));
-  --color-border-strong: oklch(0.55 0.15 var(--hue));
-  --color-heading: oklch(0.3 0.05 var(--hue));
-  --color-text: oklch(0.25 0.02 var(--hue));
-  --color-text-muted: oklch(0.5 0.02 var(--hue));
-  --color-link: oklch(0.5 0.18 var(--hue));
-  --color-link-hover: oklch(0.45 0.2 var(--hue));
-  --color-accent: oklch(0.55 0.2 var(--hue));
-  --color-accent-strong: oklch(0.45 0.2 var(--hue));
+  --color-surface: #def;
+  --color-surface-subtle: #bcf;
+  --color-surface-hover: oklab(0.97 -0.01 -0.02);
+  --color-dialog: oklab(0.96 -0.01 -0.03);
+  --color-border: oklab(0.82 -0.02 -0.06);
+  --color-border-strong: oklab(0.55 -0.05 -0.14);
+  --color-heading: oklab(0.22 -0.03 -0.09);
+  --color-text: oklab(0.2 -0.02 -0.05);
+  --color-text-muted: oklab(0.42 -0.02 -0.06);
+  --color-link: oklab(0.5 -0.06 -0.17);
+  --color-link-hover: oklab(0.45 -0.06 -0.19);
+  --color-accent: oklab(0.55 -0.06 -0.19);
+  --color-accent-strong: #46f;
   --color-accent-contrast: white;
-  --color-secondary: oklch(0.55 0.05 var(--hue));
-  --color-secondary-strong: oklch(0.45 0.05 var(--hue));
-  --color-success-text: oklch(0.4 0.15 0.4turn);
-  --color-success-bg: oklch(0.95 0.03 0.4turn);
-  --color-error-text: oklch(0.45 0.2 0.07turn);
-  --color-error-bg: oklch(0.95 0.03 0.07turn);
-  --color-info-text: oklch(0.45 0.15 var(--hue));
-  --color-info-bg: oklch(0.95 0.02 var(--hue));
-  --color-danger: oklch(0.55 0.22 0.07turn);
+  --color-secondary: oklab(0.55 -0.02 -0.05);
+  --color-secondary-strong: oklab(0.45 -0.02 -0.05);
+  --color-success-text: oklab(0.4 -0.12 0.09);
+  --color-success-bg: oklab(0.95 -0.02 0.02);
+  --color-error-text: oklab(0.45 0.18 0.09);
+  --color-error-bg: oklab(0.95 0.03 0.01);
+  --color-info-text: oklab(0.45 -0.05 -0.14);
+  --color-info-bg: oklab(0.95 -0.01 -0.02);
+  --color-danger: oklab(0.55 0.20 0.09);
+  --color-primary: oklab(0.55 -0.06 -0.19);
+  --color-error: oklab(0.45 0.18 0.09);
+  --color-success: oklab(0.4 -0.12 0.09);
+  --color-bg: oklab(0.94 -0.01 -0.03);
+  --color-accent-soft: oklab(0.92 -0.03 -0.08);
   --shadow-soft: 0 0 .2rem black;
-  --radius-none: 0;
+  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.15);
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 10px;
-  --space-xxs: 0.25rem;
   --space-xs: 0.5rem;
   --space-sm: 0.75rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2.25rem;
-  --space-xxl: 3.5rem;
+  --space-3xl: 5rem;
   --layout-padding: clamp(1.5rem, 3vw + 1rem, 3.25rem);
   --transition-base: 160ms ease;
   --focus-ring: 0 0 0 2px var(--color-accent);
 }
 
 :root.dark {
-  --color-canvas: oklch(0.15 0.03 var(--hue));
-  --color-surface: oklch(0.18 0.03 var(--hue));
-  --color-surface-subtle: oklch(0.22 0.03 var(--hue));
-  --color-dialog: oklch(0.22 0.03 var(--hue));
-  --color-border: oklch(0.3 0.03 var(--hue));
-  --color-border-strong: oklch(0.4 0.04 var(--hue));
+  --color-canvas: oklab(0.17 -0.02 -0.05);
+  --color-surface: oklab(0.22 -0.02 -0.05);
+  --color-surface-subtle: oklab(0.25 -0.02 -0.05);
+  --color-surface-hover: oklab(0.28 -0.02 -0.05);
+  --color-dialog: oklab(0.22 -0.02 -0.05);
+  --color-border: oklab(0.3 -0.02 -0.05);
+  --color-border-strong: oklab(0.4 -0.02 -0.05);
   --color-heading: white;
-  --color-text: oklch(0.9 0.01 var(--hue));
-  --color-text-muted: oklch(0.7 0.02 var(--hue));
-  --color-link: oklch(0.7 0.15 var(--hue));
-  --color-link-hover: oklch(0.8 0.12 var(--hue));
-  --color-accent: oklch(0.7 0.15 var(--hue));
-  --color-accent-strong: oklch(0.6 0.18 var(--hue));
-  --color-accent-contrast: oklch(0.12 0.03 var(--hue));
-  --color-secondary: oklch(0.6 0.05 var(--hue));
-  --color-secondary-strong: oklch(0.5 0.05 var(--hue));
-  --color-success-text: oklch(0.75 0.15 0.4turn);
-  --color-success-bg: oklch(0.3 0.08 0.4turn);
-  --color-error-text: oklch(0.8 0.12 0.07turn);
-  --color-error-bg: oklch(0.3 0.08 0.07turn);
-  --color-info-text: oklch(0.8 0.1 var(--hue));
-  --color-info-bg: oklch(0.3 0.05 var(--hue));
-  --color-danger: oklch(0.7 0.18 0.07turn);
+  --color-text: oklab(0.9 0.00 -0.01);
+  --color-text-muted: oklab(0.7 -0.01 -0.02);
+  --color-link: oklab(0.7 -0.05 -0.14);
+  --color-link-hover: oklab(0.8 -0.04 -0.11);
+  --color-accent: oklab(0.7 -0.05 -0.14);
+  --color-accent-strong: oklab(0.6 -0.06 -0.17);
+  --color-accent-contrast: oklab(0.12 -0.01 -0.03);
+  --color-secondary: oklab(0.6 -0.02 -0.05);
+  --color-secondary-strong: oklab(0.5 -0.02 -0.05);
+  --color-success-text: oklab(0.75 -0.12 0.09);
+  --color-success-bg: oklab(0.3 -0.07 0.05);
+  --color-error-text: oklab(0.8 0.11 0.05);
+  --color-error-bg: oklab(0.3 0.07 0.03);
+  --color-info-text: oklab(0.8 -0.03 -0.10);
+  --color-info-bg: oklab(0.3 -0.02 -0.05);
+  --color-danger: oklab(0.7 0.16 0.08);
+  --color-primary: oklab(0.7 -0.05 -0.14);
+  --color-error: oklab(0.8 0.11 0.05);
+  --color-success: oklab(0.75 -0.12 0.09);
+  --color-bg: oklab(0.18 -0.01 -0.03);
+  --color-accent-soft: oklab(0.25 -0.03 -0.08);
   --shadow-soft: 0 0 0 black;
+  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.4);
 }
 
 *,
@@ -160,6 +172,25 @@ a:focus-visible {
   max-width: 540px;
 }
 
+.view-root--profile .view-header-wrapper {
+  width: 100%;
+  max-width: calc(1200px - 2 * var(--layout-padding));
+  margin: 0 auto;
+  position: relative;
+}
+
+.view-root--profile .theme-toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.section-block--constrained {
+  width: 100%;
+  max-width: calc(1200px - 2 * var(--layout-padding));
+  margin: 0 auto;
+}
+
 .view-header {
   display: flex;
   flex-direction: column;
@@ -207,6 +238,7 @@ a:focus-visible {
   flex-wrap: nowrap;
   gap: 0.75rem;
   justify-content: flex-start;
+  width: 100%;
 }
 
 .button-row button {
@@ -247,47 +279,53 @@ button:disabled {
   filter: opacity(0.6);
 }
 
+output[title="Click to copy"] {
+  cursor: pointer;
+}
+
 .btn-primary {
-  background: linear-gradient(to bottom, oklch(1 0 0 / 0.15), transparent 60%) var(--color-accent);
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-accent);
   color: var(--color-accent-contrast);
   border-color: var(--color-accent);
 }
 
 .btn-primary:hover:not(:disabled),
 .btn-primary:focus-visible {
-  background: linear-gradient(to bottom, oklch(1 0 0 / 0.15), transparent 60%) var(--color-accent-strong);
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-accent-strong);
   border-color: var(--color-accent-strong);
   box-shadow: var(--shadow-soft);
 }
 
 .btn-secondary {
-  background: linear-gradient(to bottom, oklch(1 0 0 / 0.15), transparent 60%) var(--color-secondary);
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-secondary);
   color: var(--color-accent-contrast);
   border-color: transparent;
 }
 
 .btn-secondary:hover:not(:disabled),
 .btn-secondary:focus-visible {
-  background: linear-gradient(to bottom, oklch(1 0 0 / 0.15), transparent 60%) var(--color-secondary-strong);
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-secondary-strong);
   box-shadow: var(--shadow-soft);
 }
 
 .btn-danger {
-  background: linear-gradient(to bottom, oklch(1 0 0 / 0.15), transparent 60%) var(--color-danger);
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-danger);
   color: var(--color-accent-contrast);
   border-color: transparent;
 }
 
 .btn-danger:hover:not(:disabled),
 .btn-danger:focus-visible {
-  background: linear-gradient(to bottom, oklch(1 0 0 / 0.15), transparent 60%) var(--color-danger);
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-danger);
   filter: brightness(0.92);
   box-shadow: var(--shadow-soft);
 }
 
+input:not([type]),
 input[type="text"],
 input[type="search"],
 input[type="email"],
+input[type="tel"],
 textarea,
 select {
   font: inherit;
@@ -300,6 +338,18 @@ select {
   transition: border-color var(--transition-base), box-shadow var(--transition-base);
 }
 
+input:not([type]):focus,
+input[type="text"]:focus,
+input[type="search"]:focus,
+input[type="email"]:focus,
+input[type="tel"]:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: var(--focus-ring);
+}
+
 label {
   display: flex;
   flex-direction: column;
@@ -340,10 +390,173 @@ th {
   text-align: left;
 }
 
+/* Permission matrix styles */
+.matrix-wrapper {
+  margin: var(--space-md) 0;
+  padding: var(--space-lg);
+}
+
+.matrix-scroll {
+  overflow-x: auto;
+}
+
+.matrix-hint {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.perm-matrix-grid {
+  display: inline-grid;
+  gap: 0.25rem;
+  align-items: stretch;
+}
+
+.perm-matrix-grid > * {
+  padding: 0.35rem 0.45rem;
+  font-size: 0.75rem;
+}
+
+.perm-matrix-grid .grid-head {
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+}
+
+.perm-matrix-grid .perm-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: 0.35rem 0.45rem;
+  font-size: 0.75rem;
+}
+
+.perm-matrix-grid .rotated-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.perm-matrix-grid .rotated-head span {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-size: 0.65rem;
+}
+
+.perm-name {
+  font-weight: 600;
+  color: var(--color-heading);
+  padding: 0.35rem 0.45rem;
+  font-size: 0.75rem;
+}
+
 .center {
   text-align: center;
 }
 
+/* Utility classes */
+.muted {
+  color: var(--color-text-muted);
+}
+
+.error {
+  color: var(--color-danger-text);
+}
+
+.small {
+  font-size: 0.9rem;
+}
+
+/* Runtime diagnostics list: 🔸 markers with a hanging indent, so wrapped
+   lines align with the text rather than under the marker */
+.diag-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.diag-list li {
+  position: relative;
+  padding-left: 1.4em;
+}
+
+.diag-list li + li {
+  margin-top: 0.3em;
+}
+
+.diag-list li::before {
+  content: "🔸";
+  position: absolute;
+  left: 0;
+}
+
+/* Dialog attachment panel (runtime diagnostics, related-origin setup):
+   docked on the right of the dialog, so appearing or disappearing never
+   shifts the dialog itself. On narrow screens it hangs below instead. */
+.attach-panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  right: 0;
+  background: var(--color-dialog);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  padding: var(--space-md) var(--space-lg);
+  max-height: 30vh;
+  overflow-y: auto;
+}
+
+.attach-panel > * + * {
+  margin-top: var(--space-md);
+}
+
+@media (min-width: 1200px) {
+  .attach-panel {
+    top: 0;
+    left: calc(100% + 0.75rem);
+    right: auto;
+    /* Never wider than the space right of the centered 500px dialog */
+    width: min(340px, calc(50vw - 286px));
+    max-height: calc(100vh - 3rem);
+  }
+}
+
+.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-subtle);
+}
+
+.delete-icon {
+  color: var(--color-danger);
+}
+
+.delete-icon:hover {
+  background: var(--color-error-bg);
+  color: var(--color-error-text);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  align-items: center;
+}
+
+.button-row--center {
+  justify-content: center;
+}
+
 .badge {
   display: inline-flex;
   align-items: center;
@@ -362,13 +575,17 @@ th {
   left: 0;
   right: 0;
   margin: 0 auto;
-  z-index: 1200;
+  z-index: 2000;
   width: fit-content;
   min-width: min(520px, calc(100% - 2rem));
   max-width: calc(100% - 2rem);
   display: none;
 }
 
+.global-status.show {
+  display: block;
+}
+
 .global-status .status {
   display: flex;
   align-items: center;
@@ -414,6 +631,12 @@ th {
   padding: 1.5rem;
 }
 
+/* Positions attachments (e.g. the diagnostics panel) relative to the
+   dialog; shrink-wraps the panel in the overlay's flex layout */
+.modal-wrap {
+  position: relative;
+}
+
 .device-dialog,
 .modal {
   background: var(--color-dialog);
@@ -439,7 +662,6 @@ th {
 .qr-code {
   padding: 1rem;
   background: white;
-  box-shadow: var(--shadow-soft);
 }
 
 .link-container,
@@ -496,9 +718,18 @@ th {
 
 .record-item.is-current,
 .credential-item.current-session,
+.session-item.is-current {
+  border-color: var(--color-accent);
+  background-color: var(--color-surface-subtle);
+}
+
 .credential-item.is-hovered,
-.session-item.is-current,
-.session-item.is-hovered { border-color: var(--color-accent); background-color: var(--color-surface-subtle); }
+.session-item.is-hovered {
+  border-color: var(--color-accent);
+  background-color: var(--color-surface-subtle);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
+  transform: translateY(-1px);
+}
 
 .credential-item.is-linked-session,
 .session-item.is-linked-credential { border-color: var(--color-accent); background-color: var(--color-surface-subtle); }
@@ -634,6 +865,28 @@ th {
   border: 1px solid var(--color-border);
 }
 
+.badge-domain {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  font-size: 0.75rem;
+}
+
+.domain-enroll-notice {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-accent);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-subtle);
+}
+
+.domain-enroll-notice p {
+  margin: 0;
+}
+
 
 .session-meta-info {
   font-size: 0.75rem;
@@ -653,9 +906,6 @@ th {
 
 .user-info {
   display: grid;
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  padding: 1.1rem 1.25rem;
 }
 
 .user-details {
@@ -742,7 +992,7 @@ th {
 
 .slot-machine {
   padding: 0.875rem 1rem;
-  background: var(--color-surface-hover, rgba(0, 0, 0, 0.03));
+  background: var(--color-surface-hover);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
@@ -763,3 +1013,28 @@ th {
   height: 1.8em;
   position: relative;
 }
+
+/* Spinner utilities */
+.spinner {
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.spinner--sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.spinner--md {
+  width: 40px;
+  height: 40px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/components/CredentialList.vue

@@ -32,6 +32,7 @@
           </div>
           <h4 class="item-title">{{ getCredentialAuthName(credential) }}</h4>
           <div class="item-actions">
+            <span v-if="credential.rp_id && settings?.rp_id && credential.rp_id !== settings.rp_id" class="badge badge-domain" :title="`Passkey registered for ${credential.rp_id}`">{{ credential.rp_id }}</span>
             <span v-if="credential.is_current_session && !hoveredCredentialUuid && !hoveredSessionCredentialUuid" class="badge badge-current">Current</span>
             <span v-else-if="hoveredCredentialUuid === credential.credential" class="badge badge-current">Selected</span>
             <span v-else-if="hoveredSessionCredentialUuid === credential.credential" class="badge badge-current">Linked</span>
@@ -61,8 +62,13 @@
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
 import { formatDate } from '@/utils/helpers'
 import { navigateGrid, handleEscape, handleDeleteKey, getDirection } from '@/utils/keynav'
+import { getSettings } from '@/utils/settings'
+
+const settings = ref(null)
+onMounted(async () => { settings.value = await getSettings() })
 
 const props = defineProps({
   credentials: { type: Array, default: () => [] },
@@ -148,8 +154,8 @@ const getCredentialAuthIcon = (credential) => {
   const info = props.aaguidInfo?.[credential.aaguid]
   if (!info) return null
   const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-  const iconKey = isDarkMode ? 'icon_dark' : 'icon_light'
-  return info[iconKey] || null
+  // Fall back to icon if icon_dark is not available
+  return (isDarkMode && info.icon_dark) || info.icon || null
 }
 </script>
 

frontend/src/components/HostProfileView.vue

@@ -1,89 +1,116 @@
 <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>
+  <div class="view-root host-profile" data-view="host-profile">
+    <div class="surface surface--tight">
+      <!-- Heading/lede belong to the standalone page; in the dialog the host
+           page already provides the surrounding context. -->
+      <header v-if="!inIframe" class="view-header center">
+        <h1>{{ headingTitle }}</h1>
+        <p class="view-lede">{{ subheading }}</p>
+      </header>
 
-    <section class="section-block" ref="userInfoSection">
-      <div class="section-body">
-        <UserBasicInfo
-          v-if="ctx"
-          :name="ctx.user.display_name"
-          :visits="authStore.userInfo?.visits || 0"
-          :created-at="authStore.userInfo?.created_at"
-          :last-seen="authStore.userInfo?.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" ref="buttonRow" @keydown="handleButtonRowKeydown">
-          <button
-            type="button"
-            class="btn-secondary"
-            @click="goBack"
-          >
-            Back
-          </button>
-          <button
-            type="button"
-            class="btn-danger"
-            :disabled="authStore.isLoading"
-            @click="logout"
-          >
-            {{ authStore.isLoading ? 'Signing out…' : 'Logout' }}
-          </button>
-          <button
-            v-if="authSiteUrl"
-            type="button"
-            class="btn-primary"
-            :disabled="authStore.isLoading"
-            @click="goToAuthSite"
-          >
-            Full Profile
-          </button>
+      <section class="section-block">
+        <div class="section-body">
+          <UserBasicInfo
+            v-if="sessionCtx && info"
+            :name="sessionCtx.user.display_name"
+            :avatar-url="info.user.avatar_url"
+            :visits="info.user.visits"
+            :created-at="info.user.created_at"
+            :last-seen="info.user.last_seen"
+            :email="sessionCtx.user.email"
+            :telephone="sessionCtx.user.telephone"
+            :org-display-name="orgDisplayName"
+            :role-name="roleDisplayName"
+            :can-edit="false"
+          />
+          <p v-else class="empty-state">
+            {{ loading ? 'Loading your account…' : 'No active session found.' }}
+          </p>
         </div>
-        <p class="note"><strong>Logout</strong> from {{ currentHost }}, or access your <strong>Full Profile</strong> at {{ authSiteHost }} (you may need to sign in again).</p>
-      </div>
-    </section>
-  </section>
+      </section>
+
+      <section class="section-block">
+        <div class="section-body host-actions">
+          <div class="button-row" ref="buttonRow" @keydown="handleButtonRowKeydown">
+            <button
+              type="button"
+              class="btn-secondary"
+              @click="$emit('back')"
+            >
+              Back
+            </button>
+            <button
+              v-if="sessionCtx"
+              type="button"
+              class="btn-danger"
+              :disabled="busy"
+              @click="logout"
+            >
+              {{ busy ? 'Signing out…' : 'Logout' }}
+            </button>
+            <button
+              type="button"
+              class="btn-primary"
+              :disabled="busy"
+              @click="goToAuthSite"
+            >
+              Full Profile
+            </button>
+          </div>
+          <p v-if="!inIframe" class="note"><strong>Logout</strong> from {{ currentHost }}, or view your <strong>Full Profile</strong> at {{ authSiteHost }} (you may need to sign in again).</p>
+        </div>
+      </section>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
-import { useAuthStore } from '@/stores/auth'
-import { goBack } from '@/utils/helpers'
+import { getSettings } from '@/utils/settings'
+import { fetchJson, settings as paskiaSettings } from 'paskia'
+import { updateThemeFromSession } from '@/utils/theme'
 import { getDirection, navigateButtonRow } from '@/utils/keynav'
 
-defineProps({
-  initializing: {
-    type: Boolean,
-    default: false
+// Data may be provided by the parent (full-page /auth/ app already loaded it
+// into the store); otherwise the component fetches it itself (restricted iframe).
+const props = defineProps({
+  ctx: {
+    type: Object,
+    default: null
+  },
+  userInfo: {
+    type: Object,
+    default: null
+  },
+  settings: {
+    type: Object,
+    default: null
   }
 })
 
-const authStore = useAuthStore()
+const emit = defineEmits(['back', 'logout'])
+
+const inIframe = window.parent !== window
 const currentHost = window.location.host
 
+const fetchedCtx = ref(null)
+const fetchedInfo = ref(null)
+const fetchedSettings = ref(null)
+const loading = ref(!(props.ctx && props.userInfo))
+const busy = ref(false)
+
 // Template refs for navigation
-const userInfoSection = ref(null)
 const buttonRow = ref(null)
 
-const ctx = computed(() => authStore.userInfo?.ctx || null)
-const orgDisplayName = computed(() => ctx.value?.org.display_name ?? '')
-const roleDisplayName = computed(() => ctx.value?.role.display_name ?? '')
+const sessionCtx = computed(() => props.ctx || fetchedCtx.value)
+const info = computed(() => props.userInfo || fetchedInfo.value)
+const settingsData = computed(() => props.settings || fetchedSettings.value)
+const orgDisplayName = computed(() => sessionCtx.value?.org?.display_name ?? '')
+const roleDisplayName = computed(() => sessionCtx.value?.role?.display_name ?? '')
 
 const headingTitle = computed(() => {
-  const service = authStore.settings?.rp_name
+  const service = settingsData.value?.rp_name
   return service ? `${service} account` : 'Account overview'
 })
 
@@ -91,11 +118,12 @@ const subheading = computed(() => {
   return `You're signed in to ${currentHost}.`
 })
 
-const authSiteHost = computed(() => authStore.settings?.auth_host || '')
+const authSiteHost = computed(() => settingsData.value?.auth_host || '')
 const authSiteUrl = computed(() => {
-  const host = authSiteHost.value
-  if (!host) return ''
-  let path = authStore.settings?.ui_base_path ?? '/auth/'
+  // Fall back to the current host when no separate auth host is configured;
+  // the full profile is at ui_base_path either way.
+  const host = authSiteHost.value || currentHost
+  let path = settingsData.value?.ui_base_path ?? '/auth/'
   if (!path.startsWith('/')) path = `/${path}`
   if (!path.endsWith('/')) path = `${path}/`
   const protocol = window.location.protocol || 'https:'
@@ -104,11 +132,27 @@ const authSiteUrl = computed(() => {
 
 const goToAuthSite = () => {
   if (!authSiteUrl.value) return
-  window.location.href = authSiteUrl.value
+  // Inside an iframe, open the full profile in a new window and close the
+  // frame (auth-back) so the host page regains focus.
+  if (inIframe) {
+    window.open(authSiteUrl.value, '_blank')
+    emit('back')
+  } else {
+    window.location.href = authSiteUrl.value
+  }
 }
 
 const logout = async () => {
-  await authStore.logout()
+  if (busy.value) return
+  busy.value = true
+  try {
+    await fetchJson('/auth/api/logout', { method: 'POST', timeout: paskiaSettings.auth_ms })
+  } catch (error) {
+    console.error('Logout error:', error)
+  }
+  // The parent decides how to react: the full-page app reloads, the iframe
+  // host receives auth-logout and closes the frame.
+  emit('logout')
 }
 
 // Keyboard navigation for button row
@@ -121,16 +165,39 @@ const handleButtonRowKeydown = (event) => {
   if (direction === 'left' || direction === 'right') {
     navigateButtonRow(buttonRow.value, event.target, direction, { itemSelector: 'button' })
   }
-  // Up does nothing (no elements above to navigate to)
-  // Down does nothing (no elements below to navigate to)
 }
+
+onMounted(async () => {
+  if (!props.settings) {
+    getSettings().then((data) => { fetchedSettings.value = data })
+  }
+  if (props.ctx && props.userInfo) return
+  try {
+    const [validateData, infoData] = await Promise.all([
+      fetchJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms }),
+      fetchJson('/auth/api/user-info', { method: 'GET', timeout: paskiaSettings.auth_ms })
+    ])
+    fetchedCtx.value = validateData.ctx
+    fetchedInfo.value = infoData
+    updateThemeFromSession(validateData.ctx)
+  } catch (error) {
+    if (error.status !== 401 && error.status !== 403) {
+      console.error('Failed to load account summary:', error)
+    }
+  } finally {
+    loading.value = false
+  }
+})
 </script>
 
 <style scoped>
-.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: 1 1 0; }
-.note { margin: 0; color: var(--color-text-muted); }
-.empty-state { margin: 0; color: var(--color-text-muted); }
+.view-root.host-profile { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
+.surface.surface--tight {
+  max-width: 520px;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+}
 </style>

frontend/src/components/LoadingView.vue

@@ -27,17 +27,12 @@ defineProps({
 .loading-spinner {
   width: 40px;
   height: 40px;
-  border: 4px solid var(--color-border);
-  border-top: 4px solid var(--color-primary);
+  border: 3px solid var(--color-border);
+  border-top-color: 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;

frontend/src/components/Modal.vue

@@ -1,12 +1,18 @@
 <template>
-  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
-    <slot />
-  </dialog>
+  <div class="dialog-overlay" @click="$emit('close')">
+    <div class="modal-wrap">
+      <div ref="dialog" :class="['modal-panel', panelClass]" @keydown="handleDialogKeydown" @click.stop>
+        <slot />
+      </div>
+      <slot name="attached" />
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import { navigateButtonRow, getDirection, focusPreferred, focusDialogDefault } from '@/utils/keynav'
+import { holdGlobalBackdrop, releaseGlobalBackdrop } from 'paskia'
 
 const props = defineProps({
   // Optional: provide a fallback element to focus if original element is gone
@@ -14,10 +20,12 @@ const props = defineProps({
   // Optional: index to help find next sibling when item is deleted
   focusIndex: { type: Number, default: -1 },
   // Optional: selector for finding siblings when restoring focus
-  focusSiblingSelector: { type: String, default: '' }
+  focusSiblingSelector: { type: String, default: '' },
+  // Optional: extra class name(s) for the modal panel
+  panelClass: { type: [String, Array, Object], default: '' }
 })
 
-defineEmits(['close'])
+const emit = defineEmits(['close'])
 
 // Dialog element reference
 const dialog = ref(null)
@@ -76,6 +84,13 @@ const restoreFocus = () => {
 }
 
 const handleDialogKeydown = (event) => {
+  // ESC to close (previously handled by <dialog> natively)
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('close')
+    return
+  }
+
   const direction = getDirection(event)
   if (!direction) return
 
@@ -111,11 +126,11 @@ onMounted(() => {
   // Save currently focused element before modal takes focus
   previouslyFocusedElement.value = document.activeElement
 
-  // Show the dialog as a modal
+  holdGlobalBackdrop()
+
+  // Focus the most appropriate element
   nextTick(() => {
     if (dialog.value) {
-      dialog.value.showModal()
-
       // Autofocus the most appropriate element:
       // - For form dialogs (rename, edit): focus first input and select text
       // - For other dialogs: focus primary button (or fallback)
@@ -131,14 +146,16 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  releaseGlobalBackdrop()
   // Restore focus when modal closes
   restoreFocus()
 })
 </script>
 
 <style scoped>
-dialog {
-  background: var(--color-surface);
+.modal-panel {
+  background: var(--color-dialog);
+  color: var(--color-text);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl);
@@ -147,65 +164,36 @@ dialog {
   width: min(500px, 90vw);
   max-height: 90vh;
   overflow-y: auto;
-  position: fixed;
-  inset: 0;
-  margin: auto;
-  height: fit-content;
 }
 
-dialog::backdrop {
-  background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
-}
-
-dialog :deep(.modal-title),
-dialog :deep(h3) {
+.modal-panel :deep(.modal-title),
+.modal-panel :deep(h3) {
   margin: 0 0 var(--space-md);
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--color-heading);
 }
 
-dialog :deep(form) {
+.modal-panel :deep(form) {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
 }
 
-dialog :deep(.modal-form) {
+.modal-panel :deep(.modal-form) {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
 }
 
-dialog :deep(.modal-form label) {
+.modal-panel :deep(.modal-form label) {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
   font-weight: 500;
 }
 
-dialog :deep(.modal-form input),
-dialog :deep(.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;
-}
-
-dialog :deep(.modal-form input:focus),
-dialog :deep(.modal-form textarea:focus) {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px #c7d2fe;
-}
-
-dialog :deep(.modal-actions) {
+.modal-panel :deep(.modal-actions) {
   display: flex;
   justify-content: flex-end;
   gap: var(--space-sm);

frontend/src/components/NameEditForm.vue

@@ -84,12 +84,4 @@ function handleCancel() {
   flex-direction: column;
   gap: var(--space-md);
 }
-
-.error {
-  color: var(--color-danger-text);
-}
-
-.small {
-  font-size: 0.9rem;
-}
 </style>

frontend/src/components/ProfilePicture.vue

@@ -0,0 +1,126 @@
+<template>
+  <component
+    :is="rootTag"
+    v-bind="rootAttrs"
+    class="profile-picture"
+    :class="{ 'profile-picture-btn': clickable }"
+    :style="pictureStyle"
+    @click="handleClick"
+  >
+    <img
+      v-if="showPicture"
+      :key="`${src || 'none'}:${renderVersion}`"
+      :src="src"
+      alt=""
+      class="profile-picture-image"
+      @error="handleError"
+    />
+    <img
+      v-else
+      :src="profileGeneric"
+      alt=""
+      class="profile-picture-fallback"
+    />
+  </component>
+</template>
+
+<script setup>
+import profileGeneric from '@/assets/profile-generic.svg'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  src: { type: String, default: null },
+  clickable: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  renderVersion: { type: [Number, String], default: 0 },
+  width: { type: String, default: '3rem' },
+  height: { type: String, default: '3rem' },
+  radius: { type: String, default: '0.9rem' },
+  fit: { type: String, default: 'cover' },
+  filter: { type: String, default: 'none' },
+  fallbackSize: { type: String, default: '2em' }
+})
+
+const emit = defineEmits(['click'])
+const pictureAvailable = ref(true)
+
+const rootTag = computed(() => (props.clickable ? 'button' : 'div'))
+const showPicture = computed(() => !!props.src && pictureAvailable.value)
+const pictureStyle = computed(() => ({
+  '--profile-picture-width': props.width,
+  '--profile-picture-height': props.height,
+  '--profile-picture-radius': props.radius,
+  '--profile-picture-fit': props.fit,
+  '--profile-picture-filter': props.filter,
+  '--profile-picture-fallback-size': props.fallbackSize
+}))
+const rootAttrs = computed(() => {
+  if (!props.clickable) return { title: props.title || undefined }
+  return {
+    type: 'button',
+    disabled: props.loading,
+    title: props.title || undefined
+  }
+})
+
+watch(() => props.src, () => {
+  pictureAvailable.value = true
+})
+
+const handleError = () => {
+  pictureAvailable.value = false
+}
+
+const handleClick = () => {
+  if (!props.clickable || props.loading) return
+  emit('click')
+}
+</script>
+
+<style scoped>
+.profile-picture {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--profile-picture-width);
+  height: var(--profile-picture-height);
+  font-size: var(--profile-picture-fallback-size);
+  line-height: 1;
+  overflow: hidden;
+  border-radius: var(--profile-picture-radius);
+  background: transparent;
+  flex-shrink: 0;
+}
+
+.profile-picture-btn {
+  padding: 0;
+  border: 0;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  cursor: pointer;
+}
+
+.profile-picture-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: inset 0 0 0 1px var(--color-accent);
+}
+
+.profile-picture-btn:disabled {
+  cursor: progress;
+}
+
+.profile-picture-image {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--profile-picture-fit);
+  display: block;
+  filter: var(--profile-picture-filter);
+}
+
+.profile-picture-fallback {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+</style>

frontend/src/components/ProfilePictureEditorModal.vue

@@ -0,0 +1,489 @@
+<template>
+  <Modal panel-class="modal-panel--avatar" @close="closeEditor">
+    <h3>{{ title }}</h3>
+    <input
+      ref="pictureInput"
+      type="file"
+      accept="image/*"
+      class="profile-picture-editor-input"
+      :disabled="saving"
+      @change="handlePictureSelected"
+    />
+    <div ref="picturePreview" class="profile-picture-editor-preview" :style="previewStyle">
+      <img
+        v-if="editorImageUrl && displayMetrics"
+        :src="editorImageUrl"
+        alt=""
+        class="profile-picture-editor-image"
+        :style="editorImageStyle"
+      />
+      <img
+        v-if="editorImageUrl && displayMetrics"
+        :src="editorImageUrl"
+        alt=""
+        class="profile-picture-editor-image profile-picture-editor-image--overlay"
+        :style="editorOverlayStyle"
+      />
+      <div
+        v-if="editorImageUrl && displayMetrics"
+        class="profile-picture-editor-crop"
+        :style="cropBoxStyle"
+        @pointerdown="startMove"
+      >
+        <div class="profile-picture-editor-guides" aria-hidden="true">
+          <div class="profile-picture-editor-guide profile-picture-editor-guide--circle"></div>
+          <div class="profile-picture-editor-guide profile-picture-editor-guide--eyes"></div>
+          <div class="profile-picture-editor-guide profile-picture-editor-guide--cheek-left"></div>
+          <div class="profile-picture-editor-guide profile-picture-editor-guide--cheek-right"></div>
+        </div>
+        <button
+          type="button"
+          class="profile-picture-editor-handle profile-picture-editor-handle--nw"
+          @pointerdown.stop="startResize($event, 'nw')"
+        ></button>
+        <button
+          type="button"
+          class="profile-picture-editor-handle profile-picture-editor-handle--ne"
+          @pointerdown.stop="startResize($event, 'ne')"
+        ></button>
+        <button
+          type="button"
+          class="profile-picture-editor-handle profile-picture-editor-handle--sw"
+          @pointerdown.stop="startResize($event, 'sw')"
+        ></button>
+        <button
+          type="button"
+          class="profile-picture-editor-handle profile-picture-editor-handle--se"
+          @pointerdown.stop="startResize($event, 'se')"
+        ></button>
+      </div>
+      <ProfilePicture
+        v-else
+        class="profile-picture-editor-trigger"
+        :src="pictureUrl"
+        :render-version="renderVersion"
+        clickable
+        :loading="saving"
+        title="Choose profile picture"
+        width="100%"
+        height="100%"
+        radius="0"
+        fit="contain"
+        fallback-size="5rem"
+        @click="triggerPictureSelect"
+      />
+    </div>
+    <div v-if="errorMessage" class="error small">{{ errorMessage }}</div>
+    <div class="modal-actions">
+      <button type="button" class="btn-secondary" :disabled="saving" @click="closeEditor">Back</button>
+      <button
+        v-if="!editorImageUrl && pictureUrl"
+        type="button"
+        class="btn-danger"
+        :disabled="saving"
+        @click="removePicture"
+      >Delete</button>
+      <button
+        v-if="editorImageUrl"
+        type="button"
+        class="btn-primary"
+        :disabled="saving"
+        @click="savePicture"
+      >Save</button>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { apiJson } from 'paskia'
+import { useAuthStore } from '@/stores/auth'
+import Modal from '@/components/Modal.vue'
+import ProfilePicture from '@/components/ProfilePicture.vue'
+
+const AVATAR_UPLOAD_SIZE = 720
+const MIN_CROP_SIZE = 36
+
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  pictureUrl: { type: String, default: null },
+  renderVersion: { type: [Number, String], default: 0 },
+  title: { type: String, default: 'Profile Picture' }
+})
+
+const emit = defineEmits(['close', 'updated'])
+const authStore = useAuthStore()
+
+const pictureInput = ref(null)
+const picturePreview = ref(null)
+const editorImage = ref(null)
+const editorImageUrl = ref('')
+const previewObjectUrl = ref(null)
+const saving = ref(false)
+const errorMessage = ref('')
+const cropRect = reactive({ x: 0, y: 0, size: 0 })
+const previewRect = reactive({ width: 0, height: 0 })
+const viewportSize = reactive({ width: 0, height: 0 })
+let dragState = null
+let previewObserver = null
+
+onMounted(async () => {
+  viewportSize.width = window.innerWidth
+  viewportSize.height = window.innerHeight
+  window.addEventListener('pointermove', handlePointerMove)
+  window.addEventListener('pointerup', endPointerInteraction)
+  window.addEventListener('resize', syncPreviewRect)
+  await nextTick()
+  syncPreviewRect()
+  if (picturePreview.value && typeof ResizeObserver !== 'undefined') {
+    previewObserver = new ResizeObserver(() => syncPreviewRect())
+    previewObserver.observe(picturePreview.value)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('pointermove', handlePointerMove)
+  window.removeEventListener('pointerup', endPointerInteraction)
+  window.removeEventListener('resize', syncPreviewRect)
+  previewObserver?.disconnect()
+  clearPreviewObjectUrl()
+})
+
+watch(editorImage, async (image) => {
+  if (!image) return
+  await nextTick()
+  syncPreviewRect()
+  initializeCrop()
+})
+
+const clearPreviewObjectUrl = () => {
+  if (!previewObjectUrl.value) return
+  URL.revokeObjectURL(previewObjectUrl.value)
+  previewObjectUrl.value = null
+}
+
+const resetEditor = () => {
+  clearPreviewObjectUrl()
+  editorImage.value = null
+  editorImageUrl.value = ''
+  cropRect.x = 0
+  cropRect.y = 0
+  cropRect.size = 0
+  errorMessage.value = ''
+  if (pictureInput.value) pictureInput.value.value = ''
+}
+
+const syncPreviewRect = () => {
+  viewportSize.width = window.innerWidth
+  viewportSize.height = window.innerHeight
+  const element = picturePreview.value
+  if (!element) return
+  previewRect.width = element.clientWidth
+  previewRect.height = element.clientHeight
+}
+
+const previewStyle = computed(() => {
+  const image = editorImage.value
+  if (!image) {
+    const size = Math.min(viewportSize.width * 0.72, viewportSize.height * 0.42, 352)
+    return {
+      width: `${Math.max(160, Math.round(size))}px`,
+      height: `${Math.max(160, Math.round(size))}px`
+    }
+  }
+
+  const maxWidth = Math.min(viewportSize.width * 0.88, 928)
+  const maxHeight = Math.min(viewportSize.height * 0.62, 620)
+  const scale = Math.min(maxWidth / image.naturalWidth, maxHeight / image.naturalHeight)
+
+  return {
+    width: `${Math.max(1, Math.round(image.naturalWidth * scale))}px`,
+    height: `${Math.max(1, Math.round(image.naturalHeight * scale))}px`
+  }
+})
+
+const displayMetrics = computed(() => {
+  const image = editorImage.value
+  if (!image || !previewRect.width || !previewRect.height) return null
+  const scale = Math.min(previewRect.width / image.naturalWidth, previewRect.height / image.naturalHeight)
+  const width = image.naturalWidth * scale
+  const height = image.naturalHeight * scale
+  return {
+    x: (previewRect.width - width) / 2,
+    y: (previewRect.height - height) / 2,
+    width,
+    height
+  }
+})
+
+const editorImageStyle = computed(() => {
+  const metrics = displayMetrics.value
+  if (!metrics) return null
+  return {
+    width: `${metrics.width}px`,
+    height: `${metrics.height}px`,
+    left: `${metrics.x}px`,
+    top: `${metrics.y}px`
+  }
+})
+
+const editorOverlayStyle = computed(() => {
+  const metrics = displayMetrics.value
+  if (!metrics || !cropRect.size) return editorImageStyle.value
+
+  const left = cropRect.x
+  const top = cropRect.y
+  const right = cropRect.x + cropRect.size
+  const bottom = cropRect.y + cropRect.size
+
+  return {
+    ...editorImageStyle.value,
+    clipPath: `polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${left}px ${top}px, ${left}px ${bottom}px, ${right}px ${bottom}px, ${right}px ${top}px, ${left}px ${top}px)`
+  }
+})
+
+const cropBoxStyle = computed(() => {
+  const metrics = displayMetrics.value
+  if (!metrics || !cropRect.size) return null
+  return {
+    left: `${metrics.x + cropRect.x}px`,
+    top: `${metrics.y + cropRect.y}px`,
+    width: `${cropRect.size}px`,
+    height: `${cropRect.size}px`
+  }
+})
+
+const initializeCrop = () => {
+  const metrics = displayMetrics.value
+  if (!metrics) return
+  const size = Math.min(metrics.width, metrics.height)
+  cropRect.size = size
+  cropRect.x = (metrics.width - size) / 2
+  cropRect.y = (metrics.height - size) / 2
+}
+
+const triggerPictureSelect = () => {
+  pictureInput.value?.click()
+}
+
+const handlePictureSelected = async (event) => {
+  const nextFile = event.target.files?.[0] || null
+  resetEditor()
+  if (!nextFile) return
+
+  previewObjectUrl.value = URL.createObjectURL(nextFile)
+  editorImageUrl.value = previewObjectUrl.value
+  const image = new Image()
+  image.decoding = 'async'
+  image.src = editorImageUrl.value
+  try {
+    await image.decode()
+    editorImage.value = image
+  } catch {
+    errorMessage.value = 'Failed to load image'
+    resetEditor()
+  }
+}
+
+const startMove = (event) => {
+  if (!displayMetrics.value || saving.value) return
+  event.preventDefault()
+  dragState = {
+    mode: 'move',
+    startX: event.clientX,
+    startY: event.clientY,
+    initialX: cropRect.x,
+    initialY: cropRect.y,
+    initialSize: cropRect.size
+  }
+}
+
+const startResize = (event, handle) => {
+  if (!displayMetrics.value || saving.value) return
+  event.preventDefault()
+  dragState = {
+    mode: 'resize',
+    handle,
+    startX: event.clientX,
+    startY: event.clientY,
+    initialX: cropRect.x,
+    initialY: cropRect.y,
+    initialSize: cropRect.size
+  }
+}
+
+const handlePointerMove = (event) => {
+  if (!dragState) return
+  const metrics = displayMetrics.value
+  if (!metrics) return
+
+  const dx = event.clientX - dragState.startX
+  const dy = event.clientY - dragState.startY
+
+  if (dragState.mode === 'move') {
+    cropRect.x = Math.max(0, Math.min(metrics.width - dragState.initialSize, dragState.initialX + dx))
+    cropRect.y = Math.max(0, Math.min(metrics.height - dragState.initialSize, dragState.initialY + dy))
+    return
+  }
+
+  const directionMap = {
+    nw: { deltaX: -1, deltaY: -1 },
+    ne: { deltaX: 1, deltaY: -1 },
+    sw: { deltaX: -1, deltaY: 1 },
+    se: { deltaX: 1, deltaY: 1 }
+  }
+  const direction = directionMap[dragState.handle]
+  if (!direction) return
+
+  const delta = Math.max(dx * direction.deltaX, dy * direction.deltaY)
+  const nextSize = Math.max(
+    MIN_CROP_SIZE,
+    Math.min(getResizeLimit(metrics, dragState), dragState.initialSize + delta)
+  )
+
+  applyResize(dragState, nextSize)
+}
+
+const endPointerInteraction = () => {
+  dragState = null
+}
+
+const getResizeLimit = (metrics, state) => {
+  const { initialX, initialY, initialSize, handle } = state
+
+  if (handle === 'nw') return Math.min(initialX + initialSize, initialY + initialSize)
+  if (handle === 'ne') return Math.min(metrics.width - initialX, initialY + initialSize)
+  if (handle === 'sw') return Math.min(initialX + initialSize, metrics.height - initialY)
+  return Math.min(metrics.width - initialX, metrics.height - initialY)
+}
+
+const applyResize = (state, size) => {
+  const { initialX, initialY, initialSize, handle } = state
+
+  if (handle === 'nw') {
+    cropRect.x = initialX + initialSize - size
+    cropRect.y = initialY + initialSize - size
+    cropRect.size = size
+    return
+  }
+
+  if (handle === 'ne') {
+    cropRect.x = initialX
+    cropRect.y = initialY + initialSize - size
+    cropRect.size = size
+    return
+  }
+
+  if (handle === 'sw') {
+    cropRect.x = initialX + initialSize - size
+    cropRect.y = initialY
+    cropRect.size = size
+    return
+  }
+
+  cropRect.x = initialX
+  cropRect.y = initialY
+  cropRect.size = size
+}
+
+const renderPictureBlob = async () => {
+  const image = editorImage.value
+  if (!image) throw new Error('No image selected')
+  const metrics = displayMetrics.value
+  if (!metrics || !cropRect.size) throw new Error('Crop selection unavailable')
+
+  const canvas = document.createElement('canvas')
+  canvas.width = AVATAR_UPLOAD_SIZE
+  canvas.height = AVATAR_UPLOAD_SIZE
+  const context = canvas.getContext('2d')
+  if (!context) throw new Error('Canvas unavailable')
+
+  const sourceScale = image.naturalWidth / metrics.width
+  const sourceX = cropRect.x * sourceScale
+  const sourceY = cropRect.y * sourceScale
+  const sourceSize = cropRect.size * sourceScale
+  context.drawImage(image, sourceX, sourceY, sourceSize, sourceSize, 0, 0, AVATAR_UPLOAD_SIZE, AVATAR_UPLOAD_SIZE)
+
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new Error('Failed to export cropped picture'))
+        return
+      }
+      resolve(blob)
+    }, 'image/webp', 0.9)
+  })
+}
+
+const reloadPictureFromCache = async () => {
+  const response = await fetch(props.endpoint, {
+    method: 'GET',
+    credentials: 'same-origin',
+    cache: 'reload'
+  })
+  if (!response.ok) throw new Error('Failed to refresh profile picture')
+}
+
+const savePicture = async () => {
+  try {
+    saving.value = true
+    errorMessage.value = ''
+    const blob = await renderPictureBlob()
+    const formData = new FormData()
+    formData.append('file', blob, 'profile.webp')
+    await apiJson(props.endpoint, { method: 'PUT', body: formData })
+    await reloadPictureFromCache()
+    authStore.showMessage('Profile picture updated.', 'success', 3000)
+    emit('updated')
+    closeEditor()
+  } catch (error) {
+    errorMessage.value = error.message || 'Failed to update profile picture'
+  } finally {
+    saving.value = false
+  }
+}
+
+const removePicture = async () => {
+  try {
+    saving.value = true
+    errorMessage.value = ''
+    await apiJson(props.endpoint, { method: 'DELETE' })
+    authStore.showMessage('Profile picture removed.', 'success', 3000)
+    emit('updated')
+    closeEditor()
+  } catch (error) {
+    errorMessage.value = error.message || 'Failed to remove profile picture'
+  } finally {
+    saving.value = false
+  }
+}
+
+const closeEditor = () => {
+  resetEditor()
+  emit('close')
+}
+</script>
+
+<style scoped>
+.profile-picture-editor-input { display: none; }
+.profile-picture-editor-preview { position: relative; display: flex; justify-content: center; align-items: center; width: auto; max-width: min(58rem, 88vw); min-height: 0; margin: 0 auto; overflow: visible; }
+.profile-picture-editor-trigger { min-width: 0; }
+.profile-picture-editor-image { position: absolute; user-select: none; pointer-events: none; object-fit: contain; }
+.profile-picture-editor-image--overlay { filter: grayscale(0.45) saturate(0.7) brightness(0.68); }
+.profile-picture-editor-crop { position: absolute; border: 2px solid white; cursor: move; touch-action: none; }
+.profile-picture-editor-guides { position: absolute; inset: 0; pointer-events: none; }
+.profile-picture-editor-guide { position: absolute; border-color: rgba(255, 255, 255, 0.52); }
+.profile-picture-editor-guide--circle { inset: 0; border: 1.5px solid rgba(255, 255, 255, 0.62); border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
+.profile-picture-editor-guide--eyes { left: 18%; right: 18%; top: 38%; border-top: 1.5px solid rgba(255, 255, 255, 0.56); }
+.profile-picture-editor-guide--cheek-left { top: 24%; bottom: 18%; left: 24%; border-left: 1.5px solid rgba(255, 255, 255, 0.48); }
+.profile-picture-editor-guide--cheek-right { top: 24%; bottom: 18%; right: 24%; border-right: 1.5px solid rgba(255, 255, 255, 0.48); }
+.profile-picture-editor-handle { position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 999px; border: 2px solid white; background: var(--color-accent); padding: 0; }
+.profile-picture-editor-handle--nw { left: -0.55rem; top: -0.55rem; cursor: nwse-resize; }
+.profile-picture-editor-handle--ne { right: -0.55rem; top: -0.55rem; cursor: nesw-resize; }
+.profile-picture-editor-handle--sw { left: -0.55rem; bottom: -0.55rem; cursor: nesw-resize; }
+.profile-picture-editor-handle--se { right: -0.55rem; bottom: -0.55rem; cursor: nwse-resize; }
+:deep(.modal-panel--avatar) { width: fit-content; max-width: min(58rem, 94vw); }
+@media (max-width: 720px) {
+  .profile-picture-editor-preview { max-width: 100%; }
+}
+</style>

frontend/src/components/ProfileView.vue

@@ -1,26 +1,36 @@
 <template>
-  <section class="view-root" data-view="profile">
-    <div class="theme-toggle">
-      <ThemeSelector />
+  <section class="view-root view-root--profile" data-view="profile">
+    <div class="view-header-wrapper">
+      <div class="theme-toggle">
+        <ThemeSelector />
+      </div>
+      <header class="view-header">
+        <Breadcrumbs ref="breadcrumbs" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
+        <p class="view-lede">Account dashboard to manage your profile and authentications.</p>
+      </header>
     </div>
-    <header class="view-header">
-      <h1>User Profile</h1>
-      <Breadcrumbs ref="breadcrumbs" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
-      <p class="view-lede">Account dashboard for managing credentials and authenticating with other devices.</p>
-    </header>
 
-    <section class="section-block" ref="userInfoSection">
+    <section class="section-block section-block--constrained" ref="userInfoSection">
       <UserBasicInfo
-        v-if="authStore.userInfo?.ctx"
+        v-if="authStore.userInfo?.user"
         ref="userBasicInfo"
-        :name="authStore.userInfo.ctx.user.display_name"
-        :visits="authStore.userInfo.visits"
-        :created-at="authStore.userInfo.created_at"
-        :last-seen="authStore.userInfo.last_seen"
+        :name="authStore.userInfo.user.display_name"
+        :avatar-url="authStore.userInfo.user.avatar_url"
+        :avatar-render-version="avatarRenderVersion"
+        avatar-clickable
+        :email="authStore.userInfo.user.email"
+        :preferred_username="authStore.userInfo.user.preferred_username"
+        :telephone="authStore.userInfo.user.telephone"
+        :visits="authStore.userInfo.user.visits"
+        :created-at="authStore.userInfo.user.created_at"
+        :last-seen="authStore.userInfo.user.last_seen"
         :loading="authStore.isLoading"
-        update-endpoint="/auth/api/user/display-name"
+        :org-display-name="authStore.userInfo.org.display_name"
+        :role-name="authStore.userInfo.role.display_name"
+        update-endpoint="/auth/api/user/info"
         @saved="authStore.loadUserInfo()"
-        @edit-name="openNameDialog"
+        @avatar-click="openAvatarDialog"
+        @edit="openEditDialog"
         @keydown="handleUserInfoKeydown"
       >
         <div class="remote-auth-inline">
@@ -34,20 +44,24 @@
             @device-info-visible="showDeviceInfo = $event"
           />
         </div>
-        <p class="remote-auth-description">Provided by another device requesting remote auth.</p>
+        <p class="remote-auth-description">Login from another device</p>
       </UserBasicInfo>
     </section>
 
-    <section class="section-block">
+    <section :class="['section-block', { 'section-block--constrained': !useWideLayout }]">
       <div class="section-header">
         <h2>Your Passkeys</h2>
         <p class="section-description">Ideally have at least two passkeys in case you lose one. More than one user can be registered on the same device, giving you a choice at login. <a href="https://bitwarden.com/pricing/" target="_blank" rel="noopener noreferrer">Bitwarden</a> can sync one passkey to all your devices. Other secure options include <b>local passkeys</b>, as well as hardware keys such as <a href="https://www.yubico.com" target="_blank" rel="noopener noreferrer">YubiKey</a>. Cloud sync via Google, Microsoft or iCloud is discouraged.</p>
       </div>
       <div class="section-body">
+        <div v-if="missingDomainPasskey" class="domain-enroll-notice">
+          <p>You don't have a passkey for <strong>{{ rpName }}</strong> ({{ authStore.settings.rp_id }}) yet. Add one to log in here directly.</p>
+          <button @click="addNewCredential" class="btn-primary">Add Passkey for {{ authStore.settings.rp_id }}</button>
+        </div>
         <CredentialList
           ref="credentialList"
-          :credentials="authStore.userInfo?.credentials || []"
-          :aaguid-info="authStore.userInfo?.aaguid_info || {}"
+          :credentials="credentials"
+          :aaguid-info="authStore.userInfo.aaguid_info"
           :loading="authStore.isLoading"
           :hovered-credential-uuid="hoveredCredentialUuid"
           :hovered-session-credential-uuid="hoveredSession?.credential"
@@ -70,25 +84,14 @@
       :terminating-sessions="terminatingSessions"
       :hovered-credential-uuid="hoveredCredentialUuid"
       :navigation-disabled="hasActiveModal"
+      :section-class="useWideLayout ? '' : 'section-block--constrained'"
       @terminate="terminateSession"
       @session-hover="hoveredSession = $event"
       @navigate-out="handleSessionNavigateOut"
       section-description="You are currently signed in to the following sessions. If you don't recognize something, consider deleting not only the session but the associated passkey you suspect is compromised, as only this terminates all linked sessions and prevents logging in again."
     />
 
-    <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">
+    <section :class="['section-block', { 'section-block--constrained': !useWideLayout }]">
       <div class="button-row" ref="logoutButtons">
         <button
           type="button"
@@ -104,9 +107,47 @@
           <button @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">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>
+      <div class="logout-footer">
+        <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 }}.</p>
+        <a class="paskia-version" href="https://git.zi.fi/leovasanko/paskia" target="_blank" rel="noopener noreferrer">Paskia {{ paskiaVersion }}</a>
+      </div>
     </section>
+
+    <Modal v-if="showEditDialog" @close="showEditDialog = false">
+      <h3>Edit Profile</h3>
+      <form @submit.prevent="saveProfile" class="modal-form">
+        <div class="profile-edit-form">
+          <label for="edit-display-name">Display Name
+            <input id="edit-display-name" type="text" v-model="editName" :disabled="saving" required />
+          </label>
+          <label for="edit-email">Email
+            <input id="edit-email" type="email" v-model="editEmail" :disabled="saving" />
+          </label>
+          <label for="edit-username">Preferred Username
+            <input id="edit-username" type="text" v-model="editUsername" :disabled="saving" placeholder="username" />
+          </label>
+          <label for="edit-telephone">Telephone
+            <input id="edit-telephone" type="tel" v-model="editTelephone" :disabled="saving" />
+          </label>
+          <div v-if="editError" class="error small">{{ editError }}</div>
+          <div class="modal-actions">
+            <button type="button" class="btn-secondary" @click="showEditDialog = false" :disabled="saving">Cancel</button>
+            <button type="submit" class="btn-primary" :disabled="saving" data-nav-primary>Save</button>
+          </div>
+        </div>
+      </form>
+    </Modal>
+
+    <ProfilePictureEditorModal
+      v-if="showAvatarDialog && currentAvatarEndpoint"
+      :endpoint="currentAvatarEndpoint"
+      :picture-url="authStore.userInfo?.user?.avatar_url"
+      :render-version="avatarRenderVersion"
+      @close="closeAvatarDialog"
+      @updated="handleProfilePictureUpdated"
+    />
+
     <RegistrationLinkModal
       v-if="showRegLink"
       endpoint="/auth/api/user/create-link"
@@ -120,10 +161,10 @@
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import CredentialList from '@/components/CredentialList.vue'
+import ProfilePictureEditorModal from '@/components/ProfilePictureEditorModal.vue'
 import ThemeSelector from '@/components/ThemeSelector.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 RemoteAuthPermit from '@/components/RemoteAuthPermit.vue'
@@ -136,10 +177,16 @@ import { navigateButtonRow, focusPreferred, focusAtIndex, getDirection } from '@
 
 const authStore = useAuthStore()
 const updateInterval = ref(null)
-const showNameDialog = ref(false)
+const showEditDialog = ref(false)
+const showAvatarDialog = ref(false)
 const showRegLink = ref(false)
-const newName = ref('')
+const editName = ref('')
+const editEmail = ref('')
+const editUsername = ref('')
+const editTelephone = ref('')
+const avatarRenderVersion = ref(0)
 const saving = ref(false)
+const editError = ref('')
 const hoveredCredentialUuid = ref(null)
 const hoveredSession = ref(null)
 const showDeviceInfo = ref(false)
@@ -149,19 +196,49 @@ const credentialButtons = ref(null)
 const sessionList = ref(null)
 const logoutButtons = ref(null)
 const breadcrumbs = ref(null)
-const userBasicInfo = ref(null)
 const userInfoSection = ref(null)
 
 // Check if any modal/dialog is open (blocks arrow key navigation)
-const hasActiveModal = computed(() => showNameDialog.value || showRegLink.value)
+const hasActiveModal = computed(() => showEditDialog.value || showAvatarDialog.value || showRegLink.value)
 
-watch(showNameDialog, (newVal) => { if (newVal) newName.value = authStore.userInfo?.ctx.user.display_name ?? '' })
+watch(showEditDialog, (open) => {
+  if (!open) {
+    return
+  }
+  const user = authStore.userInfo.user
+  editName.value = user.display_name ?? ''
+  editEmail.value = user.email ?? ''
+  editUsername.value = user.preferred_username ?? ''
+  editTelephone.value = user.telephone ?? ''
+  editError.value = ''
+})
 
 onMounted(() => {
   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 currentAvatarEndpoint = computed(() => {
+  const userUuid = authStore.userInfo?.user?.uuid
+  if (!userUuid) return null
+  return `/auth/api/user/${userUuid}/profile.webp`
+})
+
+const openAvatarDialog = () => {
+  showAvatarDialog.value = true
+}
+
+const closeAvatarDialog = () => {
+  showAvatarDialog.value = false
+}
+
+const handleProfilePictureUpdated = async () => {
+  await authStore.loadUserInfo()
+  avatarRenderVersion.value += 1
+}
 
 const addNewCredential = async () => {
   try {
@@ -210,7 +287,7 @@ const handleBreadcrumbKeydown = (event) => {
   if (direction === 'down') {
     event.preventDefault()
     // Move to user info section - always focus edit button first
-    focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.mini-btn, .pairing-input' })
+    focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.user-picture-btn, .mini-btn, .pairing-input' })
   }
   // ArrowUp at the top does nothing
 }
@@ -222,7 +299,7 @@ const handleUserInfoKeydown = (event) => {
   if (!direction) return
 
   event.preventDefault()
-  const itemSelector = '.mini-btn, .pairing-input'
+  const itemSelector = '.user-picture-btn, .mini-btn, .pairing-input'
 
   if (direction === 'left' || direction === 'right') {
     navigateButtonRow(userInfoSection.value, event.target, direction, { itemSelector })
@@ -243,7 +320,7 @@ const handleCredentialNavigateOut = (direction) => {
     focusPreferredButton(credentialButtons.value)
   } else if (direction === 'up' || direction === 'left') {
     // Focus user info section - always focus edit button first
-    focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.mini-btn, .pairing-input' })
+    focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.user-picture-btn, .mini-btn, .pairing-input' })
   }
 }
 
@@ -305,57 +382,101 @@ const handleDelete = async (credential) => {
 }
 
 const rpName = computed(() => authStore.settings?.rp_name || 'this service')
-const sessions = computed(() => authStore.userInfo?.sessions || [])
+const paskiaVersion = computed(() => authStore.settings?.version || '')
+const sessions = computed(() => authStore.userInfo.sessions)
 const currentSessionHost = computed(() => {
-  const currentSession = sessions.value.find(session => session.is_current)
+  const currentSession = Object.values(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) }
+  const sessionKey = session?.key
+  if (!sessionKey) return
+  terminatingSessions.value = { ...terminatingSessions.value, [sessionKey]: true }
+  try { await authStore.terminateSession(sessionKey) }
   catch (error) { authStore.showMessage(error.message || 'Failed to terminate session', 'error', 5000) }
   finally {
     const next = { ...terminatingSessions.value }
-    delete next[sessionId]
+    delete next[sessionKey]
     terminatingSessions.value = next
   }
 }
 
 const logoutEverywhere = async () => { await authStore.logoutEverywhere() }
 const logout = async () => { await authStore.logout() }
-const openNameDialog = () => { newName.value = authStore.userInfo?.ctx.user.display_name ?? ''; showNameDialog.value = true }
+const openEditDialog = () => { showEditDialog.value = true }
 const isAdmin = computed(() => {
-  const perms = authStore.userInfo?.ctx.permissions
+  const perms = Object.values(authStore.userInfo.permissions).map(p => p.scope)
   return perms.includes('auth:admin') || perms.includes('auth:org:admin')
 })
-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 hasMultipleSessions = computed(() => Object.keys(sessions.value).length > 1)
+const credentials = computed(() =>
+  Object.entries(authStore.userInfo.credentials).map(([uuid, c]) => ({ ...c, credential: uuid }))
+)
+const missingDomainPasskey = computed(() => {
+  const rpId = authStore.settings?.rp_id
+  if (!rpId) return false
+  return !credentials.value.some(c => c.rp_id === rpId)
+})
+const useWideLayout = computed(() => {
+  // Check if any single site has more than 8 sessions
+  const groups = {}
+  for (const session of Object.values(sessions.value)) {
+    const host = session.host || ''
+    if (!groups[host]) groups[host] = []
+    groups[host].push(session)
+  }
+  const hasLargeSessionGroup = Object.values(groups).some(group => group.length > 8)
 
-const saveName = async () => {
-  const name = newName.value.trim()
-  if (!name) { authStore.showMessage('Name cannot be empty', 'error'); return }
+  // Check if passkeys exceed 8
+  const hasManyCredentials = credentials.value.length > 8
+
+  return hasLargeSessionGroup || hasManyCredentials
+})
+const breadcrumbEntries = computed(() => { const entries = [{ label: 'My Profile', href: makeUiHref() }]; if (isAdmin.value) entries.push({ label: 'Admin', href: adminUiPath() }); return entries })
+
+const saveProfile = async () => {
+  const name = editName.value.trim()
+  if (!name) { editError.value = 'Name cannot be empty'; return }
+  const user = authStore.userInfo.user
+  const emailVal = editEmail.value.trim() || null
+  const usernameVal = editUsername.value.trim() || null
+  const telephoneVal = editTelephone.value.trim() || null
   try {
+    editError.value = ''
     saving.value = true
-    await apiJson('/auth/api/user/display-name', { method: 'PATCH', 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 }
+    let changed = false
+    const body = {}
+    if (name !== user.display_name) body.display_name = name
+    if (emailVal !== (user.email || null)) body.email = emailVal
+    if (usernameVal !== (user.preferred_username || null)) body.preferred_username = usernameVal
+    if (telephoneVal !== (user.telephone || null)) body.telephone = telephoneVal
+    if (Object.keys(body).length) {
+      await apiJson('/auth/api/user/info', { method: 'PATCH', body })
+      changed = true
+    }
+    if (changed) {
+      await authStore.loadUserInfo()
+      authStore.showMessage('Profile updated!', 'success', 3000)
+    }
+    showEditDialog.value = false
+  } catch (e) {
+    editError.value = e.message || 'Failed to update profile'
+  } 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; }
 .empty-state { margin: 0; color: var(--color-text-muted); text-align: center; padding: 1rem 0; }
-.logout-note { margin: 0.75rem 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
+.logout-note { margin: 0; color: var(--color-text-muted); }
+.logout-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.75rem; }
+.paskia-version { color: var(--color-text-muted); text-decoration: none; white-space: nowrap; font-weight: 700; }
+.paskia-version:hover { color: var(--color-link-hover); }
 .remote-auth-inline { display: flex; flex-direction: column; gap: 0.5rem; }
 .remote-auth-label { display: block; margin: 0; font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; }
 .remote-auth-description { font-size: 0.75rem; color: var(--color-text-muted); }
 .theme-toggle { position: absolute; top: var(--layout-padding); right: var(--layout-padding); }
+.profile-edit-form { display: flex; flex-direction: column; gap: var(--space-md); }
 </style>

frontend/src/components/RegistrationLinkModal.vue

@@ -1,6 +1,7 @@
 <template>
-  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
-    <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
+  <div v-if="linkUrl" class="dialog-overlay" @click="$emit('close')">
+    <div ref="dialog" class="modal-panel" @keydown="handleDialogKeydown" @click.stop>
+      <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
       <div class="reg-header-row">
         <h2 id="regTitle" class="reg-title">
           📱 <span v-if="userName">{{ tokenType === 'account recovery' ? 'Recovery' : 'Registration' }} for {{ userName }}</span><span v-else>Add Another Device</span>
@@ -28,14 +29,15 @@
       <div class="reg-actions" ref="actionsRow" @keydown="handleActionsKeydown">
         <button class="btn-secondary" @click="$emit('close')">Close</button>
       </div>
+      </div>
     </div>
-  </dialog>
+  </div>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
-import { apiJson } from 'paskia'
+import { apiJson, AuthCancelledError, holdGlobalBackdrop, releaseGlobalBackdrop } from 'paskia'
 import { formatDate } from '@/utils/helpers'
 import { getDirection } from '@/utils/keynav'
 import { useAuthStore } from '@/stores/auth'
@@ -77,21 +79,20 @@ async function generateLink() {
       expiresAt.value = data.expires ? new Date(data.expires) : null
       tokenType.value = data.token_type || null
 
-      // Show the dialog as modal
-      await nextTick()
-      if (dialog.value) {
-        dialog.value.showModal()
+      holdGlobalBackdrop()
 
-        // Focus primary button (or first button if no primary) after content renders
-        const actions = actionsRow.value
-        const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
-        target?.focus()
-      }
+      // Focus primary button (or first button if no primary) after content renders
+      await nextTick()
+      const actions = actionsRow.value
+      const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
+      target?.focus()
     } else {
       emit('close')
     }
   } catch (e) {
-    authStore.showMessage(e.message || 'Failed to generate link', 'error')
+    if (!(e instanceof AuthCancelledError)) {
+      authStore.showMessage(e.message || 'Failed to generate link', 'error')
+    }
     emit('close')
   }
 }
@@ -101,7 +102,12 @@ function onCopied() {
 }
 
 const handleDialogKeydown = (event) => {
-  // ESC is handled automatically by <dialog>
+  // ESC to close
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('close')
+    return
+  }
   // Handle other key navigation
   const direction = getDirection(event)
   if (!direction) return
@@ -147,6 +153,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  if (linkUrl.value) releaseGlobalBackdrop()
   // Restore focus when modal closes
   const prev = previouslyFocusedElement.value
   if (prev && document.body.contains(prev) && !prev.disabled) {
@@ -156,23 +163,6 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-dialog {
-  border: none;
-  background: transparent;
-  padding: 0;
-  max-width: none;
-  width: fit-content;
-  height: fit-content;
-  position: fixed;
-  inset: 0;
-  margin: auto;
-}
-
-dialog::backdrop {
-  -webkit-backdrop-filter: blur(.2rem) brightness(0.5);
-  backdrop-filter: blur(.2rem) brightness(0.5);
-}
-
 .icon-btn { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .6; }
 .icon-btn:hover { opacity: 1; }
 .reg-header-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }

frontend/src/components/RemoteAuthPermit.vue

@@ -53,17 +53,17 @@
       <!-- Device info display (shown when 3 words match a request) -->
       <div v-else-if="deviceInfo" class="device-info">
         <p class="device-permit-text">Permit {{ deviceInfo.action === 'register' ? 'registration' : 'login' }} to <strong>{{ deviceInfo.host }}</strong></p>
+        <p v-if="crossDomainNotice" class="device-meta domain-notice">on <strong>{{ deviceInfo.rp_name || deviceInfo.rp_id }}</strong><template v-if="deviceInfo.rp_name"> ({{ deviceInfo.rp_id }})</template></p>
         <p class="device-meta">{{ deviceInfo.user_agent_pretty || '—' }}</p>
 
-        <p v-if="error" class="error-message" style="margin-top: 0.5rem;">{{ error }}</p>
+        <p v-if="error" class="error-message">{{ error }}</p>
 
-        <div class="button-row" style="margin-top: 0.75rem; display: flex; gap: 0.5rem;">
+        <div class="button-row device-actions">
           <button
             type="button"
             class="btn-secondary"
             :disabled="loading"
             @click="deny"
-            style="flex: 1;"
           >
             Deny
           </button>
@@ -72,7 +72,6 @@
             type="submit"
             :disabled="loading"
             class="btn-primary"
-            style="flex: 1;"
           >
             {{ loading ? 'Authenticating…' : 'Authorize' }}
           </button>
@@ -124,6 +123,13 @@ watch(deviceInfo, (newVal) => {
   emit('deviceInfoVisible', !!newVal)
 })
 
+const crossDomainNotice = computed(() => {
+  const info = deviceInfo.value
+  if (!info?.rp_id) return false
+  const ownRpId = settings.value?.rp_id
+  return ownRpId ? info.rp_id !== ownRpId : true
+})
+
 const hasInvalidWord = ref(false)
 const serverError = ref(false)
 const cursorPos = ref(0)
@@ -615,7 +621,9 @@ async function lookupDeviceInfo() {
         host: res.host,
         user_agent_pretty: res.user_agent_pretty,
         client_ip: res.client_ip,
-        action: res.action || 'login'
+        action: res.action || 'login',
+        rp_id: res.rp_id || null,
+        rp_name: res.rp_name || null
       }
       lastLookedUpCode = currentCode
       nextTick(() => { submitBtnRef.value?.focus() })
@@ -773,7 +781,6 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
 .input-wrapper {
   position: relative;
   display: flex;
-  width: 280px;
   max-width: 100%;
 }
 
@@ -921,10 +928,6 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
   animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 .device-info {
   display: flex;
   flex-direction: column;
@@ -944,10 +947,25 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
   font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
 }
 
+.domain-notice {
+  color: var(--color-text);
+  font-family: inherit;
+  font-size: 0.9rem;
+}
+
 .error-message {
-  margin: 0;
+  margin: 0.5rem 0 0;
   font-size: 0.875rem;
   color: var(--color-error, #ef4444);
-  margin-bottom: 1rem;
+}
+
+.device-actions {
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.device-actions button {
+  flex: 1;
 }
 </style>

frontend/src/components/RemoteAuthRequest.vue

@@ -8,7 +8,7 @@
     <!-- Error state -->
     <div v-else-if="error" class="error-section">
       <p class="error-message">{{ error }}</p>
-      <button class="btn-primary" @click="retry" style="margin-top: 0.75rem;">Try Again</button>
+      <button class="btn-primary" @click="retry">Try Again</button>
     </div>
 
     <!-- Connecting phase -->
@@ -163,6 +163,9 @@ async function startRemoteAuth() {
 
     // PoW challenge
     const powChallenge = await ws.receive_json()
+    if (powChallenge.status) {
+      throw new Error(powChallenge.detail || `Failed to connect: ${powChallenge.status}`)
+    }
     if (powChallenge.pow) {
       const challenge = b64dec(powChallenge.pow.challenge)
       const nonces = await solvePoW(challenge, powChallenge.pow.work)
@@ -196,7 +199,7 @@ async function startRemoteAuth() {
       } else if (msg.status === 'authenticated') {
         // Success
         completed.value = true
-        emit('authenticated', { session_token: msg.session_token })
+        emit('authenticated', { exchange_code: msg.exchange_code })
         break
       } else if (msg.status === 'denied') {
         // Explicitly denied by the authenticating device
@@ -293,10 +296,6 @@ defineExpose({ retry, cancel })
   animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 .auth-display {
   display: flex;
   flex-direction: column;
@@ -499,6 +498,10 @@ defineExpose({ retry, cancel })
   color: var(--color-error, #ef4444);
 }
 
+.error-section button {
+  margin-top: 0.75rem;
+}
+
 /* Responsive adjustments */
 @media (max-width: 640px) {
   .auth-content {

frontend/src/components/RestrictedAuth.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-shell">
-    <div v-if="status.show" class="global-status" style="display: block;">
+    <div v-if="status.show" class="global-status show">
       <div :class="['status', status.type]">
         {{ status.message }}
       </div>
@@ -18,7 +18,7 @@
           <div class="section-body center">
             <!-- Local passkey authentication view -->
             <div v-if="authView === 'local'" class="auth-view">
-              <div class="button-row center" ref="buttonRow">
+              <div class="button-row button-row--center" ref="buttonRow">
                 <slot name="actions"
                   :loading="loading"
                   :can-authenticate="canAuthenticate"
@@ -58,15 +58,20 @@
 import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings, uiBasePath } from '@/utils/settings'
-import { fetchJson, getUserFriendlyErrorMessage } from 'paskia'
+import { fetchJson, getUserFriendlyErrorMessage, settings as paskiaSettings } from 'paskia'
 import RemoteAuthRequest from '@/components/RemoteAuthRequest.vue'
 import { focusDialogButton } from '@/utils/keynav'
+import { updateThemeFromSession } from '@/utils/theme'
 
 const props = defineProps({
   mode: {
     type: String,
     default: 'login',
-    validator: (value) => ['login', 'reauth', 'forbidden'].includes(value)
+    validator: (value) => ['login', 'reauth', 'forbidden', 'oidc'].includes(value)
+  },
+  oidcQueryString: {
+    type: String,
+    default: null
   }
 })
 
@@ -142,7 +147,8 @@ async function fetchSettings() {
 
 async function validateSession() {
   try {
-    session.value = await fetchJson('/auth/api/validate', { method: 'POST' })
+    session.value = await fetchJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms })
+    updateThemeFromSession(session.value?.ctx)
     if (isAuthenticated.value && props.mode !== 'reauth') {
       currentView.value = 'forbidden'
       emit('forbidden', session.value)
@@ -163,7 +169,7 @@ async function authenticateUser() {
   loading.value = true
   showMessage('Starting authentication…', 'info')
   let result
-  try { result = await passkey.authenticate() } catch (error) {
+  try { result = await passkey.authenticate(props.oidcQueryString) } catch (error) {
     loading.value = false
     const message = error?.message || 'Passkey authentication cancelled'
     const cancelled = message === 'Passkey authentication cancelled'
@@ -171,7 +177,13 @@ async function authenticateUser() {
     emit('auth-error', { message, cancelled })
     return
   }
-  try { await setSessionCookie(result) } catch (error) {
+  // OIDC flow: no session cookie, just emit the redirect_url
+  if (result.redirect_url) {
+    loading.value = false
+    emit('authenticated', result)
+    return
+  }
+  try { await exchangeCode(result) } catch (error) {
     loading.value = false
     const message = error?.message || 'Failed to establish session'
     showMessage(message, 'error', 4000)
@@ -186,7 +198,7 @@ async function logoutUser() {
   if (loading.value) return
   loading.value = true
   try {
-    await fetchJson('/auth/api/logout', { method: 'POST' })
+    await fetchJson('/auth/api/logout', { method: 'POST', timeout: paskiaSettings.auth_ms })
     session.value = null
     currentView.value = 'login'
     showMessage('Logged out. You can sign in with a different account.', 'info', 3000)
@@ -202,13 +214,13 @@ function openProfile() {
   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')
+async function exchangeCode(result) {
+  if (!result?.exchange_code) {
+    console.error('exchangeCode called with missing exchange_code:', result)
+    throw new Error('Authentication response missing exchange_code')
   }
   return await fetchJson('/auth/api/set-session', {
-    method: 'POST', headers: { Authorization: `Bearer ${result.session_token}` }
+    method: 'POST', headers: { 'Authorization': `Bearer ${result.exchange_code}` }, timeout: paskiaSettings.auth_ms
   })
 }
 
@@ -223,7 +235,7 @@ function switchToLocal() {
 async function handleRemoteAuthenticated(result) {
   showMessage('Authenticated from another device!', 'success', 2000)
   try {
-    await setSessionCookie(result)
+    await exchangeCode(result)
   } catch (error) {
     const message = error?.message || 'Failed to establish session'
     showMessage(message, 'error', 4000)
@@ -265,7 +277,12 @@ watch(initializing, (newVal) => {
 
 onMounted(async () => {
   await fetchSettings()
-  await validateSession()
+  // OIDC mode doesn't depend on session state - skip validation
+  if (props.mode !== 'oidc') {
+    await validateSession()
+  } else {
+    currentView.value = 'login'
+  }
   initializing.value = false
 
   // Add click handler for inline links
@@ -284,7 +301,6 @@ defineExpose({
 </script>
 
 <style scoped>
-.button-row.center { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
 .user-line { margin: 0.5rem 0 0; font-weight: 500; color: var(--color-text); }
 main.view-root { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
 .surface.surface--tight {

frontend/src/components/SessionList.vue

@@ -1,25 +1,26 @@
 <template>
-  <section class="section-block" data-component="session-list-section">
+  <section :class="['section-block', sectionClass]" 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>
-        <template v-if="Array.isArray(sessions) && sessions.length">
-          <div v-for="(group, host) in groupedSessions" :key="host" class="session-group" tabindex="0" @keydown="handleGroupKeydown($event, host)">
+        <template v-if="sessionsArray.length">
+          <div v-for="(group, key) in groupedSessions" :key="key" class="session-group" tabindex="0" @keydown="handleGroupKeydown($event, key)">
             <span :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
-              <span class="session-group-icon">🌐</span>
-              <a v-if="host" :href="hostUrl(host)" tabindex="-1" target="_blank" rel="noopener noreferrer">{{ host }}</a>
+              <span class="session-group-icon">{{ group.isOIDC ? '🪪' : '🌐' }}</span>
+              <template v-if="group.isOIDC">{{ group.displayName }}</template>
+              <a v-else-if="key" :href="hostUrl(key)" tabindex="-1" target="_blank" rel="noopener noreferrer">{{ key }}</a>
               <template v-else>Unbound host</template>
             </span>
             <div class="session-list">
               <div
                 v-for="session in group.sessions"
-                :key="session.id"
+                :key="session.key"
                 :class="['session-item', {
                   'is-current': session.is_current && !hoveredIp && !hoveredCredentialUuid,
-                  'is-hovered': hoveredSession?.id === session.id,
+                  'is-hovered': hoveredSession?.key === session.key,
                   'is-linked-credential': hoveredCredentialUuid === session.credential
                 }]"
                 tabindex="-1"
@@ -33,14 +34,14 @@
                   <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="hoveredSession?.key === session.key" class="badge badge-current">Selected</span>
                     <span v-else-if="hoveredCredentialUuid === session.credential" class="badge badge-current">Linked</span>
                     <span v-else-if="!hoveredCredentialUuid && isSameHost(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'"
+                      :disabled="isTerminating(session.key)"
+                      :title="isTerminating(session.key) ? 'Terminating...' : 'Terminate session'"
                       tabindex="-1"
                     >❌</button>
                   </div>
@@ -69,12 +70,13 @@ import { hostIP } from '@/utils/helpers'
 import { navigateGrid, handleDeleteKey, handleEscape, getDirection } from '@/utils/keynav'
 
 const props = defineProps({
-  sessions: { type: Array, default: () => [] },
+  sessions: { type: Object, 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 },
   navigationDisabled: { type: Boolean, default: false },
+  sectionClass: { type: String, default: '' },
 })
 
 const emit = defineEmits(['terminate', 'sessionHover', 'navigate-out'])
@@ -106,7 +108,7 @@ const handleCardClick = (event) => {
   }
 }
 
-const isTerminating = (sessionId) => !!props.terminatingSessions[sessionId]
+const isTerminating = (sessionKey) => !!props.terminatingSessions[sessionKey]
 
 const handleGroupKeydown = (event, host) => {
   const group = event.currentTarget
@@ -149,7 +151,7 @@ const handleGroupKeydown = (event, host) => {
 const handleItemKeydown = (event, session) => {
   // Handle delete (always allowed even with modal)
   handleDeleteKey(event, () => {
-    if (!isTerminating(session.id)) emit('terminate', session)
+    if (!isTerminating(session.key)) emit('terminate', session)
   })
   if (event.defaultPrevented) return
 
@@ -208,9 +210,14 @@ const copyIp = async (ip) => {
 
 const displayIp = ip => hostIP(ip) ?? ip
 
+// Convert sessions dict to array with key attached
+const sessionsArray = computed(() =>
+  Object.entries(props.sessions || {}).map(([key, session]) => ({ ...session, key }))
+)
+
 const currentHostIP = computed(() => {
   if (hoveredIp.value) return hostIP(hoveredIp.value)
-  const current = props.sessions.find(s => s.is_current)
+  const current = sessionsArray.value.find(s => s.is_current)
   return current ? hostIP(current.ip) : null
 })
 
@@ -218,27 +225,20 @@ const isSameHost = ip => currentHostIP.value && hostIP(ip) === currentHostIP.val
 
 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
+  for (const session of sessionsArray.value) {
+    const groupKey = session.client || session.host || ''
+    if (!groups[groupKey]) {
+      groups[groupKey] = { sessions: [], isCurrentSite: false, isOIDC: !!session.client, displayName: session.client_name || groupKey }
     }
+    groups[groupKey].sessions.push(session)
+    if (session.is_current_host) groups[groupKey].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)
+  for (const groupKey in groups) groups[groupKey].sessions.sort((a, b) => new Date(b.last_renewed) - new Date(a.last_renewed))
   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
+  const sorted = Object.entries(groups).sort(([, a], [, b]) => {
+    if (a.isOIDC !== b.isOIDC) return a.isOIDC ? 1 : -1
+    return collator.compare(a.displayName, b.displayName) || collator.compare(a.sessions[0]?.client || '', b.sessions[0]?.client || '')
+  })
+  return Object.fromEntries(sorted)
 })
 </script>

frontend/src/components/StatusMessage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="authStore.status.show" class="global-status" style="display: block;">
+  <div v-if="authStore.status.show" class="global-status show">
     <div :class="['status', authStore.status.type]">
       {{ authStore.status.message }}
     </div>

frontend/src/components/UserBasicInfo.vue

@@ -1,23 +1,49 @@
 <template>
   <div v-if="userLoaded" class="user-info" :class="{ 'has-extra': $slots.default }">
-    <h3 class="user-name-heading">
-      <span class="icon">👤</span>
-      <span class="user-name-row">
-        <span class="display-name" :title="name">{{ name }}</span>
-        <button v-if="canEdit && updateEndpoint" class="mini-btn" @click="emit('editName')" title="Edit name">✏️</button>
-      </span>
-    </h3>
-    <div v-if="orgDisplayName || roleName" class="org-role-sub">
-      <div class="org-line" v-if="orgDisplayName">{{ orgDisplayName }}</div>
-      <div class="role-line" v-if="roleName">{{ roleName }}</div>
-    </div>
-    <div class="user-details">
-      <span class="date-label"><strong>Visits:</strong></span>
-      <span class="date-value">{{ visits || 0 }}</span>
-      <span class="date-label"><strong>Registered:</strong></span>
-      <span class="date-value">{{ formatDate(createdAt) }}</span>
-      <span class="date-label"><strong>Last seen:</strong></span>
-      <span class="date-value">{{ formatDate(lastSeen) }}</span>
+    <div class="user-info-content">
+      <ProfilePicture
+        :src="avatarUrl"
+        :render-version="avatarRenderVersion"
+        :clickable="avatarClickable"
+        :loading="loading"
+        :title="avatarClickable ? 'Change profile picture' : ''"
+        width="5.25rem"
+        height="5.25rem"
+        radius="var(--radius-sm)"
+        fallback-size="2.8em"
+        class="user-picture"
+        :class="avatarClickable ? 'user-picture-btn' : ''"
+        @click="emit('avatar-click')"
+      />
+      <h3 class="user-name-heading">
+        <span class="user-name-row">
+          <span class="display-name" :title="name">{{ name }}</span>
+          <button v-if="canEdit && updateEndpoint" class="mini-btn" @click="emit('edit')" title="Edit profile">✏️</button>
+        </span>
+      </h3>
+      <div v-if="orgDisplayName || roleName" class="org-role-sub">
+        <div class="org-line" v-if="orgDisplayName">{{ orgDisplayName }}</div>
+        <div class="role-line" v-if="roleName">{{ roleName }}</div>
+      </div>
+      <div class="info-fields-block">
+        <div v-if="preferred_username" class="contact-item">🆔 {{ preferred_username }}</div>
+        <a v-if="email" :href="`mailto:${email}`" class="contact-link">✉️ {{ email }}</a>
+        <a v-if="telephone" :href="`tel:${telephone}`" class="contact-link">📞 {{ telephone }}</a>
+      </div>
+      <div class="info-line">
+        <span v-if="visits">
+          <span class="info-date">{{ formatDate(createdAt) }}</span>
+          <span class="info-punct"> – </span>
+          <span class="info-date">{{ formatDate(lastSeen) }}</span>
+          <span class="info-punct"> ×</span>
+          <span class="info-count">{{ visits }}</span>
+        </span>
+        <span v-else>
+          <span class="info-label">Created </span>
+          <span class="info-date">{{ formatDate(createdAt) }}</span>
+          <span class="info-punct"> — Never signed in</span>
+        </span>
+      </div>
     </div>
     <div v-if="$slots.default" class="user-info-extra">
       <slot></slot>
@@ -26,80 +52,85 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
-import { useAuthStore } from '@/stores/auth'
+import { computed } from 'vue'
+import ProfilePicture from '@/components/ProfilePicture.vue'
 import { formatDate } from '@/utils/helpers'
 
 const props = defineProps({
   name: { type: String, required: true },
+  avatarUrl: { type: String, default: null },
+  avatarRenderVersion: { type: [Number, String], default: 0 },
+  email: { type: String, default: null },
+  preferred_username: { type: String, default: null },
+  telephone: { type: String, default: null },
   visits: { type: [Number, String], default: 0 },
   createdAt: { type: [String, Number, Date], default: null },
   lastSeen: { type: [String, Number, Date], default: null },
   updateEndpoint: { type: String, default: null },
   canEdit: { type: Boolean, default: true },
+  avatarClickable: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
   orgDisplayName: { type: String, default: '' },
   roleName: { type: String, default: '' }
 })
 
-const emit = defineEmits(['saved', 'editName'])
-const authStore = useAuthStore()
-
+const emit = defineEmits(['saved', 'edit', 'avatar-click'])
 const userLoaded = computed(() => !!props.name)
 </script>
 
 <style scoped>
 .user-info.has-extra {
-  grid-template-columns: auto 1fr 2fr;
+  grid-template-columns: minmax(0, 1fr) 14rem;
   grid-template-areas:
-    "heading heading extra"
-    "org org extra"
-    "label1 value1 extra"
-    "label2 value2 extra"
-    "label3 value3 extra";
+    "content extra";
+  gap: 1.5rem;
 }
 
 .user-info:not(.has-extra) {
-  grid-template-columns: auto 1fr;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
-    "heading heading"
-    "org org"
-    "label1 value1"
-    "label2 value2"
-    "label3 value3";
+    "content";
 }
 
 @media (max-width: 720px) {
   .user-info.has-extra {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 1fr;
     grid-template-areas:
-      "heading heading"
-      "org org"
-      "label1 value1"
-      "label2 value2"
-      "label3 value3"
-      "extra extra";
+      "content"
+      "extra";
   }
 }
 
-.user-name-heading { grid-area: heading; display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
-.org-role-sub { grid-area: org; display:flex; flex-direction:column; margin: -0.15rem 0 0.25rem; }
-.org-line { font-size: .7rem; font-weight:600; line-height:1.1; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
-.role-line { font-size:.65rem; color: var(--color-text-muted); line-height:1.1; }
-.info-label:nth-of-type(1) { grid-area: label1; }
-.info-value:nth-of-type(2) { grid-area: value1; }
-.info-label:nth-of-type(3) { grid-area: label2; }
-.info-value:nth-of-type(4) { grid-area: value2; }
-.info-label:nth-of-type(5) { grid-area: label3; }
-.info-value:nth-of-type(6) { grid-area: value3; }
-.user-info-extra { grid-area: extra; padding-left: 2rem; border-left: 1px solid var(--color-border); }
-.user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
-.user-name-row.editing { flex: 1 1 auto; }
-.display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.name-input { width: auto; flex: 1 1 140px; min-width: 120px; padding: 6px 8px; font-size: 0.9em; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
-.user-name-heading .name-input { width: auto; }
-.name-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
-.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; cursor: pointer; }
+.user-info-content {
+  grid-area: content;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-areas:
+    "picture heading fields"
+    "picture org fields"
+    "picture info info";
+  gap: 0 1rem;
+  min-width: 0;
+}
+
+:deep(.user-picture) { grid-area: picture; align-self: stretch; }
+.user-name-heading { grid-area: heading; display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 0.25rem 0; min-width: 0; }
+.org-role-sub { grid-area: org; display: flex; flex-direction: column; min-width: 0; }
+.org-line { font-size: .7rem; font-weight: 600; line-height: 1.1; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.role-line { font-size: .65rem; color: var(--color-text-muted); line-height: 1.1; }
+.info-fields-block { grid-area: fields; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
+.contact-item { display: block; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.contact-link { color: var(--color-text); text-decoration: none; display: block; transition: transform 0.1s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.contact-link:hover { transform: scale(1.01); }
+.info-line { grid-area: info; line-height: 1.4; font-size: 0.9em; }
+.info-date { color: var(--color-text) !important; }
+.info-label { color: var(--color-text) !important; }
+.info-punct { color: var(--color-text-muted) !important; }
+.info-count { color: var(--color-text-muted) !important; }
+.user-info-extra { grid-area: extra; padding-left: 1rem; border-left: 1px solid var(--color-border); flex-shrink: 0; }
+.user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; min-width: 0; }
+.display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; cursor: pointer; background: transparent; }
 .mini-btn:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent); }
 .mini-btn:active:not(:disabled) { transform: translateY(1px); }
 .mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }

frontend/src/stores/auth.js

@@ -1,13 +1,14 @@
 import { defineStore } from 'pinia'
 import { register, authenticate } from '@/utils/passkey'
 import { getSettings } from '@/utils/settings'
-import { apiJson } from 'paskia'
+import { apiJson, settings as paskiaSettings } from 'paskia'
 import { updateThemeFromSession } from '@/utils/theme'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
     // Auth State
     userInfo: null, // Contains the full user info response: {user, credentials, aaguid_info}
+    ctx: null, // Session context from validate
     isLoading: false,
 
     // Settings
@@ -49,6 +50,7 @@ export const useAuthStore = defineStore('auth', {
       return await apiJson('/auth/api/set-session', {
         method: 'POST',
         headers: {'Authorization': `Bearer ${result.session_token}`},
+        timeout: paskiaSettings.auth_ms,
       })
     },
     async register() {
@@ -81,13 +83,13 @@ export const useAuthStore = defineStore('auth', {
       if (!this.userInfo) this.currentView = 'login'
       else this.currentView = 'profile'
     },
-    async loadSettings() {
-      this.settings = await getSettings()
+    async loadSettings(force = false) {
+      this.settings = await getSettings(force)
     },
     async loadUserInfo() {
       try {
-        this.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
-        updateThemeFromSession(this.userInfo?.ctx)
+        this.userInfo = await apiJson('/auth/api/user-info', { method: 'GET', timeout: paskiaSettings.auth_ms })
+        updateThemeFromSession(this.userInfo)
         console.log('User info loaded:', this.userInfo)
       } catch (error) {
         // Suppress toast for 401/403 errors - the auth iframe will handle these
@@ -103,9 +105,9 @@ export const useAuthStore = defineStore('auth', {
       await apiJson(`/auth/api/user/credential/${uuid}`, { method: 'DELETE' })
       await this.loadUserInfo()
     },
-    async terminateSession(sessionId) {
+    async terminateSession(sessionKey) {
       try {
-        const payload = await apiJson(`/auth/api/user/session/${sessionId}`, { method: 'DELETE' })
+        const payload = await apiJson(`/auth/api/user/session/${sessionKey}`, { method: 'DELETE' })
         if (payload?.current_session_terminated) {
           sessionStorage.clear()
           location.reload()
@@ -120,7 +122,7 @@ export const useAuthStore = defineStore('auth', {
     },
     async logout() {
       try {
-        await apiJson('/auth/api/logout', {method: 'POST'})
+        await apiJson('/auth/api/logout', {method: 'POST', timeout: paskiaSettings.auth_ms})
         sessionStorage.clear()
         location.reload()
       } catch (error) {
@@ -133,7 +135,7 @@ export const useAuthStore = defineStore('auth', {
     },
     async logoutEverywhere() {
       try {
-        await apiJson('/auth/api/user/logout-all', {method: 'POST'})
+        await apiJson('/auth/api/user/logout-all', {method: 'POST', timeout: paskiaSettings.auth_ms})
         sessionStorage.clear()
         location.reload()
       } catch (error) {

frontend/src/utils/api.js

@@ -1,32 +0,0 @@
-// 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')
-  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')
-}

frontend/src/utils/helpers.js

@@ -41,3 +41,87 @@ export const hostIP = ip => {
     return ip
   }
 }
+
+// Display-time ordering of a domain's configured origins (the stored
+// object is unordered): the auth host first (flagged), then in-domain
+// entries (exact rp-id, then hierarchical), then related origins — hosts
+// outside the rp-id domain — hierarchically. An empty origins object
+// allows nothing and shows as an empty list.
+
+// Hierarchical origin comparison: split off scheme/port, compare hostnames
+// label by label from the TLD down, parents before their subdomains and a
+// wildcard label ('**' any depth, '*' one level — in that order) after all
+// concrete labels at the same level. Entries on the same host tie-break by
+// scheme (https first) and numeric port.
+function originParts(key) {
+  let s = key.toLowerCase().replace(/\/+$/, '')
+  let scheme = ''
+  const sm = s.match(/^([a-z][a-z0-9+.-]*):\/\//)
+  if (sm) { scheme = sm[1]; s = s.slice(sm[0].length) }
+  let port = ''
+  const pm = s.match(/:(\d+)$/)
+  if (pm) { port = pm[1]; s = s.slice(0, -pm[0].length) }
+  const labels = s.split('.').reverse()
+  return { labels, scheme, port }
+}
+
+export function compareOrigins(a, b) {
+  const A = originParts(a), B = originParts(b)
+  for (let i = 0; i < Math.max(A.labels.length, B.labels.length); i++) {
+    const la = A.labels[i], lb = B.labels[i]
+    if (la === undefined) return -1
+    if (lb === undefined) return 1
+    if (la === lb) continue
+    const wa = la === '*' || la === '**'
+    const wb = lb === '*' || lb === '**'
+    if (wa && wb) return la === '**' ? -1 : 1
+    if (wa) return 1
+    if (wb) return -1
+    const c = la.localeCompare(lb)
+    if (c) return c
+  }
+  if (A.scheme !== B.scheme) {
+    if (A.scheme === 'https') return -1
+    if (B.scheme === 'https') return 1
+    return A.scheme.localeCompare(B.scheme)
+  }
+  if (A.port && B.port) return Number(A.port) - Number(B.port)
+  return A.port.localeCompare(B.port)
+}
+
+// An origins-table entry outside the rp-id domain is a related origin
+// (WebAuthn ROR). Wildcards ('*.' or '**.') are never related — they are
+// only valid under the rp-id.
+function isRelatedKey(rpId, key) {
+  if (key.startsWith('*.') || key.startsWith('**.')) return false
+  try {
+    const hostname = new URL(key.includes('://') ? key : 'https://' + key).hostname
+    return !!hostname && hostname !== rpId && !hostname.endsWith('.' + rpId)
+  } catch {
+    return false
+  }
+}
+
+export function originDisplayEntries(domain) {
+  const origins = domain.origins || {}
+  const keys = Object.keys(origins)
+  const authKey = keys.find(k => origins[k] !== true && origins[k]?.auth_host)
+  const inDomain = []
+  const related = []
+  for (const k of keys) {
+    if (k === authKey) continue
+    const bucket = isRelatedKey(domain.rp_id, k) ? related : inDomain
+    bucket.push(k)
+  }
+  inDomain.sort((a, b) => {
+    if (a === domain.rp_id) return -1
+    if (b === domain.rp_id) return 1
+    return compareOrigins(a, b)
+  })
+  related.sort(compareOrigins)
+  const rows = []
+  if (authKey) rows.push({ key: authKey, auth: true })
+  for (const k of inDomain) rows.push({ key: k, auth: false })
+  for (const k of related) rows.push({ key: k, auth: false, related: true })
+  return rows
+}

frontend/src/utils/passkey.js

@@ -54,8 +54,13 @@ export async function register(resetToken = null, displayName = null, onstartreg
   }
 }
 
-export async function authenticate() {
-  const ws = await aWebSocket(await makeUrl('/auth/ws/authenticate'))
+export async function authenticate(queryString = null) {
+  // Build URL, optionally appending raw query string (e.g. for OIDC params)
+  let url = await makeUrl('/auth/ws/authenticate')
+  if (queryString) {
+    url += queryString.startsWith('?') ? queryString : `?${queryString}`
+  }
+  const ws = await aWebSocket(url)
   try {
     let res = await ws.receive_json()
     if (res.status >= 400) throw new Error(res.detail || `Authentication failed: ${res.status}`)

frontend/src/utils/settings.js

@@ -1,15 +1,19 @@
 let _settingsPromise = null
 let _settings = null
+let _requestGen = 0
 
 export function getSettingsCached() { return _settings }
 
-export async function getSettings() {
+export async function getSettings(force = false) {
+  if (force) { _settings = null; _settingsPromise = null; _requestGen++ }
   if (_settings) return _settings
   if (_settingsPromise) return _settingsPromise
+  const gen = _requestGen
+  const stale = () => getSettings() // superseded by a force reset: defer to the fresh state
   _settingsPromise = fetch('/auth/api/settings')
     .then(r => (r.ok ? r.json() : {}))
-    .then(obj => { _settings = obj || {}; return _settings })
-    .catch(() => { _settings = {}; return _settings })
+    .then(obj => gen === _requestGen ? (_settings = obj || {}) : stale())
+    .catch(() => gen === _requestGen ? (_settings = {}) : stale())
   return _settingsPromise
 }
 

frontend/src/utils/theme.js

@@ -38,9 +38,20 @@ export function initThemeFromCache() {
   applyTheme(getCachedTheme())
 }
 
+/** Theme default from the URL hash (restricted iframe/forward pages only) */
+function getHashTheme() {
+  const theme = new URLSearchParams(window.location.hash.slice(1)).get('theme')
+  return theme === 'light' || theme === 'dark' ? theme : ''
+}
+
 /** Update theme from session context (call after login/session load) */
 export function updateThemeFromSession(ctx, animate = false) {
   const theme = ctx?.user?.theme || ''
+  // Always keep the cache in sync with the profile: empty override clears it
+  // so stale values never mask future server-provided themes.
   setCachedTheme(theme)
-  applyTheme(theme, document.documentElement, animate)
+  // Without a profile override, stay consistent with the initial paint: a
+  // theme parameter on the URL (e.g. host page color scheme injected by
+  // paskia-js) remains in effect before the browser/desktop default.
+  applyTheme(theme || getHashTheme(), document.documentElement, animate)
 }

frontend/vite-plugin-fastapi.js

@@ -5,13 +5,14 @@
  * Configures Vite for FastAPI backend integration:
  * - Proxies /api/* requests to the FastAPI backend
  * - Builds to the Python module's frontend-build directory
+ * - Disables Vite's screen clearing on startup
  *
  * Options:
- *   paths - Array of paths to proxy (default: ["/api"])
+ *   paths - Array of paths to proxy (default: ['/api'])
  */
 
-export default function fastapiVue({ paths = ["/api"] } = {}) {
-  const backendUrl = process.env.PASKIA_BACKEND_URL || "http://localhost:4402"
+export default function fastapiVue({ paths = ['/api'] } = {}) {
+  const backendUrl = process.env.PASKIA_BACKEND_URL || 'http://localhost:4402'
 
   // Build proxy configuration for each path
   const proxy = {}
@@ -24,11 +25,12 @@ export default function fastapiVue({ paths = ["/api"] } = {}) {
   }
 
   return {
-    name: "vite-plugin-fastapi-paskia",
+    name: 'vite-plugin-fastapi-paskia',
     config: () => ({
+      clearScreen: false,
       server: { proxy },
       build: {
-        outDir: "../paskia/frontend-build",
+        outDir: '../paskia/frontend-build',
         emptyOutDir: true,
       },
     }),

frontend/vite.config.js

@@ -6,8 +6,12 @@ import { existsSync, renameSync, mkdirSync } from 'node:fs'
 import sirv from 'sirv'
 import fastapiVue from './vite-plugin-fastapi.js'
 
-// Auth host mode: when set, clients accessing the auth host get /auth/ at / and /auth/admin/ at /admin/
-const authHost = process.env.PASKIA_AUTH_HOST
+// Auth host mode: when set, clients accessing an auth host get /auth/ at / and /auth/admin/ at /admin/
+// Comma-separated list of bare hostnames (one per domain with a dedicated auth host)
+const authHosts = (process.env.PASKIA_AUTH_HOST || '')
+  .split(',')
+  .map(h => h.trim().replace(/^https?:\/\//, '').split(':')[0].split('/')[0])
+  .filter(Boolean)
 
 export default defineConfig(({ command }) => ({
   appType: 'mpa',
@@ -16,6 +20,8 @@ export default defineConfig(({ command }) => ({
     fastapiVue({ paths: [
       "/auth/api",
       "/auth/ws",
+      "/.well-known/openid-configuration",
+      "/.well-known/webauthn",
       // Passphrase links: /auth/word1.word2.word3.word4.word5
       "^/auth/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$",
       // Passphrase links: /word1.word2.word3.word4.word5
@@ -24,13 +30,13 @@ export default defineConfig(({ command }) => ({
     vue(),
     // Auth host routing: rewrite paths when accessing dedicated auth host
     // Must run before serve-examples to handle / correctly
-    authHost && {
+    authHosts.length && {
       name: 'auth-host-routing',
       configureServer(server) {
         server.middlewares.use((req, _res, next) => {
           const host = req.headers.host?.split(':')[0]
           // Check if request is coming to the auth host
-          if (host === authHost) {
+          if (authHosts.includes(host)) {
             // Only rewrite specific paths that should map to /auth/*
             // Rewrite / and /index.html to /auth/
             if (req.url === '/' || req.url === '/index.html') {
@@ -46,6 +52,26 @@ export default defineConfig(({ command }) => ({
         })
       }
     },
+    {
+      name: 'restricted-endpoints-rewrite',
+      configureServer(server) {
+        server.middlewares.use((req, _res, next) => {
+          // Rewrite /auth/restricted/iframe and /auth/restricted/oidc to /auth/restricted/
+          if (req.url === '/auth/restricted/iframe' || req.url === '/auth/restricted/oidc') {
+            req.url = '/auth/restricted/'
+          }
+          next()
+        })
+      }
+    },
+    {
+      name: 'serve-paskia-js',
+      configureServer(server) {
+        // Serve the locally built paskia-js module for the examples page
+        const serve = sirv(resolve(__dirname, '../paskia-js'), { dev: true })
+        server.middlewares.use('/paskia-js', serve)
+      }
+    },
     {
       name: 'serve-examples',
       configureServer(server) {
@@ -54,7 +80,7 @@ export default defineConfig(({ command }) => ({
         server.middlewares.use((req, _res, next) => {
           // Skip redirect to examples on auth host (handled by auth-host-routing)
           const host = req.headers.host?.split(':')[0]
-          if (authHost && host === authHost) {
+          if (authHosts.includes(host)) {
             next()
             return
           }

oidc.md

@@ -0,0 +1,99 @@
+# OIDC Provider Implementation
+
+OpenID Connect 1.0 provider enabling third-party apps to authenticate users via passkey. Also supports native cookie-based authentication.
+
+## Domains (multi rp-id)
+
+The OIDC provider is instance-global: one signing key (`oidc.key` in the transaction log) and one client set for the whole instance, usable through every configured domain. Discovery, keys, token and userinfo endpoints resolve the issuer from the request host (domain dispatch), so every configured host is an issuer alias sharing the one key. `Session.issuer` records the issuing origin (scheme included, stamped from the WS Origin) so refresh and back-channel logout produce the right `iss`; `Session.rp_id` records the owning domain for display. `CookieCode` is stamped with the session's rp-id and verified at redemption; `OIDCCode` is not, since the provider is instance-global.
+
+## Data Models
+
+**User** — Added: `email`, `preferred_username`
+
+**Session** — Added: `client_uuid` (None = native, set = OIDC), `issuer` (origin that issued the session), `rp_id` (owning domain, display only)
+- `key: bytes` — hashed DB key, never stored raw
+- `secret` → `hash_secret("session", secret)` → DB lookup
+- OIDC `sid` → `base64url.encode(hash_secret("oidc", session.key))`
+
+**OIDClient** — `uuid, client_secret_hash, name, redirect_uris`
+
+## Auth Codes (In-Memory Only)
+
+60-second lifetime, auto-cleaned. Two separate stores keep the OIDC and cookie flows isolated:
+
+```python
+from paskia.authcode import CookieCode, OIDCCode, store_cookie, store_oidc
+
+class OIDCCode(msgspec.Struct):
+    session_key: str       # Session DB key
+    created: datetime
+    redirect_uri, scope: str
+    nonce, code_challenge: str | None   # PKCE S256 when provided
+
+class CookieCode(msgspec.Struct):
+    session_key: str
+    created: datetime
+    rp_id: str             # domain the code was issued in; checked at redemption
+```
+
+Usage: `code = store_oidc(OIDCCode(...))` → later popped from `oidc_codes` / `cookie_codes`.
+
+## Authorization Flows
+
+### OIDC (Authorization Code)
+
+1. `GET /auth/restricted/oidc?client_id=UUID&redirect_uri=...&scope=openid&nonce=...&code_challenge=...`
+2. Frontend → WebSocket: `/auth/ws/authenticate?client_id=...&redirect_uri=...&...`
+3. Validate client/redirect_uri, authenticate via passkey
+4. `db.oidc_login()` → `(secret, session_key)`
+5. Create `AuthCode(session_key, oidc=OIDC(...))` → code
+6. Return: `{"redirect_url": "{redirect_uri}?code={code}&state={state}"}`
+7. Client exchanges code at `/auth/oidc/token` with `code_verifier` (PKCE S256)
+
+**Token:** `access_token, id_token, refresh_token={secret}, expires_in=3600`
+
+**ID token:** `sub, sid (base64url), name, preferred_username, email, groups`
+
+### Native (Cookie)
+
+1. WebSocket: `/auth/ws/authenticate` (no OIDC params)
+2. Authenticate via passkey
+3. `db.login()` → secret
+4. Create `AuthCode(session_key=secret, oidc=None)` → exchange_code
+5. Return: `{"user": "UUID", "exchange_code": "..."}`
+6. `POST /auth/api/exchange` with code → sets cookie
+
+## Refresh & Logout
+
+**Refresh:** `POST /auth/oidc/token` with `grant_type=refresh_token&refresh_token={secret}&client_id=...&client_secret=...`
+- Looks up session, validates client match
+- Extends expiry +24h (sliding window)
+- Returns new tokens with same `sid`
+
+**Back-channel logout:** `POST /auth/oidc/backchannel-logout` with `logout_token={jwt}`
+- Verify signature, extract `sid` or `sub`
+- Delete matched sessions
+- Return 200 OK
+
+Discovery: `backchannel_logout_supported: true`
+
+## Endpoints
+
+- `GET /.well-known/openid-configuration` — Discovery
+- `GET /auth/oidc/keys` — Keys (EdDSA)
+- `POST /auth/oidc/token` — Exchange/refresh
+- `GET /auth/oidc/userinfo` — User (bearer token, includes `picture` when `profile` scope is granted and avatar exists)
+- `POST /auth/oidc/backchannel-logout` — Logout
+- `POST /auth/api/exchange` — Native auth code → cookie
+
+## Claims
+
+- `profile` scope may include `name`, `preferred_username`, and `picture`
+- `email` scope may include `email`
+- `groups` is emitted from client-scoped permissions
+
+## Files
+
+**Created:** [paskia/authcode.py](paskia/authcode.py), [paskia/util/crypto.py](paskia/util/crypto.py), [paskia/fastapi/oid.py](paskia/fastapi/oid.py)
+
+**Modified:** [paskia/db/structs.py](paskia/db/structs.py), [paskia/db/operations.py](paskia/db/operations.py), [paskia/fastapi/ws.py](paskia/fastapi/ws.py), [paskia/fastapi/api.py](paskia/fastapi/api.py), [paskia/domains.py](paskia/domains.py), [paskia/fastapi/mainapp.py](paskia/fastapi/mainapp.py)

paskia-js/README.md

@@ -1,14 +1,14 @@
-# Paskia
-
 ![Screenshot](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/forbidden-light.webp)
 
-JavaScript utilities for [Paskia authentication system](https://git.zi.fi/leovasanko/paskia) integration into web apps.
+# Paskia
+
+JavaScript utilities for integrating the [Paskia authentication system](https://git.zi.fi/leovasanko/paskia) into web apps.
 
 ## Installation
 
-### NPM
+### npm
 
-No framework dependencies. Works with any framework (Vue, React, Svelte, etc.) or vanilla JS. Typescript typing included.
+No framework dependencies. Works with Vue, React, Svelte, vanilla JavaScript and other frontend stacks. TypeScript types are included.
 
 ```sh
 npm install paskia
@@ -20,7 +20,7 @@ import { ... } from 'paskia'
 
 ### Plain JavaScript
 
-Fetch the module directly from a CDN, or [download](https://cdn.jsdelivr.net/npm/paskia@latest/dist/paskia.js) first and host yourself. No Node needed.
+Import directly from a CDN, or [download](https://cdn.jsdelivr.net/npm/paskia@latest/dist/paskia.js) and host it yourself. No Node.js is required.
 
 ```html
 <script type="module">
@@ -28,67 +28,102 @@ Fetch the module directly from a CDN, or [download](https://cdn.jsdelivr.net/npm
 </script>
 ```
 
-## Features
+## Authentication
 
-### Session Validation
+### API requests
 
-Refresh session and track its validity with automatic polling. Pauses on lack of user activity to avoid useless traffic and to allow session expiry even when the page is left open but idle. This monitors that the same account stays logged in but doesn't do any permission checks.
+`apiFetch` wraps `fetch` with Paskia authentication handling, while `apiJson` adds automatic JSON request/response handling. Both support request timeouts. For the same JSON and timeout handling without prompting the user for authentication, use `fetchJson`.
+
+```js
+import { apiJson, apiFetch } from 'paskia'
+
+const data = await apiJson('/api/endpoint', {
+  method: 'POST',
+  body: { key: 'value' }
+})
+
+const response = await apiFetch('/api/endpoint')
+```
+
+With `apiJson`, a provided `body` is JSON-encoded with the appropriate content type and the response is parsed as JSON.
+
+When the server requests authentication, the API call pauses while the appropriate Paskia dialog is shown and retries after successful authentication.
+
+> Paskia uses `401` and `403` responses to trigger the appropriate **login**, **reauthentication** or **access denied** flow. The backend supplies the authentication URL and context; see the main Paskia documentation for the full response protocol.
+
+### Account and Profile
+
+`profile()` provides a single dialog for an application's login/profile button that allows the user to sign in, view who they are and sign out without ever leaving the page.
+
+```js
+import { profile } from 'paskia'
+
+const result = await profile()
+if (result !== 'back')  // Refresh application state
+```
+
+When signed out, it presents the login flow and returns `'login'` on success. When signed in, it shows the profile and returns `'logout'` after logout. `'back'` is returned when the dialog is closed without an expected session change.
+
+Authentication and profile dialogs follow the user's theme override when set in profile, otherwise the host page's light/dark `color-scheme` to remain in the application's color scheme, then the browser/OS preference.
+
+### Lower-level Authentication
+
+`apiFetch` and `apiJson` call `showAuthIframe()` internally. Applications using plain `fetch` or `fetchJson` can call it directly with an authentication URL returned by the backend:
+
+```js
+import { showAuthIframe } from 'paskia'
+
+await showAuthIframe(data.auth.iframe)
+```
+
+## Session Validation
+
+`SessionValidator` periodically checks that the active Paskia session is still valid and still belongs to the user your application currently has loaded. Validation also refreshes the session to avoid expiry during use.
 
 ```js
 import { SessionValidator } from 'paskia'
 
 const validator = new SessionValidator(
-  () => currentUser?.uuid,  // getter for current user ID that we track
-  (error) => handleSessionLost(error)  // callback when session is lost
+  () => currentUser?.uuid,  // User ID currently known by your app
+  error => handleSessionLost(error)
 )
 
-validator.start()  // call at your app startup/login
-validator.stop()   // stop the system (optional)
+validator.start()
+validator.stop()
 ```
 
-### API Fetch Utilities
+The first callback is read on each check, so a logout, expired session or switch to another account invalidates the session your app is currently using. Polling pauses while the user is inactive, avoiding unnecessary traffic and allowing idle sessions to expire.
 
-Enhanced fetch functions with automatic error handling and authentication retry:
+## Timeout Settings
+
+Paskia exports mutable defaults for network and session timers:
 
 ```js
-import { apiJson, apiFetch } from 'paskia'
+import { settings } from 'paskia'
 
-// JSON API calls with automatic auth handling
-const data = await apiJson('/api/endpoint', { method: 'POST', body: { key: 'value' } })
-
-// Raw fetch with auth handling
-const response = await apiFetch('/api/endpoint')
+settings.fetch_ms = 10000   // apiFetch, apiJson and fetchJson timeout
+settings.auth_ms = 1000     // Session validation request timeout
+settings.poll_ms = 60000    // Session validation interval
+settings.idle_ms = 300000   // Inactivity before validation pauses
 ```
 
-When a 401/403 response includes an auth iframe URL, the request automatically pauses, displays the authentication UI, and retries upon success. In case this is not needed, use standard `fetch` or our `fetchJson`.
-
-The JSON variants set headers automatically, with body and response in JSON.
-
-### Authentication Overlay
-
-Normally you use apiJson/apiFetch and they handle this automatically. If you need to wire it yourself, on a 401/403 response that includes `auth.iframe`, call `showAuthIframe(...)` and then retry the original request.
-
-The backend returns 401/403 responses with the correct URL for proper user feedback. Alternatively you may use `/auth/restricted/#mode=login`, `mode=reauth` or `mode=forbidden` to trigger the UX flow you need.
+Request timeout can also be overridden per call:
 
 ```js
-import { showAuthIframe, AuthCancelledError } from 'paskia'
-
-const response = await fetch('/api/protected')
-if (response.status === 401 || response.status === 403) {
-  const data = await response.json()
-  if (data.auth?.iframe) {
-    await showAuthIframe(data.auth.iframe)  // Raises AuthCancelledError if the user cancels
-  }
-}
+await apiJson('/api/upload', {
+  method: 'POST',
+  body: data,
+  timeout: 30000
+})
 ```
 
-This resolves after the user authenticates (possibly with another account than previously), and you should usually retry the original API request. Note that successful authentication doesn't guarantee that the user still has rights to what originally failed.
+## Shared Blur Backdrop
 
-### Shared Blur Backdrop
+A shared backdrop provides consistent UX across your application, avoiding different things stacking with their own backdrops and dialogs in unexpected manner.
 
-The authentication dialog displays with a blur backdrop (z-index 1099). The auth iframe uses z-index 9999. Your app dialogs should use z-index 1100–9998 to appear above the backdrop but below authentication.
+Paskia dialogs use a shared blurred backdrop at z-index `1099` and the authentication iframe at `9999`. Application dialogs can use `1100`–`9998` to appear between them.
 
-The backdrop is also reusable/refcounted, so you can keep consistent visuals for your own dialogs:
+The same refcounted backdrop can be used by application UI:
 
 ```js
 import { holdGlobalBackdrop, releaseGlobalBackdrop } from 'paskia'
@@ -101,31 +136,26 @@ try {
 }
 ```
 
-The backdrop only disappears after all holders have released it.
+It disappears after all holders release it, also avoiding awkward fade/appear animations when changing between multiple dialogs.
 
 ## Error Handling
 
-### AuthCancelledError (apiFetch, apiJson, showAuthIframe)
+### `AuthCancelledError`
 
-If the user clicks Back in the authentication dialog, refusing to authenticate, `AuthCancelledError` is risen (as a response to postMessage from the iframe). The dialog closes as expected and it is up to the app how to continue from there.
+`apiFetch`, `apiJson` and `showAuthIframe` raise `AuthCancelledError` when the user cancels required authentication with Back or Escape. This means the user does not wish to authenticate, and should not be asked again.
 
-- Do nothing if the app can continue despite the failed operation (no UI notification needed)
-- Display a simple Access Denied page with suggestion/button to reload the page to try again
+Continue without the failed operation when possible, or show an appropriate terminal view when authentication is required to continue.
 
-Do not retry automatically.
-
-### UI feedback
-
-A set of small utilities are available for determining whether the user needs a notification and to format the error message.
+When the error is a direct result of a user action, we don't want to show an additional message for that, while in other situations we should. Helpers determine whether an error needs user notification and provide a suitable message:
 
 ```js
 import { getUserFriendlyErrorMessage, shouldShowErrorToast } from 'paskia'
 
 try {
   await apiJson('/api/action')
-} catch (e) {
-  if (shouldShowErrorToast(e)) {
-    your.message.display(getUserFriendlyErrorMessage(e))
+} catch (error) {
+  if (shouldShowErrorToast(error)) {
+    your.message.display(getUserFriendlyErrorMessage(error))
   }
 }
 ```

paskia-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paskia",
-  "version": "0.1.3",
+  "version": "2.1.0",
   "description": "Paskia authentication utilities for JavaScript",
   "author": "Leo Vasanko",
   "license": "Unlicense",

paskia-js/src/fetch.ts

@@ -1,9 +1,8 @@
 import { showAuthIframe, AuthCancelledError } from './overlay'
+import settings from './settings'
 
 export { AuthCancelledError }
 
-const DEFAULT_TIMEOUT_MS = 1000
-
 export interface ApiFetchOptions extends RequestInit {
   timeout?: number
 }
@@ -40,7 +39,7 @@ export class NetworkError extends Error {
 }
 
 export async function apiFetch(url: string, options: ApiFetchOptions = {}): Promise<Response> {
-  const { timeout = DEFAULT_TIMEOUT_MS, ...fetchOptions } = options
+  const { timeout = settings.fetch_ms, ...fetchOptions } = options
   fetchOptions.credentials = fetchOptions.credentials || 'include'
 
   while (true) {

paskia-js/src/index.ts

@@ -12,14 +12,15 @@ export {
 
 export type { ApiFetchOptions, FetchJsonOptions } from './fetch'
 
+export { default as settings } from './settings'
+
 export {
   holdGlobalBackdrop,
   releaseGlobalBackdrop,
   isAuthIframeOpen,
   hideAuthIframe,
   showAuthIframe,
-  createAuthIframe,
-  removeAuthIframe,
+  profile,
 } from './overlay'
 
 export { SessionValidator } from './validate'

paskia-js/src/overlay.ts

@@ -32,12 +32,27 @@ body.paskia-backdrop {
   color-scheme: auto;
   background: transparent;
 }
+#${AUTH_IFRAME_ID}.paskia-dialog {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(36rem, 100%);
+  height: min(42rem, 100%);
+}
 `
 
+type DialogResult = 'login' | 'logout' | 'back'
+type DialogKind = 'auth' | 'profile'
+
 let authIframe: HTMLIFrameElement | null = null
-let authPromise: Promise<void> | null = null
-let authResolve: (() => void) | null = null
+let authPromise: Promise<DialogResult | undefined> | null = null
+let authResolve: ((result?: DialogResult) => void) | null = null
 let authReject: ((error: Error) => void) | null = null
+// Auth flows reject AuthCancelledError on auth-back (callers rely on it to
+// abort request retries) and resolve void on auth-success. The profile dialog
+// never rejects: auth-back resolves 'back', and auth-success (the user logged
+// in while the profile dialog was open) resolves 'login'.
+let dialogKind: DialogKind = 'auth'
 let messageListenerInstalled = false
 let backdropHolders = 0
 
@@ -57,6 +72,7 @@ export class AuthCancelledError extends Error {
 }
 
 export function holdGlobalBackdrop(): void {
+  injectStyles()
   backdropHolders++
   document.body.classList.add('paskia-backdrop')
 }
@@ -88,7 +104,7 @@ function handleAuthMessage(event: MessageEvent): void {
     case 'auth-success':
       hideAuthIframe()
       if (authResolve) {
-        authResolve()
+        authResolve(dialogKind === 'profile' ? 'login' : undefined)
         authPromise = null
         authResolve = null
         authReject = null
@@ -97,8 +113,20 @@ function handleAuthMessage(event: MessageEvent): void {
 
     case 'auth-back':
       hideAuthIframe()
-      if (authReject) {
+      if (dialogKind === 'auth' && authReject) {
         authReject(new AuthCancelledError())
+      } else if (authResolve) {
+        authResolve('back')
+      }
+      authPromise = null
+      authResolve = null
+      authReject = null
+      break
+
+    case 'auth-logout':
+      hideAuthIframe()
+      if (authResolve) {
+        authResolve('logout')
         authPromise = null
         authResolve = null
         authReject = null
@@ -115,12 +143,15 @@ function ensureMessageListener(): void {
   }
 }
 
-export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Promise<void> {
+function openIframe(iframeUrl: string, title: string, kind: DialogKind): Promise<DialogResult | undefined> {
   injectStyles()
   ensureMessageListener()
 
   if (authPromise) return authPromise
 
+  dialogKind = kind
+  iframeUrl = withAppTheme(iframeUrl)
+
   if (document.getElementById(AUTH_IFRAME_ID)) {
     authPromise = new Promise((resolve, reject) => {
       authResolve = resolve
@@ -139,6 +170,7 @@ export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Pro
 
   authIframe = document.createElement('iframe')
   authIframe.id = AUTH_IFRAME_ID
+  if (kind === 'profile') authIframe.classList.add('paskia-dialog')
   authIframe.title = title
   authIframe.src = iframeUrl
   document.body.appendChild(authIframe)
@@ -146,6 +178,49 @@ export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Pro
   return authPromise
 }
 
+// Detect the host page's own color scheme (CSS color-scheme on body) as an
+// implicit app-level default. Only an unambiguous 'light' or 'dark' counts;
+// 'normal', 'light dark' etc. mean the page adapts, so no override is needed.
+function detectColorScheme(): string {
+  if (typeof window === 'undefined' || !document.body) return ''
+  const scheme = getComputedStyle(document.body).colorScheme
+  return scheme === 'light' || scheme === 'dark' ? scheme : ''
+}
+
+// Apply the host page's own color scheme to the iframe URL hash — only when
+// the URL has no theme parameter yet (a server-provided user theme override
+// is authoritative). The restricted UI's precedence is: URL parameter (user
+// override from the server, else host color scheme) > cached profile theme
+// (localStorage) > browser/desktop default.
+function withAppTheme(iframeUrl: string): string {
+  const theme = detectColorScheme()
+  if (!theme) return iframeUrl
+  const hashIndex = iframeUrl.indexOf('#')
+  const base = hashIndex === -1 ? iframeUrl : iframeUrl.slice(0, hashIndex)
+  const params = new URLSearchParams(hashIndex === -1 ? '' : iframeUrl.slice(hashIndex + 1))
+  if (params.has('theme')) return iframeUrl
+  params.set('theme', theme)
+  return `${base}#${params}`
+}
+
+export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Promise<void> {
+  return openIframe(iframeUrl, title, 'auth').then(() => undefined)
+}
+
+/**
+ * Show the minimal profile of the logged-in user in a compact dialog iframe.
+ *
+ * Unlike the auth flows, this always resolves — 'login' when the user was
+ * signed out and completed the login flow inside the frame, 'logout' when
+ * they signed out inside the frame, 'back' when they closed it otherwise.
+ * The caller decides from context how to react to each (e.g. whether to
+ * start a new login attempt with showAuthIframe).
+ */
+export function profile(): Promise<DialogResult> {
+  return openIframe('/auth/restricted/iframe#mode=profile', 'Profile', 'profile')
+    .then((result) => result ?? 'back')
+}
+
 export function createAuthIframe(iframeUrl: string, title = 'Authentication'): HTMLIFrameElement {
   injectStyles()
   const existing = document.getElementById(AUTH_IFRAME_ID)

paskia-js/src/settings.ts

@@ -0,0 +1,6 @@
+export default {
+  fetch_ms: 10000,
+  auth_ms: 1000,
+  poll_ms: 60000,
+  idle_ms: 300000,
+}

paskia-js/src/validate.ts

@@ -1,7 +1,5 @@
 import { apiJson } from './fetch'
-
-const POLL_INTERVAL = 60 * 1000
-const IDLE_TIMEOUT = 5 * 60 * 1000
+import settings from './settings'
 
 export class SessionValidator {
   private userUuidGetter: () => string | undefined
@@ -19,12 +17,12 @@ export class SessionValidator {
   resetIdleTimer(): void {
     if (this.idleTimer) clearTimeout(this.idleTimer)
     if (!this.active) this.startPolling()
-    this.idleTimer = setTimeout(() => this.stopPolling(), IDLE_TIMEOUT)
+    this.idleTimer = setTimeout(() => this.stopPolling(), settings.idle_ms)
   }
 
   async validate(): Promise<void> {
     try {
-      const data = await apiJson<{ ctx?: { user?: { uuid?: string } } }>('/auth/api/validate', { method: 'POST' })
+      const data = await apiJson<{ ctx?: { user?: { uuid?: string } } }>('/auth/api/validate', { method: 'POST', timeout: settings.auth_ms })
       const newUuid = data.ctx?.user?.uuid
       if (newUuid !== this.userUuidGetter()) {
         window.location.reload()
@@ -40,7 +38,7 @@ export class SessionValidator {
   startPolling(): void {
     if (this.active) return
     this.active = true
-    this.pollTimer = setInterval(() => this.validate(), POLL_INTERVAL)
+    this.pollTimer = setInterval(() => this.validate(), settings.poll_ms)
   }
 
   stopPolling(): void {

paskia/__main__.py

@@ -0,0 +1,318 @@
+import argparse
+import asyncio
+import logging
+import os
+import sys
+from pathlib import Path
+
+from fastapi_vue import env, server, teleport
+from fastapi_vue.logging import setup_logging
+from kanta import Kanta
+
+from paskia.db import legacy
+from paskia.db.bootstrap import bootstrap, log_reset_link
+from paskia.db.paths import db_file_path
+from paskia.db.structs import DB, Config, DomainConfig
+from paskia.domains import build as build_registry
+from paskia.domains import configure as configure_domains
+from paskia.domains import validate_config
+from paskia.util import hostutil, startupbox
+from paskia.util.runtime import serve_config
+
+# Keep the literal value here: fastapi-vue-setup reads DEFAULT_PORT from
+# this module on upgrades. The app-side shared copy is paskia.util.constants.
+DEFAULT_PORT = 4401
+os.environ["FASTAPI_VUE"] = "PASKIA"
+
+EPILOG = """\
+Examples:
+  paskia init example.com "Example Corporation"
+  paskia migrate example.com
+  paskia --listen 4402 --save
+  paskia
+"""
+
+
+def _split_multi(values: list[str] | None) -> list[str]:
+    """Split repeatable/comma-separated CLI values into a flat list."""
+    result = []
+    for value in values or []:
+        result.extend(part.strip() for part in value.split(",") if part.strip())
+    return result
+
+
+def _add_listen_option(p: argparse.ArgumentParser, help_extra: str = "") -> None:
+    p.add_argument(
+        "-l",
+        "--listen",
+        action="append",
+        metavar="LISTEN",
+        help=(
+            "Endpoint to listen on (default: localhost:4401). "
+            "Forms: host:port  port  :port  [ipv6]:port  unix:path  /path.sock"
+        )
+        + help_extra,
+    )
+
+
+def _load_stored_config(db_path: Path) -> Config:
+    """Load the stored Config from disk using Kanta in read-only mode.
+
+    This must not depend on PASKIA_CONFIG or the global lifecycle Kanta.
+    Read-only opens never write or migrate the file.
+    """
+    kanta = Kanta(str(db_path), DB())
+
+    async def _read() -> Config:
+        await kanta.open(readonly=True)
+        try:
+            return kanta.data.config
+        finally:
+            await kanta.close()
+
+    try:
+        return asyncio.run(_read())
+    except Exception as e:
+        logging.exception("Failed to load database")
+        raise SystemExit(f"{e}") from e
+
+
+def _init_add_domain(db_path: Path, rp_id: str, rp_name: str | None, listen) -> None:
+    """Add a domain to an existing database, or update an existing one's
+    rp-name."""
+    new_db = DB()
+    kanta = Kanta(str(db_path), new_db)
+
+    async def _update() -> str:
+        await kanta.open()
+        try:
+            data = kanta.data
+            if rp_id in data.config.domains:
+                if rp_name is None and listen is None:
+                    raise SystemExit(f"Domain {rp_id} is already configured.")
+                with kanta.transaction("init:update_domain"):
+                    if rp_name is not None:
+                        data.config.domains[rp_id].rp_name = rp_name
+                    if listen is not None:
+                        data.config.listen = listen
+                return f"Updated domain {rp_id}"
+            new = DomainConfig(rp_name=rp_name, origins={f"**.{rp_id}": True})
+            try:
+                validate_config(
+                    Config(
+                        domains={**data.config.domains, rp_id: new},
+                        listen=data.config.listen,
+                    )
+                )
+            except ValueError as e:
+                raise SystemExit(str(e)) from e
+            with kanta.transaction("init:add_domain"):
+                data.config.domains[rp_id] = new
+                if listen is not None:
+                    data.config.listen = listen
+            return f"Added domain {rp_id}"
+        finally:
+            await kanta.close()
+
+    print(f"✅ {asyncio.run(_update())}")
+
+
+def cmd_init(args: argparse.Namespace) -> None:
+    """Bootstrap a new paskia.kantadb, or add a domain to an existing one."""
+    rp_id = (args.rp_id or "localhost").strip().lower()
+    rp_name = args.rp_name or None
+    listen = _split_multi(args.listen) or None
+    try:
+        hostutil.validate_rp_id(rp_id)
+    except ValueError as e:
+        raise SystemExit(str(e)) from e
+
+    db_path = db_file_path()
+    if db_path.exists():
+        _init_add_domain(db_path, rp_id, rp_name, listen)
+        return
+    if found := legacy.find_legacy_databases():
+        names = ", ".join(str(p) for p in found)
+        raise SystemExit(
+            f"Legacy database(s) found ({names}) — run 'paskia migrate' to "
+            "convert, not 'paskia init'."
+        )
+
+    # Only rp-id and rp-name are bootstrap-time configuration; the new
+    # domain starts with its whole subtree allowed ('**.{rp-id}') and
+    # everything else (origin allow-list, auth host, related domains) is
+    # set up afterwards via the admin interface. The bootstrap rp-name
+    # exists so the very first admin registration ceremony already shows
+    # the correct name.
+    config = Config(
+        domains={rp_id: DomainConfig(rp_name=rp_name, origins={f"**.{rp_id}": True})},
+        listen=listen,
+    )
+    try:
+        validate_config(config)
+    except ValueError as e:
+        raise SystemExit(str(e)) from e
+
+    # Create the database; the kanta bootstrap callback seeds it (admin
+    # user, org, permissions, reset token, the OIDC signing key).
+    new_db = DB()
+    kanta = Kanta(str(db_path), new_db)
+    result = {}
+
+    @kanta.bootstrap
+    def _bootstrap(data: DB) -> None:
+        result["passphrase"] = bootstrap(data, config=config)
+
+    async def _create() -> None:
+        async with kanta:
+            pass
+
+    try:
+        asyncio.run(_create())
+    except Exception as e:
+        logging.exception("Failed to create database")
+        db_path.unlink(missing_ok=True)
+        raise SystemExit(f"{e}") from e
+
+    configure_domains(listen=config.listen)
+    registry = build_registry(config)
+    log_reset_link(
+        registry.get(rp_id).reset_link_url(result["passphrase"]),
+        "✅ Bootstrap completed!",
+    )
+
+
+def cmd_migrate(args: argparse.Namespace) -> None:
+    """Convert or merge a legacy/current database into paskia.kantadb."""
+    merging = db_file_path().exists()
+    rp_ids = legacy.migrate_database(args.source)
+    action = "Merged into existing" if merging else "Converted to"
+    print(f"✅ {action} {db_file_path()} (domains: {', '.join(rp_ids)})")
+
+
+def _save_listen(db_path: Path, listen: list[str] | None) -> None:
+    """Persist the listen endpoints to the stored configuration."""
+    kanta = Kanta(str(db_path), DB())
+
+    async def _write() -> None:
+        async with kanta:
+            with kanta.transaction("serve:save_listen"):
+                kanta.data.config.listen = listen
+
+    asyncio.run(_write())
+
+
+def cmd_serve(args: argparse.Namespace) -> None:
+    """Open the combined database and serve all configured domains."""
+    db_path = db_file_path()
+    if not db_path.exists():
+        if found := legacy.find_legacy_databases():
+            names = ", ".join(str(p) for p in found)
+            raise SystemExit(
+                f"Database {db_path} not found, but legacy database(s) exist "
+                f"({names}) — run 'paskia migrate' to convert."
+            )
+        raise SystemExit(f"Database {db_path} not found — run 'paskia init' first.")
+
+    if args.save and args.listen is not None:
+        # '--listen ""' clears the stored endpoints (back to the default)
+        _save_listen(db_path, _split_multi(args.listen) or None)
+
+    config = _load_stored_config(db_path)
+
+    listen = _split_multi(args.listen) or config.listen
+    configure_domains(listen=listen)
+    try:
+        registry = build_registry(config)
+    except ValueError as e:
+        raise SystemExit(f"Invalid stored configuration: {e}") from e
+    # Sanitization warnings (serving is best-effort; fixing the stored config
+    # is the admin's job via the admin interface) are logged by build().
+
+    # Pass process-global serve parameters to the server process(es)
+    serve_config().listen = listen
+    teleport()  # Serialize bound config before spawning workers
+
+    startupbox.print_startup_config(registry, listen=listen, default_port=DEFAULT_PORT)
+
+    # Run the server (spawns processes in dev mode)
+    # tracerite, access logging and log config are handled by fastapi_vue.server;
+    # we print our own startup config box, so disable the built-in one.
+    server.run(
+        "paskia.fastapi.mainapp:app",
+        listen=listen,
+        default_port=DEFAULT_PORT,
+        server_header=False,
+        startup_box=None,
+        reload=Path(__file__).parent if env.dev else False,
+    )
+
+
+def main():
+    # Full logging setup (tracerite, formatting) before any CLI output
+    setup_logging()
+
+    parser = argparse.ArgumentParser(
+        prog="paskia",
+        description="Paskia authentication server",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog=EPILOG,
+    )
+    _add_listen_option(parser)
+    parser.add_argument(
+        "--save",
+        action="store_true",
+        help="Save --listen to the database for future runs. "
+        "Use --listen \"\" to clear the stored endpoints.",
+    )
+
+    init_parser = argparse.ArgumentParser(
+        prog="paskia init",
+        description="Bootstrap a new paskia.kantadb database in the current "
+        "directory. With an existing database, adds the domain to it instead "
+        "(or updates its rp-name).",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog=EPILOG,
+    )
+    init_parser.add_argument(
+        "rp_id",
+        nargs="?",
+        help="Relying Party ID of the initial domain (default: localhost). "
+        "Further domains, origins and auth hosts are added via the admin "
+        "interface — or with another 'paskia init <rp-id>'.",
+    )
+    init_parser.add_argument(
+        "rp_name",
+        nargs="?",
+        help="Relying Party name of the domain (default: same as rp-id). "
+        "Used by the initial admin registration; editable later via admin UI.",
+    )
+    _add_listen_option(init_parser, help_extra=" (stored in the database)")
+
+    migrate_parser = argparse.ArgumentParser(
+        prog="paskia migrate",
+        description="Convert a legacy <rp-id>.paskiadb database to paskia.kantadb, "
+        "or merge a legacy database / another paskia.kantadb into an existing one",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+    )
+    migrate_parser.add_argument(
+        "source",
+        nargs="?",
+        help="rp-id of the legacy database to convert, or path to a legacy "
+        "<rp-id>.paskiadb directory/file or a current-format paskia.kantadb "
+        "file. When paskia.kantadb already exists, the source data is merged "
+        "into it. Without an argument, a single legacy *.paskiadb candidate "
+        "in the current directory is selected automatically.",
+    )
+
+    argv = sys.argv[1:]
+    if argv and argv[0] == "init":
+        cmd_init(init_parser.parse_args(argv[1:]))
+    elif argv and argv[0] == "migrate":
+        cmd_migrate(migrate_parser.parse_args(argv[1:]))
+    else:
+        cmd_serve(parser.parse_args(argv))
+
+
+if __name__ == "__main__":
+    main()

paskia/aaguid/__init__.py

@@ -30,4 +30,16 @@ def filter(aaguids: Iterable[UUID]) -> dict[str, dict]:
         Dictionary mapping AAGUID string to authenticator information for only
         the AAGUIDs that the user has and that we have data for
     """
-    return {(s := str(a)): AAGUID[s] for a in aaguids if (s := str(a)) in AAGUID}
+    result = {}
+    for a in aaguids:
+        s = str(a)
+        if s in AAGUID:
+            info = AAGUID[s].copy()
+            # Rename icon_light to icon
+            if "icon_light" in info:
+                info["icon"] = info.pop("icon_light")
+            # If icons are the same, set dark to None to save space
+            if info.get("icon") == info.get("icon_dark"):
+                info["icon_dark"] = None
+            result[s] = info
+    return result

paskia/authcode.py

@@ -0,0 +1,122 @@
+"""
+Authorization code management for OIDC and cookie exchange flows.
+
+Codes are short-lived (60 seconds) and stored in-memory only.
+Two separate stores maintain full isolation between OIDC and cookie flows.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import logging
+import secrets
+from datetime import UTC, datetime, timedelta
+
+import msgspec
+
+_logger = logging.getLogger(__name__)
+
+# Auth codes expire after this duration
+AUTH_CODE_LIFETIME = timedelta(seconds=60)
+
+
+class OIDCCode(msgspec.Struct):
+    """An OIDC authorization code pending token exchange.
+
+    PKCE uses S256 only when provided (verified at token exchange).
+    Codes are redeemable at any host of the instance — the OIDC provider
+    is instance-global.
+    """
+
+    session_key: str
+    created: datetime
+    redirect_uri: str
+    scope: str
+    nonce: str | None = None
+    code_challenge: str | None = None
+
+
+class CookieCode(msgspec.Struct):
+    """A cookie exchange code for setting session cookie after WebSocket auth.
+
+    rp_id binds the code to the domain it was issued in; the redemption
+    endpoint (dispatched by Host) must match. This is what allows a
+    remote-auth approver on one domain to mint a code for the requesting
+    device's domain without the code being usable on the wrong domain.
+    """
+
+    session_key: str
+    created: datetime
+    rp_id: str
+
+
+# Separate stores for each code type
+oidc_codes: dict[str, OIDCCode] = {}
+cookie_codes: dict[str, CookieCode] = {}
+
+# Background cleanup task
+_cleanup_task: asyncio.Task | None = None
+
+
+async def start():
+    """Start the cleanup background task."""
+    global _cleanup_task
+    if _cleanup_task is None:
+        _cleanup_task = asyncio.create_task(_cleanup_loop())
+
+
+async def stop():
+    """Stop the cleanup background task."""
+    global _cleanup_task
+    if _cleanup_task:
+        _cleanup_task.cancel()
+        try:
+            await _cleanup_task
+        except asyncio.CancelledError:
+            pass
+        _cleanup_task = None
+
+
+async def _cleanup_loop():
+    while True:
+        try:
+            await asyncio.sleep(30)  # Check every 30 seconds
+            _cleanup_expired()
+        except asyncio.CancelledError:
+            break
+        except Exception:
+            _logger.exception("Error in auth code cleanup loop")
+
+
+def _cleanup_expired():
+    oldest = datetime.now(UTC) - AUTH_CODE_LIFETIME
+    for code, auth_code in list(oidc_codes.items()):
+        if auth_code.created < oldest:
+            del oidc_codes[code]
+    for code, auth_code in list(cookie_codes.items()):
+        if auth_code.created < oldest:
+            del cookie_codes[code]
+
+
+def store_oidc(code: OIDCCode) -> str:
+    """Store an OIDC authorization code and return the code string."""
+    token = secrets.token_urlsafe(12)
+    oidc_codes[token] = code
+    return token
+
+
+def consume_oidc(token: str) -> OIDCCode | None:
+    """Consume an OIDC code, returning it if valid. Atomic removal."""
+    return oidc_codes.pop(token, None)
+
+
+def store_cookie(code: CookieCode) -> str:
+    """Store a cookie exchange code and return the code string."""
+    token = secrets.token_urlsafe(12)
+    cookie_codes[token] = code
+    return token
+
+
+def consume_cookie(token: str) -> CookieCode | None:
+    """Consume a cookie exchange code, returning it if valid. Atomic removal."""
+    return cookie_codes.pop(token, None)

paskia/authsession.py

@@ -14,6 +14,7 @@ from uuid import UUID
 
 from paskia import db
 from paskia.config import RESET_LIFETIME, SESSION_LIFETIME
+from paskia.db.structs import ResetToken
 from paskia.util import hostutil
 
 if TYPE_CHECKING:
@@ -22,6 +23,11 @@ if TYPE_CHECKING:
 EXPIRES = SESSION_LIFETIME
 
 
+def session_ctx(auth: str, host: str | None = None):
+    """Get session context with normalized host."""
+    return db.data().session_ctx(auth, hostutil.normalize_host(host))
+
+
 def expires() -> datetime:
     return datetime.now(UTC) + EXPIRES
 
@@ -30,10 +36,10 @@ def reset_expires() -> datetime:
     return datetime.now(UTC) + RESET_LIFETIME
 
 
-def get_reset(token: str) -> "ResetToken":
+def get_reset(token: str) -> ResetToken:
     """Validate a credential reset token."""
 
-    record = db.get_reset_token(token)
+    record = ResetToken.by_passphrase(token)
     if record:
         return record
     raise ValueError("This authentication link is no longer valid.")
@@ -41,7 +47,7 @@ def get_reset(token: str) -> "ResetToken":
 
 def delete_credential(credential_uuid: UUID, auth: str, host: str | None = None):
     """Delete a specific credential for the current user."""
-    ctx = db.data().session_ctx(auth, hostutil.normalize_host(host))
+    ctx = session_ctx(auth, host)
     if not ctx:
         raise ValueError("Session expired")
     db.delete_credential(credential_uuid, ctx.user.uuid)

paskia/bootstrap.py

@@ -1,78 +1,78 @@
 """
 Bootstrap module for passkey authentication system.
 
-This module handles initial system setup when a new database is created,
-including creating default admin user, organization, permissions, and
-generating a reset link for initial admin setup.
+The initial database seeding (admin user, organization, permissions,
+registration reset token) is performed by ``paskia init`` via
+:func:`paskia.db.bootstrap.bootstrap`. This module provides the serve-time
+check that re-prints a registration link when the admin user still has no
+passkey on any configured domain.
 """
 
-import asyncio
 import logging
 
-from paskia import authsession, db, globals
-from paskia.util import hostutil
+from paskia import authsession, db, domains
+from paskia.db.bootstrap import log_reset_link
 
 logger = logging.getLogger(__name__)
 
-# Shared log message template for admin reset links
-ADMIN_RESET_MESSAGE = """
-👤 Admin  %s
-   - Use this link to register a Passkey for the admin user!
-"""
+
+def _configure_logger() -> None:
+    if logger.handlers:
+        return
+    handler = logging.StreamHandler()
+    handler.setFormatter(logging.Formatter("%(message)s"))
+    logger.addHandler(handler)
+    logger.setLevel(logging.INFO)
+    logger.propagate = False
 
 
-def _log_reset_link(passphrase: str, message: str | None = None) -> str:
-    """Log a reset link message and return the URL."""
-    reset_link = hostutil.reset_link_url(passphrase)
-    if message:
-        logger.info(message)
-    logger.info(ADMIN_RESET_MESSAGE, reset_link)
-    return reset_link
-
-
-async def bootstrap_system() -> None:
-    """
-    Bootstrap the entire system with default data.
-
-    Uses db.bootstrap() which performs all operations in a single transaction.
-    The transaction log will show a single "bootstrap" action with all changes.
-    """
-    # Call the single-transaction bootstrap function
-    reset_passphrase = db.bootstrap()
-
-    # Log the reset link (this is separate from the transaction log)
-    _log_reset_link(reset_passphrase, "✅ Bootstrap completed!")
+_configure_logger()
 
 
 async def check_admin_credentials() -> bool:
     """
     Check if the admin user needs credentials and create a reset link if needed.
 
+    With global users, the admin may hold passkeys under any configured
+    domain — the check passes if the admin has a credential for at least
+    one of them. Otherwise a reset link is printed for the first domain
+    (sorted by rp-id).
+
     Returns:
         bool: True if a reset link was created, False if admin already has credentials
     """
     try:
-        # Get permission organizations to find admin users
+        # Find the auth:admin permission
         p = next(
             (p for p in db.data().permissions.values() if p.scope == "auth:admin"), None
         )
-        if not p or not p.orgs:
+        if not p:
             return False
 
-        # Get users from the first organization with admin permission
-        first_org_uuid = next(iter(p.orgs))
-        org_users = db.get_organization_users(first_org_uuid)
-        admin_users = [user for user, role in org_users if role == "Administration"]
+        perm_uuid = p.uuid
+
+        # Find all roles that have the auth:admin permission
+        admin_roles = [
+            r for r in db.data().roles.values() if perm_uuid in r.permissions
+        ]
+
+        # Collect all users from those roles
+        admin_users = []
+        for role in admin_roles:
+            admin_users.extend(role.users)
 
         if not admin_users:
             return False
 
-        # Check first admin user for credentials
+        # Check first admin user for credentials on any configured domain
         admin_user = admin_users[0]
+        reg = domains.registry()
+        configured = sorted(d.rp_id for d in reg.domains)
 
-        if not db.get_user_credential_ids(admin_user.uuid):
-            # Admin exists but has no credentials, create reset link
-            logger.info("⚠️  Admin user has no credentials!")
+        if not any(admin_user.credential_ids_for(rp_id) for rp_id in configured):
+            # Admin exists but has no credential on any domain
+            target = reg.get(configured[0])
+            logger.info("⚠️  Admin user has no credentials on %s!", target.rp_id)
 
             expiry = authsession.reset_expires()
             token = db.create_reset_token(
@@ -80,7 +80,7 @@ async def check_admin_credentials() -> bool:
                 expiry=expiry,
                 token_type="admin registration",
             )
-            _log_reset_link(token)
+            log_reset_link(target.reset_link_url(token))
             return True
 
         return False
@@ -90,33 +90,10 @@ async def check_admin_credentials() -> bool:
 
 
 async def bootstrap_if_needed() -> bool:
-    """
-    Check if system needs bootstrapping and perform it if necessary.
+    """Run the serve-time admin credential check.
 
     Returns:
-        bool: True if bootstrapping was performed, False if system was already set up
+        bool: Always returns False (bootstrapping is performed by ``paskia init``).
     """
-    # Check if the admin permission exists - if it does, system is already bootstrapped
-    if any(p.scope == "auth:admin" for p in db.data().permissions.values()):
-        # Permission exists, system is already bootstrapped
-        # Check if admin needs credentials (only for already-bootstrapped systems)
-        await check_admin_credentials()
-        return False
-
-    # 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()
-    return True
-
-
-# CLI interface
-async def main():
-    """Main CLI entry point for bootstrapping."""
-    # Configure logging for CLI usage
-    logging.basicConfig(level=logging.INFO, format="%(message)s", force=True)
-
-    await globals.init()
-
-
-if __name__ == "__main__":
-    asyncio.run(main())
+    await check_admin_credentials()
+    return False

paskia/config.py

@@ -1,4 +1,3 @@
-from dataclasses import dataclass
 from datetime import timedelta
 
 # Shared configuration constants for session management.
@@ -6,19 +5,3 @@ 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

paskia/db/__init__.py

@@ -1,7 +1,7 @@
 """
 Database module for WebAuthn passkey authentication.
 
-Read: Access data() directly, use build_* to convert to public structs.
+Read: Access data() directly for structs.
 CTX: data().session_ctx(key) returns SessionContext with effective permissions.
 Write: Functions validate and commit, or raise ValueError.
 
@@ -10,7 +10,6 @@ Usage:
 
     # Read (after init)
     user_data = db.data().users[user_uuid]
-    user = db.build_user(user_uuid)
 
     # Context
     ctx = db.data().session_ctx(session_key)
@@ -20,54 +19,52 @@ Usage:
 """
 
 import paskia.db.operations as operations
-from paskia.db.background import (
-    start_background,
-    start_cleanup,
-    stop_background,
-    stop_cleanup,
-)
+from paskia.db.bootstrap import bootstrap
 from paskia.db.operations import (
     add_permission_to_org,
     add_permission_to_role,
-    bootstrap,
-    cleanup_expired,
     create_credential,
     create_credential_session,
+    create_domain,
+    create_oid_client,
     create_org,
     create_permission,
     create_reset_token,
     create_role,
-    create_session,
     create_user,
     delete_credential,
+    delete_domain,
+    delete_oid_client,
     delete_org,
     delete_permission,
-    delete_reset_token,
     delete_role,
     delete_session,
     delete_sessions_for_user,
     delete_user,
-    get_organization_users,
-    get_reset_token,
-    get_user_credential_ids,
-    get_user_organization,
-    init,
+    is_username_taken,
     login,
+    oidc_login,
     remove_permission_from_org,
     remove_permission_from_role,
-    set_session_host,
+    reset_oid_client_secret,
     update_credential_sign_count,
+    update_domain,
+    update_oid_client,
     update_org_name,
     update_permission,
     update_role_name,
     update_session,
     update_user_display_name,
+    update_user_info,
     update_user_role,
-    update_user_theme,
 )
 from paskia.db.structs import (
     DB,
+    OIDC,
+    Client,
+    Config,
     Credential,
+    DomainConfig,
     Org,
     Permission,
     ResetToken,
@@ -85,10 +82,14 @@ def data() -> DB:
 
 __all__ = [
     # Types
+    "Config",
     "Credential",
     "DB",
+    "Client",
+    "OIDC",
     "Org",
     "Permission",
+    "DomainConfig",
     "ResetToken",
     "Role",
     "Session",
@@ -96,55 +97,44 @@ __all__ = [
     "User",
     # Instance
     "data",
-    "init",
-    # Background
-    "start_background",
-    "stop_background",
-    "start_cleanup",
-    "stop_cleanup",
-    # Builders
-    "build_credential",
-    "build_permission",
-    "build_reset_token",
-    "build_role",
-    "build_session",
-    "build_user",
     # Read ops
-    "get_organization_users",
-    "get_reset_token",
-    "get_user_credential_ids",
-    "get_user_organization",
     # Write ops
     "add_permission_to_org",
     "add_permission_to_role",
     "bootstrap",
-    "cleanup_expired",
     "create_credential",
     "create_credential_session",
     "create_org",
     "create_permission",
+    "create_domain",
     "create_reset_token",
     "create_role",
-    "create_session",
     "create_user",
     "delete_credential",
     "delete_org",
     "delete_permission",
-    "delete_reset_token",
+    "delete_domain",
     "delete_role",
     "delete_session",
     "delete_sessions_for_user",
     "delete_user",
     "login",
+    "oidc_login",
     "remove_permission_from_org",
     "remove_permission_from_role",
-    "set_session_host",
     "update_credential_sign_count",
     "update_org_name",
     "update_permission",
+    "update_domain",
     "update_role_name",
     "update_session",
     "update_user_display_name",
+    "update_user_info",
     "update_user_role",
-    "update_user_theme",
+    "is_username_taken",
+    # OIDC
+    "create_oid_client",
+    "update_oid_client",
+    "reset_oid_client_secret",
+    "delete_oid_client",
 ]

paskia/db/background.py

@@ -1,62 +1,38 @@
 """
 Background task for database maintenance.
 
-Periodically flushes pending changes to disk and cleans up expired items.
+Kanta handles periodic flushing to disk.  This module keeps a small
+companion task that periodically cleans up expired sessions/tokens.
 """
 
 import asyncio
 import logging
-from datetime import UTC, datetime
 
-from paskia.db.operations import _store, cleanup_expired
+from paskia.db.lifecycle import cleanup_expired
 
-FLUSH_INTERVAL = 0.1  # Flush to disk
 CLEANUP_INTERVAL = 1  # Expired item cleanup
 
-
 _logger = logging.getLogger(__name__)
 _background_task: asyncio.Task | None = None
 
 
-async def flush() -> None:
-    """Write all pending database changes to disk."""
-
-    if _store is None:
-        _logger.warning("flush() called but _store is None")
-        return
-    await _store.flush()
-
-
 async def _background_loop():
-    """Background task that periodically flushes changes and cleans up."""
+    """Background task that periodically cleans up expired items."""
     # Run cleanup immediately on startup to clear old expired items
     cleanup_expired()
-    await flush()
-
-    last_cleanup = datetime.now(UTC)
 
     while True:
         try:
-            await asyncio.sleep(FLUSH_INTERVAL)
-            # Flush pending changes to disk
-            await flush()
-
-            # Run cleanup periodically
-            now = datetime.now(UTC)
-            if (now - last_cleanup).total_seconds() >= CLEANUP_INTERVAL:
-                cleanup_expired()
-                await flush()  # Flush cleanup changes
-                last_cleanup = now
+            await asyncio.sleep(CLEANUP_INTERVAL)
+            cleanup_expired()
         except asyncio.CancelledError:
-            # Final flush before exit
-            await flush()
             break
         except Exception:
             _logger.debug("Error in database background loop", exc_info=True)
 
 
 async def start_background():
-    """Start the background flush/cleanup task."""
+    """Start the background cleanup task."""
     global _background_task
 
     # Check if task exists but is no longer running (e.g., after uvicorn reload)
@@ -70,16 +46,15 @@ async def start_background():
                 # Check if task is in current event loop
                 loop = asyncio.get_running_loop()
                 task_loop = _background_task.get_loop()
-                if loop is not task_loop:
-                    _logger.debug("Background task in different event loop, restarting")
-                    _background_task = None
-                else:
+                if loop is task_loop:
                     # Task is already running in same loop - idempotent, just return
                     # This happens with dual IPv4+IPv6 endpoints sharing the same process
                     _logger.debug(
                         "Background task already running in same loop, skipping"
                     )
                     return
+                _logger.debug("Background task in different event loop, restarting")
+                _background_task = None
             except Exception as e:
                 _logger.debug("Error checking background task loop: %s, restarting", e)
                 _background_task = None
@@ -89,7 +64,7 @@ async def start_background():
 
 
 async def stop_background():
-    """Stop the background task and flush any pending changes."""
+    """Stop the background cleanup task."""
     global _background_task
     if _background_task:
         _background_task.cancel()
@@ -98,8 +73,3 @@ async def stop_background():
         except asyncio.CancelledError:
             pass
         _background_task = None
-
-
-# Aliases for backwards compatibility
-start_cleanup = start_background
-stop_cleanup = stop_background

paskia/db/bootstrap.py

@@ -0,0 +1,159 @@
+"""
+Bootstrap operations for initial system setup.
+"""
+
+import logging
+import sys
+from datetime import UTC, datetime
+
+import uuid7
+
+from paskia.authsession import reset_expires
+from paskia.db.structs import DB, OIDC, Config, Org, Permission, ResetToken, Role, User
+from paskia.util.crypto import secret_key
+
+_reset_link_logger = logging.getLogger("paskia.reset_link")
+
+
+def _configure_reset_link_logger() -> None:
+    if _reset_link_logger.handlers:
+        return
+    handler = logging.StreamHandler(sys.stderr)
+    handler.setFormatter(logging.Formatter("%(message)s"))
+    _reset_link_logger.addHandler(handler)
+    _reset_link_logger.setLevel(logging.INFO)
+    _reset_link_logger.propagate = False
+
+
+_configure_reset_link_logger()
+
+ADMIN_RESET_MESSAGE = """
+👤 Admin  %s
+   - Use this link to register a Passkey for the admin user!
+"""
+
+
+def log_reset_link(url: str, message: str | None = None) -> str:
+    """Log a reset link message and return the URL."""
+    if message:
+        _reset_link_logger.info(message)
+    _reset_link_logger.info(ADMIN_RESET_MESSAGE, url)
+    return url
+
+
+def bootstrap(
+    data: DB,
+    org_name: str = "Organization",
+    admin_name: str = "Admin",
+    reset_passphrase: str | None = None,
+    reset_expiry: datetime | None = None,
+    config: Config | None = None,
+) -> str:
+    """Bootstrap the entire system by seeding an empty database.
+
+    This is intended to be called from a ``@kanta.bootstrap`` callback during
+    ``kanta.open()``. It mutates the provided root ``data`` object directly;
+    kanta queues the resulting state as the initial "bootstrap" change record.
+
+    Creates:
+    - auth:admin permission (Master Admin)
+    - auth:org:admin permission (Org Admin)
+    - Organization with Administration role
+    - Admin user with Administration role
+    - Reset token for admin registration
+    - Config (if provided)
+
+    Args:
+        data: The live root database object (usually a ``DB`` instance).
+        org_name: Display name for the organization (default: "Organization")
+        admin_name: Display name for the admin user (default: "Admin")
+        reset_passphrase: Passphrase for the reset token (generated if not provided)
+        reset_expiry: Expiry datetime for the reset token (default: 14 days)
+        config: Configuration to store (rp_id, rp_name, origins, etc.)
+
+    Returns:
+        The reset passphrase for admin registration.
+    """
+
+    # Check if system is already bootstrapped
+    for p in data.permissions.values():
+        if p.scope == "auth:admin":
+            raise ValueError(
+                "System already bootstrapped (auth:admin permission exists)"
+            )
+
+    # Generate UUIDs upfront
+    now = datetime.now(UTC)
+    perm_admin_uuid = uuid7.create(now)
+    perm_org_admin_uuid = uuid7.create(now)
+    org_uuid = uuid7.create(now)
+    role_uuid = uuid7.create(now)
+    user_uuid = uuid7.create(now)
+
+    # Set reset token expiry (passphrase generated by ResetToken.create)
+    if reset_expiry is None:
+        reset_expiry = reset_expires()
+
+    # Create auth:admin permission
+    perm_admin = Permission(
+        scope="auth:admin",
+        display_name="Master Admin",
+        orgs={org_uuid: True},  # Grant to org
+    )
+    perm_admin.uuid = perm_admin_uuid
+
+    # Create auth:org:admin permission
+    perm_org_admin = Permission(
+        scope="auth:org:admin",
+        display_name="Org Admin",
+        orgs={org_uuid: True},  # Grant to org
+    )
+    perm_org_admin.uuid = perm_org_admin_uuid
+
+    # Create organization
+    new_org = Org.create(display_name=org_name)
+    new_org.uuid = org_uuid
+
+    # Create Administration role with both permissions
+    admin_role = Role(
+        org_uuid=org_uuid,
+        display_name="Administration",
+        permissions={perm_admin_uuid: True, perm_org_admin_uuid: True},
+    )
+    admin_role.uuid = role_uuid
+
+    # Create admin user
+    admin_user = User(
+        display_name=admin_name,
+        role_uuid=role_uuid,
+        created_at=now,
+        last_seen=None,
+        visits=0,
+        theme="",
+    )
+    admin_user.uuid = user_uuid
+
+    # Create reset token
+    reset_token, reset_passphrase = ResetToken.create(
+        user=user_uuid,
+        expiry=reset_expiry,
+        token_type="admin bootstrap",
+        passphrase=reset_passphrase,
+    )
+
+    # Set config if provided
+    if config is not None:
+        data.config = config
+
+    # Generate the instance-global OIDC signing key
+    data.oidc = OIDC(key=secret_key())
+
+    # Store all bootstrapped objects in the live data object
+    data.permissions[perm_admin_uuid] = perm_admin
+    data.permissions[perm_org_admin_uuid] = perm_org_admin
+    data.orgs[org_uuid] = new_org
+    data.roles[role_uuid] = admin_role
+    data.users[user_uuid] = admin_user
+    data.reset_tokens[reset_token.key] = reset_token
+
+    return reset_passphrase