Fetch identity credentials (dfinity#3223)

* Fetch identity credentials

* Refactor

* Use anonymous actor

* Add E2E test

* Move fetching identities to store

* Remove unnecessary comment

* Refactor

* Revert unnecessary field

* Add loading state

* Store the promise of credentials

* Prepare auth before clicking

Author: Llorenç Muntaner

src/frontend/src/lib/components/wizards/auth/AuthWizard.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { nonNullish } from "@dfinity/utils";
   import { AuthFlow } from "$lib/flows/authFlow.svelte";
-  import { AuthLastUsedFlow } from "$lib/flows/authLastUsedFlow.svelte";
   import type { Snippet } from "svelte";
   import SolveCaptcha from "$lib/components/wizards/auth/views/SolveCaptcha.svelte";
   import PickAuthenticationMethod from "$lib/components/wizards/auth/views/PickAuthenticationMethod.svelte";
@@ -32,7 +31,6 @@
   }: Props = $props();
 
   const authFlow = new AuthFlow();
-  const authLastUsedFlow = new AuthLastUsedFlow();
 
   let isContinueFromAnotherDeviceVisible = $state(false);
 
@@ -109,6 +107,6 @@
   {/if}
 {/if}
 
-{#if authFlow.systemOverlay || authLastUsedFlow.systemOverlay}
+{#if authFlow.systemOverlay}
   <SystemOverlayBackdrop />
 {/if}

src/frontend/src/lib/flows/authLastUsedFlow.svelte.ts

@@ -12,18 +12,32 @@ import { createGoogleRequestConfig, requestJWT } from "$lib/utils/openID";
 import { get } from "svelte/store";
 import { sessionStore } from "$lib/stores/session.store";
 import { isNullish } from "@dfinity/utils";
+import { fetchIdentityCredentials } from "$lib/utils/fetchCredentials";
 
 export class AuthLastUsedFlow {
   systemOverlay = $state(false);
   authenticatingIdentity = $state<bigint | null>(null);
+  #identityCredentials: Map<bigint, Promise<Uint8Array[] | undefined>> =
+    new Map();
+  init(identities: bigint[]) {
+    identities.forEach((identityNumber) => {
+      this.#identityCredentials.set(
+        identityNumber,
+        fetchIdentityCredentials(identityNumber),
+      );
+    });
+  }
   authenticate = async (lastUsedIdentity: LastUsedIdentity): Promise<void> => {
     this.authenticatingIdentity = lastUsedIdentity.identityNumber;
     try {
       if ("passkey" in lastUsedIdentity.authMethod) {
+        const credentialIds = (await this.#identityCredentials.get(
+          lastUsedIdentity.identityNumber,
+        )) ?? [lastUsedIdentity.authMethod.passkey.credentialId];
         const { identity, identityNumber } = await authenticateWithPasskey({
           canisterId,
           session: get(sessionStore),
-          credentialIds: [lastUsedIdentity.authMethod.passkey.credentialId],
+          credentialIds,
         });
         authenticationStore.set({ identity, identityNumber });
         lastUsedIdentitiesStore.addLastUsedIdentity(lastUsedIdentity);

src/frontend/src/lib/utils/fetchCredentials.ts

@@ -0,0 +1,35 @@
+import { anonymousActor } from "$lib/globals";
+import { nonNullish } from "@dfinity/utils";
+import { convertToValidCredentialData } from "./credential-devices";
+
+/**
+ * Fetches the credentials for a given identity number.
+ * @param identityNumber The identity number to fetch credentials for.
+ * @returns An array of credentials or undefined if no valid credentials are found.
+ */
+export const fetchIdentityCredentials = async (
+  identityNumber: bigint,
+): Promise<Uint8Array[] | undefined> => {
+  try {
+    const identityCredentials = await anonymousActor.lookup(identityNumber);
+    const validCredentials = identityCredentials
+      .filter((device) => "authentication" in device.purpose)
+      .filter(({ key_type }) => !("browser_storage_key" in key_type))
+      .map(convertToValidCredentialData)
+      .filter(nonNullish);
+
+    if (validCredentials.length > 0) {
+      return validCredentials.map(
+        (credential) => new Uint8Array(credential.credentialId),
+      );
+    }
+
+    return undefined;
+  } catch (error) {
+    console.warn(
+      `Error looking up identity ${identityNumber} credentials:`,
+      error,
+    );
+    return undefined;
+  }
+};

src/frontend/src/routes/(new-styling)/+page.svelte

@@ -58,13 +58,19 @@
       gotoNext();
     }
   };
-  const authLastUsedFlow = new AuthLastUsedFlow();
 
   const lastUsedIdentities = $derived(
     Object.values($lastUsedIdentitiesStore.identities)
       .sort((a, b) => b.lastUsedTimestampMillis - a.lastUsedTimestampMillis)
       .slice(0, 3),
   );
+  const authLastUsedFlow = new AuthLastUsedFlow();
+  // Initialize the flow every time the last used identities change
+  $effect(() =>
+    authLastUsedFlow.init(
+      lastUsedIdentities.map(({ identityNumber }) => identityNumber),
+    ),
+  );
 
   let isAuthDialogOpen = $state(false);
   let isAuthenticating = $state(false);

src/frontend/src/routes/(new-styling)/authorize/continue/+page.svelte

@@ -56,6 +56,12 @@
     return accounts;
   });
   const authLastUsedFlow = new AuthLastUsedFlow();
