Update e2e tests

Author: sea-snake

src/frontend/src/lib/components/ui/OpenIdItem.svelte

@@ -10,16 +10,16 @@
   import { formatDate, formatRelative, t } from "$lib/stores/locale.store";
 
   interface Props {
-    credential: OpenIdCredential;
+    openid: OpenIdCredential;
     onUnlink?: () => void;
     inUse?: boolean;
   }
 
-  const { credential, onUnlink, inUse }: Props = $props();
+  const { openid, onUnlink, inUse }: Props = $props();
 
-  const name = $derived(openIdName(credential.iss, credential.metadata));
-  const email = $derived(getMetadataString(credential.metadata, "email"));
-  const logo = $derived(openIdLogo(credential.iss, credential.metadata));
+  const name = $derived(openIdName(openid.iss, openid.metadata));
+  const email = $derived(getMetadataString(openid.metadata, "email"));
+  const logo = $derived(openIdLogo(openid.iss, openid.metadata));
   const options = $derived(
     nonNullish(onUnlink)
       ? [
@@ -79,10 +79,8 @@
         >
           <span>{$t`Right now`}</span>
         </Tooltip>
-      {:else if nonNullish(credential.last_usage_timestamp[0])}
-        {@const date = new Date(
-          nanosToMillis(credential.last_usage_timestamp[0]),
-        )}
+      {:else if nonNullish(openid.last_usage_timestamp[0])}
+        {@const date = new Date(nanosToMillis(openid.last_usage_timestamp[0]))}
         <Tooltip
           label={$formatDate(date, {
             timeStyle: "short",

src/frontend/src/lib/components/ui/PasskeyItem.svelte

@@ -11,15 +11,15 @@
   import { getAuthnMethodAlias } from "$lib/utils/webAuthn";
 
   interface Props {
-    data: AuthnMethodData;
+    passkey: AuthnMethodData;
     onRename?: () => void;
     onRemove?: () => void;
     inUse?: boolean;
   }
 
-  const { data, onRename, onRemove, inUse }: Props = $props();
+  const { passkey, onRename, onRemove, inUse }: Props = $props();
 
-  const alias = $derived(getAuthnMethodAlias(data));
+  const alias = $derived(getAuthnMethodAlias(passkey));
   const options = $derived([
     ...(nonNullish(onRename)
       ? [
@@ -86,8 +86,8 @@
         >
           <span>{$t`Right now`}</span>
         </Tooltip>
-      {:else if nonNullish(data.last_authentication[0])}
-        {@const date = new Date(nanosToMillis(data.last_authentication[0]))}
+      {:else if nonNullish(passkey.last_authentication[0])}
+        {@const date = new Date(nanosToMillis(passkey.last_authentication[0]))}
         <Tooltip
           label={$formatDate(date, {
             timeStyle: "short",

src/frontend/src/lib/components/ui/Select.svelte

@@ -73,7 +73,7 @@
   >
     <ul class="flex flex-col">
       {#each options as option, index}
-        <li class="contents">
+        <li class="contents" aria-label={option.label}>
           <Button
             onclick={() => handleClick(option, index)}
             variant="tertiary"

src/frontend/src/lib/components/views/RenamePasskey.svelte

@@ -49,7 +49,7 @@
       bind:element={inputRef}
       bind:value={name}
       inputmode="text"
-      placeholder={$t`Passkey label`}
+      placeholder={$t`Passkey name`}
       type="text"
       autocomplete="off"
       autocorrect="off"
@@ -58,7 +58,7 @@
         ? $t`Maximum length is 32 characters.`
         : undefined}
       disabled={isSubmitting}
-      aria-label={$t`Passkey label`}
+      aria-label={$t`Passkey name`}
     />
   </div>
   <div class="mt-auto flex flex-col items-stretch gap-3">

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

@@ -104,14 +104,19 @@ export class AuthFlow {
         canisterId,
         session: get(sessionStore),
       });
-    await authenticationStore.set({ identity, identityNumber });
+    const authMethod = { passkey: { credentialId } };
+    await authenticationStore.set({
+      identity,
+      identityNumber,
+      authMethod,
+    });
     const info =
       await get(authenticatedStore).actor.get_anchor_info(identityNumber);
     if (this.#options.trackLastUsed) {
       lastUsedIdentitiesStore.addLastUsedIdentity({
         identityNumber,
         name: info.name[0],
-        authMethod: { passkey: { credentialId } },
+        authMethod,
         createdAtMillis: info.created_at.map(nanosToMillis)[0],
       });
     }
@@ -200,7 +205,11 @@ export class AuthFlow {
       // If the call fails, it means the OpenID user does not exist in II.
       // In that case, we register them.
       authenticationV2Funnel.trigger(AuthenticationV2Events.LoginWithOpenID);
-      await authenticationStore.set({ identity, identityNumber });
+      await authenticationStore.set({
+        identity,
+        identityNumber,
+        authMethod: { openid: { iss, sub } },
+      });
       const info =
         await get(authenticatedStore).actor.get_anchor_info(identityNumber);
       const authnMethod = info.openid_credentials[0]?.find(
@@ -310,7 +319,11 @@ export class AuthFlow {
       const identity = await authenticateWithSession({
         session: get(sessionStore),
       });
-      await authenticationStore.set({ identity, identityNumber });
+      await authenticationStore.set({
+        identity,
+        identityNumber,
+        authMethod: { passkey: { credentialId } },
+      });
       if (this.#options.trackLastUsed) {
         lastUsedIdentitiesStore.addLastUsedIdentity({
           identityNumber,
@@ -403,7 +416,11 @@ export class AuthFlow {
       authenticationV2Funnel.trigger(
         AuthenticationV2Events.SuccessfulOpenIDRegistration,
       );
-      await authenticationStore.set({ identity, identityNumber });
+      await authenticationStore.set({
+        identity,
+        identityNumber,
+        authMethod: { openid: { iss, sub } },
+      });
       const metadata: MetadataMapV2 = [];
       if (nonNullish(jwtName)) {
         metadata.push(["name", { String: jwtName }]);

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

@@ -8,7 +8,7 @@ import {
   lastUsedIdentitiesStore,
   type LastUsedIdentity,
 } from "$lib/stores/last-used-identities.store";
-import { findConfig, requestJWT } from "$lib/utils/openID";
+import { decodeJWT, findConfig, requestJWT } from "$lib/utils/openID";
 import { get } from "svelte/store";
 import { sessionStore } from "$lib/stores/session.store";
 import { isNullish } from "@dfinity/utils";
@@ -40,12 +40,17 @@ export class AuthLastUsedFlow {
         const credentialIds = (await this.#identityCredentials.get(
           lastUsedIdentity.identityNumber,
         )) ?? [lastUsedIdentity.authMethod.passkey.credentialId];
-        const { identity, identityNumber } = await authenticateWithPasskey({
-          canisterId,
-          session: get(sessionStore),
-          credentialIds,
+        const { identity, identityNumber, credentialId } =
+          await authenticateWithPasskey({
+            canisterId,
+            session: get(sessionStore),
+            credentialIds,
+          });
+        await authenticationStore.set({
+          identity,
+          identityNumber,
+          authMethod: { passkey: { credentialId } },
         });
-        await authenticationStore.set({ identity, identityNumber });
         lastUsedIdentitiesStore.addLastUsedIdentity(lastUsedIdentity);
         authenticationV2Funnel.trigger(
           AuthenticationV2Events.ContinueAsPasskey,
@@ -74,13 +79,18 @@ export class AuthLastUsedFlow {
           mediation: "optional",
           loginHint: lastUsedIdentity.authMethod.openid.loginHint,
         });
+        const { iss, sub } = decodeJWT(jwt);
         this.systemOverlay = false;
         const { identity, identityNumber } = await authenticateWithJWT({
           canisterId,
           session: get(sessionStore),
           jwt,
         });
-        await authenticationStore.set({ identity, identityNumber });
+        await authenticationStore.set({
+          identity,
+          identityNumber,
+          authMethod: { openid: { iss, sub } },
+        });
         lastUsedIdentitiesStore.addLastUsedIdentity(lastUsedIdentity);
         authenticationV2Funnel.addProperties({
           provider: config.name,

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

@@ -244,6 +244,9 @@ export class MigrationFlow {
       await authenticationStore.set({
         identity,
         identityNumber,
+        // Since credential id is missing, we set it to an empty value,
+        // this will be replaced once a user has completed the migration.
+        authMethod: { passkey: { credentialId: new Uint8Array() } },
       });
       upgradeIdentityFunnel.trigger(
         UpgradeIdentityEvents.AuthenticationSuccessful,

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

@@ -125,18 +125,20 @@ export class RegisterAccessMethodFlow {
       ])
       .then(throwCanisterError);
     const identity = await authenticateWithSession({ session });
+    const authMethod = {
+      passkey: {
+        credentialId: new Uint8Array(credentialId),
+      },
+    };
     await authenticationStore.set({
       identity,
       identityNumber: this.#identityNumber,
+      authMethod,
     });
     lastUsedIdentitiesStore.addLastUsedIdentity({
       identityNumber: this.#identityNumber,
       name,
-      authMethod: {
-        passkey: {
-          credentialId: new Uint8Array(credentialId),
-        },
-      },
+      authMethod,
       createdAtMillis: this.#createdAtMillis,
     });
     return this.#identityNumber;