feat(web-demo): add PasskeyDemo component with passkey lifecycle UI

- Register, attach, derive PRF key, send funds, remove passkey flows
- Right-column panels: registered passkeys + associated wallets with refresh
- Quick-action buttons to select passkey/wallet for attach/remove steps
- Config fields (env, enterpriseId, coin) persisted to localStorage
- Coin registered via coinFactory before SDK use
- Staging environment option added

TICKET: WCN-188

Author: derranW26

modules/passkey-crypto/src/derivePasskeyPrfKey.ts

@@ -23,7 +23,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');
@@ -41,10 +41,18 @@ export async function derivePasskeyPrfKey(params: {
     .get(bitgo.url('/user/otp/webauthn/assertion', 2))
     .result()) as AssertionChallengeResponse;
 
+  // Build allowCredentials from the evalByCredential map so the browser
+  // knows which credentials are valid for the PRF extension.
+  const allowCredentials = Object.keys(evalByCredential).map((credId) => ({
+    type: 'public-key' as const,
+    id: Buffer.from(credId.replace(/-/g, '+').replace(/_/g, '/'), 'base64').buffer,
+  }));
+
   // 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/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>
   );
 };