seamless-cli 0.2.0 → 0.5.0

package/verify/harness/lib/matrixReporter.ts

@@ -0,0 +1,73 @@
+import type { FullResult, Reporter, TestCase, TestResult } from '@playwright/test/reporter';
+
+// Prints a flow x layer conformance grid at the end of the run. Layer comes from
+// the spec's directory (api/adapter/react); flow from the spec file name, with a
+// few aliases folded together so the same flow lines up across layers.
+
+const LAYERS = ['api', 'adapter', 'react'] as const;
+type Layer = (typeof LAYERS)[number];
+
+const FLOW_ALIASES: Record<string, string> = {
+  emailOtpLogin: 'emailOtp',
+  registration: 'register',
+  magicLinkLogin: 'magicLink',
+  passkeyRegister: 'passkey',
+  passkeyLogin: 'passkey',
+  adminBootstrap: 'admin',
+  sessionLifecycle: 'session',
+};
+
+interface Entry {
+  flow: string;
+  layer: Layer;
+  passed: boolean;
+}
+
+export default class MatrixReporter implements Reporter {
+  private tests = new Map<string, Entry>();
+
+  onTestEnd(test: TestCase, result: TestResult): void {
+    const match = test.location.file.match(/\/(api|adapter|react)\/([^/]+)\.spec\.[tj]s$/);
+    if (!match) return;
+    const layer = match[1] as Layer;
+    const base = match[2];
+    const flow = FLOW_ALIASES[base] ?? base;
+    // Keyed by test id so the final attempt (after retries) is the one that counts.
+    this.tests.set(test.id, { flow, layer, passed: result.status === 'passed' });
+  }
+
+  onEnd(_result: FullResult): void {
+    const cells = new Map<string, boolean>();
+    for (const { flow, layer, passed } of this.tests.values()) {
+      const key = `${flow}|${layer}`;
+      cells.set(key, (cells.get(key) ?? true) && passed);
+    }
+    if (cells.size === 0) return;
+
+    const flows = [...new Set([...cells.keys()].map((k) => k.split('|')[0]))].sort();
+    const symbol = (flow: string, layer: Layer): string => {
+      const value = cells.get(`${flow}|${layer}`);
+      return value === undefined ? '-' : value ? '✓' : '✗';
+    };
+
+    const flowWidth = Math.max('flow'.length, ...flows.map((f) => f.length));
+    const pad = (text: string, width: number) =>
+      text + ' '.repeat(Math.max(0, width - text.length));
+    const row = (label: string, get: (layer: Layer) => string) =>
+      `  ${pad(label, flowWidth)}   ${LAYERS.map((l) => pad(get(l), 9)).join('')}`;
+    const rule = `  ${'-'.repeat(flowWidth + 3 + LAYERS.length * 9)}`;
+
+    const lines = [
+      '',
+      '  Conformance matrix',
+      rule,
+      row('flow', (l) => l),
+      rule,
+      ...flows.map((f) => row(f, (l) => symbol(f, l))),
+      rule,
+      '',
+    ];
+    // eslint-disable-next-line no-console
+    console.log(lines.join('\n'));
+  }
+}

package/verify/harness/lib/reactFlows.ts

