Use RP ID and auth flows when authenticating in migration flow (#3144)

Author: lmuntaner

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

@@ -19,11 +19,16 @@ import { inferPasskeyAlias, loadUAParser } from "$lib/legacy/flows/register";
 import { lastUsedIdentitiesStore } from "$lib/stores/last-used-identities.store";
 import { throwCanisterError } from "$lib/utils/utils";
 import { toaster } from "$lib/components/utils/toaster";
+import { findWebAuthnFlows, WebAuthnFlow } from "$lib/utils/findWebAuthnFlows";
+import { supportsWebauthRoR } from "$lib/utils/userAgent";
+import { canisterConfig } from "$lib/globals";
+import { isWebAuthnCancelError } from "$lib/utils/webAuthnErrorUtils";
 
 export class MigrationFlow {
   view = $state<"enterNumber" | "enterName">("enterNumber");
   identityNumber: UserNumber | undefined;
   authenticating = $state(false);
+  #webAuthFlows: { flows: WebAuthnFlow[]; currentIndex: number } | undefined;
 
   constructor() {
     this.identityNumber = undefined;
@@ -35,28 +40,78 @@ export class MigrationFlow {
     this.authenticating = true;
     this.identityNumber = identityNumber;
     const devices = await this.#lookupAuthenticators(identityNumber);
+
     const webAuthnAuthenticators = devices
       .filter(({ key_type }) => !("browser_storage_key" in key_type))
       .map(convertToValidCredentialData)
       .filter(nonNullish);
+
+    if (isNullish(this.#webAuthFlows)) {
+      const flows = findWebAuthnFlows({
+        supportsRor: supportsWebauthRoR(window.navigator.userAgent),
+        devices: webAuthnAuthenticators,
+        currentOrigin: window.location.origin,
+        // Empty array is the same as no related origins.
+        relatedOrigins: canisterConfig.related_origins[0] ?? [],
+      });
+      this.#webAuthFlows = {
+        flows,
+        currentIndex: 0,
+      };
+    }
+
+    const flowsLength = this.#webAuthFlows?.flows.length ?? 0;
+    // We reached the last flow. Start from the beginning.
+    // This might happen if the user cancelled manually in the flow that would have been successful.
+    if (this.#webAuthFlows?.currentIndex === flowsLength) {
+      this.#webAuthFlows.currentIndex = 0;
+    }
+    const currentFlow = nonNullish(this.#webAuthFlows)
+      ? this.#webAuthFlows.flows[this.#webAuthFlows.currentIndex]
+      : undefined;
+
     const passkeyIdentity = MultiWebAuthnIdentity.fromCredentials(
       webAuthnAuthenticators,
-      undefined,
-      false,
-    );
-    const session = get(sessionStore);
-    const delegation = await DelegationChain.create(
-      passkeyIdentity,
-      session.identity.getPublicKey(),
-      new Date(Date.now() + 30 * 60 * 1000),
-    );
-    const identity = DelegationIdentity.fromDelegation(
-      session.identity,
-      delegation,
+      currentFlow?.rpId,
+      currentFlow?.useIframe ?? false,
     );
-    authenticationStore.set({ identity, identityNumber });
-    this.authenticating = false;
-    this.view = "enterName";
+    try {
+      const session = get(sessionStore);
+      const delegation = await DelegationChain.create(
+        passkeyIdentity,
+        session.identity.getPublicKey(),
+        new Date(Date.now() + 30 * 60 * 1000),
+      );
+      const identity = DelegationIdentity.fromDelegation(
+        session.identity,
+        delegation,
+      );
+      authenticationStore.set({ identity, identityNumber });
+      this.view = "enterName";
+    } catch (e: unknown) {
+      if (isWebAuthnCancelError(e)) {
+        // We only want to show a special error if the user might have to choose different web auth flow.
+        if (nonNullish(this.#webAuthFlows) && flowsLength > 1) {
+          // Increase the index to try the next flow.
+          this.#webAuthFlows = {
+            flows: this.#webAuthFlows.flows,
+            currentIndex: this.#webAuthFlows.currentIndex + 1,
+          };
+          toaster.info({
+            title: "Please try again",
+            description:
+              "The wrong domain was set for the passkey and the browser couldn't find it.",
+          });
+          return;
+        }
+      }
+
+      throw new Error(
+        "Failed to authenticate using passkey. Please try again and contact support if the issue persists.",
+      );
+    } finally {
+      this.authenticating = false;
+    }
   };
 
   createPasskey = async (name: string): Promise<void> => {