test(e2e): add WebAuthn passkey Playwright coverage

Adds a same-origin proxy (example/vite.config.ts) so the example app
can actually exercise passkeys locally: authorizer's WebAuthn RP
config derives its permitted origin from the *backend's own* request
host (internal/authenticators/webauthn/webauthn.go's newRP), matching
web/app's real deployment where the frontend is bundled into the same
origin as the API. The example app's separate :5173/:8080 origins
don't satisfy that by default - confirmed by a real "failed to verify
passkey registration" error from the backend's origin check before
this fix. Proxying /graphql and /v1 through Vite's dev server (default
Host-header passthrough) makes the browser's actual origin match what
the backend expects, with zero backend changes. Every other MFA method
already worked fine across origins; only WebAuthn needs this.

Also adds a minimal settings page (previously nothing in the example
app exercised the settings-mode usage of AuthorizerMFASetup /
AuthorizerPasskeyRegister at all - passkey enrollment isn't reachable
from the login-time offer screen by design, since registration needs
a bearer token that doesn't exist in the withheld-token state).

New tests (CDP virtual authenticator, no real hardware needed):
- register a passkey in settings, then log in with it as the primary
  factor - exercises the full registration + primary-login ceremony
  end to end.
- passkey login button is hidden when MFA is enforced - regression
  guard for the is_mfa_enforced fix from earlier this session.

Full suite: 5/5 passing against live servers.

Author: lakhansamani

example/e2e/mfa-passkey.spec.ts

@@ -0,0 +1,84 @@
+import { test, expect } from '@playwright/test';
+import { addVirtualAuthenticator } from './webauthn';
+
+test('register a passkey in settings, then log in with it as the primary factor', async ({
+  page,
+}) => {
+  await addVirtualAuthenticator(page);
+
+  const email = `pw-passkey-${Date.now()}@example.com`;
+  const password = 'TestPass123!';
+
+  await page.goto('/');
+  await page.getByText('Sign Up', { exact: true }).click();
+  await page.locator('#authorizer-sign-up-given_name').fill('Playwright');
+  await page.locator('#authorizer-sign-up-family_name').fill('Test');
+  await page.locator('#authorizer-sign-up-email_or_phone_number').fill(email);
+  await page.locator('#authorizer-sign-up-password').fill(password);
+  await page.locator('#authorizer-sign-up-confirmPassword').fill(password);
+  await page.getByRole('button', { name: 'Sign Up' }).click();
+
+  // Passkey is never offered on the login-time offer screen (it needs a
+  // bearer token webauthn_registration_options/_verify require, which
+  // doesn't exist in the withheld-token state) - skip to reach the
+  // dashboard, then register the passkey from settings instead.
+  await page.getByRole('button', { name: 'Skip for now' }).click();
+  await expect(page.getByText('Hey 👋,')).toBeVisible({ timeout: 10_000 });
+
+  await page.getByRole('link', { name: 'Manage sign-in methods' }).click();
+  await page.getByRole('button', { name: 'Set up' }).click();
+  await page.getByRole('button', { name: 'Add a passkey' }).click();
+  // AuthorizerMFASetup wires onSuccess={backToList}, so a successful
+  // registration immediately returns to the method list - there's no
+  // stable success message to assert on, only the absence of an error and
+  // the navigation back.
+  await expect(
+    page.getByRole('heading', { name: 'Manage sign-in methods' }),
+  ).toBeVisible({ timeout: 10_000 });
+  await expect(page.getByText(/failed to verify passkey/i)).toHaveCount(0);
+
+  await page.getByRole('link', { name: 'Back to dashboard' }).click();
+  await page.getByText('Logout', { exact: true }).click();
+
+  await page.getByRole('button', { name: 'Sign in with a passkey' }).click();
+  // The just-registered credential satisfies the account's MFA requirement
+  // (webauthn credentials count as a verified factor) and setup was
+  // skipped earlier, so this must log straight in - no MFA screen.
+  await expect(page.getByText('Hey 👋,')).toBeVisible({ timeout: 10_000 });
+});
+
+test('passkey login button is hidden when MFA is enforced', async ({
+  page,
+}) => {
+  const patchMeta = (json: any) => {
+    const meta = json?.data?.meta ?? json;
+    if (meta && typeof meta === 'object' && 'is_mfa_enforced' in meta) {
+      meta.is_mfa_enforced = true;
+    }
+    return json;
+  };
+
+  await page.route('**/v1/meta', async (route) => {
+    const response = await route.fetch();
+    const json = patchMeta(await response.json());
+    await route.fulfill({ response, json });
+  });
+  await page.route('**/graphql', async (route) => {
+    const postData = route.request().postDataJSON?.();
+    if (postData?.operationName !== 'meta') {
+      await route.continue();
+      return;
+    }
+    const response = await route.fetch();
+    const json = patchMeta(await response.json());
+    await route.fulfill({ response, json });
+  });
+
+  await page.goto('/');
+  await page
+    .locator('#authorizer-login-email-or-phone-number')
+    .waitFor({ state: 'visible', timeout: 10_000 });
+  await expect(
+    page.getByRole('button', { name: 'Sign in with a passkey' }),
+  ).toHaveCount(0);
+});

example/e2e/webauthn.ts

@@ -0,0 +1,25 @@
+import type { Page } from '@playwright/test';
+
+// Chrome DevTools Protocol's WebAuthn domain: a software authenticator the
+// browser treats as a real platform authenticator (Touch ID/Windows Hello
+// equivalent), so registration/assertion ceremonies complete without any
+// real biometric hardware or user prompt - the standard way to test WebAuthn
+// flows in CI. isUserVerified: true auto-approves the "verify it's you" step
+// a real authenticator would otherwise block on.
+export async function addVirtualAuthenticator(page: Page) {
+  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,
+      },
+    },
+  );
+  return { client, authenticatorId };
+}

