Refactor add device success screen to be shown consistently

src/frontend/src/components/authenticateBox.ts

@@ -160,7 +160,7 @@ export const authenticateBoxFlow = async <T, I>({
   templates: AuthnTemplates;
   addDevice: (
     userNumber?: bigint
-  ) => Promise<{ tag: "deviceAdded"; alias: string } | { tag: "canceled" }>;
+  ) => Promise<{ tag: "deviceAdded" } | { tag: "canceled" }>;
   loginPasskey: (
     userNumber: bigint
   ) => Promise<
@@ -652,7 +652,7 @@ const loginPinIdentityMaterial = ({
 const asNewDevice = async (
   connection: Connection,
   prefilledUserNumber?: bigint
-): Promise<{ tag: "deviceAdded"; alias: string } | { tag: "canceled" }> => {
+): Promise<{ tag: "deviceAdded" } | { tag: "canceled" }> => {
   // Prompt the user for an anchor and provide additional information about the flow.
   // If the user number is already known, it is prefilled in the screen.
   const userNumberResult = await promptUserNumber({

src/frontend/src/flows/addDevice/manage/addDevice.ts

@@ -6,7 +6,7 @@ import { displayError } from "$src/components/displayError";
 import { withLoader } from "$src/components/loader";
 import { AuthenticatedConnection } from "$src/utils/iiConnection";
 import { isNullish } from "@dfinity/utils";
-import { addDeviceSuccess } from "./addDeviceSuccess";
+import { addDeviceSuccess } from "../addDeviceSuccess";
 import { addFIDODevice } from "./addFIDODevice";
 import { pollForTentativeDevice } from "./pollForTentativeDevice";
 import { verifyTentativeDevice } from "./verifyTentativeDevice";

src/frontend/src/flows/addDevice/manage/addFIDODevice.ts

@@ -15,7 +15,7 @@ import {
   isWebAuthnDuplicateDevice,
 } from "$src/utils/webAuthnErrorUtils";
 import { WebAuthnIdentity } from "@dfinity/identity";
-import { addDeviceSuccess } from "./addDeviceSuccess";
+import { addDeviceSuccess } from "../addDeviceSuccess";
 
 const displayFailedToAddDevice = (error: Error) =>
   displayError({

src/frontend/src/flows/addDevice/welcomeView/registerTentativeDevice.ts

@@ -5,6 +5,7 @@ import {
 } from "$generated/internet_identity_types";
 import { displayError } from "$src/components/displayError";
 import { withLoader } from "$src/components/loader";
+import { addDeviceSuccess } from "$src/flows/addDevice/addDeviceSuccess";
 import { inferPasskeyAlias, loadUAParser } from "$src/flows/register";
 import { setAnchorUsed } from "$src/storage";
 import { authenticatorAttachmentToKeyType } from "$src/utils/authenticatorAttachment";
@@ -21,14 +22,22 @@ import { deviceRegistrationDisabledInfo } from "./deviceRegistrationModeDisabled
 import { showVerificationCode } from "./showVerificationCode";
 
 /**
- * Prompts the user to enter a device alias. When clicking next, the device is added tentatively to the given identity anchor.
+ * Runs the tentative device registration flow on a _new_ device:
+ *  1. The user interacts with the authenticator to create a new credential.
+ *  2. After adding it tentatively, the user is prompted to enter the verification
+ *     code on an existing device.
+ *  3. This flows polls for the user to complete the verification.
+ *  4. Once verification is completed, a success screen is shown.
+ *
+ *  If the user cancels at any point, the flow is aborted.
+ *
  * @param userNumber anchor to add the tentative device to.
  * @param connection connection to interact with the II canister.
  */
 export const registerTentativeDevice = async (
   userNumber: bigint,
   connection: Connection
-): Promise<{ tag: "deviceAdded"; alias: string } | { tag: "canceled" }> => {
+): Promise<{ tag: "deviceAdded" } | { tag: "canceled" }> => {
   // Kick-off fetching "ua-parser-js";
   const uaParser = loadUAParser();
 
@@ -101,7 +110,9 @@ export const registerTentativeDevice = async (
   }
 
   verificationCodeResult satisfies "ok";
-  return { tag: "deviceAdded", alias };
+
+  await addDeviceSuccess({ deviceAlias: alias });
+  return { tag: "deviceAdded" };
 };
 
 /** Create new WebAuthn credentials */

src/frontend/src/index.ts

@@ -1,5 +1,4 @@
 import { handleLoginFlowResult } from "$src/components/authenticateBox";
-import { addDeviceSuccess } from "$src/flows/addDevice/manage/addDeviceSuccess";
 import { nonNullish } from "@dfinity/utils";
 import { registerTentativeDevice } from "./flows/addDevice/welcomeView/registerTentativeDevice";
 import { authFlowAuthorize } from "./flows/authorize";
@@ -22,10 +21,6 @@ void createSpa(async (connection) => {
       return authFlowManage(connection);
     }
     registerDeviceResult satisfies { tag: "deviceAdded" };
-    const { alias: deviceAlias } = registerDeviceResult;
-
-    // Display a success page once device added (above registerTentativeDevice **never** returns if it fails)
-    await addDeviceSuccess({ deviceAlias });
 
     const renderManage = renderManageWarmup();
 

src/frontend/src/test-e2e/addDevice.test.ts

@@ -154,6 +154,10 @@ test("Add remote device starting on new device", async () => {
       await addDeviceSuccessView.continue();
 
       // browser 2 again
+      const addDeviceSuccessView2 = new AddDeviceSuccessView(browser2);
+      await addDeviceSuccessView2.waitForDisplay();
+      await addDeviceSuccessView2.continue();
+
       // make sure the browser now shows the sign-in screen with the user number
       // pre-filled
       await focusBrowser(browser2);

src/showcase/src/pages/addDeviceSuccess.astro

@@ -7,7 +7,7 @@ import Screen from "../layouts/Screen.astro";
     import { toast } from "$src/components/toast";
     import { i18n } from "../i18n";
     import { chromeDevice } from "../constants";
-    import { addDeviceSuccessPage } from "$src/flows/addDevice/manage/addDeviceSuccess";
+    import { addDeviceSuccessPage } from "$src/flows/addDevice/addDeviceSuccess";
 
     addDeviceSuccessPage({
       i18n,