@test2doc/playwright-passkey-gen 0.0.0

package/playwright.config.ts

@@ -0,0 +1,80 @@
+/// <reference types="node" />
+import { defineConfig, devices } from "@playwright/test"
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env["CI"],
+  /* Retry on CI only */
+  retries: process.env["CI"] ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  ...(process.env["CI"] ? { workers: 1 } : {}),
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    baseURL: "http://localhost:5173",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "passkey tests",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "pnpm start",
+    url: "http://localhost:5173",
+    reuseExistingServer: !process.env["CI"],
+  },
+})

package/src/generate-passkey/cli.ts

@@ -0,0 +1,33 @@
+import { spawn } from "child_process"
+
+const server = spawn("pnpm", ["start"], { stdio: "inherit" })
+
+const killServer = () => {
+  try {
+    if (server && !server.killed) server.kill()
+  } catch {
+    /* ignore */
+  }
+}
+
+;["exit", "SIGINT", "SIGTERM", "uncaughtException"].forEach((ev) => {
+  process.on(ev, () => {
+    killServer()
+    if (ev !== "exit") process.exit(1)
+  })
+})
+
+// Run the built generator (make sure pnpm build has run first)
+const generator = spawn("node", ["./dist/src/generate-passkey/index.js"], {
+  stdio: "inherit",
+})
+
+generator.on("close", (code) => {
+  killServer()
+  process.exit(code ?? 0)
+})
+generator.on("error", (err) => {
+  killServer()
+  console.error(err)
+  process.exit(1)
+})

package/src/generate-passkey/generateTestPasskey.test.ts

@@ -0,0 +1,165 @@
+import { expect, test } from "vitest"
+import { mkdir, rmdir, unlink, access } from "node:fs/promises"
+import { join } from "node:path"
+import { main } from "./index.js"
+
+// Assertion helpers
+const UUID_V4_REGEX =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
+
+const base64ToBase64url = (b64: string) =>
+  b64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "")
+
+test("generate a test passkey file", async () => {
+  const outputPath = join(process.cwd(), "test-passkey.ts")
+  // remove existing file if present
+  try {
+    await unlink(outputPath)
+  } catch {
+    // ignore if not present
+  }
+  await main()
+
+  const { TESTPASSKEY } = await import(outputPath)
+  expect(TESTPASSKEY.username).toBe("testuser")
+  expect(TESTPASSKEY.userId).toMatch(UUID_V4_REGEX)
+  expect(TESTPASSKEY.publicKey).toBeDefined()
+  expect(Array.isArray(TESTPASSKEY.publicKey)).toBe(true)
+  expect(TESTPASSKEY.signCount).toBe(1)
+
+  expect(TESTPASSKEY.credentialId).toBeDefined()
+  expect(TESTPASSKEY.credentialDbId).toBeDefined()
+  // assert credentialDbId is the base64url encoding of credentialId
+  expect(TESTPASSKEY.credentialDbId).toBe(
+    base64ToBase64url(TESTPASSKEY.credentialId),
+  )
+
+  // cleanup
+  try {
+    await unlink(outputPath)
+  } catch {}
+})
+
+test("generate a passkey to the output path specified", async () => {
+  const tempDir = "tmp-output"
+  const dir = join(process.cwd(), tempDir)
+  const fileName = "my-passkey.ts"
+  const outputPath = join(dir, fileName)
+
+  // ensure clean slate
+  try {
+    await unlink(outputPath)
+  } catch {}
+  try {
+    await rmdir(dir)
+  } catch {}
+
+  await mkdir(dir, { recursive: true })
+
+  await main({ output: join(tempDir, fileName) })
+
+  // assert file exists and has TESTPASSKEY
+  const { TESTPASSKEY } = await import(outputPath)
+
+  expect(TESTPASSKEY).toBeDefined()
+  expect(TESTPASSKEY.username).toBe("testuser")
+  expect(TESTPASSKEY.credentialId).toBeDefined()
+  expect(TESTPASSKEY.credentialDbId).toBeDefined()
+
+  // cleanup
+  try {
+    await unlink(outputPath)
+    await rmdir(dir)
+  } catch {}
+})
+
+test("generate JSON passkey file", async () => {
+  const outputPath = join(process.cwd(), "test-passkey.json")
+  // remove existing file if present
+  try {
+    await unlink(outputPath)
+  } catch {
+    // ignore if not present
+  }
+  await main({ type: "json" })
+
+  const fs = await import("fs/promises")
+  const content = await fs.readFile(outputPath, "utf-8")
+  const TESTPASSKEY = JSON.parse(content)
+
+  expect(TESTPASSKEY.username).toBe("testuser")
+  expect(TESTPASSKEY.userId).toMatch(UUID_V4_REGEX)
+  expect(TESTPASSKEY.publicKey).toBeDefined()
+  expect(Array.isArray(TESTPASSKEY.publicKey)).toBe(true)
+  expect(TESTPASSKEY.signCount).toBe(1)
+
+  expect(TESTPASSKEY.credentialId).toBeDefined()
+  expect(TESTPASSKEY.credentialDbId).toBeDefined()
+  // assert credentialDbId is the base64url encoding of credentialId
+  expect(TESTPASSKEY.credentialDbId).toBe(
+    base64ToBase64url(TESTPASSKEY.credentialId),
+  )
+
+  // cleanup
+  try {
+    await unlink(outputPath)
+  } catch {}
+})
+
+test("generate javascript passkey file and make the extension js", async () => {
+  const outputPath = join(process.cwd(), "test-passkey.json")
+  const expectedPath = join(process.cwd(), "test-passkey.js")
+  // remove existing file if present
+  try {
+    await unlink(outputPath)
+    await unlink(expectedPath)
+  } catch {
+    // ignore if not present
+  }
+  await main({ type: "javascript" })
+
+  await access(expectedPath)
+  const { TESTPASSKEY } = await import(expectedPath)
+
+  expect(TESTPASSKEY.username).toBe("testuser")
+  expect(TESTPASSKEY.userId).toMatch(UUID_V4_REGEX)
+  expect(TESTPASSKEY.publicKey).toBeDefined()
+  expect(Array.isArray(TESTPASSKEY.publicKey)).toBe(true)
+  expect(TESTPASSKEY.signCount).toBe(1)
+
+  expect(TESTPASSKEY.credentialId).toBeDefined()
+  expect(TESTPASSKEY.credentialDbId).toBeDefined()
+  // assert credentialDbId is the base64url encoding of credentialId
+  expect(TESTPASSKEY.credentialDbId).toBe(
+    base64ToBase64url(TESTPASSKEY.credentialId),
+  )
+
+  // cleanup
+  try {
+    await unlink(outputPath)
+    await unlink(expectedPath)
+  } catch {}
+})
+
+test("generate the correct extension if the output filename is missing the extension", async () => {
+  const outputPath = join(process.cwd(), "test-passkey")
+  const expectedPath = join(process.cwd(), "test-passkey.ts")
+  // remove existing file if present
+  try {
+    await unlink(expectedPath)
+    await unlink(outputPath)
+  } catch {
+    // ignore if not present
+  }
+  await main({ output: "test-passkey" })
+
+  await access(expectedPath)
+  const { TESTPASSKEY } = await import(expectedPath)
+  expect(TESTPASSKEY).toBeDefined()
+
+  // cleanup
+  try {
+    await unlink(expectedPath)
+    await unlink(outputPath)
+  } catch {}
+})