example/src/App.tsx

@@ -3,6 +3,7 @@ import { useAuthorizer } from 'authorizer-react';
 import Dashboard from './pages/dashboard';
 import Login from './pages/login';
 import ResetPassword from './pages/resetPassword';
+import Settings from './pages/settings';
 
 function App() {
   const { token, loading } = useAuthorizer();
@@ -15,6 +16,7 @@ function App() {
     return (
       <Routes>
         <Route path="/" element={<Dashboard />} />
+        <Route path="/settings" element={<Settings />} />
       </Routes>
     );
   }

example/src/index.tsx

@@ -22,7 +22,11 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         <BrowserRouter>
           <AuthorizerProvider
             config={{
-              authorizerURL: 'http://localhost:8080',
+              // Proxied to the real backend on :8080 by vite.config.ts -
+              // same-origin is required for WebAuthn/passkey testing (see
+              // that file's comment); every other flow works the same way
+              // regardless.
+              authorizerURL: window.location.origin,
               redirectURL: window.location.origin,
             }}
           >

example/src/pages/dashboard.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Link } from 'react-router-dom';
 import { useAuthorizer } from 'authorizer-react';
 
 const Dashboard: React.FC = () => {
@@ -15,6 +16,10 @@ const Dashboard: React.FC = () => {
         </a>
       </p>
 
+      <p>
+        <Link to="/settings">Manage sign-in methods</Link>
+      </p>
+
       <br />
       {loading ? (
         <h3>Processing....</h3>

example/src/pages/settings.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { AuthorizerMFASetup } from 'authorizer-react';
+
+const Settings: React.FC = () => {
+  return (
+    <div>
+      <h1>Manage sign-in methods</h1>
+      <AuthorizerMFASetup
+        availableMfaMethods={{
+          totp: false,
+          passkey: true,
+          emailOtp: false,
+          smsOtp: false,
+        }}
+        heading="Add a passkey"
+      />
+      <br />
+      <Link to="/">Back to dashboard</Link>
+    </div>
+  );
+};
+
+export default Settings;

example/vite.config.ts

@@ -5,6 +5,23 @@ import path from 'node:path';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    // WebAuthn's RP origin check requires the frontend and backend to share
+    // an origin (see authorizer's internal/authenticators/webauthn/webauthn.go
+    // newRP: RPOrigins is derived from the *backend's* own request host,
+    // matching web/app's real deployment - bundled into the same origin as
+    // the API). Proxying keeps the browser on a single origin (:5173) for
+    // local dev while still hitting the real backend on :8080 - Vite's proxy
+    // preserves the original Host header by default, so the backend derives
+    // HostURL as localhost:5173 too, matching what the browser actually used
+    // for the WebAuthn ceremony. Combine with authorizerURL pointed at the
+    // same origin (see src/index.tsx) - both sides of this only matter for
+    // testing passkeys locally; every other MFA method works fine without it.
+    proxy: {
+      '/graphql': 'http://localhost:8080',
+      '/v1': 'http://localhost:8080',
+    },
+  },
   resolve: {
     alias: [
       {