@@ -0,0 +1,117 @@
+import { BrowserContext, expect, Page, request } from '@playwright/test';
+
+import { ADAPTER_URL } from './env';
+
+// Browser-facing helpers for the React starter (served at REACT_URL, pointed at
+// the adapter). The adapter strips OTP/magic-link secrets from browser responses,
+// so codes are read from its /__captured readout (same seam as adapterFlows).
+
+/** Read a code the adapter captured for `recipient` (email or phone), polling until present. */
+export async function readCapturedCode(recipient: string, timeoutMs = 10_000): Promise<string> {
+  const ctx = await request.newContext({ baseURL: ADAPTER_URL });
+  try {
+    const deadline = Date.now() + timeoutMs;
+    let last = 'never set';
+    while (Date.now() < deadline) {
+      const res = await ctx.get(`/__captured/${encodeURIComponent(recipient)}`);
+      if (res.ok()) {
+        const body = await res.json();
+        if (body?.token) return String(body.token);
+        last = JSON.stringify(body);
+      } else {
+        last = `status ${res.status()}`;
+      }
+      await new Promise((r) => setTimeout(r, 300));
+    }
+    throw new Error(`no captured code for ${recipient} within ${timeoutMs}ms (last: ${last})`);
+  } finally {
+    await ctx.dispose();
+  }
+}
+
+/**
+ * Open the sign-in form. The SDK usually renders the register form by default, but
+ * lands directly on sign-in in some states (e.g. just after logout), so switch only
+ * when needed — and wait for the form to render first to avoid racing the SPA.
+ */
+export async function gotoSignIn(page: Page): Promise<void> {
+  await page.goto('/login');
+  await expect(page.getByRole('heading', { name: /Sign In|Create Account/ })).toBeVisible();
+  if (await page.getByRole('heading', { name: 'Create Account' }).isVisible()) {
+    await page.getByRole('button', { name: /Already have an account/i }).click();
+  }
+  await expect(page.getByRole('heading', { name: 'Sign In' })).toBeVisible();
+}
+
+/** Type a code into the SDK's six-box OTP input (one digit per box). */
+export async function enterOtp(page: Page, code: string): Promise<void> {
+  const boxes = page.getByLabel(/^Digit \d$/);
+  await expect(boxes).toHaveCount(code.length);
+  await boxes.first().click();
+  await page.keyboard.type(code);
+}
+
+/**
+ * Attach a CTAP2 platform virtual authenticator (Chrome DevTools Protocol) so
+ * WebAuthn ceremonies auto-succeed — this is what makes `isUVPAA()` true (so the
+ * SDK offers passkeys) and lets navigator.credentials.create/get resolve headless.
+ */
+export async function addVirtualAuthenticator(
+  context: BrowserContext,
+  page: Page,
+): Promise<void> {
+  const cdp = await context.newCDPSession(page);
+  await cdp.send('WebAuthn.enable');
+  await cdp.send('WebAuthn.addVirtualAuthenticator', {
+    options: {
+      protocol: 'ctap2',
+      transport: 'internal',
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+      automaticPresenceSimulation: true,
+    },
+  });
+}
+
+/** Register a new user by email, then enroll a passkey (passkey support must be on). */
+export async function registerWithPasskey(page: Page, email: string): Promise<void> {
+  await page.goto('/login');
+  await expect(page.getByRole('heading', { name: 'Create Account' })).toBeVisible();
+  await page.locator('#email').fill(email);
+  await page.getByRole('button', { name: 'Register', exact: true }).click();
+
+  await expect(page.getByRole('heading', { name: 'Verify Your Email' })).toBeVisible();
+  await enterOtp(page, await readCapturedCode(email));
+  await page.getByRole('button', { name: /Verify & Continue/ }).click();
+
+  // Passkey support is detected, so registration continues to passkey enrollment.
+  await expect(
+    page.getByRole('heading', { name: /Secure Your Account with a Passkey/ }),
+  ).toBeVisible();
+  await page.getByRole('button', { name: 'Register Passkey' }).click();
+  await page.getByPlaceholder(/MacBook/).fill('Verify Device');
+  await page.getByRole('button', { name: 'Continue' }).click();
+}
+
+/** Sign in an existing user whose passkey is registered (the ceremony auto-runs). */
+export async function loginWithPasskey(page: Page, email: string): Promise<void> {
+  await gotoSignIn(page);
+  await page.locator('#identifier').fill(email);
+  await page.getByRole('button', { name: 'Login', exact: true }).click();
+}
+
+/** Sign in an existing verified user through the email one-time-code path. */
+export async function signInWithEmailOtp(page: Page, email: string): Promise<void> {
+  await gotoSignIn(page);
+  await page.locator('#identifier').fill(email);
+  await page.getByRole('button', { name: 'Login', exact: true }).click();
+
+  await page.getByRole('button', { name: /Email Code/ }).click();
+  await expect(page.getByRole('heading', { name: 'Verify Your Email' })).toBeVisible();
+
+  await enterOtp(page, await readCapturedCode(email));
+  await page.getByRole('button', { name: /Verify & Continue/ }).click();
+  await expect(page.getByText('You are signed in')).toBeVisible();
+}
+

