Add Migration flow into AuthFlow

Author: Llorenç

src/frontend/src/lib/components/wizards/MigrationWizard.svelte

@@ -7,7 +7,8 @@
   import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
   import { handleError } from "$lib/components/utils/error";
 
-  const { onSuccess }: { onSuccess: () => void } = $props();
+  const { onSuccess }: { onSuccess: (identityNumber: bigint) => void } =
+    $props();
 
   let identityNumber: number | undefined = $state(undefined);
   const migrationFlow = new MigrationFlow();
@@ -23,7 +24,10 @@
 
   const handleCreate = async (name: string) => {
     await migrationFlow.createPasskey(name);
-    onSuccess();
+    // Button is disabled if identityNumber is null or undefined so no need to manage that case.
+    if (nonNullish(migrationFlow.identityNumber)) {
+      onSuccess(migrationFlow.identityNumber);
+    }
   };
 </script>
 

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

@@ -10,6 +10,7 @@
   import SystemOverlayBackdrop from "$lib/components/utils/SystemOverlayBackdrop.svelte";
   import { RegisterAccessMethodWizard } from "$lib/components/wizards/registerAccessMethod";
   import { canisterConfig } from "$lib/globals";
+  import MigrationWizard from "../MigrationWizard.svelte";
 
   interface Props {
     isAuthenticating?: boolean;
@@ -73,6 +74,10 @@
       onOtherDevice(identityNumber);
     }
   };
+
+  const handleMigrationSuccess = (identityNumber: bigint) => {
+    onSignIn(identityNumber);
+  };
 </script>
 
 {#snippet dialogContent()}
@@ -83,6 +88,8 @@
     />
   {:else if authFlow.view === "setupNewPasskey"}
     <CreatePasskey create={handleCreatePasskey} />
+  {:else if authFlow.view === "migrate"}
+    <MigrationWizard onSuccess={handleMigrationSuccess} />
   {/if}
 {/snippet}
 
@@ -98,6 +105,7 @@
       continueWithGoogle={handleContinueWithGoogle}
       continueFromAnotherDevice={() =>
         (isContinueFromAnotherDeviceVisible = true)}
+      migrate={authFlow.migrate}
     />
   {/if}
   {#if authFlow.view !== "chooseMethod"}

src/frontend/src/lib/components/wizards/auth/views/PickAuthenticationMethod.svelte

@@ -15,12 +15,14 @@
     setupOrUseExistingPasskey: () => void;
     continueWithGoogle: () => Promise<void>;
     continueFromAnotherDevice: () => void;
+    migrate: () => void;
   }
 
   const {
     setupOrUseExistingPasskey,
     continueWithGoogle,
     continueFromAnotherDevice,
+    migrate,
   }: Props = $props();
 
   let isAuthenticating = $state(false);
@@ -87,7 +89,7 @@
       class="text-text-primary text-md flex flex-row items-center justify-between"
     >
       <p>Still have an identity number?</p>
-      <a href="/migrate" class="font-bold">Upgrade</a>
+      <button onclick={migrate} class="font-bold">Upgrade</button>
     </div>
   {/if}
 </div>

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

@@ -32,7 +32,7 @@ import { createGoogleRequestConfig, requestJWT } from "$lib/utils/openID";
 
 export class AuthFlow {
   #view = $state<
-    "chooseMethod" | "setupOrUseExistingPasskey" | "setupNewPasskey"
+    "chooseMethod" | "setupOrUseExistingPasskey" | "setupNewPasskey" | "migrate"
   >("chooseMethod");
   #captcha = $state<{
     image: string;
@@ -67,6 +67,10 @@ export class AuthFlow {
     this.#view = "chooseMethod";
   };
 
+  migrate = (): void => {
+    this.#view = "migrate";
+  };
+
   setupOrUseExistingPasskey = (): void => {
     authenticationV2Funnel.trigger(
       AuthenticationV2Events.ContinueWithPasskeyScreen,