Authentication Flow

// Add to src/routes/passkeys.ts
import {
  generateAuthenticationOptions,
  verifyAuthenticationResponse,
} from "@simplewebauthn/server";
import { createSession } from "../sessions.js";
import { sessionCookie } from "../cookies.js";

// Step 1: Generate authentication options
route.post("/auth/passkey/options", {
  resolve: async (c) => {
    // For discoverable credentials (passkeys), we do not need to know the user yet.
    // The browser finds the matching credential automatically.
    // For non-discoverable credentials, we would need the user's email first.

    const body = await c.request.json().catch(() => ({}));
    const email = (body as any).email;

    let allowCredentials: { id: string }[] = [];

    if (email) {
      // If email is provided, limit to that user's credentials
      const user = db.prepare("SELECT id FROM users WHERE email = ?").get(email) as any;
      if (user) {
        const creds = db.prepare("SELECT credential_id FROM passkeys WHERE user_id = ?")
          .all(user.id) as { credential_id: string }[];
        allowCredentials = creds.map((c) => ({ id: c.credential_id }));
      }
    }

    const options = await generateAuthenticationOptions({
      rpID: RP_ID,
      allowCredentials: allowCredentials.length > 0 ? allowCredentials : undefined,
      userVerification: "preferred",
    });

    // Store challenge — use a temporary session for unauthenticated requests
    const tempId = email ?? "anonymous-" + crypto.randomUUID();
    db.prepare(
      "INSERT OR REPLACE INTO webauthn_challenges (user_id, challenge, expires_at) VALUES (?, ?, ?)"
    ).run(tempId, options.challenge, Date.now() + 5 * 60 * 1000);

    return Response.json({ ...options, _challengeKey: tempId });
  },
}),

// Step 2: Verify authentication response
route.post("/auth/passkey/verify", {
  resolve: async (c) => {
    const body = await c.request.json();
    const challengeKey = body._challengeKey;

    if (!challengeKey) {
      return Response.json({ error: "Missing challenge key" }, { status: 400 });
    }

    // Retrieve the stored challenge
    const challengeRow = db.prepare(
      "SELECT challenge, expires_at FROM webauthn_challenges WHERE user_id = ?"
    ).get(challengeKey) as { challenge: string; expires_at: number } | undefined;

    if (!challengeRow || Date.now() > challengeRow.expires_at) {
      return Response.json({ error: "Challenge expired" }, { status: 400 });
    }

    // Find the credential in our database
    const credentialId = body.id;
    const passkey = db.prepare(
      "SELECT id, user_id, credential_id, public_key, counter FROM passkeys WHERE credential_id = ?"
    ).get(credentialId) as any;

    if (!passkey) {
      return Response.json({ error: "Unknown credential" }, { status: 401 });
    }

    try {
      const verification = await verifyAuthenticationResponse({
        response: body,
        expectedChallenge: challengeRow.challenge,
        expectedOrigin: ORIGIN,
        expectedRPID: RP_ID,
        credential: {
          id: passkey.credential_id,
          publicKey: Buffer.from(passkey.public_key, "base64url"),
          counter: passkey.counter,
        },
      });

      if (!verification.verified) {
        return Response.json({ error: "Verification failed" }, { status: 401 });
      }

      // Update the counter
      db.prepare("UPDATE passkeys SET counter = ? WHERE id = ?")
        .run(verification.authenticationInfo.newCounter, passkey.id);

      // Clean up the challenge
      db.prepare("DELETE FROM webauthn_challenges WHERE user_id = ?").run(challengeKey);

      // Create a session
      const user = db.prepare("SELECT id, email, name FROM users WHERE id = ?")
        .get(passkey.user_id) as any;
      const sessionId = createSession(user.id);

      return Response.json(
        { user: { id: user.id, email: user.email, name: user.name } },
        { headers: { "set-cookie": sessionCookie(sessionId) } },
      );
    } catch (error) {
      return Response.json({ error: "Verification failed" }, { status: 401 });
    }
  },
}),

// Client-side JavaScript

// Step 1: Get options
const optionsRes = await fetch("/auth/passkey/options", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ email: "[email protected]" }), // optional for discoverable credentials
});
const options = await optionsRes.json();

// Step 2: Authenticate (triggers biometric prompt)
const assertion = await navigator.credentials.get({ publicKey: options });

// Step 3: Verify with server
const verifyRes = await fetch("/auth/passkey/verify", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ ...assertion, _challengeKey: options._challengeKey }),
});