package/verify/harness/lib/serviceToken.ts

@@ -0,0 +1,26 @@
+import { createHmac } from 'crypto';
+
+function b64url(value: string): string {
+  return Buffer.from(value).toString('base64url');
+}
+
+// Mint an internal service token (HS256) the API trusts for client-IP
+// attribution — the same M2M mechanism the real server adapter uses.
+// Claims must be iss=seamless-portal-api, aud=seamless-auth (see the API's
+// authenticateServiceToken / trustedClientIp middleware).
+export function mintServiceToken(secret: string, sub = 'seamless-verify'): string {
+  const header = b64url(JSON.stringify({ alg: 'HS256', typ: 'JWT' }));
+  const now = Math.floor(Date.now() / 1000);
+  const payload = b64url(
+    JSON.stringify({
+      sub,
+      iss: 'seamless-portal-api',
+      aud: 'seamless-auth',
+      iat: now,
+      exp: now + 3600,
+    }),
+  );
+  const data = `${header}.${payload}`;
+  const sig = createHmac('sha256', secret).update(data).digest('base64url');
+  return `${data}.${sig}`;
+}

package/verify/harness/lib/totp.ts

@@ -0,0 +1,36 @@
+import { createHmac } from 'crypto';
+
+function base32Decode(input: string): Buffer {
+  const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+  const clean = input.replace(/=+$/, '').toUpperCase().replace(/\s/g, '');
+  let bits = 0;
+  let value = 0;
+  const out: number[] = [];
+  for (const ch of clean) {
+    const idx = alphabet.indexOf(ch);
+    if (idx === -1) continue;
+    value = (value << 5) | idx;
+    bits += 5;
+    if (bits >= 8) {
+      out.push((value >>> (bits - 8)) & 0xff);
+      bits -= 8;
+    }
+  }
+  return Buffer.from(out);
+}
+
+// RFC-6238 TOTP (SHA1, 6 digits, 30s) — matches the API's TOTP parameters.
+export function totp(secretBase32: string, atMs = Date.now(), period = 30, digits = 6): string {
+  const key = base32Decode(secretBase32);
+  const counter = Math.floor(atMs / 1000 / period);
+  const buf = Buffer.alloc(8);
+  buf.writeBigInt64BE(BigInt(counter));
+  const hmac = createHmac('sha1', key).update(buf).digest();
+  const offset = hmac[hmac.length - 1] & 0x0f;
+  const bin =
+    ((hmac[offset] & 0x7f) << 24) |
+    ((hmac[offset + 1] & 0xff) << 16) |
+    ((hmac[offset + 2] & 0xff) << 8) |
+    (hmac[offset + 3] & 0xff);
+  return String(bin % 10 ** digits).padStart(digits, '0');
+}

package/verify/harness/mock-oidc.ts

