Adapt registration flow to create JWT signing keys

Author: manumonti

src/components/register-button.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { Dispatch, SetStateAction } from "react";
-import { Wallet } from "ethers";
-import { isoBase64URL } from "@simplewebauthn/server/helpers";
+import { generateKeyPairSync } from "crypto";
 import {
   startRegistration,
   type WebAuthnCredential,
@@ -12,30 +11,65 @@ import { getRegistrationOptions, verifyRegistration } from "../lib/registry";
 interface RegisterPasskeyProps {
   setUserCredential: Dispatch<SetStateAction<WebAuthnCredential | null>>;
 }
+
+function arrayBufferToPem(
+  buffer: ArrayBuffer,
+  type: "PUBLIC KEY" | "PRIVATE KEY"
+): string {
+  // Convert ArrayBuffer to base64
+  const base64 = Buffer.from(buffer).toString("base64");
+
+  // Split into 64-character lines (PEM standard)
+  const lines = base64.match(/.{1,64}/g) || [];
+
+  // Add PEM headers and footers
+  return [`-----BEGIN ${type}-----`, ...lines, `-----END ${type}-----`].join(
+    "\n"
+  );
+}
+
 export default function RegisterPasskey({
   setUserCredential,
 }: RegisterPasskeyProps) {
   async function handleClick() {
     console.log("New passkey registration process started");
 
-    const ephemeralWallet = Wallet.createRandom();
-    console.log(
-      "Ephemeral wallet address (passkey's userID):",
-      ephemeralWallet.address
+    const userName = `user_${Math.floor(Math.random() * 1000)}`;
+
+    // Browser generates a public/private key pair for JWT signing
+    const { publicKey, privateKey } =
+      await window.crypto.subtle.generateKey(
+        {
+          name: "ECDSA",
+          namedCurve: "P-256",
+        },
+        true,
+        ["sign", "verify"]
+      );
+
+    const jwtPubKey = arrayBufferToPem(
+      await window.crypto.subtle.exportKey("spki", publicKey),
+      "PUBLIC KEY"
+    );
+    const jwtPrivKey = arrayBufferToPem(
+      await window.crypto.subtle.exportKey("pkcs8", privateKey),
+      "PRIVATE KEY"
     );
 
+    console.log("JWT Public Key (passkey's userID):");
+    console.log(jwtPubKey);
+    console.log("JWT Private Key:");
+    console.log(jwtPrivKey);
+
     console.log("Generating registration options...");
     const registrationOptions = await getRegistrationOptions(
-      ephemeralWallet.address
+      userName,
+      jwtPubKey
     );
     console.log(
       "Registration options generated by server:",
       JSON.stringify(registrationOptions, null, 2)
     );
-    console.log(
-      "UserID (wallet address) on registration options in ASCII:",
-      isoBase64URL.toUTF8String(registrationOptions.user.id)
-    );
 
     console.log("Starting registration (authenticator interaction)...");
     const registrationResponse = await startRegistration({
@@ -48,12 +82,13 @@ export default function RegisterPasskey({
 
     console.log("Verifying registration...");
     const verificationResponse = await verifyRegistration(
-      ephemeralWallet.address,
+      userName,
+      jwtPubKey,
       registrationResponse
     );
     console.log(
       "Verification response from server:",
-      JSON.stringify(verificationResponse, null, 2)
+      JSON.stringify(verificationResponse.verified, null, 2)
     );
 
     if (!verificationResponse.registrationInfo) {

src/lib/database.ts

@@ -22,13 +22,14 @@ export const saveRegistrationOptions = async (
   registrationOptions: PublicKeyCredentialCreationOptionsJSON
 ) => {
   const db = await getOrCreateDatabase();
-  const userID = isoBase64URL.toUTF8String(registrationOptions.user.id);
-  db.registrationOptions[userID] = registrationOptions;
+  const userName = registrationOptions.user.name;
+  // TODO: Use userID instead of userName as key
+  db.registrationOptions[userName] = registrationOptions;
   writeFileSync(DB_FILE, JSON.stringify(db, null, 2));
 };
 
-export const removeRegistrationOptions = async (userID: string) => {
+export const removeRegistrationOptions = async (userName: string) => {
   const db = await getOrCreateDatabase();
-  delete db.registrationOptions[userID];
+  delete db.registrationOptions[userName];
   writeFileSync(DB_FILE, JSON.stringify(db, null, 2));
 };

src/lib/registry.ts

@@ -17,20 +17,25 @@ import {
 } from "./database";
 
 export const getRegistrationOptions = async (
-  ephemeralWalletAddress: string
+  userName: string,
+  jwtPubKey: string
 ): Promise<PublicKeyCredentialCreationOptionsJSON> => {
-  const challenge = await bcrypt.hash(ephemeralWalletAddress, 10);
+  const userID = isoUint8Array.fromASCIIString(await bcrypt.hash(jwtPubKey, 0));
+  const challenge = await bcrypt.hash(jwtPubKey, 10);
 
+  // Generate registration options:
+  // challenge: JWT public key hashed
+  // userID: JWT public key hashed
+  // userName: string like user_xxxx
   const registrationOptionsParameters: GenerateRegistrationOptionsOpts = {
     rpName: "Passkeys TACo PoC",
     rpID: "localhost",
-    userName: ephemeralWalletAddress, // to be shown in passkey popup
-    userID: isoUint8Array.fromASCIIString(ephemeralWalletAddress),
-    challenge: isoUint8Array.fromASCIIString(challenge),
-    userDisplayName: ephemeralWalletAddress,
+    userName: userName, // to be shown in passkey popup
+    userID: userID,
+    challenge: challenge,
     timeout: 60000,
     // excludeCredentials: [],
-    supportedAlgorithmIDs: [-7, -257],
+    supportedAlgorithmIDs: [-7, -257], // ES256, RS256
   };
 
   const registrationOptions = await generateRegistrationOptions(
@@ -44,7 +49,8 @@ export const getRegistrationOptions = async (
 };
 
 export const verifyRegistration = async (
-  ephemeralWalletAddress: string,
+  userName: string,
+  jwtPubKey: string,
   registrationResponse: RegistrationResponseJSON
 ): Promise<VerifiedRegistrationResponse> => {
   const db = await getOrCreateDatabase();
@@ -55,18 +61,18 @@ export const verifyRegistration = async (
     throw new Error("Invalid credentials");
   }
 
-  const challenge = db.registrationOptions[ephemeralWalletAddress].challenge;
+  const dbChallenge = db.registrationOptions[userName].challenge;
 
-  if (!challenge) {
+  if (!dbChallenge) {
     throw new Error(
       "No challenge found for this ephemeral wallet address in DB"
     );
   }
 
-  // Check the ephemeral wallet address provided againt the challenge in DB
+  // Check the JWT public key provided against the challenge in DB
   const challengeCheck = await bcrypt.compare(
-    ephemeralWalletAddress,
-    isoBase64URL.toUTF8String(challenge)
+    jwtPubKey,
+    isoBase64URL.toUTF8String(dbChallenge)
   );
   if (!challengeCheck) {
     throw new Error("Challenge verification failed");
@@ -75,7 +81,7 @@ export const verifyRegistration = async (
   try {
     verificationResponse = await verifyRegistrationResponse({
       response: registrationResponse,
-      expectedChallenge: challenge,
+      expectedChallenge: dbChallenge,
       expectedOrigin: "http://localhost:3000",
       expectedRPID: "localhost",
     });
@@ -88,7 +94,7 @@ export const verifyRegistration = async (
     throw new Error("Registration verification failed");
   }
 
-  removeRegistrationOptions(ephemeralWalletAddress);
+  removeRegistrationOptions(userName);
 
   return verificationResponse;
 };