feat(web-demo): Passkey-crypto web demo

modules/passkey-crypto/src/derivePasskeyPrfKey.ts

@@ -3,8 +3,10 @@ import { buildEvalByCredential, matchDeviceByCredentialId } from './prfHelpers';
 import { derivePassword } from './derivePassword';
 import type { WebAuthnProvider } from './webAuthnTypes';
 
-interface AssertionChallengeResponse {
+interface AuthChallengeResponse {
   challenge: string;
+  allowCredentials?: Array<{ id: string; type: string; transports?: string[] }>;
+  origin?: string;
 }
 
 /**
@@ -23,7 +25,7 @@ export async function derivePasskeyPrfKey(params: {
 
   // Fetch the wallet's user keychain to get webauthnDevices
   const keychain = await wallet.getEncryptedUserKeychain();
-  const devices = keychain.webauthnDevices;
+  const devices = (keychain as any).webauthnDevices ?? (keychain as any).webAuthnDevices;
 
   if (!devices || devices.length === 0) {
     throw new Error('No passkey devices available');
@@ -36,15 +38,22 @@ export async function derivePasskeyPrfKey(params: {
     throw new Error('No passkey devices available with a valid PRF salt');
   }
 
-  // Fetch a server-issued assertion challenge
-  const { challenge } = (await bitgo
-    .get(bitgo.url('/user/otp/webauthn/assertion', 2))
-    .result()) as AssertionChallengeResponse;
+  // Fetch a server-issued assertion challenge via the auth endpoint
+  const { challenge } = (await bitgo.get(bitgo.url('/user/otp/webauthn/auth', 2)).result()) as AuthChallengeResponse;
+
+  // Build allowCredentials so the browser knows which credentials to use.
+  // Pass the Buffer (Uint8Array) directly — not .buffer — so the provider
+  // layer can correctly slice it via ArrayBuffer.isView.
+  const allowCredentials = Object.keys(evalByCredential).map((credId) => ({
+    type: 'public-key' as const,
+    id: Buffer.from(credId.replace(/-/g, '+').replace(/_/g, '/'), 'base64') as unknown as ArrayBuffer,
+  }));
 
   // Trigger WebAuthn assertion with PRF evaluation via the provider (navigator layer)
   const result = await provider.get({
     publicKey: {
       challenge: Buffer.from(challenge, 'base64'),
+      allowCredentials,
     } as PublicKeyCredentialRequestOptions,
     evalByCredential,
   });

modules/passkey-crypto/test/unit/derivePasskeyPrfKey.test.ts

@@ -73,7 +73,7 @@ describe('derivePasskeyPrfKey', function () {
     assert.strictEqual(getCallArgs.evalByCredential['cred-bbb'], 'salt-bbb');
     // Verify bitgo was used to fetch the assertion challenge
     assert.ok(mockBitGo.get.calledOnce);
-    assert.ok(mockBitGo.url.calledWith('/user/otp/webauthn/assertion', 2));
+    assert.ok(mockBitGo.url.calledWith('/user/otp/webauthn/auth', 2));
   });
 
   it("should throw 'No passkey devices available' when no devices", async function () {

modules/web-demo/package.json

@@ -60,6 +60,7 @@
     "@bitgo/sdk-coin-xtz": "^2.10.7",
     "@bitgo/sdk-coin-zec": "^2.8.7",
     "@bitgo/sdk-core": "^36.44.0",
+    "@bitgo/passkey-crypto": "*",
     "@bitgo/sdk-hmac": "^1.9.0",
     "@bitgo/sdk-lib-mpc": "^10.12.0",
     "@bitgo/sdk-opensslbytes": "^2.1.0",

modules/web-demo/src/App.tsx

@@ -14,6 +14,7 @@ const EcdsaChallengeComponent = lazy(
   () => import('@components/EcdsaChallenge'),
 );
 const WebCryptoAuthComponent = lazy(() => import('@components/WebCryptoAuth'));
+const PasskeyDemo = lazy(() => import('@components/PasskeyDemo'));
 
 const Loading = () => <div>Loading route...</div>;
 
@@ -40,6 +41,7 @@ const App = () => {
               path="/webcrypto-auth"
               element={<WebCryptoAuthComponent />}
             />
+            <Route path="/passkey-demo" element={<PasskeyDemo />} />
           </Routes>
         </Suspense>
       </Layout>

modules/web-demo/src/components/Navbar/index.tsx

@@ -56,6 +56,12 @@ const Navbar = () => {
       >
         WebCrypto Auth
       </NavItem>
+      <NavItem
+        activeRoute={pathname === '/passkey-demo'}
+        onClick={() => navigate('/passkey-demo')}
+      >
+        Passkey Demo
+      </NavItem>
     </NavbarContainer>
   );
 };