@@ -0,0 +1,112 @@
+import { createHash, randomUUID } from 'crypto';
+import { createServer, IncomingMessage, Server, ServerResponse } from 'http';
+
+// Minimal OIDC identity provider for the OAuth conformance flow. The API only uses
+// the authorization code, the token exchange (PKCE), and userinfo (it does not
+// validate id_token signatures), so /authorize, /token, /userinfo is all we need.
+
+interface PendingCode {
+  codeChallenge?: string;
+  redirectUri: string;
+  profile: { sub: string; email: string };
+}
+
+const sha256Base64Url = (value: string): string =>
+  createHash('sha256').update(value).digest('base64url');
+
+function readBody(req: IncomingMessage): Promise<string> {
+  return new Promise((resolve) => {
+    let data = '';
+    req.on('data', (chunk) => (data += chunk));
+    req.on('end', () => resolve(data));
+  });
+}
+
+function sendJson(res: ServerResponse, status: number, body: unknown): void {
+  res.writeHead(status, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(body));
+}
+
+export function startMockOidc(port: number): Server {
+  const codes = new Map<string, PendingCode>();
+  const tokens = new Map<string, { sub: string; email: string }>();
+
+  const server = createServer((req, res) => {
+    const url = new URL(req.url ?? '/', `http://localhost:${port}`);
+
+    // Authorization endpoint: mint a code bound to the PKCE challenge + a fresh
+    // user, then redirect back to the app's redirect_uri with code + state.
+    if (req.method === 'GET' && url.pathname === '/authorize') {
+      const redirectUri = url.searchParams.get('redirect_uri');
+      if (!redirectUri) {
+        sendJson(res, 400, { error: 'invalid_request', error_description: 'missing redirect_uri' });
+        return;
+      }
+      const code = randomUUID();
+      codes.set(code, {
+        codeChallenge: url.searchParams.get('code_challenge') ?? undefined,
+        redirectUri,
+        profile: {
+          sub: `mock-${randomUUID()}`,
+          email: `oauth.${randomUUID().slice(0, 12)}@example.test`,
+        },
+      });
+      const location = new URL(redirectUri);
+      location.searchParams.set('code', code);
+      location.searchParams.set('state', url.searchParams.get('state') ?? '');
+      res.writeHead(302, { Location: location.toString() });
+      res.end();
+      return;
+    }
+
+    // Token endpoint: validate PKCE (S256), consume the code, issue an opaque token.
+    if (req.method === 'POST' && url.pathname === '/token') {
+      void readBody(req).then((raw) => {
+        const params = new URLSearchParams(raw);
+        const code = params.get('code') ?? '';
+        const pending = codes.get(code);
+        if (!pending) {
+          sendJson(res, 400, { error: 'invalid_grant' });
+          return;
+        }
+        codes.delete(code);
+        if (
+          pending.codeChallenge &&
+          sha256Base64Url(params.get('code_verifier') ?? '') !== pending.codeChallenge
+        ) {
+          sendJson(res, 400, { error: 'invalid_grant', error_description: 'PKCE mismatch' });
+          return;
+        }
+        const accessToken = randomUUID();
+        tokens.set(accessToken, pending.profile);
+        sendJson(res, 200, { access_token: accessToken, token_type: 'Bearer', expires_in: 3600 });
+      });
+      return;
+    }
+
+    // Userinfo endpoint: return the profile for the bearer access token.
+    if (req.method === 'GET' && url.pathname === '/userinfo') {
+      const token = (req.headers.authorization ?? '').replace(/^Bearer /, '');
+      const profile = tokens.get(token);
+      if (!profile) {
+        sendJson(res, 401, { error: 'invalid_token' });
+        return;
+      }
+      sendJson(res, 200, {
+        sub: profile.sub,
+        email: profile.email,
+        email_verified: true,
+        name: 'OAuth User',
+      });
+      return;
+    }
+
+    sendJson(res, 404, { error: 'not_found' });
+  });
+
+  // Bind on all interfaces so the API container can reach it via host.docker.internal;
+  // unref so it never keeps the Playwright process alive after the run.
+  server.listen(port, '0.0.0.0');
+  server.unref();
+  return server;
+}

package/verify/harness/package-lock.json

