use test-passkey for passkey tests

Author: kettanaito

exercises/02.authentication/03.solution.passkeys/app/routes/_auth+/webauthn+/authentication.ts

@@ -64,8 +64,6 @@ export async function action({ request }: Route.ActionArgs) {
 			},
 		})
 
-		console.log(333)
-
 		if (!verification.verified) {
 			throw new Error('Authentication verification failed')
 		}

exercises/02.authentication/03.solution.passkeys/package.json

@@ -138,7 +138,6 @@
     "@types/source-map-support": "^0.5.10",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/coverage-v8": "^3.1.3",
-    "cbor": "^10.0.11",
     "enforce-unique": "^1.3.0",
     "esbuild": "^0.25.3",
     "eslint": "^9.26.0",
@@ -152,6 +151,7 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "react-router-devtools": "^5.0.5",
     "remix-flat-routes": "^0.8.5",
+    "test-passkey": "^1.0.1",
     "tsx": "^4.19.4",
     "tw-animate-css": "^1.2.9",
     "typescript": "^5.8.3",

exercises/02.authentication/03.solution.passkeys/tests/db-utils.ts

@@ -1,8 +1,8 @@
 import { faker } from '@faker-js/faker'
 import bcrypt from 'bcryptjs'
 import { UniqueEnforcer } from 'enforce-unique'
-import { prisma } from '#app/utils/db.server.ts'
 import { getPasswordHash } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
 
 const uniqueUsernameEnforcer = new UniqueEnforcer()
 
@@ -51,21 +51,23 @@ export async function createUser() {
 	}
 }
 
-export async function createPasskey(input: { userId: string; publicKey: any }) {
+export async function createPasskey(input: {
+	id: string
+	userId: string
+	aaguid: string
+	publicKey: Uint8Array
+	counter?: number
+}) {
 	const passkey = await prisma.passkey.create({
 		data: {
-			/**
-			 * @note This has to be base64-encoded because WebAuthn expects that encoding.
-			 * Store the same encoded value in the database so the keypass could be looked up by ID.
-			 */
-			id: Buffer.from(crypto.randomUUID()).toString('base64'),
-			aaguid: Buffer.from(new Uint8Array(16)).toString('base64'),
+			id: input.id,
+			aaguid: input.aaguid,
 			userId: input.userId,
 			publicKey: input.publicKey,
 			backedUp: false,
 			webauthnUserId: input.userId,
 			deviceType: 'singleDevice',
-			counter: 0,
+			counter: input.counter || 0,
 		},
 	})
 

exercises/02.authentication/03.solution.passkeys/tests/e2e/auth-passkeys.test.ts

@@ -1,6 +1,5 @@
-import { generateKeyPairSync } from 'node:crypto'
 import { type Page } from '@playwright/test'
-import cbor from 'cbor'
+import { createTestPasskey } from 'test-passkey'
 import { createPasskey, createUser } from '#tests/db-utils.ts'
 import { test, expect } from '#tests/test-extend.ts'
 
@@ -25,57 +24,33 @@ async function createWebAuthnClient(page: Page) {
 	}
 }
 
-function generateKeys() {
-	const { privateKey, publicKey } = generateKeyPairSync('ec', {
-		namedCurve: 'P-256',
-	})
-
-	const spkiPublicKey = publicKey.export({ type: 'spki', format: 'der' })
-	const publicKeyBytes = spkiPublicKey.subarray(-65)
-	const x = publicKeyBytes.subarray(1, 33)
-	const y = publicKeyBytes.subarray(33, 65)
-
-	const cosePublickey = cbor.encode(
-		new Map<number, number | Buffer>([
-			[1, 2],
-			[3, -7],
-			[-1, 1],
-			[-2, x],
-			[-3, y],
-		]),
-	)
-
-	return {
-		privateKey: privateKey
-			.export({ type: 'pkcs8', format: 'der' })
-			.toString('base64'),
-		publicKey: cosePublickey,
-	}
-}
-
 test('authenticates using a passkey', async ({ navigate, page }) => {
 	await navigate('/login')
 
-	const { client, authenticatorId } = await createWebAuthnClient(page)
+	const passkey = createTestPasskey({
+		rpId: new URL(page.url()).hostname,
+	})
 
-	const keys = generateKeys()
+	// Add the passkey to the server.
 	await using user = await createUser()
-	await using passkey = await createPasskey({
+	await using _ = await createPasskey({
+		id: passkey.credential.credentialId,
+		aaguid: passkey.credential.aaguid || '',
+		publicKey: passkey.publicKey,
 		userId: user.id,
-		publicKey: keys.publicKey,
+		counter: passkey.credential.signCount,
 	})
 
+	// Add the passkey to the browser.
+	const { client, authenticatorId } = await createWebAuthnClient(page)
 	await client.send('WebAuthn.addCredential', {
 		authenticatorId,
 		credential: {
-			rpId: new URL(page.url()).hostname,
-			credentialId: passkey.id,
-			signCount: 0,
+			...passkey.credential,
 			isResidentCredential: true,
 			userName: user.username,
 			userHandle: btoa(user.id),
 			userDisplayName: user.name ?? user.email,
-			privateKey: keys.privateKey,
 		},
 	})