feat: find accounts by passkey (#227)

Author: JackHamer09

examples/demo-app/.gitignore

@@ -27,3 +27,4 @@ forge-output-paymaster.json
 forge-output-erc1271.json
 contracts.json
 contracts-anvil.json
+public/contracts.json

examples/demo-app/pages/web-sdk-test.vue

@@ -76,7 +76,7 @@
         </div>
         <div>
           <strong>Account Address:</strong>
-          <code class="bg-white px-2 py-1 rounded text-xs ml-2">{{ deploymentResult.address }}</code>
+          <code class="bg-white px-2 py-1 rounded text-xs ml-2" data-testid="deployed-account-address">{{ deploymentResult.address }}</code>
         </div>
         <div v-if="deploymentResult.eoaSigner">
           <strong>EOA Signer:</strong>
@@ -132,6 +132,107 @@
       </div>
     </div>
 
+    <!-- Find Addresses by Passkey -->
+    <div
+      class="bg-indigo-50 p-4 rounded-lg mb-4 border border-indigo-200"
+      data-testid="find-addresses-section"
+    >
+      <h2 class="text-lg font-semibold mb-3 text-indigo-800">
+        Find Addresses by Passkey
+      </h2>
+      <p class="text-sm text-gray-600 mb-4">
+        Authenticate with a passkey to find all smart account addresses associated with it.
+      </p>
+
+      <div class="space-y-3">
+        <!-- Scan Passkey Button (always visible) -->
+        <button
+          :disabled="loading"
+          class="w-full px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 disabled:opacity-50"
+          data-testid="scan-passkey-button"
+          @click="scanPasskeyForFindAccounts"
+        >
+          {{ loading ? 'Authenticating...' : (findPasskeyScanned ? 'Scan Different Passkey' : 'Scan Passkey to Find Accounts') }}
+        </button>
+
+        <!-- Passkey Info & Found Addresses (shown after scanning) -->
+        <div
+          v-if="findPasskeyScanned"
+          class="p-3 bg-white rounded border border-indigo-300"
+        >
+          <div class="space-y-3">
+            <div>
+              <p class="text-xs text-gray-600 mb-1">
+                <strong>Passkey Credential ID:</strong>
+              </p>
+              <code class="text-xs font-mono break-all">{{ findPasskeyCredentialId }}</code>
+            </div>
+
+            <div>
+              <p class="text-xs text-gray-600 mb-1">
+                <strong>Origin Domain:</strong>
+              </p>
+              <code class="text-xs font-mono">{{ findPasskeyOriginDomain }}</code>
+            </div>
+
+            <!-- Found Addresses -->
+            <div v-if="foundAddresses !== null">
+              <p class="text-xs text-gray-600 mb-1">
+                <strong>Associated Accounts:</strong>
+              </p>
+              <div
+                v-if="foundAddresses.length > 0"
+                class="mt-2"
+                data-testid="found-addresses-result"
+              >
+                <ul class="space-y-1" data-testid="found-addresses-list">
+                  <li
+                    v-for="(address, index) in foundAddresses"
+                    :key="address"
+                    class="text-xs font-mono bg-gray-100 px-2 py-1 rounded"
+                    data-testid="found-address-item"
+                  >
+                    {{ index + 1 }}. {{ address }}
+                  </li>
+                </ul>
+              </div>
+              <div
+                v-else
+                class="mt-2 p-2 bg-yellow-50 rounded border border-yellow-200"
+                data-testid="no-addresses-found"
+              >
+                <p class="text-xs text-yellow-800">
+                  No accounts found for this passkey.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Errors -->
+        <div
+          v-if="findPasskeyScanError"
+          class="p-3 bg-red-50 rounded border border-red-300"
+        >
+          <strong class="text-sm text-red-800">Scan Error:</strong>
+          <p class="text-xs text-red-600 mt-1">
+            {{ findPasskeyScanError }}
+          </p>
+        </div>
+
+        <div
+          v-if="findAddressesError"
+          class="p-3 bg-red-50 rounded border border-red-300"
+          data-testid="find-addresses-error"
+        >
+          <strong class="text-sm text-red-800">Search Error:</strong>
+          <p class="text-xs text-red-600 mt-1">
+            {{ findAddressesError }}
+          </p>
+        </div>
+      </div>
+    </div>
+
     <!-- Fund Smart Account -->
     <div
       v-if="deploymentResult && (!deploymentResult.passkeyEnabled || passkeyRegistered)"
@@ -292,7 +393,7 @@ import { createWalletClient, http, type Hash, type Hex, type Address, parseEther
 import { privateKeyToAccount } from "viem/accounts";
 import { createBundlerClient } from "viem/account-abstraction";
 
-import { createEcdsaClient, prepareDeploySmartAccount, getAccountAddressFromLogs, generateAccountId } from "zksync-sso-4337/client";
+import { createEcdsaClient, prepareDeploySmartAccount, getAccountAddressFromLogs, generateAccountId, findAddressesByPasskey } from "zksync-sso-4337/client";
 
 import { loadContracts, getBundlerUrl, getChainConfig, createPublicClient } from "~/utils/contracts";
 
@@ -329,6 +430,14 @@ const passkeyRegistered = ref(false);
 const passkeyRegisterResult = ref("");
 const passkeyRegisterError = ref("");
 
+// Find addresses by passkey state
+const findPasskeyScanned = ref(false);
+const findPasskeyCredentialId = ref("");
+const findPasskeyOriginDomain = ref("");
+const findPasskeyScanError = ref("");
+const foundAddresses = ref<Address[] | null>(null);
+const findAddressesError = ref("");
+
 // Fund smart account parameters
 const fundParams = ref({
   amount: "0.1",
@@ -714,6 +823,100 @@ async function registerPasskey() {
   }
 }
 
+/**
+ * Scan/authenticate with a passkey and automatically find associated accounts
+ */
+async function scanPasskeyForFindAccounts() {
+  loading.value = true;
+  findPasskeyScanError.value = "";
+  foundAddresses.value = null;
+  findAddressesError.value = "";
+  findPasskeyScanned.value = false;
+
+  try {
+    // eslint-disable-next-line no-console
+    console.log("Requesting WebAuthn authentication to scan passkey...");
+
+    // Create a challenge for authentication
+    const challenge = new Uint8Array(32);
+    crypto.getRandomValues(challenge);
+
+    // Request authentication to get the credential ID
+    const credential = await navigator.credentials.get({
+      publicKey: {
+        challenge,
+        timeout: 60000,
+        rpId: window.location.hostname,
+        userVerification: "required",
+      },
+    });
+
+    if (!credential || credential.type !== "public-key") {
+      throw new Error("Failed to authenticate with passkey");
+    }
+
+    const pkCredential = credential as PublicKeyCredential;
+
+    // Extract credential ID
+    const credentialId = new Uint8Array(pkCredential.rawId);
+    const credentialIdHex = `0x${Array.from(credentialId).map((b) => b.toString(16).padStart(2, "0")).join("")}`;
+
+    // Set the scanned passkey details
+    findPasskeyCredentialId.value = credentialIdHex;
+    findPasskeyOriginDomain.value = window.location.origin;
+    findPasskeyScanned.value = true;
+
+    // eslint-disable-next-line no-console
+    console.log("Passkey scanned successfully:");
+    // eslint-disable-next-line no-console
+    console.log("  Credential ID:", credentialIdHex);
+    // eslint-disable-next-line no-console
+    console.log("  Origin:", window.location.origin);
+
+    // Automatically find accounts for this passkey
+    // eslint-disable-next-line no-console
+    console.log("Finding accounts for passkey...");
+
+    // Load contracts configuration
+    const contracts = await loadContracts();
+
+    // Create public client
+    const publicClient = await createPublicClient(contracts);
+
+    // eslint-disable-next-line no-console
+    console.log("  WebAuthn Validator:", contracts.webauthnValidator);
+
+    // Call the findAddressesByPasskey action
+    const result = await findAddressesByPasskey({
+      client: publicClient,
+      contracts: {
+        webauthnValidator: contracts.webauthnValidator as Address,
+      },
+      passkey: {
+        credentialId: credentialIdHex as Hex,
+        originDomain: window.location.origin,
+      },
+    });
+
+    foundAddresses.value = result.addresses;
+
+    // eslint-disable-next-line no-console
+    console.log(`  Found ${result.addresses.length} account(s):`, result.addresses);
+  } catch (err: unknown) {
+    // eslint-disable-next-line no-console
+    console.error("Failed to scan passkey or find accounts:", err);
+
+    // Determine if error was during scan or search
+    if (!findPasskeyScanned.value) {
+      findPasskeyScanError.value = `Failed to scan passkey: ${err instanceof Error ? err.message : String(err)}`;
+    } else {
+      findAddressesError.value = `Failed to find accounts: ${err instanceof Error ? err.message : String(err)}`;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
 // Fund the smart account with ETH from EOA wallet
 async function fundSmartAccount() {
   loading.value = true;

examples/demo-app/public/contracts.json

@@ -208,3 +208,109 @@ test("Deploy with passkey and send transaction using passkey", async ({ page })
 
   console.log("✅ All passkey steps completed successfully!");
 });
+
+test("Find addresses by passkey credential ID", async ({ page }) => {
+  // Use Anvil account #4 for this test to avoid nonce conflicts
+  await page.goto("/web-sdk-test?fundingAccount=4");
+  await expect(page.getByText("ZKSync SSO Web SDK Test")).toBeVisible();
+
+  // Wait for SDK to load
+  await expect(page.getByText("SDK Loaded:")).toBeVisible();
+  await expect(page.getByText("Yes")).toBeVisible({ timeout: 10000 });
+
+  console.log("Step 1: Enabling passkey configuration...");
+
+  // Enable passkey deployment
+  const passkeyCheckbox = page.getByLabel("Enable Passkey Deployment");
+  await expect(passkeyCheckbox).toBeVisible();
+  await passkeyCheckbox.check();
+
+  console.log("Step 2: Creating WebAuthn passkey...");
+
+  // Create a virtual authenticator for testing
+  const client = await page.context().newCDPSession(page);
+  await client.send("WebAuthn.enable");
+  await client.send("WebAuthn.addVirtualAuthenticator", {
+    options: {
+      protocol: "ctap2",
+      transport: "usb",
+      hasResidentKey: true,
+      hasUserVerification: true,
+      isUserVerified: true,
+    },
+  });
+
+  // Click Create New WebAuthn Passkey button
+  await page.getByRole("button", { name: "Create New WebAuthn Passkey" }).click();
+
+  // Wait for passkey creation to complete
+  await expect(page.getByText("Passkey created successfully!")).toBeVisible({ timeout: 10000 });
+
+  console.log("✓ WebAuthn passkey created successfully");
+
+  // Step 3: Deploy Account with Passkey
+  console.log("Step 3: Deploying smart account with passkey...");
+  await page.getByRole("button", { name: "Deploy Account" }).click();
+
+  // Wait for deployment to complete
+  await expect(page.getByText("Account Deployed Successfully!")).toBeVisible({ timeout: 30000 });
+
+  // Verify passkey is enabled in deployment result
+  await expect(page.getByText("Passkey Enabled: Yes")).toBeVisible();
+
+  console.log("✓ Smart account with passkey deployed successfully");
+
+  // Get the deployed account address
+  const deployedAddressElement = page.getByTestId("deployed-account-address");
+  await expect(deployedAddressElement).toBeVisible();
+  const deployedAddress = await deployedAddressElement.textContent();
+  console.log(`Deployed account address: ${deployedAddress}`);
+
+  // Step 4: Find addresses by passkey
+  console.log("Step 4: Finding addresses by passkey credential ID...");
+
+  // Verify the "Find Addresses by Passkey" section is visible
+  const findAddressesSection = page.getByTestId("find-addresses-section");
+  await expect(findAddressesSection).toBeVisible();
+
+  // Click the "Scan Passkey to Find Accounts" button - this will automatically find accounts
+  const scanPasskeyButton = page.getByTestId("scan-passkey-button");
+  await expect(scanPasskeyButton).toBeVisible();
+  await scanPasskeyButton.click();
+
+  // Wait for the results to appear (scanning + finding happens automatically)
+  const foundAddressesResult = page.getByTestId("found-addresses-result");
+  await expect(foundAddressesResult).toBeVisible({ timeout: 15000 });
+
+  // Verify "Associated Accounts:" label is visible
+  await expect(page.getByText("Associated Accounts:")).toBeVisible();
+
+  // Get all found addresses
+  const foundAddressList = page.getByTestId("found-addresses-list");
+  await expect(foundAddressList).toBeVisible();
+
+  const addressItems = foundAddressList.getByTestId("found-address-item");
+  const addressCount = await addressItems.count();
+  console.log(`Found ${addressCount} address(es)`);
+
+  // Verify that the deployed address is in the list
+  let foundDeployedAddress = false;
+  for (let i = 0; i < addressCount; i++) {
+    const addressText = await addressItems.nth(i).textContent();
+    console.log(`  Address ${i + 1}: ${addressText}`);
+
+    // Check if this address item contains the deployed address
+    if (addressText && addressText.includes(deployedAddress || "")) {
+      foundDeployedAddress = true;
+      console.log("  ✓ Deployed address found in list!");
+    }
+  }
+
+  // Assert that we found the deployed address
+  expect(foundDeployedAddress, `Deployed address ${deployedAddress} should be in the found addresses list`).toBe(true);
+
+  console.log("✓ Successfully found addresses by passkey");
+  console.log("✓ Verified deployed address is in the found addresses list");
+
+  console.log("✅ Find addresses by passkey test completed successfully!");
+});

examples/demo-app/tests/web-sdk-test.spec.ts

@@ -3,6 +3,11 @@ export type {
   PrepareDeploySmartAccountResult,
 } from "./deploy.js";
 export { getAccountAddressFromLogs, prepareDeploySmartAccount } from "./deploy.js";
-export type { AddPasskeyParams, AddPasskeyResult } from "./passkey.js";
-export { addPasskey } from "./passkey.js";
+export type {
+  AddPasskeyParams,
+  AddPasskeyResult,
+  FindAddressesByPasskeyParams,
+  FindAddressesByPasskeyResult,
+} from "./passkey.js";
+export { addPasskey, findAddressesByPasskey } from "./passkey.js";
 export { generateAccountId } from "./utils.js";