@@ -0,0 +1,93 @@
+{
+  "name": "seamless-verify-harness",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "seamless-verify-harness",
+      "version": "0.0.0",
+      "devDependencies": {
+        "@playwright/test": "^1.49.0",
+        "typescript": "^5.9.3"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}

package/verify/harness/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "seamless-verify-harness",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Playwright conformance harness driven by `seamless verify`.",
+  "scripts": {
+    "test": "playwright test",
+    "test:api": "playwright test --project=api"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0",
+    "typescript": "^5.9.3"
+  }
+}

package/verify/harness/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from '@playwright/test';
+
+import { REACT_URL } from './lib/env';
+
+// One runner, multiple projects. `api` and `adapter` hit HTTP directly (no
+// browser); `react` drives chromium against the starter SPA. global-setup
+// health-gates the stack before any project runs.
+export default defineConfig({
+  testDir: '.',
+  globalSetup: './global-setup.ts',
+  timeout: 30_000,
+  expect: { timeout: 10_000 },
+  fullyParallel: false,
+  workers: 1,
+  reporter: [
+    ['list'],
+    ['./lib/matrixReporter.ts'],
+    ['junit', { outputFile: 'results/junit.xml' }],
+    ['html', { outputFolder: 'results/html', open: 'never' }],
+  ],
+  projects: [
+    { name: 'api', testMatch: /api\/.*\.spec\.ts$/ },
+    { name: 'adapter', testMatch: /adapter\/.*\.spec\.ts$/ },
+    {
+      name: 'react',
+      testMatch: /react\/.*\.spec\.ts$/,
+      use: { ...devices['Desktop Chrome'], baseURL: REACT_URL },
+    },
+  ],
+});

package/verify/harness/react/emailOtpLogin.spec.ts

@@ -0,0 +1,13 @@
+import { expect, test } from '../lib/fixtures';
+import { registerAndVerifyEmail } from '../lib/flows';
+import { signInWithEmailOtp } from '../lib/reactFlows';
+
+test.describe('email OTP login (react, browser)', { tag: '@login' }, () => {
+  test('sign in with an email one-time code -> authenticated home', async ({ page, actor }) => {
+    // Seed a verified user via the API, then sign in through the browser UI.
+    await registerAndVerifyEmail(actor.ctx, actor.email);
+
+    await signInWithEmailOtp(page, actor.email);
+    await expect(page.getByText('You are signed in')).toBeVisible();
+  });
+});

package/verify/harness/react/logout.spec.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '../lib/fixtures';
+import { registerAndVerifyEmail } from '../lib/flows';
+import { signInWithEmailOtp } from '../lib/reactFlows';
+
+test.describe('logout (react, browser)', { tag: '@login' }, () => {
+  test('signing out from the account menu clears the session', async ({ page, actor }) => {
+    await registerAndVerifyEmail(actor.ctx, actor.email);
+    await signInWithEmailOtp(page, actor.email);
+
+    await page.getByRole('button', { name: 'Open account menu' }).click();
+    await page.getByRole('button', { name: 'Logout' }).click();
+
+    // Session cleared: authenticated home is gone and the auth form reappears.
+    await expect(page.getByText('You are signed in')).toBeHidden();
+    await expect(page.getByRole('heading', { name: 'Sign In' })).toBeVisible();
+  });
+});

package/verify/harness/react/magicLinkLogin.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '../lib/fixtures';
+import { registerAndVerifyEmail } from '../lib/flows';
+import { gotoSignIn, readCapturedCode } from '../lib/reactFlows';
+
+test.describe('magic link login (react, browser)', { tag: '@login' }, () => {
+  test('request a magic link, open it in a second tab -> original tab authenticates', async ({
+    page,
+    context,
+    actor,
+  }) => {
+    await registerAndVerifyEmail(actor.ctx, actor.email);
+
+    await gotoSignIn(page);
+    await page.locator('#identifier').fill(actor.email);
+    await page.getByRole('button', { name: 'Login', exact: true }).click();
+
+    await page.getByRole('button', { name: /Email Magic Link/ }).click();
+    await expect(page.getByRole('heading', { name: 'Check your email' })).toBeVisible();
+
+    // "Click" the emailed link in a second tab; the original tab completes via
+    // BroadcastChannel + polling (same device binding — same browser/adapter).
+    const token = await readCapturedCode(actor.email);
+    const linkTab = await context.newPage();
+    await linkTab.goto(`/verify-magiclink?token=${encodeURIComponent(token)}`);
+
+    await expect(page.getByText('You are signed in')).toBeVisible({ timeout: 15_000 });
+    await linkTab.close();
+  });
+});

