feat(passkeys): list, add and revoke from the account page (#40)

The issue calls this the smallest one in the project and the one that makes the rest usable, and that is right: registering a passkey with no way to see or remove it is worse than not offering passkeys at all.

Revocation is the row going away. #39 looks a credential up by id on every sign-in, so a deleted one is refused immediately and by construction rather than by a flag something has to remember to check. The delete is scoped to the signed-in customer in the same statement that removes the row, because a credential id is not a secret and the WHERE clause is the only thing making this safe. Reading first and deleting after would leave a window.

Both "no such credential" and "not yours" answer 404. The second is the interesting case, and saying so would confirm that some other customer holds that id.

The lockout check is written even though it cannot fire. password_hash is NOT NULL, so every customer has a password and removing every passkey still leaves a way in. The issue asks for the check anyway and that is the right call, because it is written against the condition rather than against today's schema — it starts holding on its own the moment the condition changes. #332 is what changes it: social sign-in makes password_hash nullable and creates the first customers with no password, and at that point this branch starts running for real.

The list returns name, added and last used, and nothing else. No public key, no credential id, no counter — the customer cannot act on any of them, and the credential id is the one value that identifies an authenticator to anyone holding it. Last used is what actually tells two entries apart when the names are similar: someone about to revoke one needs to know which device they are cutting off, and a creation date does not answer that.

The whole ceremony lives in customerApi rather than the component, because it is one operation: options from the server, an attestation from the browser, verification back at the server. A component holding that intermediate state could leave a challenge issued and never answered.

Dismissing the browser's prompt rejects, and that is a cancellation rather than a failure. Reporting it as an error would tell a customer something went wrong when they simply changed their mind, so NotAllowedError and AbortError are swallowed and everything else is shown. The server's message on a refused revoke is shown as it arrives too — it says what to do about the last way in, and a generic message would strand the customer on a button that just does not work.

The section renders nothing where WebAuthn is unavailable, rather than offering a button that cannot work. Same rule #41 applies to the login form.

Verified: tsc clean for src and tests in both workspaces, backend lint at the seven pre-existing warnings with none added, frontend lint clean, 521 unit tests across 36 suites, frontend build green.

Not verified: the registration ceremony needs a browser and a real authenticator, which per #41 is a standing limitation of this feature. What CI can prove is the list and revoke endpoints, which are ordinary routes.

Closes #40

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

frontend/src/customer/customerApi.ts

@@ -172,6 +172,63 @@ export function changeMyEmail(currentPassword: string, email: string): Promise<C
   }).then(res => handle<Customer>(res));
 }
 
+/** A registered passkey, as the account page lists it (#40). */
+export interface Passkey {
+  id: number;
+  name: string;
+  created_at: string;
+  last_used_at: string | null;
+}
+
+export function fetchPasskeys(): Promise<Passkey[]> {
+  return fetch('/api/customers/me/passkeys').then(res => handle<Passkey[]>(res));
+}
+
+/**
+ * Registers a passkey on this device.
+ *
+ * Both halves of the ceremony live here rather than in the component, because
+ * they are one operation: options come from the server, the browser turns them
+ * into an attestation, and the server verifies it. A component holding the
+ * intermediate state could leave a challenge issued and never answered.
+ *
+ * `startRegistration` is what prompts the customer. It throws when they dismiss
+ * that prompt, which is a cancellation rather than a failure — the caller tells
+ * them apart.
+ */
+export async function registerPasskey(name?: string): Promise<Passkey[]> {
+  const { startRegistration } = await import('@simplewebauthn/browser');
+
+  const optionsRes = await fetch('/api/customers/me/passkeys/register/begin', { method: 'POST' });
+  const options = await handle<Parameters<typeof startRegistration>[0]['optionsJSON']>(optionsRes);
+
+  const attestation = await startRegistration({ optionsJSON: options });
+
+  const finishRes = await fetch('/api/customers/me/passkeys/register/finish', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ...attestation, name })
+  });
+  await handle<{ name: string }>(finishRes);
+
+  // The fresh list rather than the one row, so the caller cannot render a list
+  // that disagrees with the server about what was just added.
+  return fetchPasskeys();
+}
+
+export function revokePasskey(id: number): Promise<void> {
+  return fetch(`/api/customers/me/passkeys/${id}`, { method: 'DELETE' }).then(async (res) => {
+    // 204 on success, so handle() would throw on an empty body. The failure
+    // message matters here — refusing to remove the last way in says what to do
+    // about it, and replacing that with something generic would strand the
+    // customer on a button that simply does not work.
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      throw new Error(data.error || 'Request failed');
+    }
+  });
+}
+
 export function resendVerificationEmail(): Promise<void> {
   // 204 on success, so handle() would throw parsing an empty body. The failure
   // path must still reject: the server's message distinguishes "already