package/src/generate-passkey/index.ts

@@ -0,0 +1,228 @@
+import { chromium } from "@playwright/test"
+import { writeFileSync } from "fs"
+import { join } from "path"
+import { verifyRegistrationResponse } from "@simplewebauthn/server"
+import { Command, type OptionValues } from "commander"
+import { fileURLToPath } from "url"
+import type { TestPasskey } from "@test2doc/playwright-passkey"
+
+interface VirtualAuthenticatorCredential {
+  credentialId: string
+  privateKey: string
+  userHandle: string
+  signCount: number
+}
+
+function isVirtualAuthenticatorCredential(
+  cred: unknown,
+): cred is VirtualAuthenticatorCredential {
+  return (
+    cred !== null &&
+    typeof cred === "object" &&
+    "credentialId" in cred &&
+    "privateKey" in cred &&
+    "userHandle" in cred &&
+    "signCount" in cred
+  )
+}
+
+export async function generateTestPasskey(
+  username: string,
+  userId: string,
+): Promise<TestPasskey> {
+  const browser = await chromium.launch()
+  const context = await browser.newContext()
+  const page = await context.newPage()
+  await page.goto("http://localhost:5173/")
+
+  // Set up virtual authenticator
+  const client = await context.newCDPSession(page)
+  await client.send("WebAuthn.enable")
+  const result = await client.send("WebAuthn.addVirtualAuthenticator", {
+    options: {
+      protocol: "ctap2",
+      transport: "internal",
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+      automaticPresenceSimulation: true,
+    },
+  })
+
+  const authenticatorId = result.authenticatorId
+
+  // Generate a credential by simulating registration
+  const credentialResponse = await page.evaluate(
+    async ({ userId, username }) => {
+      try {
+        const credential = await navigator.credentials.create({
+          publicKey: {
+            challenge: new Uint8Array(32),
+            rp: {
+              name: "Test App",
+              id: "localhost",
+            },
+            user: {
+              id: new TextEncoder().encode(userId),
+              name: username,
+              displayName: username,
+            },
+            pubKeyCredParams: [{ alg: -7, type: "public-key" }],
+          },
+        })
+
+        // Type guards
+        function isPublicKeyCredential(
+          credential: Credential | null,
+        ): credential is PublicKeyCredential {
+          return credential !== null && credential.type === "public-key"
+        }
+        function isAuthenticatorAttestationResponse(
+          response: AuthenticatorResponse,
+        ): response is AuthenticatorAttestationResponse {
+          return "attestationObject" in response
+        }
+
+        if (!isPublicKeyCredential(credential)) {
+          throw new Error("Failed to create public key credential")
+        }
+        if (!isAuthenticatorAttestationResponse(credential.response)) {
+          throw new Error("Response is not an attestation response")
+        }
+
+        return {
+          id: credential.id,
+          rawId: Array.from(new Uint8Array(credential.rawId)),
+          response: {
+            clientDataJSON: Array.from(
+              new Uint8Array(credential.response.clientDataJSON),
+            ),
+            attestationObject: Array.from(
+              new Uint8Array(credential.response.attestationObject),
+            ),
+          },
+          clientExtensionResults: {},
+          transports: ["internal"],
+          type: "public-key",
+        }
+      } catch (err) {
+        throw new Error(`Credential creation failed: ${err}`)
+      }
+    },
+    { userId, username },
+  )
+
+  // Extract the credential from the virtual authenticator
+  const credentials = await client.send("WebAuthn.getCredentials", {
+    authenticatorId,
+  })
+
+  if (!credentials.credentials || credentials.credentials.length === 0) {
+    throw new Error("No credentials found in virtual authenticator")
+  }
+
+  const credential = credentials.credentials[0]
+  if (!isVirtualAuthenticatorCredential(credential)) {
+    throw new Error("Invalid credential structure from virtual authenticator")
+  }
+
+  const verification = await verifyRegistrationResponse({
+    response: {
+      id: credentialResponse.id,
+      rawId: Buffer.from(credentialResponse.rawId).toString("base64url"),
+      response: {
+        clientDataJSON: Buffer.from(
+          credentialResponse.response.clientDataJSON,
+        ).toString("base64url"),
+        attestationObject: Buffer.from(
+          credentialResponse.response.attestationObject,
+        ).toString("base64url"),
+      },
+      type: "public-key" as const,
+      clientExtensionResults: {},
+    },
+    expectedChallenge: Buffer.from(new Uint8Array(32)).toString("base64url"), // the challenge you used
+    expectedOrigin: "http://localhost:5173",
+    expectedRPID: "localhost",
+  })
+
+  if (verification.verified && verification.registrationInfo) {
+    const testPasskey: TestPasskey = {
+      username,
+      userId,
+      credentialId: Buffer.from(credential.credentialId, "base64").toString(
+        "base64",
+      ),
+      publicKey: Array.from(verification.registrationInfo.credential.publicKey),
+      privateKey: credential.privateKey,
+      credentialDbId: credentialResponse.id,
+      signCount: credential.signCount,
+    }
+
+    await browser.close()
+
+    return testPasskey
+  }
+  throw new Error("Failed to verify registration response")
+}
+
+interface Options extends OptionValues {
+  output: string
+  type: "json" | "ts" | "js" | "javascript" | "typescript"
+}
+
+export async function main({
+  output = "test-passkey.ts",
+  type = "ts",
+}: Partial<Options> = {}) {
+  const username = "testuser"
+  const userId = crypto.randomUUID()
+
+  console.log("Generating test passkey...")
+  console.log(`Username: ${username}`)
+  console.log(`User ID: ${userId}`)
+
+  const passkey = await generateTestPasskey(username, userId)
+
+  // Map type to file extension
+  const extensionMap: Record<string, string> = {
+    json: ".json",
+    js: ".js",
+    javascript: ".js",
+    ts: ".ts",
+    typescript: ".ts",
+  }
+  const ext = extensionMap[type] || ".ts"
+  output = output.replace(/\.\w+$/, "") + ext
+
+  const outputPath = join(process.cwd(), output)
+  const stringifyPasskey = JSON.stringify(passkey, null, 2)
+  const content =
+    type === "json"
+      ? stringifyPasskey
+      : `export const TESTPASSKEY = ${stringifyPasskey}`
+
+  writeFileSync(outputPath, content)
+  console.log(`✓ Test passkey generated and saved to ${outputPath}`)
+  console.log("\nGenerated passkey:")
+  console.log(stringifyPasskey)
+}
+
+if (fileURLToPath(import.meta.url) === process.argv[1]) {
+  const program = new Command()
+  program
+    .option(
+      "-o, --output <path>",
+      "output path for generated passkey",
+      "test-passkey.ts",
+    )
+    .option(
+      "-t, --type <type>",
+      "output file type (json, ts, js, typescript, javascript)",
+      "ts",
+    )
+    .parse()
+
+  const opts = program.opts()
+  main(opts).catch(console.error)
+}

