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>

backend/src/routes/passkeys.ts

@@ -9,6 +9,7 @@ import { asyncRoute } from '../asyncRoute';
 import { requireCustomer } from '../middleware/customerAuth';
 import { relyingParty } from '../passkeys/relyingParty';
 import { defaultCredentialName, readCredentialName } from '../passkeys/credentialName';
+import { readId } from '../utils';
 
 const router = Router();
 
@@ -192,6 +193,99 @@ router.post(
   })
 );
 
+/**
+ * The customer's registered passkeys (#40).
+ *
+ * Registering one with no way to see or remove it is worse than not offering
+ * passkeys at all, which is what makes this the smallest issue in the project
+ * and the one that makes the rest usable.
+ *
+ * `last_used_at` is here because it is the only thing that tells two entries
+ * apart when the names are similar — a customer about to revoke one needs to
+ * know which device they are cutting off, and "used an hour ago" answers that
+ * where a creation date does not.
+ */
+router.get(
+  '/',
+  requireCustomer,
+  asyncRoute(async (req: Request, res: Response) => {
+    const { rows } = await pool.query<{
+      id: number;
+      name: string;
+      created_at: Date;
+      last_used_at: Date | null;
+    }>(
+      `SELECT id, name, created_at, last_used_at
+       FROM customer_credentials
+       WHERE customer_id = $1
+       ORDER BY created_at DESC`,
+      [req.customerId]
+    );
+
+    // No public key, no credential id, no counter. The customer cannot act on
+    // any of them, and a credential id is the one value that identifies this
+    // authenticator to anyone who has it.
+    res.json(rows);
+  })
+);
+
+router.delete(
+  '/:id',
+  requireCustomer,
+  asyncRoute(async (req: Request, res: Response) => {
+    const id = readId(req.params.id);
+    if (id === null) return res.status(404).json({ error: 'not found' });
+
+    // Removing the last way in must not lock the customer out.
+    //
+    // This cannot fire today: password_hash is NOT NULL, so every customer has
+    // a password and removing every passkey still leaves them a way to sign in.
+    // The issue asks for the check anyway, and that is the right call — it is
+    // written against the condition rather than against today's schema, so 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, at which point a customer
+    // whose only credential is a passkey can genuinely lock themselves out with
+    // this button. When that lands, `has_password` stops being always true and
+    // this branch starts running.
+    const { rows: waysIn } = await pool.query<{ has_password: boolean; credentials: string }>(
+      `SELECT (c.password_hash IS NOT NULL) AS has_password,
+              (SELECT count(*) FROM customer_credentials WHERE customer_id = c.id) AS credentials
+       FROM customers c
+       WHERE c.id = $1`,
+      [req.customerId]
+    );
+    const waysInRow = waysIn[0];
+    if (waysInRow && !waysInRow.has_password && Number(waysInRow.credentials) <= 1) {
+      return res.status(409).json({
+        error:
+          'that is the only way you can sign in — set a password first, or add another passkey'
+      });
+    }
+
+    // Scoped to the signed-in customer in the same statement that deletes.
+    // Reading first and deleting after would leave a window, and a credential
+    // id is not a secret — the only thing making this safe is that the WHERE
+    // names whose it must be.
+    //
+    // Revocation is the row going away: #39 looks the 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.
+    const { rowCount } = await pool.query(
+      `DELETE FROM customer_credentials WHERE id = $1 AND customer_id = $2`,
+      [id, req.customerId]
+    );
+
+    // 404 for both "no such credential" and "not yours", deliberately. The
+    // second is the interesting case and saying so would confirm that some
+    // other customer holds that id.
+    if (rowCount === 0) return res.status(404).json({ error: 'not found' });
+
+    res.status(204).end();
+  })
+);
+
 /** Exported for the tests; nothing else constructs a challenge. */
 export { CHALLENGE_TTL_MS };