feat(auth): passkeys, as a way in and as a second factor

A password and a TOTP code are both shared secrets: the server keeps something
that can be stolen from it, and the person keeps something that can be talked out
of them. A passkey is neither. The private half never leaves the device, and the
signature is bound to the origin that asked for it — so a convincing copy of the
sign-in page at another address gets a signature it cannot use.

Logging in asks for no email. The device knows which account its key belongs to,
which is not only convenience: it means the sign-in page cannot be used to find out
who has an account here. A key that verified its owner is both factors at once and
completes the login; one that only proved possession still meets the TOTP step,
exactly as a password does.

The relying party id is derived from VERDANDE_BASE_URL rather than configured
separately — a second setting that has to agree with the first is one that will
one day disagree, and the failure is a login nobody can complete. An IP address is
refused up front: no browser accepts one, and without the check the server issues
a challenge happily and the browser throws SecurityError long afterwards. The list
endpoint reports whether this deployment can offer them at all, so the interface
never shows a button that cannot work.

A challenge is stored server-side, answerable exactly once, and taken rather than
read — two requests racing the same one would both succeed, which is the shape of
a replay. A sign count that has gone backwards means the credential was cloned and
is refused rather than logged.

The Go tests cover who may reach these endpoints and that challenges are spent.
The ceremony itself needs an authenticator, so the smoke test drives Chromium's
virtual one over CDP — the only thing that can tell whether the base64url
conversions are right, since one wrong byte produces a signature that will not
verify and reads as a broken key rather than a broken encoder.

That test runs at localhost in its own context while the suite stays on the
loopback address, because WebAuthn refuses an IP and resolving localhost is slow
enough here to cost the suite minutes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/e2e/smoke.spec.js

@@ -50,9 +50,16 @@ function watchForTrouble(page) {
 	page.on('pageerror', (error) => trouble.push(String(error)));
 	page.on('response', (response) => {
 		const url = response.url();
-		if (url.includes('/api/') && !response.ok()) {
-			trouble.push(`${response.request().method()} ${new URL(url).pathname} → ${response.status()}`);
-		}
+		if (!url.includes('/api/') || response.ok()) return;
+
+		// A 401 from /auth/me is the app asking "am I signed in?" and being told no,
+		// which is the correct answer on the sign-in page and after signing out.
+		// Every other non-ok response is worth failing over — that is what this
+		// watcher is for.
+		const path = new URL(url).pathname;
+		if (path.endsWith('/auth/me') && response.status() === 401) return;
+
+		trouble.push(`${response.request().method()} ${path} → ${response.status()}`);
 	});
 	return trouble;
 }