package/verify/harness/react/oauth.spec.ts

@@ -0,0 +1,13 @@
+import { expect, test } from '../lib/fixtures';
+
+test.describe('OAuth login (react, browser)', { tag: '@oauth' }, () => {
+  test('continue with a provider -> IdP redirect -> signed in', async ({ page }) => {
+    await page.goto('/login');
+
+    // The provider button redirects to the (mock) IdP, which redirects back to
+    // /oauth/callback; the callback finishes the login and lands on the app.
+    await page.getByRole('button', { name: /Continue with Mock OIDC/ }).click();
+
+    await expect(page.getByText('You are signed in')).toBeVisible();
+  });
+});

package/verify/harness/react/passkeyLogin.spec.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '../lib/fixtures';
+import {
+  addVirtualAuthenticator,
+  loginWithPasskey,
+  registerWithPasskey,
+} from '../lib/reactFlows';
+
+test.describe('passkey login (react, browser)', { tag: '@login' }, () => {
+  test('a registered passkey signs the user back in', async ({ page, context, actor }) => {
+    await addVirtualAuthenticator(context, page);
+
+    // Enroll a passkey, then sign out.
+    await registerWithPasskey(page, actor.email);
+    await expect(page.getByText('You are signed in')).toBeVisible();
+
+    await page.getByRole('button', { name: 'Open account menu' }).click();
+    await page.getByRole('button', { name: 'Logout' }).click();
+    await expect(page.getByText('You are signed in')).toBeHidden();
+
+    // Sign in with only the passkey (identifier -> the ceremony runs automatically).
+    await loginWithPasskey(page, actor.email);
+    await expect(page.getByText('You are signed in')).toBeVisible();
+  });
+});

package/verify/harness/react/passkeyRegister.spec.ts

@@ -0,0 +1,15 @@
+import { expect, test } from '../lib/fixtures';
+import { addVirtualAuthenticator, registerWithPasskey } from '../lib/reactFlows';
+
+test.describe('passkey registration (react, browser)', { tag: '@login' }, () => {
+  test('register, then enroll a passkey via a virtual authenticator -> signed in', async ({
+    page,
+    context,
+    actor,
+  }) => {
+    await addVirtualAuthenticator(context, page);
+
+    await registerWithPasskey(page, actor.email);
+    await expect(page.getByText('You are signed in')).toBeVisible();
+  });
+});

package/verify/harness/react/register.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '../lib/fixtures';
+import { enterOtp, readCapturedCode } from '../lib/reactFlows';
+
+test.describe('registration (react, browser)', { tag: '@login' }, () => {
+  test('register with just an email -> verify email OTP -> signed in', async ({ page, actor }) => {
+    await page.goto('/login');
+    await expect(page.getByRole('heading', { name: 'Create Account' })).toBeVisible();
+
+    await page.locator('#email').fill(actor.email);
+    await page.getByRole('button', { name: 'Register', exact: true }).click();
+
+    await expect(page.getByRole('heading', { name: 'Verify Your Email' })).toBeVisible();
+    await enterOtp(page, await readCapturedCode(actor.email));
+    await page.getByRole('button', { name: /Verify & Continue/ }).click();
+
+    await expect(page.getByText('You are signed in')).toBeVisible();
+  });
+});