package/src/generate-passkey/test-cli.ts

@@ -0,0 +1,32 @@
+import { spawn } from "child_process"
+
+const server = spawn("pnpm", ["start"], { stdio: "inherit" })
+
+const killServer = () => {
+  try {
+    if (server && !server.killed) server.kill()
+  } catch {
+    /* ignore */
+  }
+}
+
+;["exit", "SIGINT", "SIGTERM", "uncaughtException"].forEach((ev) => {
+  process.on(ev, () => {
+    killServer()
+    // for signals/uncaught exceptions exit with non-zero
+    if (ev !== "exit") process.exit(1)
+  })
+})
+
+// run the local vitest via pnpm exec so it works in CI/Windows too
+const tests = spawn("pnpm", ["exec", "vitest", "run"], { stdio: "inherit" })
+
+tests.on("close", (code) => {
+  killServer()
+  process.exit(code ?? 0)
+})
+tests.on("error", (err) => {
+  killServer()
+  console.error(err)
+  process.exit(1)
+})

package/src/scripts/client.ts

@@ -0,0 +1,136 @@
+// client.ts
+function base64urlToBuffer(base64url: string): ArrayBuffer {
+  // Convert base64url to base64
+  const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/")
+  const padded = base64.padEnd(
+    base64.length + ((4 - (base64.length % 4)) % 4),
+    "=",
+  )
+
+  // Decode base64 to binary string
+  const binary = atob(padded)
+
+  // Convert to ArrayBuffer
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i)
+  }
+  return bytes.buffer
+}
+
+function arrayBufferToBase64url(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer)
+  let binary = ""
+  for (const c of bytes) {
+    binary += String.fromCharCode(c)
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "")
+}
+
+function updateStatus(
+  statusDiv: HTMLElement,
+  message: string,
+  type: "loading" | "success" | "error",
+): void {
+  console.log(message)
+  statusDiv.textContent = message
+  statusDiv.className = `status ${type}`
+}
+
+async function testAuthentication(): Promise<void> {
+  const statusDiv = document.getElementById("status")
+  if (!statusDiv) {
+    throw new Error("Status div not found")
+  }
+
+  try {
+    updateStatus(statusDiv, "Starting authentication...", "loading")
+
+    const optionsResponse = await fetch("/authenticate/start", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+    })
+
+    if (!optionsResponse.ok) {
+      throw new Error("Failed to get authentication options")
+    }
+
+    const options = await optionsResponse.json()
+    updateStatus(statusDiv, "Got authentication options", "loading")
+
+    const assertion = await navigator.credentials.get({
+      publicKey: {
+        challenge: base64urlToBuffer(options.challenge),
+        rpId: options.rpId,
+        userVerification: "preferred",
+        allowCredentials: options.allowCredentials,
+      },
+    })
+
+    if (!assertion) {
+      throw new Error("User cancelled authentication")
+    }
+
+    function isPublicKeyCredential(
+      credential: Credential | null,
+    ): credential is PublicKeyCredential {
+      return credential !== null && credential.type === "public-key"
+    }
+    function isAuthenticatorAssertionResponse(
+      response: AuthenticatorResponse,
+    ): response is AuthenticatorAssertionResponse {
+      return "signature" in response && "authenticatorData" in response
+    }
+
+    if (!isPublicKeyCredential(assertion)) {
+      throw new Error("No valid PublicKeyCredential returned")
+    }
+    if (!isAuthenticatorAssertionResponse(assertion.response)) {
+      throw new Error("Response is not an assertion response")
+    }
+
+    updateStatus(statusDiv, "Got credential from authenticator", "loading")
+
+    const response = await fetch("/authenticate/finish", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        credentialId: assertion.id,
+        clientDataJSON: arrayBufferToBase64url(
+          assertion.response.clientDataJSON,
+        ),
+        authenticatorData: arrayBufferToBase64url(
+          assertion.response.authenticatorData,
+        ),
+        signature: arrayBufferToBase64url(assertion.response.signature),
+        // signCount: assertion.response.signCount,
+      }),
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.error || "Authentication failed")
+    }
+
+    const result = await response.json()
+    updateStatus(
+      statusDiv,
+      `✓ Authentication successful! User ID: ${result.userId}`,
+      "success",
+    )
+  } catch (error) {
+    updateStatus(
+      statusDiv,
+      `✗ Error: ${error instanceof Error ? error.message : String(error)}`,
+      "error",
+    )
+    console.error(error)
+  }
+}
+
+export const clientScript: string = `
+  ${base64urlToBuffer.toString()}
+  ${arrayBufferToBase64url.toString()}
+  ${updateStatus.toString()}
+  ${testAuthentication.toString()}
+`