+  // Initialize the flow every time the last used identities change
+  $effect(() =>
+    authLastUsedFlow.init(
+      lastUsedAccounts.map(({ identityNumber }) => identityNumber),
+    ),
+  );
   let loading = $state(false);
 
   const handleContinueAs = async (account: LastUsedAccount) => {

src/frontend/src/routes/(new-styling)/manage/(authenticated)/+layout.svelte

@@ -61,8 +61,14 @@
     isAuthDialogOpen = false;
   };
 
+  const authLastUsedFlow = new AuthLastUsedFlow();
+  $effect(() =>
+    authLastUsedFlow.init(
+      lastUsedIdentities.map(({ identityNumber }) => identityNumber),
+    ),
+  );
+
   const handleSwitchIdentity = async (identityNumber: bigint) => {
-    const authLastUsedFlow = new AuthLastUsedFlow();
     const chosenIdentity =
       $lastUsedIdentitiesStore.identities[Number(identityNumber)];
     await authLastUsedFlow.authenticate(chosenIdentity);

src/frontend/tests/e2e-playwright/dashboard/addPasskeys.spec.ts

@@ -11,7 +11,7 @@ import {
 
 const TEST_USER_NAME = "Test User";
 
-test("User can log into the dashboard and add a new passkey from the same device and log in with it", async ({
+test("User can log into the dashboard and add a new passkey from the same device and log in with it after clearing storage", async ({
   page,
   context,
 }) => {
@@ -144,3 +144,52 @@ test("User can log in the dashboard and add a new passkey from another device",
   // Verify that we now have two passkeys
   await expect(page.getByText("Chrome")).toHaveCount(2);
 });
+
+test("User can add a new passkey and use it with cached identity without clearing storage", async ({
+  page,
+  context,
+}) => {
+  const auth = dummyAuth();
+  await page.goto(II_URL);
+  await createNewIdentityInII(page, TEST_USER_NAME, auth);
+  await page.waitForURL(II_URL + "/manage");
+
+  // Verify we're at the dashboard and have one passkey
+  await expect(page.getByText("Chrome")).toHaveCount(1);
+
+  // Start the "add passkey" flow
+  const auth2 = dummyAuth();
+  await addPasskeyCurrentDevice(page, auth2);
+  await expect(page.getByText("Chrome")).toHaveCount(2);
+  await renamePasskey(page, "New Passkey");
+
+  // Verify that the new passkey is not the current one
+  await expect(
+    page.getByText("Chrome").locator("..").getByLabel("Current Passkey"),
+  ).toHaveCount(1);
+  await expect(
+    page.getByText("New Passkey").locator("..").getByLabel("Current Passkey"),
+  ).toHaveCount(0);
+
+  await signOut(page);
+
+  // Log in again with new passkey WITHOUT clearing storage (key difference)
+  // This should use the cached identity
+  const newPage = await context.newPage();
+  await newPage.goto(II_URL);
+
+  // Click on the cached identity button directly
+  // But use the new passkey to authenticate
+  auth2(newPage);
+  await newPage.getByRole("button", { name: TEST_USER_NAME }).click();
+
+  // Verify we're logged in with the new passkey
+  await newPage.waitForURL(II_URL + "/manage");
+  await expect(
+    newPage.getByRole("heading", {
+      name: new RegExp(`Welcome, ${TEST_USER_NAME}!`),
+    }),
+  ).toBeVisible();
+
+  await newPage.close();
+});