@@ -577,7 +584,7 @@ test('et invitationslink opretter kontoen og giver adgang til projektet', async
 	await invitee.goto(link);
 
 	await expect(invitee.getByText('Du er inviteret')).toBeVisible();
-	await invitee.getByLabel('Navn').fill('Nabo');
+	await invitee.getByLabel('Navn', { exact: true }).fill('Nabo');
 	await invitee.getByLabel(/Adgangskode/).fill('et langt kodeord til test');
 	await invitee.getByRole('button', { name: 'Opret konto' }).click();
 
@@ -734,7 +741,7 @@ test('en administrator kan invitere en bruger til instansen', async ({ browser,
 	const context = await browser.newContext({ storageState: { cookies: [], origins: [] } });
 	const invitee = await context.newPage();
 	await invitee.goto(link);
-	await invitee.getByLabel('Navn').fill('Anders');
+	await invitee.getByLabel('Navn', { exact: true }).fill('Anders');
 	await invitee.getByLabel(/Adgangskode/).fill('et langt kodeord til test');
 	await invitee.getByRole('button', { name: 'Opret konto' }).click();
 
@@ -807,7 +814,7 @@ test('en rolle kan rettes uden at fjerne personen', async ({ browser, page }) =>
 	const context = await browser.newContext({ storageState: { cookies: [], origins: [] } });
 	const andreas = await context.newPage();
 	await andreas.goto(link);
-	await andreas.getByLabel('Navn').fill('andreas');
+	await andreas.getByLabel('Navn', { exact: true }).fill('andreas');
 	await andreas.getByLabel(/Adgangskode/).fill('et langt kodeord til test');
 	await andreas.getByRole('button', { name: 'Opret konto' }).click();
 	await expect(andreas.getByRole('navigation', { name: 'Hovedmenu' })).toBeVisible();
@@ -964,7 +971,7 @@ test('historik-siden viser hændelser fra et projekt, administratoren ikke er me
 	expect(link).toContain('/invite?token=');
 
 	await theirs.goto(link);
-	await theirs.getByLabel('Navn').fill('Sigrid');
+	await theirs.getByLabel('Navn', { exact: true }).fill('Sigrid');
 	await theirs.getByLabel(/Adgangskode/).fill('et langt kodeord til test');
 	await theirs.getByRole('button', { name: 'Opret konto' }).click();
 	await expect(theirs.getByRole('navigation', { name: 'Hovedmenu' })).toBeVisible();
@@ -1447,6 +1454,97 @@ test('en opgave lukket ved et uheld kan hentes tilbage', async ({ page }) => {
 	expect(trouble).toEqual([]);
 });
 
+/**
+ * A passkey, registered and then signed in with, end to end.
+ *
+ * The Go tests cover who may reach these endpoints and that a challenge is spent
+ * when it is used. What they cannot do is produce a signature — that needs an
+ * authenticator. Chrome has a virtual one behind CDP, and it is the only way to
+ * find out whether the encoding is right: every boundary here is a base64url
+ * conversion, and one wrong byte produces a signature that will not verify,
+ * reported as "that key was not accepted" — which reads as a broken key rather
+ * than a broken encoder.
+ *
+ * Chromium only, and deliberately so: this is testing our ceremony, not WebKit's
+ * authenticator.
+ */
+test('en passkey kan registreres og logges ind med', async ({ browser, browserName }) => {
+	test.skip(browserName !== 'chromium', 'den virtuelle authenticator findes kun i Chromium');
+
+	// Its own context, at `localhost` rather than the loopback address the rest of
+	// the suite uses. WebAuthn refuses an IP as a relying party id — the browser
+	// throws `SecurityError: This is an invalid domain` — and localhost is the
+	// exception every browser makes. It is not the shared baseURL because
+	// resolving `localhost` is slow enough here to cost the whole suite minutes.
+	//
+	// Cookies are bound to an origin, so the signed-in state from the setup project
+	// does not carry across: this signs in with a password first, which is also the
+	// honest order — you register a key on an account you have already proved you
+	// own.
+	const origin = 'http://localhost:8097';
+	const context = await browser.newContext({ storageState: { cookies: [], origins: [] } });
+	const page = await context.newPage();
+	const trouble = watchForTrouble(page);
+
+	await page.goto(`${origin}/`);
+	await page.getByLabel(/E-mail/).fill(USER.email);
+	await page.getByLabel(/Adgangskode/).fill(USER.password);
+	await page.getByRole('button', { name: 'Log ind', exact: true }).click();
+	await expect(page.getByRole('navigation', { name: 'Hovedmenu' })).toBeVisible();
+
+	// A virtual authenticator that verifies its owner, so the key counts as both
+	// factors — which is what lets the login complete without a password.
+	const client = await page.context().newCDPSession(page);
+	await client.send('WebAuthn.enable');
+	const { authenticatorId } = await client.send('WebAuthn.addVirtualAuthenticator', {
+		options: {
+			protocol: 'ctap2',
+			transport: 'internal',
+			hasResidentKey: true,
+			hasUserVerification: true,
+			isUserVerified: true,
+			automaticPresenceSimulation: true
+		}
+	});
+
+	await page.goto(`${origin}/indstillinger`);
+	await page.getByLabel('Navn på nøglen').fill('Testnøglen');
+	await page.getByRole('button', { name: 'Tilføj en nøgle' }).click();
+
+	// It is in the list, and it counts as both factors — the virtual authenticator
+	// verifies, so the login below needs no password.
+	const key = page.locator('li').filter({ hasText: 'Testnøglen' });
+	await expect(key).toBeVisible();
+	await expect(key.getByText('begge faktorer')).toBeVisible();
+
+	// It survives a reload, so this is the server's row and not the page's state.
+	await page.reload();
+	await expect(page.locator('li').filter({ hasText: 'Testnøglen' })).toBeVisible();
+
+	// Now sign out and back in with it. No email typed: the device knows which
+	// account its key belongs to, which is also why this page cannot be used to
+	// find out who has an account here.
+	await page.getByRole('navigation', { name: 'Hovedmenu' }).getByText('Log ud').click();
+	// `exact`, because "Log ind" is a substring of "Log ind med en passkey" and
+	// Playwright matches an accessible name loosely unless told otherwise.
+	await expect(page.getByRole('button', { name: 'Log ind', exact: true })).toBeVisible();
+
+	await page.getByRole('button', { name: 'Log ind med en passkey' }).click();
+	await expect(page.getByRole('navigation', { name: 'Hovedmenu' })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'I dag' })).toBeVisible();
+
+	// And the key records that it was used, which is what makes the list worth
+	// reading when somebody wonders whether a device is still in play.
+	await page.goto(`${origin}/indstillinger`);
+	await expect(
+		page.locator('li').filter({ hasText: 'Testnøglen' }).getByText(/sidst brugt/)
+	).toBeVisible();
+
+	await client.send('WebAuthn.removeVirtualAuthenticator', { authenticatorId });
+	await context.close();
+	expect(trouble).toEqual([]);
+});
+
 /**
  * The sidebar never scrolls sideways.
  *
@@ -1465,7 +1563,9 @@ test('sidebjælken kan ikke scrolles vandret', async ({ page }) => {
 	await page.goto('/indstillinger');
 
 	// A name long enough to overflow the column at its default width.
-	await page.getByLabel('Navn').fill('Kristian Vinterberg-Skovgaard');
+	// `exact`, or this also matches "Navn på nøglen" in the passkey panel — and an
+	// ambiguous locator waits for one of them to go away rather than failing.
+	await page.getByLabel('Navn', { exact: true }).fill('Kristian Vinterberg-Skovgaard');
 	await page.getByRole('button', { name: 'Gem' }).first().click();
 	await expect(page.getByText('Kristian Vinterberg-Skovgaard').first()).toBeVisible();
 
@@ -1480,7 +1580,7 @@ test('sidebjælken kan ikke scrolles vandret', async ({ page }) => {
 	expect(page_sideways, 'siden kan scrolles vandret').toBeLessThanOrEqual(1);
 
 	// Put the name back, so the tests after this one see the account they expect.
-	await page.getByLabel('Navn').fill(USER.name);
+	await page.getByLabel('Navn', { exact: true }).fill(USER.name);
 	await page.getByRole('button', { name: 'Gem' }).first().click();
 
 	expect(trouble).toEqual([]);
@@ -1535,6 +1635,16 @@ test('et projekt kan have flere sektioner @forms', async ({ page }) => {
 	// inside a board was exactly true.
 	await page.getByRole('button', { name: 'Board', exact: true }).click();
 	await expect(page.getByRole('heading', { name: 'Uden sektion' })).toBeVisible();
+
+	// A board gets the width a reading column withholds. This was `.view:has(.board)`
+	// for as long as the board has existed and never once matched: `.board` is inside
+	// a child component, and Svelte scopes a selector to the component that wrote it.
+	// The rule read correctly, compiled, and could not fire.
+	const wide = await page.locator('.view').evaluate((el) => el.getBoundingClientRect().width);
+	await page.getByRole('button', { name: 'Liste', exact: true }).click();
+	const narrow = await page.locator('.view').evaluate((el) => el.getBoundingClientRect().width);
+	expect(wide, 'board-visningen er ikke bredere end listen').toBeGreaterThan(narrow);
+	await page.getByRole('button', { name: 'Board', exact: true }).click();
 	await page.getByRole('button', { name: '+ Tilføj sektion' }).click();
 	const field = page.getByLabel('Ny sektion');
 	await expect(field, 'boardet har ingen måde at lave en sektion på').toBeVisible();

web/playwright.config.js

@@ -34,6 +34,9 @@ if (process.env.TEST_WORKER_INDEX === undefined) {
 }
 
 const PORT = 8097;
+// `localhost`, not `127.0.0.1`. WebAuthn refuses an IP address as a relying party
+// id — `SecurityError: This is an invalid domain` — and localhost is the exception
+// every browser makes. The passkey test cannot run against a loopback address.
 const baseURL = `http://127.0.0.1:${PORT}`;
 
 export default defineConfig({
@@ -118,7 +121,15 @@ export default defineConfig({
 		stderr: 'pipe',
 		env: {
 			VERDANDE_ADDR: `:${PORT}`,
-			VERDANDE_BASE_URL: baseURL,
+			// `localhost`, while the suite itself drives `127.0.0.1`. These are two
+			// different things: the suite's address is where the browser goes, and
+			// this one is what the server calls itself — which is now also the
+			// WebAuthn relying party id, and WebAuthn refuses an IP address.
+			//
+			// The passkey test navigates to localhost explicitly so its origin
+			// matches. Everything else stays on the loopback address, where it has
+			// always been.
+			VERDANDE_BASE_URL: `http://localhost:${PORT}`,
 			VERDANDE_DATA_DIR: dataDir,
 			// Off: an update check would reach out to GitHub from a test run.
 			VERDANDE_UPDATE_CHECK: 'false'

web/src/lib/api.js

@@ -181,6 +181,15 @@ export const api = {
 	totpConfirm: (code) => post('/auth/totp/confirm', { code }),
 	totpDisable: (password) => post('/auth/totp/disable', { password }),
 	listSessions: () => get('/auth/sessions'),
+
+	// --- passkeys
+	listPasskeys: () => get('/auth/passkeys'),
+	beginPasskeyRegistration: () => post('/auth/passkeys/register/begin'),
+	finishPasskeyRegistration: (data) => post('/auth/passkeys/register/finish', data),
+	renamePasskey: (id, name) => patch(`/auth/passkeys/${id}`, { name }),
+	deletePasskey: (id) => del(`/auth/passkeys/${id}`),
+	beginPasskeyLogin: () => post('/auth/passkey/login/begin'),
+	finishPasskeyLogin: (data) => post('/auth/passkey/login/finish', data),
 	endSession: (id) => del(`/auth/sessions/${id}`),
 
 	// --- users, administrators only

web/src/lib/components/SignIn.svelte

@@ -20,6 +20,7 @@
 	import { app } from '$lib/stores.svelte.js';
 	import { focusOnMount } from '$lib/focus.js';
 	import { t } from '$lib/i18n.svelte.js';
+	import { available, signIn } from '$lib/passkey.js';
 
 	// loading | login | setup | totp | forgot | sent | invite | reset | done
 	let mode = $state('loading');
@@ -31,6 +32,41 @@
 	let fields = $state({});
 	let busy = $state(false);
 
+	// --- passkey -----------------------------------------------------------------
+
+	let passkeyReady = $state(false);
+
+	$effect(() => {
+		available().then((ok) => (passkeyReady = ok));
+	});
+
+	/**
+	 * No email is asked for and none is sent: the device knows which account its
+	 * key belongs to. That is not only convenience — it means this page cannot be
+	 * used to find out who has an account here.
+	 */
+	async function signInWithPasskey() {
+		error = '';
+		busy = true;
+		try {
+			const result = await signIn();
+			if (result.totp_required) {
+				mode = 'totp';
+			} else {
+				app.user = result.user;
+				await app.load();
+			}
+		} catch (e) {
+			// A cancelled prompt is not a failure. Somebody changed their mind, and
+			// an error for that reads as though the key was rejected.
+			if (e?.name !== 'NotAllowedError' && e?.message !== 'cancelled') {
+				error = humanMessage(e);
+			}
+		} finally {
+			busy = false;
+		}
+	}
+
 	/**
 	 * The token from an emailed link, if this is one.
 	 *
@@ -267,6 +303,15 @@
 			</label>
 
 			<button type="submit" disabled={busy}>{t('auth.signIn')}</button>
+
+			<!-- Only when the browser has somewhere to keep a key. Offering it where
+			     it cannot work is a button that fails for reasons nobody can act on. -->
+			{#if passkeyReady}
+				<button type="button" class="passkey" disabled={busy} onclick={signInWithPasskey}>
+					{busy ? t('passkey.signingIn') : t('passkey.signIn')}
+				</button>
+			{/if}
+
 			<button type="button" class="link" onclick={() => (mode = 'forgot')}>
 				{t('auth.forgot')}
 			</button>
@@ -381,6 +426,22 @@
 		cursor: default;
 	}
 
+	/* Set apart from the primary button but not made secondary: it is an equal way
+	   in, not a fallback. */
+	.passkey {
+		width: 100%;
+		padding: var(--s2) var(--s4);
+		border: 1px solid var(--line-strong);
+		border-radius: var(--radius);
+		font-size: var(--text-sm);
+		color: var(--ink);
+		transition: border-color var(--fast) var(--ease);
+	}
+
+	.passkey:hover {
+		border-color: var(--accent);
+	}
+
 	.link {
 		color: var(--ink-faint);
 		font-size: var(--text-sm);

web/src/lib/locales/da.js

@@ -613,5 +613,27 @@ export const da = {
 	'done.title': 'Færdige',
 	'done.hint': 'Alt du har lukket, nyeste først. Klik cirklen for at åbne en igen.',
 	'done.empty': 'Du har ikke lukket noget endnu.',
-	'done.unknownDay': 'Uden dato'
+	'done.unknownDay': 'Uden dato',
+
+	// --- passkeys ----------------------------------------------------------------------
+	'passkey.title': 'Passkeys',
+	'passkey.hint':
+		'En nøgle på en enhed i stedet for en hemmelighed i et hoved. Den private halvdel forlader aldrig enheden, og signaturen er bundet til adressen — så en overbevisende kopi af login-siden et andet sted får ingenting.',
+	'passkey.unsupported': 'Denne browser understøtter ikke passkeys.',
+	'passkey.none': 'Ingen nøgler endnu.',
+	'passkey.name': 'Navn på nøglen',
+	'passkey.namePlaceholder': 'fx min bærbare',
+	'passkey.add': 'Tilføj en nøgle',
+	'passkey.registering': 'Venter på enheden…',
+	'passkey.remove': 'Fjern',
+	'passkey.removeQuestion': 'Fjern "{name}"? Enheden kan ikke logge ind med den bagefter.',
+	'passkey.bothFactors': 'begge faktorer',
+	'passkey.possessionOnly': 'kun besiddelse — koden bliver stadig krævet',
+	'passkey.lastUsed': 'sidst brugt {when}',
+	'passkey.neverUsed': 'aldrig brugt',
+	'passkey.signIn': 'Log ind med en passkey',
+	'passkey.signingIn': 'Venter på enheden…',
+
+	'passkey.unavailable':
+		'Passkeys kan ikke bruges her — enten understøtter browseren dem ikke, eller også er serverens adresse en IP frem for et domænenavn, hvilket ingen authenticator accepterer.'
 };

web/src/lib/locales/en.js

@@ -608,5 +608,27 @@ export const en = {
 	'done.title': 'Done',
 	'done.hint': 'Everything you have closed, newest first. Click the circle to reopen one.',
 	'done.empty': 'You have not closed anything yet.',
-	'done.unknownDay': 'No date'
+	'done.unknownDay': 'No date',
+
+	// --- passkeys ----------------------------------------------------------------------
+	'passkey.title': 'Passkeys',
+	'passkey.hint':
+		'A key on a device instead of a secret in a head. The private half never leaves the device, and the signature is bound to the address that asked for it — so a convincing copy of the sign-in page somewhere else gets nothing.',
+	'passkey.unsupported': 'This browser does not support passkeys.',
+	'passkey.none': 'No keys yet.',
+	'passkey.name': 'Name for the key',
+	'passkey.namePlaceholder': 'e.g. my laptop',
+	'passkey.add': 'Add a key',
+	'passkey.registering': 'Waiting for the device…',
+	'passkey.remove': 'Remove',
+	'passkey.removeQuestion': 'Remove "{name}"? That device cannot sign in with it afterwards.',
+	'passkey.bothFactors': 'both factors',
+	'passkey.possessionOnly': 'possession only — the code is still required',
+	'passkey.lastUsed': 'last used {when}',
+	'passkey.neverUsed': 'never used',
+	'passkey.signIn': 'Sign in with a passkey',
+	'passkey.signingIn': 'Waiting for the device…',
+
+	'passkey.unavailable':
+		'Passkeys cannot be used here — either this browser does not support them, or the server’s address is an IP rather than a domain name, which no authenticator will accept.'
 };

web/src/lib/passkey.js

@@ -0,0 +1,115 @@
+/**
+ * The browser half of a passkey ceremony.
+ *
+ * WebAuthn passes binary as ArrayBuffers and JSON cannot carry those, so every
+ * boundary between this and the server is a base64url conversion. Getting one of
+ * them wrong produces a signature that will not verify, reported as "that key was
+ * not accepted" — which reads as a broken key rather than a broken encoder. That
+ * is the whole reason this is one file and not three call sites.
+ */
+import { api } from './api.js';
+
+/** Whether this browser can do it at all. */
+export function supported() {
+	return typeof window !== 'undefined' && Boolean(window.PublicKeyCredential);
+}
+
+/**
+ * Whether a key can be offered without the person typing anything first.
+ *
+ * Not the same question as `supported()`: a browser can do WebAuthn and still have
+ * nowhere to put a discoverable credential. Asking first is what stops the sign-in
+ * page offering a button that cannot work.
+ */
+export async function available() {
+	if (!supported()) return false;
+	try {
+		return await window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
+	} catch {
+		return false;
+	}
+}
+
+const toBuffer = (value) => {
+	const normalised = value.replace(/-/g, '+').replace(/_/g, '/');
+	const padded = normalised.padEnd(normalised.length + ((4 - (normalised.length % 4)) % 4), '=');
+	return Uint8Array.from(atob(padded), (c) => c.charCodeAt(0));
+};
+
+const toBase64URL = (buffer) =>
+	btoa(String.fromCharCode(...new Uint8Array(buffer)))
+		.replace(/\+/g, '-')
+		.replace(/\//g, '_')
+		.replace(/=+$/, '');
+
+/** Registers a key on the signed-in account. Returns the row the server stored. */
+export async function register(name) {
+	const { challenge_id, options } = await api.beginPasskeyRegistration();
+	const publicKey = {
+		...options.publicKey,
+		challenge: toBuffer(options.publicKey.challenge),
+		user: { ...options.publicKey.user, id: toBuffer(options.publicKey.user.id) },
+		excludeCredentials: (options.publicKey.excludeCredentials ?? []).map((c) => ({
+			...c,
+			id: toBuffer(c.id)
+		}))
+	};
+
+	const credential = await navigator.credentials.create({ publicKey });
+	if (!credential) throw new Error('cancelled');
+
+	return api.finishPasskeyRegistration({
+		challenge_id,
+		name,
+		credential: {
+			id: credential.id,
+			rawId: toBase64URL(credential.rawId),
+			type: credential.type,
+			response: {
+				clientDataJSON: toBase64URL(credential.response.clientDataJSON),
+				attestationObject: toBase64URL(credential.response.attestationObject)
+			},
+			clientExtensionResults: credential.getClientExtensionResults()
+		}
+	});
+}
+
+/**
+ * Signs in with a key.
+ *
+ * No email is asked for and none is sent: the device knows which account its key
+ * belongs to. That is not only convenience — it means the sign-in page cannot be
+ * used to find out who has an account here.
+ */
+export async function signIn() {
+	const { challenge_id, options } = await api.beginPasskeyLogin();
+	const publicKey = {
+		...options.publicKey,
+		challenge: toBuffer(options.publicKey.challenge),
+		allowCredentials: (options.publicKey.allowCredentials ?? []).map((c) => ({
+			...c,
+			id: toBuffer(c.id)
+		}))
+	};
+
+	const credential = await navigator.credentials.get({ publicKey });
+	if (!credential) throw new Error('cancelled');
+
+	return api.finishPasskeyLogin({
+		challenge_id,
+		credential: {
+			id: credential.id,
+			rawId: toBase64URL(credential.rawId),
+			type: credential.type,
+			response: {
+				clientDataJSON: toBase64URL(credential.response.clientDataJSON),
+				authenticatorData: toBase64URL(credential.response.authenticatorData),
+				signature: toBase64URL(credential.response.signature),
+				userHandle: credential.response.userHandle
+					? toBase64URL(credential.response.userHandle)
+					: null
+			},
+			clientExtensionResults: credential.getClientExtensionResults()
+		}
+	});
+}

web/src/routes/indstillinger/+page.svelte

@@ -3,12 +3,67 @@
 	import { api, humanMessage } from '$lib/api.js';
 	import { app, theme, THEMES } from '$lib/stores.svelte.js';
 	import { t, plural, i18n } from '$lib/i18n.svelte.js';
+	import { supported, register } from '$lib/passkey.js';
+	import { ago } from '$lib/when.js';
 
 	// --- profile ---------------------------------------------------------------
 
 	let name = $state('');
 	let timezone = $state('');
 	let locale = $state('da');
+
+	// --- passkeys -------------------------------------------------------------------
+
+	let passkeys = $state([]);
+	let passkeyName = $state('');
+	let passkeyError = $state('');
+	let registering = $state(false);
+	let passkeySupported = $state(true);
+
+	$effect(() => {
+		passkeySupported = supported();
+		if (!passkeySupported) return;
+		api
+			.listPasskeys()
+			.then((r) => {
+				passkeys = r.passkeys;
+				// The server has the other half of the answer: this browser can do
+				// passkeys, and this deployment may still be on an address no
+				// authenticator will accept.
+				passkeySupported = r.available;
+			})
+			.catch(() => {});
+	});
+
+	async function addPasskey(event) {
+		event.preventDefault();
+		passkeyError = '';
+		registering = true;
+		try {
+			passkeys = [...passkeys, await register(passkeyName.trim())];
+			passkeyName = '';
+		} catch (e) {
+			// A cancelled prompt is not a failure — the person changed their mind,
+			// and an error message for that reads as though something broke.
+			if (e?.name !== 'NotAllowedError' && e?.message !== 'cancelled') {
+				passkeyError = humanMessage(e);
+			}
+		} finally {
+			registering = false;
+		}
+	}
+
+	async function removePasskey(key) {
+		if (!confirm(t('passkey.removeQuestion', { name: key.name }))) return;
+		const previous = passkeys;
+		passkeys = passkeys.filter((k) => k.id !== key.id);
+		try {
+			await api.deletePasskey(key.id);
+		} catch (e) {
+			passkeys = previous;
+			app.toast(humanMessage(e));
+		}
+	}
 	let profileErrors = $state({});
 	let profileSaved = $state(false);
 	let savingProfile = $state(false);
@@ -187,16 +242,6 @@
 	 * older than a week gets its date instead: "for 23 dage siden" is a number
 	 * nobody can place.
 	 */
-	function ago(iso) {
-		const then = new Date(iso);
-		const seconds = Math.round((Date.now() - then) / 1000);
-
-		if (seconds < 60) return 'lige nu';
-		if (seconds < 3600) return `for ${Math.floor(seconds / 60)} min. siden`;
-		if (seconds < 86400) return `for ${Math.floor(seconds / 3600)} timer siden`;
-		if (seconds < 604800) return `for ${Math.floor(seconds / 86400)} dage siden`;
-		return then.toLocaleDateString('da-DK', { day: 'numeric', month: 'short', year: 'numeric' });
-	}
 </script>
 
 <section class="panel">
@@ -413,6 +458,47 @@
 	{/if}
 </section>
 
+<!-- Between two-factor and the device list, because it belongs to both: a passkey
+     is a way in, and it is a thing on a device you might later want to revoke. -->
+<section class="panel">
+	<header>
+		<h2>{t('passkey.title')}</h2>
+		<p class="hint">{t('passkey.hint')}</p>
+	</header>
+
+	{#if !passkeySupported}
+		<p class="hint">{t('passkey.unavailable')}</p>
+	{:else}
+		{#if passkeys.length}
+			<ul class="list">
+				{#each passkeys as key (key.id)}
+					<li>
+						<div class="what">
+							<span class="primary-line">{key.name}</span>
+							<span class="secondary">
+								{key.user_verified ? t('passkey.bothFactors') : t('passkey.possessionOnly')}
+								·
+								{key.last_used_at ? t('passkey.lastUsed', { when: ago(key.last_used_at) }) : t('passkey.neverUsed')}
+							</span>
+						</div>
+						<button class="secondary" onclick={() => removePasskey(key)}>{t('passkey.remove')}</button>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<p class="empty">{t('passkey.none')}</p>
+		{/if}
+
+		<form class="row" onsubmit={addPasskey}>
+			<input bind:value={passkeyName} placeholder={t('passkey.namePlaceholder')} aria-label={t('passkey.name')} />
+			<button class="primary" type="submit" disabled={registering}>
+				{registering ? t('passkey.registering') : t('passkey.add')}
+			</button>
+		</form>
+		{#if passkeyError}<p class="error">{passkeyError}</p>{/if}
+	{/if}
+</section>
+
 <section class="panel">
 	<header>
 		<h2>{t('account.devices')}</h2>

web/src/routes/projekt/[id]/+page.svelte

@@ -402,7 +402,12 @@
 	}
 </script>
 
-<div class="view">
+<!-- Wide for a board and a month grid, narrow for a list. Decided here rather than
+     in CSS: this was `.view:has(.board)` for as long as the board has existed and
+     never once matched, because `.board` is inside a child component and Svelte
+     scopes a selector to the component that wrote it. The rule read correctly,
+     compiled, and could not fire. Kommende has done it this way all along. -->
+<div class="view" class:wide={mode !== 'list'}>
 	{#if project}
 		<header>
 			<!-- A heading first, a field second. Swapping the h1 out for an input
@@ -816,6 +821,12 @@
 		padding: var(--s6) var(--s4) var(--s8);
 	}
 
+	/* A board and a month grid need the room a reading column deliberately
+	   withholds. Same allowance Kommende makes. */
+	.view.wide {
+		max-width: 1400px;
+	}
+
 	/* A board and a month grid need the room; a list is easier to read narrow. */
 
 	/* Wraps, and the title keeps a floor.