From 5e5fa88e38806e42af1f0dab70ed6b07c40df819 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Mon, 26 Oct 2026 13:17:29 -0600
Subject: [PATCH 1/5] fix(mosaic): keep MFA setup on the method list until it
 is ready

---
 .changeset/mfa-loading-fixes.md               |   2 +
 ...-profile-mfa-interactions.feature.test.tsx |  47 ++++++--
 ...er-profile-mfa-management.feature.test.tsx | 101 +++++++++++-----
 .../user-profile-mfa.feature.test.tsx         |   9 ++
 ...user-profile-add-authenticator.messages.ts |   2 -
 .../user-profile-add-authenticator.view.tsx   | 111 ++++++------------
 .../user-profile-add-mfa.dialog.tsx           |   5 +-
 .../user-profile-add-mfa.view.tsx             |  17 ++-
 .../user-profile-mfa-section.controller.ts    | 102 ++++++++--------
 .../user-profile-mfa-section.tsx              |  34 +++++-
 .../user-profile-mfa-section.view.tsx         |   4 +-
 .../user-profile-mfa-setup.view.tsx           |  44 ++++---
 .../src/stories/fixtures/user-profile-mfa.ts  |   3 +-
 13 files changed, 292 insertions(+), 189 deletions(-)
 create mode 100644 .changeset/mfa-loading-fixes.md

diff --git a/.changeset/mfa-loading-fixes.md b/.changeset/mfa-loading-fixes.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/mfa-loading-fixes.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-interactions.feature.test.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-interactions.feature.test.tsx
index 8afba0590d5..04a507a05b8 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-interactions.feature.test.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-interactions.feature.test.tsx
@@ -45,8 +45,8 @@ describe('User profile MFA interaction boundaries', () => {
     await user.click(screen.getByRole('button', { name: 'Add verification method' }));
     await user.click(screen.getByRole('button', { name: /Authenticator app/ }));
     await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Please try again.'));
-    const retry = screen.getByRole('button', { name: 'Try again' });
-    await waitFor(() => expect(retry).toHaveFocus());
+    const retry = screen.getByRole('button', { name: /Authenticator app/ });
+    expect(retry).toBeEnabled();
     await user.click(retry);
     expect(await screen.findByRole('img', { name: /QR code/i })).toBeVisible();
     const code = screen.getByRole('textbox', { name: 'Verification code' });
@@ -74,7 +74,7 @@ describe('User profile MFA interaction boundaries', () => {
     expect(fapi.mfa.totpCreations).toBe(1);
   });
 
-  it('disables Back while authenticator preparation is pending', async () => {
+  it('disables method choices and prevents duplicate authenticator preparation', async () => {
     await renderMfa();
     const held = holdRequests('post', '/v1/me/totp');
     const user = userEvent.setup();
@@ -83,9 +83,12 @@ describe('User profile MFA interaction boundaries', () => {
     await waitFor(() => expect(held.requests).toHaveLength(1));
     try {
       await waitFor(() => {
-        expect(screen.getByRole('status', { name: 'Preparing authenticator…' })).toBeVisible();
-        expect(screen.getByRole('button', { name: 'Back' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: /Authenticator app/ })).toHaveAttribute('aria-busy', 'true');
+        expect(screen.getByRole('button', { name: /Authenticator app/ })).toBeDisabled();
+        expect(screen.getByRole('button', { name: /SMS verification/ })).toBeDisabled();
       });
+      await user.click(screen.getByRole('button', { name: /Authenticator app/ }));
+      expect(held.requests).toHaveLength(1);
     } finally {
       held.release();
     }
@@ -202,9 +205,39 @@ describe('User profile MFA interaction boundaries', () => {
     await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('Please try again.'));
     expect(screen.queryByRole('button', { name: 'Copy and close' })).toBeNull();
     expect(screen.queryByRole('button', { name: 'Download' })).toBeNull();
-    const retry = screen.getByRole('button', { name: 'Try again' });
-    await waitFor(() => expect(retry).toHaveFocus());
+    const retry = screen.getByRole('button', { name: /Backup codes/ });
+    expect(retry).toBeEnabled();
+    const held = holdRequests('post', '/v1/me/backup_codes/');
     await user.click(retry);
+    await waitFor(() => expect(held.requests).toHaveLength(1));
+    try {
+      expect(retry).toBeDisabled();
+      expect(retry).toHaveAttribute('aria-busy', 'true');
+      expect(screen.queryByRole('list', { name: 'Backup codes' })).toBeNull();
+      await user.click(retry);
+      expect(held.requests).toHaveLength(1);
+    } finally {
+      held.release();
+    }
+    expect(await screen.findByText('CODE0100')).toBeVisible();
+  });
+
+  it('keeps the selected backup choice while the account refresh completes', async () => {
+    await renderMfa(fapiUser({ id: 'user_1', totp_enabled: true, two_factor_enabled: true }));
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Add verification method' }));
+    const held = holdRequests('get', '/v1/me');
+    await user.click(screen.getByRole('button', { name: /Backup codes/ }));
+    await waitFor(() => expect(held.requests).toHaveLength(1));
+    try {
+      expect(within(screen.getByRole('dialog')).getByRole('button', { name: /Backup codes/ })).toHaveAttribute(
+        'aria-busy',
+        'true',
+      );
+      expect(screen.queryByRole('list', { name: 'Backup codes' })).toBeNull();
+    } finally {
+      held.release();
+    }
     expect(await screen.findByText('CODE0100')).toBeVisible();
   });
 
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx
index 059eecc91c5..e0970fdfc37 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { describe, expect, it, vi } from 'vitest';
@@ -355,7 +355,7 @@ describe('User profile MFA management', () => {
     expect(clerk.user?.id).toBe('user_2');
   });
 
-  it('opens the backup-code surface while regeneration is pending', async () => {
+  it('keeps the profile visible until regenerated backup codes are ready', async () => {
     await renderMfa(
       fapiUser({ id: 'user_1', totp_enabled: true, backup_code_enabled: true, two_factor_enabled: true }),
     );
@@ -364,15 +364,13 @@ describe('User profile MFA management', () => {
     await openMenu(user, screen.getByRole('button', { name: 'Manage Backup codes' }));
     await user.click(screen.getByRole('menuitem', { name: 'Regenerate' }));
     await waitFor(() => expect(held.requests).toHaveLength(1));
-    await waitFor(() => expect(screen.getByRole('status', { name: 'Generating backup codes' })).toBeVisible());
-    for (const name of ['Print', 'Download']) {
-      expect(screen.getByRole('button', { name })).toBeVisible();
-      expect(screen.getByRole('button', { name })).toBeDisabled();
+    try {
+      expect(screen.queryByRole('dialog')).toBeNull();
+      expect(screen.getByRole('button', { name: 'Add verification method' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: 'Manage Backup codes' })).toBeVisible();
+    } finally {
+      held.release();
     }
-    expect(screen.getByRole('button', { name: 'Copy and close' })).toBeVisible();
-    expect(screen.getByRole('button', { name: 'Copy and close' })).toHaveAttribute('aria-disabled', 'true');
-    expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
-    held.release();
     await waitFor(() => expect(screen.getByText('CODE0100')).toBeVisible());
     expect(screen.getByRole('button', { name: 'Close' })).toBeVisible();
     for (const name of ['Print', 'Download', 'Copy and close']) {
@@ -380,6 +378,32 @@ describe('User profile MFA management', () => {
     }
   });
 
+  it('returns failed regeneration to the section and retries from the menu', async () => {
+    const fapi = await renderMfa(
+      fapiUser({ id: 'user_1', totp_enabled: true, backup_code_enabled: true, two_factor_enabled: true }),
+    );
+    const handlers = worker.listHandlers();
+    const held = holdRequests('post', '/v1/me/backup_codes/');
+    const user = userEvent.setup();
+    const trigger = screen.getByRole('button', { name: 'Manage Backup codes' });
+    await openMenu(user, trigger);
+    await user.click(screen.getByRole('menuitem', { name: 'Regenerate' }));
+    await waitFor(() => expect(held.requests).toHaveLength(1));
+    held.fail('action_blocked', 'Unable to create backup codes.');
+    await waitFor(() =>
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        "This action couldn't be completed. Please try again later or contact support if this persists.",
+      ),
+    );
+    expect(screen.queryByRole('dialog')).toBeNull();
+    await waitFor(() => expect(screen.queryByRole('menu')).toBeNull());
+    worker.resetHandlers(...handlers);
+    await openMenu(user, trigger);
+    await user.click(screen.getByRole('menuitem', { name: 'Regenerate' }));
+    expect(await screen.findByText('CODE0100')).toBeVisible();
+    expect(fapi.mfa.backupCodeCreations).toBe(1);
+  });
+
   it('uses fresh server codes for explicit regeneration', async () => {
     const fapi = await renderMfa(
       fapiUser({ id: 'user_1', totp_enabled: true, backup_code_enabled: true, two_factor_enabled: true }),
@@ -414,7 +438,21 @@ describe('User profile MFA management', () => {
 
     await regenerate(user);
     expect(await screen.findByText('Enter your current password to continue')).toBeVisible();
-    await user.type(screen.getByLabelText('Password'), 'hunter2{Enter}');
+    await waitFor(() => expect(screen.getByLabelText('Password')).toHaveFocus());
+    const refresh = holdRequests('get', '/v1/me');
+    try {
+      await user.keyboard('hunter2{Enter}');
+      await act(async () => {
+        await waitFor(() => expect(refresh.requests).toHaveLength(1));
+      });
+      await user.keyboard('{Escape}');
+      expect(screen.getByRole('dialog')).toHaveAttribute('data-open');
+      expect(screen.getByText('Enter your current password to continue')).toBeVisible();
+      expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
+      expect(screen.getByRole('button', { name: 'Continue' })).toHaveAttribute('aria-busy', 'true');
+    } finally {
+      refresh.release();
+    }
 
     const list = await screen.findByRole('list', { name: 'Backup codes' });
     expect(within(list).getAllByRole('listitem')).toHaveLength(10);
@@ -445,6 +483,7 @@ describe('User profile MFA management', () => {
     await regenerate(user);
     await screen.findByText('Enter your current password to continue');
     const dialog = screen.getByRole('dialog');
+    const handlers = worker.listHandlers();
     const replay = holdRequests('post', '/v1/me/backup_codes/');
     await user.type(screen.getByLabelText('Password'), 'hunter2{Enter}');
     await waitFor(() => expect(replay.requests).toHaveLength(1));
@@ -454,47 +493,53 @@ describe('User profile MFA management', () => {
     expect(dialog).toBeVisible();
 
     replay.fail('action_blocked', 'Unable to create backup codes.');
-    await waitFor(() => expect(within(screen.getByRole('dialog')).getByRole('alert')).toBeVisible());
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    expect(screen.getByRole('alert')).toHaveTextContent(
+      "This action couldn't be completed. Please try again later or contact support if this persists.",
+    );
     expect(screen.queryByRole('list', { name: 'Backup codes' })).toBeNull();
     expect(fapi.mfa.backupCodeCreations).toBe(0);
+    worker.resetHandlers(...handlers);
+    await regenerate(user);
+    await screen.findByRole('list', { name: 'Backup codes' });
+    expect(fapi.mfa.backupCodeCreations).toBe(1);
   });
 
-  it('cancels a loading verification when the backup-code dialog closes so regeneration can start again', async () => {
+  it('keeps the profile visible until verification preparation is ready', async () => {
     const fapi = await renderBackupCodesNeedingReverification();
     const start = holdRequests('post', '/v1/client/sessions/:id/verify');
     const user = userEvent.setup();
 
     await regenerate(user);
     await waitFor(() => expect(start.requests).toHaveLength(1));
-    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Close' }));
-    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
-    start.release();
-
-    await regenerate(user);
+    try {
+      expect(screen.queryByRole('dialog')).toBeNull();
+      expect(screen.getByRole('button', { name: 'Manage Backup codes' })).toBeVisible();
+    } finally {
+      start.release();
+    }
+    await screen.findByText('Enter your current password to continue');
+    await waitFor(() => expect(screen.getByRole('dialog')).toContainElement(document.activeElement));
+    await user.type(screen.getByLabelText('Password'), 'hunter2{Enter}');
     await screen.findByRole('list', { name: 'Backup codes' });
     expect(fapi.mfa.backupCodeCreations).toBe(1);
   });
 
-  it('keeps the backup-code dialog open until the first response so a verification can appear', async () => {
-    const fapi = await renderBackupCodesNeedingReverification();
+  it('keeps the profile visible until the first response can request verification', async () => {
+    await renderBackupCodesNeedingReverification();
     const first = holdRequests('post', '/v1/me/backup_codes/');
     const user = userEvent.setup();
 
     await regenerate(user);
     await waitFor(() => expect(first.requests).toHaveLength(1));
-    const dialog = screen.getByRole('dialog');
     try {
-      expect(within(dialog).queryByRole('button', { name: 'Close' })).toBeNull();
-      await user.keyboard('{Escape}');
-      expect(dialog).toBeVisible();
+      expect(screen.queryByRole('dialog')).toBeNull();
+      expect(screen.getByRole('button', { name: 'Manage Backup codes' })).toBeVisible();
     } finally {
       first.release();
     }
 
-    expect(await within(dialog).findByText('Enter your current password to continue')).toBeVisible();
-    await user.type(screen.getByLabelText('Password'), 'hunter2{Enter}');
-    await screen.findByRole('list', { name: 'Backup codes' });
-    expect(fapi.mfa.backupCodeCreations).toBe(1);
+    expect(await screen.findByText('Enter your current password to continue')).toBeVisible();
   });
 
   const startSms = async (user: ReturnType<typeof userEvent.setup>) => {
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa.feature.test.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa.feature.test.tsx
index 7c0bfc11bbc..ae581bee984 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa.feature.test.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa.feature.test.tsx
@@ -221,7 +221,16 @@ describe('User profile MFA', () => {
     const user = userEvent.setup();
     await user.click(screen.getByRole('button', { name: 'Add verification method' }));
     await user.click(screen.getByRole('button', { name: /SMS verification/ }));
+    const held = holdRequests('post', '/v1/me/phone_numbers/phone_1/prepare_verification');
     await user.click(screen.getByRole('button', { name: 'Continue' }));
+    await waitFor(() => expect(held.requests).toHaveLength(1));
+    try {
+      expect(screen.getByRole('combobox', { name: /Phone number/ })).toBeVisible();
+      expect(screen.getByRole('button', { name: 'Continue' })).toHaveAttribute('aria-busy', 'true');
+      expect(screen.queryByRole('textbox', { name: 'Verification code' })).toBeNull();
+    } finally {
+      held.release();
+    }
     expect(await screen.findByRole('textbox', { name: 'Verification code' })).toBeVisible();
     expect(fapi.mfa.phonePreparations).toEqual(['phone_1']);
     expect(fapi.mfa.phoneUpdates).toEqual([]);
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.messages.ts b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.messages.ts
index 227d0dd9705..fe6a6e9067f 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.messages.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.messages.ts
@@ -3,6 +3,4 @@ export const userProfileAddAuthenticatorMessages = {
   back: 'Back',
   verify: 'Verify',
   pending: 'Verifying code',
-  preparing: 'Preparing authenticator…',
-  retry: 'Try again',
 } as const;
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.view.tsx
index e254f6673d1..0f03eaf342d 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.view.tsx
@@ -5,16 +5,13 @@ import { Card } from '../../../components/card';
 import { Field } from '../../../components/field';
 import { useFlowAutoFocus } from '../../../components/flow';
 import { Otp } from '../../../components/otp';
-import { Text } from '../../../components/text';
 import { useMessages } from '../../../localization';
 import { Form } from '../../../primitives/form';
 import { styles } from './user-profile-add-authenticator.styles';
 import { UserProfileAuthenticatorSetupView } from './user-profile-authenticator-setup.view';
 
 export interface UserProfileAddAuthenticatorViewProps {
-  setup?: { secret: string; uri: string };
-  setupErrorMessage?: string;
-  onRetry: () => void;
+  setup: { secret: string; uri: string };
   onBack: () => void;
   code: string;
   onCodeChange: (value: string) => void;
@@ -26,8 +23,6 @@ export interface UserProfileAddAuthenticatorViewProps {
 export function UserProfileAddAuthenticatorView({
   onBack,
   setup,
-  setupErrorMessage,
-  onRetry,
   code,
   onCodeChange,
   onSubmit,
@@ -35,76 +30,49 @@ export function UserProfileAddAuthenticatorView({
   errorMessage,
 }: UserProfileAddAuthenticatorViewProps) {
   const m = useMessages('userProfileAddAuthenticator');
-  const setupMessages = useMessages('userProfileAuthenticatorSetup');
   const formId = useId();
   const actionRef = useFlowAutoFocus<HTMLButtonElement>();
   const inputRef = useFlowAutoFocus<HTMLInputElement>();
   const submitCode = (value: string) => {
-    if (setup && !isPending && value.length === 6) {
+    if (!isPending && value.length === 6) {
       onSubmit(value);
     }
   };
 
   return (
     <>
-      {setup ? (
-        <UserProfileAuthenticatorSetupView {...setup} />
-      ) : (
-        <>
-          <Card.Header>
-            <Card.Title>{setupMessages.title}</Card.Title>
-          </Card.Header>
-          <Card.Banner
-            role='alert'
-            color='negative'
-          >
-            {setupErrorMessage}
-          </Card.Banner>
-          {setupErrorMessage ? null : (
-            <Card.Content>
-              <Text
-                role='status'
-                aria-label={m.preparing}
-              >
-                {m.preparing}
-              </Text>
-            </Card.Content>
-          )}
-        </>
-      )}
-      {setup ? (
-        <Card.Content
-          xstyle={styles.verification}
-          render={
-            <Form
-              id={formId}
-              onSubmit={event => {
-                event.preventDefault();
-                submitCode(code);
-              }}
-            />
-          }
+      <UserProfileAuthenticatorSetupView {...setup} />
+      <Card.Content
+        xstyle={styles.verification}
+        render={
+          <Form
+            id={formId}
+            onSubmit={event => {
+              event.preventDefault();
+              submitCode(code);
+            }}
+          />
+        }
+      >
+        <Field.Root
+          required
+          disabled={isPending}
+          invalid={Boolean(errorMessage)}
+          xstyle={styles.field}
         >
-          <Field.Root
-            required
-            disabled={isPending}
-            invalid={Boolean(errorMessage)}
-            xstyle={styles.field}
-          >
-            <Field.Label xstyle={styles.label}>{m.codeLabel}</Field.Label>
-            <Otp
-              ref={inputRef}
-              name='code'
-              value={code}
-              onValueChange={onCodeChange}
-              onComplete={submitCode}
-            />
-            <Field.Message>
-              <Field.Error>{errorMessage}</Field.Error>
-            </Field.Message>
-          </Field.Root>
-        </Card.Content>
-      ) : null}
+          <Field.Label xstyle={styles.label}>{m.codeLabel}</Field.Label>
+          <Otp
+            ref={inputRef}
+            name='code'
+            value={code}
+            onValueChange={onCodeChange}
+            onComplete={submitCode}
+          />
+          <Field.Message>
+            <Field.Error>{errorMessage}</Field.Error>
+          </Field.Message>
+        </Field.Root>
+      </Card.Content>
       <Card.Footer>
         <Button
           type='button'
@@ -118,16 +86,15 @@ export function UserProfileAddAuthenticatorView({
         </Button>
         <SubmitButton
           ref={actionRef}
-          type={setup ? 'submit' : 'button'}
-          form={setup ? formId : undefined}
+          type='submit'
+          form={formId}
           fullWidth
-          isPending={setup ? isPending : !setupErrorMessage}
-          disabled={Boolean(setup) && code.length !== 6}
+          isPending={isPending}
+          disabled={code.length !== 6}
           focusableWhenDisabled
-          pendingLabel={setup ? m.pending : m.preparing}
-          onClick={setup ? undefined : onRetry}
+          pendingLabel={m.pending}
         >
-          {setup ? m.verify : setupErrorMessage ? m.retry : m.preparing}
+          {m.verify}
         </SubmitButton>
       </Card.Footer>
     </>
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.dialog.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.dialog.tsx
index 64784d426db..d236e6fed57 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.dialog.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.dialog.tsx
@@ -3,13 +3,14 @@ import { type ReactNode, type Ref, useRef } from 'react';
 
 import { Button } from '../../../components/button';
 import { Card } from '../../../components/card';
-import { Dialog } from '../../../components/dialog';
+import { Dialog, type DialogFocusTarget } from '../../../components/dialog';
 import { Icon } from '../../../components/icon';
 import { Plus } from '../../../icons/glyphs/plus';
 import { useMessages } from '../../../localization';
 
 export interface UserProfileAddMfaDialogProps {
   open: boolean;
+  initialFocus?: DialogFocusTarget;
   onOpenChange: (open: boolean) => void;
   children: ReactNode;
   disabled?: boolean;
@@ -21,6 +22,7 @@ export interface UserProfileAddMfaDialogProps {
 
 export function UserProfileAddMfaDialog({
   open,
+  initialFocus,
   onOpenChange,
   children,
   disabled,
@@ -62,6 +64,7 @@ export function UserProfileAddMfaDialog({
       ) : null}
       <Dialog.Popup
         variant='card'
+        initialFocus={initialFocus}
         finalFocus={addButtonRef}
       >
         <Card.Root
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.view.tsx
index 51415a3af39..bcfae640950 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-mfa.view.tsx
@@ -2,6 +2,7 @@ import { Card } from '../../../components/card';
 import { useFlowAutoFocus } from '../../../components/flow';
 import { Icon, IconFrame } from '../../../components/icon';
 import { Item } from '../../../components/item';
+import { Spinner } from '../../../components/spinner';
 import { ChevronRight } from '../../../icons/glyphs/chevron-right';
 import { Numbers } from '../../../icons/glyphs/numbers';
 import { SecurityLockSquare } from '../../../icons/glyphs/security-lock-square';
@@ -10,6 +11,8 @@ import { useMessages } from '../../../localization';
 import type { UserProfileMfaAddableMethod } from './user-profile-mfa-section.view';
 
 export interface UserProfileAddMfaViewProps {
+  pendingMethod?: 'authenticator' | 'backup-codes';
+  errorMessage?: string;
   methods: readonly UserProfileMfaAddableMethod[];
   onSelect: (type: UserProfileMfaAddableMethod) => void;
 }
@@ -20,7 +23,7 @@ const icons = {
   'backup-codes': Numbers,
 } as const;
 
-export function UserProfileAddMfaView({ methods, onSelect }: UserProfileAddMfaViewProps) {
+export function UserProfileAddMfaView({ methods, onSelect, pendingMethod, errorMessage }: UserProfileAddMfaViewProps) {
   const m = useMessages('userProfileMfa');
   const firstMethodRef = useFlowAutoFocus<HTMLDivElement>();
   return (
@@ -30,6 +33,12 @@ export function UserProfileAddMfaView({ methods, onSelect }: UserProfileAddMfaVi
         <Card.Description>{m.addDialog.description}</Card.Description>
       </Card.Header>
       <Card.Content>
+        <Card.Banner
+          role='alert'
+          color='negative'
+        >
+          {errorMessage}
+        </Card.Banner>
         <Item.Group variant='outline'>
           {methods.map((type, index) => (
             <Item.Root
@@ -39,6 +48,8 @@ export function UserProfileAddMfaView({ methods, onSelect }: UserProfileAddMfaVi
               render={
                 <button
                   type='button'
+                  disabled={pendingMethod !== undefined}
+                  aria-busy={pendingMethod === type}
                   onClick={() => onSelect(type)}
                 />
               }
@@ -55,9 +66,7 @@ export function UserProfileAddMfaView({ methods, onSelect }: UserProfileAddMfaVi
                 <Item.Label>{m.methods[type]}</Item.Label>
                 <Item.Description>{m.addDialog.methods[type]}</Item.Description>
               </Item.Content>
-              <Item.Actions>
-                <Icon glyph={ChevronRight} />
-              </Item.Actions>
+              <Item.Actions>{pendingMethod === type ? <Spinner /> : <Icon glyph={ChevronRight} />}</Item.Actions>
             </Item.Root>
           ))}
         </Item.Group>
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts
index cb49e5444e5..59b2ea9de24 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts
@@ -15,14 +15,13 @@ type ReadyModel = Extract<UserProfileMfaModel, { status: 'ready' }>;
 type AuthenticatorSetup = { secret: string; uri: string };
 type MfaAction = 'prepareAuthenticator' | 'verifyAuthenticator' | 'sms' | 'resend' | 'generate' | 'copy';
 type MfaFlow =
-  | { kind: 'closed' }
-  | { kind: 'select' }
+  | { kind: 'closed'; error?: ErrorDescription }
+  | { kind: 'select'; methods: readonly UserProfileMfaAddableMethod[]; error?: ErrorDescription }
   | {
       kind: 'authenticator';
-      setup?: AuthenticatorSetup;
+      setup: AuthenticatorSetup;
       code: string;
       error?: ErrorDescription;
-      setupError?: ErrorDescription;
     }
   | {
       kind: 'sms';
@@ -48,11 +47,16 @@ interface MfaContext {
 }
 
 type MfaEvent =
-  | { type: 'OPEN' }
+  | { type: 'OPEN'; methods: readonly UserProfileMfaAddableMethod[] }
   | { type: 'CLOSE' }
-  | { type: 'SELECT'; method: UserProfileMfaAddableMethod; phoneId: string; hasPhones: boolean }
+  | {
+      type: 'SELECT';
+      method: Exclude<UserProfileMfaAddableMethod, 'backup-codes'>;
+      phoneId: string;
+      hasPhones: boolean;
+    }
   | { type: 'ADD_PHONE' }
-  | { type: 'BACK'; hasPhones: boolean }
+  | { type: 'BACK'; hasPhones: boolean; methods: readonly UserProfileMfaAddableMethod[] }
   | { type: 'EDIT_PHONE_ID'; value: string }
   | { type: 'EDIT_PHONE_NUMBER'; value: string }
   | { type: 'EDIT_CODE'; value: string }
@@ -80,7 +84,7 @@ const mfaMachine = createMachine({
   states: {
     idle: {
       on: {
-        OPEN: { actions: assign(() => ({ flow: { kind: 'select' } })) },
+        OPEN: { actions: assign((_, event) => ({ flow: { kind: 'select', methods: event.methods } })) },
         CLOSE: {
           actions: assign(() => ({ flow: { kind: 'closed' }, savedSetup: undefined, resendSeconds: 0 })),
         },
@@ -97,9 +101,9 @@ const mfaMachine = createMachine({
                     phoneNumber: '',
                     code: '',
                   }
-                : event.method === 'backup-codes'
-                  ? { kind: 'backup', codes: [] }
-                  : { kind: 'authenticator', setup: context.savedSetup, code: '' },
+                : context.savedSetup
+                  ? { kind: 'authenticator', setup: context.savedSetup, code: '' }
+                  : context.flow,
           })),
         },
         ADD_PHONE: {
@@ -130,7 +134,7 @@ const mfaMachine = createMachine({
               return { flow: { ...flow, step: 'select', origin: 'existing', phoneId: undefined, error: undefined } };
             }
             return {
-              flow: { kind: 'select' },
+              flow: { kind: 'select', methods: event.methods },
               savedSetup: flow.kind === 'authenticator' ? flow.setup : context.savedSetup,
             };
           }),
@@ -173,7 +177,8 @@ const mfaMachine = createMachine({
         },
         RUN: {
           target: 'busy',
-          actions: assign((_, event) => ({
+          actions: assign((context, event) => ({
+            flow: { ...context.flow, error: undefined },
             pending: event.key,
             dismissed: false,
             run: event.run,
@@ -185,7 +190,9 @@ const mfaMachine = createMachine({
     },
     busy: {
       on: {
-        OPEN: { actions: assign(() => ({ flow: { kind: 'select' }, dismissed: true })) },
+        OPEN: {
+          actions: assign((_, event) => ({ flow: { kind: 'select', methods: event.methods }, dismissed: true })),
+        },
         CLOSE: {
           actions: assign(() => ({
             flow: { kind: 'closed' },
@@ -244,18 +251,9 @@ const mfaMachine = createMachine({
               if (isReverificationCancelledError(event.error)) {
                 return { flow: { kind: 'closed' }, pending: undefined };
               }
-              if (flow.kind !== 'authenticator' && flow.kind !== 'sms' && flow.kind !== 'backup') {
-                return { pending: undefined };
-              }
               const error = toLocalizableError(event.error);
               return {
-                flow:
-                  flow.kind === 'authenticator'
-                    ? {
-                        ...flow,
-                        ...(context.pending === 'prepareAuthenticator' ? { setupError: error } : { error }),
-                      }
-                    : { ...flow, error },
+                flow: { ...flow, error },
                 pending: undefined,
               };
             }),
@@ -283,7 +281,7 @@ function createAuthenticatorActions(model: ReadyModel, flow: MfaFlow, run: RunMf
 
   const verifyAuthenticator = (code: string) => {
     const verify = model.verifyAuthenticator;
-    if (!verify || flow.kind !== 'authenticator' || !flow.setup) {
+    if (!verify || flow.kind !== 'authenticator') {
       return;
     }
     void run('verifyAuthenticator', async () => {
@@ -351,7 +349,6 @@ function createBackupCodeActions(
     if (!generate) {
       return;
     }
-    send({ type: 'SELECT', method: 'backup-codes', phoneId: '', hasPhones: false });
     void run('generate', async () => {
       const codes = await generate();
       return { kind: 'backup', codes };
@@ -418,7 +415,6 @@ interface MfaSetupActions {
   close: () => void;
   submitSms: (code?: string) => void;
   resendSms: () => void;
-  prepareAuthenticator: () => void;
   verifyAuthenticator: (code: string) => void;
   generateBackupCodes: () => void;
   copy: () => void;
@@ -435,6 +431,7 @@ function createSetupProps(
   reverification: ReverificationController,
 ): UserProfileMfaSetupViewProps {
   const flow = context.flow;
+  const errorMessage = flow.error ? errorText(flow.error) : undefined;
   const sms = flow.kind === 'sms' ? flow : undefined;
   const authenticator = flow.kind === 'authenticator' ? flow : undefined;
   const backup = flow.kind === 'backup' ? flow : undefined;
@@ -452,8 +449,15 @@ function createSetupProps(
   }
   return {
     step,
+    pendingMethod:
+      context.pending === 'prepareAuthenticator'
+        ? 'authenticator'
+        : context.pending === 'generate'
+          ? 'backup-codes'
+          : undefined,
+    errorMessage,
     reverification,
-    methods: model.addableMethods,
+    methods: flow.kind === 'select' ? flow.methods : model.addableMethods,
     onSelect: actions.select,
     onBack: actions.back,
     onCancel: actions.close,
@@ -473,18 +477,18 @@ function createSetupProps(
       isPending: context.pending === 'sms',
       isResending: context.pending === 'resend',
       resendSeconds: context.resendSeconds,
-      errorMessage: sms?.error ? errorText(sms.error) : undefined,
-    },
-    authenticator: {
-      setup: authenticator?.setup,
-      setupErrorMessage: authenticator?.setupError ? errorText(authenticator.setupError) : undefined,
-      onRetry: actions.prepareAuthenticator,
-      code: authenticator?.code ?? '',
-      onCodeChange: value => send({ type: 'EDIT_CODE', value }),
-      onSubmit: actions.verifyAuthenticator,
-      isPending: context.pending === 'prepareAuthenticator' || context.pending === 'verifyAuthenticator',
-      errorMessage: authenticator?.error ? errorText(authenticator.error) : undefined,
+      errorMessage,
     },
+    authenticator: authenticator
+      ? {
+          setup: authenticator.setup,
+          code: authenticator.code,
+          onCodeChange: value => send({ type: 'EDIT_CODE', value }),
+          onSubmit: actions.verifyAuthenticator,
+          isPending: context.pending === 'verifyAuthenticator',
+          errorMessage,
+        }
+      : undefined,
     backupCodes: {
       codes: backup?.codes ?? [],
       onRetry: actions.generateBackupCodes,
@@ -492,7 +496,7 @@ function createSetupProps(
       onDownload: actions.download,
       onPrint: actions.print,
       pendingAction: context.pending === 'generate' || context.pending === 'copy' ? context.pending : undefined,
-      errorMessage: backup?.error ? errorText(backup.error) : undefined,
+      errorMessage,
     },
   };
 }
@@ -512,7 +516,8 @@ export function useUserProfileMfaController(model: ReadyModel) {
   };
   const { resendSeconds } = context;
   const flow = context.flow;
-  const dialogOpen = flow.kind !== 'closed';
+  const dialogOpen =
+    flow.kind !== 'closed' || (context.pending === 'generate' && model.backupCodesReverification.visible);
   useEffect(() => {
     if (!dialogOpen || resendSeconds === 0) {
       return;
@@ -531,18 +536,18 @@ export function useUserProfileMfaController(model: ReadyModel) {
   );
 
   const close = () => send({ type: 'CLOSE' });
-  const back = () => send({ type: 'BACK', hasPhones: model.phones.length > 0 });
+  const back = () => send({ type: 'BACK', hasPhones: model.phones.length > 0, methods: model.addableMethods });
 
   const select = (method: UserProfileMfaAddableMethod) => {
     if (isBusy) {
       return;
     }
-    send({ type: 'SELECT', method, phoneId: model.phones[0]?.id ?? '', hasPhones: model.phones.length > 0 });
     if (method === 'authenticator' && !context.savedSetup) {
       prepareAuthenticator();
-    }
-    if (method === 'backup-codes') {
+    } else if (method === 'backup-codes') {
       generateBackupCodes();
+    } else {
+      send({ type: 'SELECT', method, phoneId: model.phones[0]?.id ?? '', hasPhones: model.phones.length > 0 });
     }
   };
 
@@ -561,7 +566,6 @@ export function useUserProfileMfaController(model: ReadyModel) {
       close,
       submitSms,
       resendSms,
-      prepareAuthenticator,
       verifyAuthenticator,
       generateBackupCodes,
       copy,
@@ -576,6 +580,7 @@ export function useUserProfileMfaController(model: ReadyModel) {
     methods: [...model.methods],
     addableMethods: model.addableMethods,
     onRegenerateBackupCodes: model.generateBackupCodes ? generateBackupCodes : undefined,
+    regenerateError: flow.kind === 'closed' && flow.error ? errorText(flow.error) : undefined,
     onRemove: model.remove,
     onSetDefault: model.setDefault,
     removeReverification: model.removeReverification,
@@ -583,7 +588,6 @@ export function useUserProfileMfaController(model: ReadyModel) {
   };
 
   const showAddTrigger = model.addableMethods.length > 0;
-  const reverifying = setupProps.step === 'verify';
   const hasPendingReverification = context.pending !== undefined && REVERIFIABLE_ACTIONS.includes(context.pending);
   const canClose = !hasPendingReverification || Boolean(reverification.onCancel);
 
@@ -591,7 +595,7 @@ export function useUserProfileMfaController(model: ReadyModel) {
     dialogOpen,
     showAddTrigger,
     showAddControl: showAddTrigger || dialogOpen,
-    reverifying,
+    isPending: isBusy,
     onDialogOpenChange: (open: boolean) => {
       if (!open && !canClose) {
         return;
@@ -599,7 +603,7 @@ export function useUserProfileMfaController(model: ReadyModel) {
       if (!open && hasPendingReverification) {
         reverification.onCancel?.();
       }
-      send({ type: open ? 'OPEN' : 'CLOSE' });
+      send(open ? { type: 'OPEN', methods: model.addableMethods } : { type: 'CLOSE' });
     },
     showCloseButton: canClose,
     sectionProps,
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx
index ac404b503a2..932f01e88f6 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useRef, useState } from 'react';
 
 import { UserProfileAddMfaDialog } from './user-profile-add-mfa.dialog';
 import { useUserProfileMfaController } from './user-profile-mfa-section.controller';
@@ -33,20 +33,42 @@ export function mfaSectionNode(model: UserProfileMfaModel, fallback: ReactNode =
 
 function MfaEditor({ model }: { model: Extract<UserProfileMfaModel, { status: 'ready' }> }) {
   const controller = useUserProfileMfaController(model);
+  const initialFocusRef = useRef<HTMLElement>(null);
+  const [lastShownStep, setLastShownStep] = useState(controller.setupProps.step);
+  const step = controller.isPending && lastShownStep === 'verify' ? 'verify' : controller.setupProps.step;
+  if (step !== lastShownStep) {
+    setLastShownStep(step);
+  }
+  const reverifying = step === 'verify';
+  const onOpenChange = (open: boolean) => {
+    if (!open && controller.showCloseButton) {
+      setLastShownStep('select');
+    }
+    controller.onDialogOpenChange(open);
+  };
 
   return (
     <UserProfileMfaSectionView
       {...controller.sectionProps}
       addControl={
-        controller.showAddControl ? (
+        controller.showAddControl || reverifying ? (
           <UserProfileAddMfaDialog
-            open={controller.dialogOpen}
-            onOpenChange={controller.onDialogOpenChange}
+            open={controller.dialogOpen || reverifying}
+            disabled={controller.isPending}
+            onOpenChange={onOpenChange}
             hideTrigger={!controller.showAddTrigger}
-            reverifying={controller.reverifying}
+            reverifying={reverifying}
             showCloseButton={controller.showCloseButton}
+            initialFocus={
+              reverifying && controller.setupProps.reverification.status !== 'error' ? initialFocusRef : undefined
+            }
           >
-            <UserProfileMfaSetupView {...controller.setupProps} />
+            <UserProfileMfaSetupView
+              {...controller.setupProps}
+              step={step}
+              initialFocusRef={initialFocusRef}
+              onReverificationClose={() => onOpenChange(false)}
+            />
           </UserProfileAddMfaDialog>
         ) : undefined
       }
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.view.tsx
index 4644ff977e2..bbd9969879d 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.view.tsx
@@ -22,6 +22,7 @@ export interface UserProfileMfaSectionViewProps {
   addControl?: ReactNode;
   onAdd?: (type: UserProfileMfaAddableMethod) => void;
   onRegenerateBackupCodes?: () => void;
+  regenerateError?: string;
   onRemove?: (id: string) => void | Promise<void>;
   onSetDefault?: (id: string) => void | Promise<void>;
   removeReverification?: ReverificationController;
@@ -35,6 +36,7 @@ export function UserProfileMfaSectionView({
   addControl,
   onAdd,
   onRegenerateBackupCodes,
+  regenerateError,
   onRemove,
   onSetDefault,
   removeReverification,
@@ -84,7 +86,7 @@ export function UserProfileMfaSectionView({
           />
         ))}
       </UserProfileSecurityList>
-      <Section.Error>{controller.defaultError}</Section.Error>
+      <Section.Error>{regenerateError ?? controller.defaultError}</Section.Error>
       {controller.remove ? (
         <Confirmation
           controller={controller.remove}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-setup.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-setup.view.tsx
index 12541dbb03b..7b4d41d4077 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-setup.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-setup.view.tsx
@@ -1,3 +1,6 @@
+import { useMergeRefs } from '@floating-ui/react';
+import type { Ref } from 'react';
+
 import { Flow, useFlowAutoFocus } from '../../../components/flow';
 import type { ReverificationController } from '../../reverification';
 import { Reverification } from '../../reverification';
@@ -14,19 +17,19 @@ import type { UserProfileMfaAddableMethod } from './user-profile-mfa-section.typ
 export interface UserProfileMfaSetupViewProps extends UserProfileAddMfaViewProps {
   step: UserProfileMfaAddableMethod | 'select' | 'verify';
   reverification: ReverificationController;
+  initialFocusRef?: Ref<HTMLElement>;
+  onReverificationClose?: () => void;
   sms: UserProfileAddSmsViewProps;
-  authenticator: Omit<UserProfileAddAuthenticatorViewProps, 'onBack'>;
+  authenticator?: Omit<UserProfileAddAuthenticatorViewProps, 'onBack'>;
   backupCodes: Omit<UserProfileBackupCodesViewProps, 'onCancel'>;
   onBack: () => void;
   onCancel: () => void;
 }
 
 export function UserProfileMfaSetupView(props: UserProfileMfaSetupViewProps) {
-  const step = props.step === 'authenticator' && props.authenticator.setup ? 'authenticator-verify' : props.step;
-
   return (
     <Flow.Root
-      value={step}
+      value={props.step}
       direction={props.step === 'select' ? -1 : 1}
       state={props}
     >
@@ -35,6 +38,8 @@ export function UserProfileMfaSetupView(props: UserProfileMfaSetupViewProps) {
           <Flow.Step ids={['select']}>
             <UserProfileAddMfaView
               methods={current.methods}
+              pendingMethod={current.pendingMethod}
+              errorMessage={current.errorMessage}
               onSelect={current.onSelect}
             />
           </Flow.Step>
@@ -42,16 +47,12 @@ export function UserProfileMfaSetupView(props: UserProfileMfaSetupViewProps) {
             <UserProfileAddSmsView {...current.sms} />
           </Flow.Step>
           <Flow.Step ids={['authenticator']}>
-            <UserProfileAddAuthenticatorView
-              {...current.authenticator}
-              onBack={current.onBack}
-            />
-          </Flow.Step>
-          <Flow.Step ids={['authenticator-verify']}>
-            <UserProfileAddAuthenticatorView
-              {...current.authenticator}
-              onBack={current.onBack}
-            />
+            {current.authenticator ? (
+              <UserProfileAddAuthenticatorView
+                {...current.authenticator}
+                onBack={current.onBack}
+              />
+            ) : null}
           </Flow.Step>
           <Flow.Step ids={['backup-codes']}>
             <UserProfileBackupCodesView
@@ -60,7 +61,11 @@ export function UserProfileMfaSetupView(props: UserProfileMfaSetupViewProps) {
             />
           </Flow.Step>
           <Flow.Step ids={['verify']}>
-            <ReverifyStep controller={current.reverification} />
+            <ReverifyStep
+              controller={current.reverification}
+              initialFocusRef={current.initialFocusRef}
+              onClose={current.onReverificationClose}
+            />
           </Flow.Step>
         </>
       )}
@@ -68,8 +73,13 @@ export function UserProfileMfaSetupView(props: UserProfileMfaSetupViewProps) {
   );
 }
 
-function ReverifyStep(props: { controller: ReverificationController }) {
-  const initialFocusRef = useFlowAutoFocus<HTMLElement>();
+function ReverifyStep(props: {
+  controller: ReverificationController;
+  initialFocusRef?: Ref<HTMLElement>;
+  onClose?: () => void;
+}) {
+  const flowFocusRef = useFlowAutoFocus<HTMLElement>();
+  const initialFocusRef = useMergeRefs([flowFocusRef, props.initialFocusRef]);
 
   return (
     <Reverification
diff --git a/packages/swingset/src/stories/fixtures/user-profile-mfa.ts b/packages/swingset/src/stories/fixtures/user-profile-mfa.ts
index d51fc6d64b8..38a3ff41d70 100644
--- a/packages/swingset/src/stories/fixtures/user-profile-mfa.ts
+++ b/packages/swingset/src/stories/fixtures/user-profile-mfa.ts
@@ -81,7 +81,7 @@ export function useUserProfileMfaFixture({
     onBack: () => void;
   };
   section: UserProfileMfaSectionViewProps;
-  authenticator: UserProfileMfaSetupViewProps['authenticator'];
+  authenticator: NonNullable<UserProfileMfaSetupViewProps['authenticator']>;
   sms: UserProfileMfaSetupViewProps['sms'];
   backupCodes: UserProfileMfaSetupViewProps['backupCodes'];
 } {
@@ -358,7 +358,6 @@ export function useUserProfileMfaFixture({
     },
     authenticator: {
       setup: authenticatorSetup,
-      onRetry: () => undefined,
       code,
       onCodeChange,
       onSubmit: value => void verifyAuthenticator(value),

From 7ec98f0444929611d2ac514efedb7e08fef7d344 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Mon, 26 Oct 2026 13:36:00 -0600
Subject: [PATCH 2/5] fix(mosaic): hold MFA reverification through the profile
 refresh

---
 .../user-profile-mfa-section.model.ts         | 29 ++++++++++---------
 .../user-profile-mfa-section.tsx              | 24 ++++-----------
 2 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts
index 8c712130fb0..be968ca8e62 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts
@@ -111,7 +111,6 @@ function createSmsActions(
   environment: EnvironmentResource,
   userId: string,
   sessionId: string,
-  refresh: () => Promise<void>,
   calls: {
     makeDefault: (phone: PhoneNumberResource) => Promise<unknown>;
     createPhone: (current: UserResource, phoneNumber: string) => Promise<PhoneNumberResource>;
@@ -149,7 +148,6 @@ function createSmsActions(
         throw phoneUnavailable();
       }
       const result = await calls.reservePhone(phone);
-      await refresh().catch(() => undefined);
       return { status: 'complete', backupCodes: result.backupCodes ?? [] };
     },
     resendSms: async phoneId => {
@@ -161,7 +159,6 @@ function createSmsActions(
         throw phoneUnavailable();
       }
       await calls.makeDefault(phone);
-      await refresh().catch(() => undefined);
     },
   };
 }
@@ -194,18 +191,23 @@ export function useUserProfileMfaModel(): UserProfileMfaModel {
   const { isLoaded: sessionLoaded, session } = useSession();
   const environment = useMosaicEnvironment();
   const [removeMethod, removeReverification] = useReverificationFlow(removeMfaMethod);
-  const [makeDefault, setDefaultReverification] = useReverificationFlow((phone: PhoneNumberResource) =>
-    phone.makeDefaultSecondFactor(),
-  );
-  const [createBackupCode, backupCodesReverification] = useReverificationFlow((current: UserResource) =>
-    current.createBackupCode(),
-  );
+  const [makeDefault, setDefaultReverification] = useReverificationFlow(async (phone: PhoneNumberResource) => {
+    await phone.makeDefaultSecondFactor();
+    await clerk.user?.reload().catch(() => undefined);
+  });
+  const [createBackupCode, backupCodesReverification] = useReverificationFlow(async (current: UserResource) => {
+    const result = await current.createBackupCode();
+    await current.reload().catch(() => undefined);
+    return result;
+  });
   const [createPhone, createPhoneReverification] = useReverificationFlow((current: UserResource, phoneNumber: string) =>
     current.createPhoneNumber({ phoneNumber }),
   );
-  const [reservePhone, enrollSmsReverification] = useReverificationFlow((phone: PhoneNumberResource) =>
-    phone.setReservedForSecondFactor({ reserved: true }),
-  );
+  const [reservePhone, enrollSmsReverification] = useReverificationFlow(async (phone: PhoneNumberResource) => {
+    const result = await phone.setReservedForSecondFactor({ reserved: true });
+    await clerk.user?.reload().catch(() => undefined);
+    return result;
+  });
   const [createTotp, authenticatorReverification] = useReverificationFlow((current: UserResource) =>
     current.createTOTP(),
   );
@@ -235,7 +237,7 @@ export function useUserProfileMfaModel(): UserProfileMfaModel {
   };
 
   const smsActions = smsEnabled
-    ? createSmsActions(clerk, environment, userId, sessionId, refresh, { makeDefault, createPhone, reservePhone })
+    ? createSmsActions(clerk, environment, userId, sessionId, { makeDefault, createPhone, reservePhone })
     : {};
 
   return {
@@ -275,7 +277,6 @@ export function useUserProfileMfaModel(): UserProfileMfaModel {
               throw new ClerkRuntimeError('Set up a verification method first.', { code: 'mfa_setup_factor_first' });
             }
             const result = await createBackupCode(current);
-            await refresh().catch(() => undefined);
             return result.codes;
           }
         : undefined,
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx
index 932f01e88f6..8e7ae0d9df0 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useRef, useState } from 'react';
+import { type ReactNode, useRef } from 'react';
 
 import { UserProfileAddMfaDialog } from './user-profile-add-mfa.dialog';
 import { useUserProfileMfaController } from './user-profile-mfa-section.controller';
@@ -34,28 +34,17 @@ export function mfaSectionNode(model: UserProfileMfaModel, fallback: ReactNode =
 function MfaEditor({ model }: { model: Extract<UserProfileMfaModel, { status: 'ready' }> }) {
   const controller = useUserProfileMfaController(model);
   const initialFocusRef = useRef<HTMLElement>(null);
-  const [lastShownStep, setLastShownStep] = useState(controller.setupProps.step);
-  const step = controller.isPending && lastShownStep === 'verify' ? 'verify' : controller.setupProps.step;
-  if (step !== lastShownStep) {
-    setLastShownStep(step);
-  }
-  const reverifying = step === 'verify';
-  const onOpenChange = (open: boolean) => {
-    if (!open && controller.showCloseButton) {
-      setLastShownStep('select');
-    }
-    controller.onDialogOpenChange(open);
-  };
+  const reverifying = controller.setupProps.step === 'verify';
 
   return (
     <UserProfileMfaSectionView
       {...controller.sectionProps}
       addControl={
-        controller.showAddControl || reverifying ? (
+        controller.showAddControl ? (
           <UserProfileAddMfaDialog
-            open={controller.dialogOpen || reverifying}
+            open={controller.dialogOpen}
             disabled={controller.isPending}
-            onOpenChange={onOpenChange}
+            onOpenChange={controller.onDialogOpenChange}
             hideTrigger={!controller.showAddTrigger}
             reverifying={reverifying}
             showCloseButton={controller.showCloseButton}
@@ -65,9 +54,8 @@ function MfaEditor({ model }: { model: Extract<UserProfileMfaModel, { status: 'r
           >
             <UserProfileMfaSetupView
               {...controller.setupProps}
-              step={step}
               initialFocusRef={initialFocusRef}
-              onReverificationClose={() => onOpenChange(false)}
+              onReverificationClose={() => controller.onDialogOpenChange(false)}
             />
           </UserProfileAddMfaDialog>
         ) : undefined

From b0d4c118b188ec7b29089670e6d90baf08b1cbf8 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Mon, 26 Oct 2026 13:42:31 -0600
Subject: [PATCH 3/5] test(mosaic): cover holding SMS reservation
 reverification through refresh

---
 ...er-profile-mfa-management.feature.test.tsx | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx
index e0970fdfc37..22d797d7257 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx
@@ -562,6 +562,34 @@ describe('User profile MFA management', () => {
     expect(fapi.mfa.phoneUpdates).toContainEqual({ id: 'phone_1', reserved: true, default: undefined });
   });
 
+  it('keeps session verification on screen until the SMS reservation refresh completes', async () => {
+    await renderMfa(undefined, mfaEnvironment(), { verification: { secrets: { password: 'hunter2' } } });
+    demandReverificationOnce('/v1/me/phone_numbers/phone_1');
+    const user = userEvent.setup();
+
+    await startSms(user);
+    await user.click(screen.getByRole('button', { name: 'Continue' }));
+    expect(await screen.findByText('Enter your current password to continue')).toBeVisible();
+    await waitFor(() => expect(screen.getByLabelText('Password')).toHaveFocus());
+    const refresh = holdRequests('get', '/v1/me');
+    try {
+      await user.keyboard('hunter2{Enter}');
+      await act(async () => {
+        await waitFor(() => expect(refresh.requests).toHaveLength(1));
+      });
+      await user.keyboard('{Escape}');
+      expect(screen.getByRole('dialog')).toHaveAttribute('data-open');
+      expect(screen.getByText('Enter your current password to continue')).toBeVisible();
+      expect(screen.queryByRole('button', { name: 'Close' })).toBeNull();
+      expect(screen.getByRole('button', { name: 'Continue' })).toHaveAttribute('aria-busy', 'true');
+      expect(screen.queryByText('CODE0001')).toBeNull();
+    } finally {
+      refresh.release();
+    }
+
+    expect(await screen.findByText('CODE0001')).toBeVisible();
+  });
+
   it('keeps SMS code verification open until its reservation challenge can be cancelled', async () => {
     const unverified = fapiPhoneNumber({ ...phone, verification: { ...phone.verification, status: 'unverified' } });
     const fapi = await renderMfa(fapiUser({ id: 'user_1', phone_numbers: [unverified] }), mfaEnvironment(), {

From 21b4943c19522b08a5c9e9ec49f70e6fb3f0e20d Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Mon, 26 Oct 2026 13:57:16 -0600
Subject: [PATCH 4/5] fix(mosaic): send the new SMS MFA phone code before
 leaving reverification

---
 ...er-profile-mfa-management.feature.test.tsx | 30 +++++++++++++++++++
 .../user-profile-mfa-section.controller.ts    |  5 +++-
 .../user-profile-mfa-section.model.ts         | 13 ++++++--
 .../user-profile-mfa-section.types.ts         |  2 +-
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx
index 22d797d7257..259b3c525e9 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/__tests__/user-profile-mfa-management.feature.test.tsx
@@ -640,6 +640,36 @@ describe('User profile MFA management', () => {
     expect(await screen.findByRole('button', { name: 'Verify' })).toBeVisible();
   });
 
+  it('keeps session verification on screen until the new phone code is sent', async () => {
+    const fapi = await renderMfa(fapiUser({ id: 'user_1' }), mfaEnvironment(), {
+      verification: { secrets: { password: 'hunter2' } },
+    });
+    demandReverificationOnce('/v1/me/phone_numbers');
+    const user = userEvent.setup();
+
+    await startSms(user);
+    await user.type(screen.getByRole('textbox', { name: 'Phone' }), '5555550303');
+    await user.click(screen.getByRole('button', { name: 'Send code' }));
+    expect(await screen.findByText('Enter your current password to continue')).toBeVisible();
+    await waitFor(() => expect(screen.getByLabelText('Password')).toHaveFocus());
+    const prepare = holdRequests('post', '/v1/me/phone_numbers/:id/prepare_verification');
+    try {
+      await user.keyboard('hunter2{Enter}');
+      await act(async () => {
+        await waitFor(() => expect(prepare.requests).toHaveLength(1));
+      });
+      expect(screen.getByText('Enter your current password to continue')).toBeVisible();
+      expect(screen.getByRole('button', { name: 'Continue' })).toHaveAttribute('aria-busy', 'true');
+      expect(screen.queryByRole('textbox', { name: 'Phone' })).toBeNull();
+    } finally {
+      prepare.release();
+    }
+
+    expect(await screen.findByRole('textbox', { name: 'Verification code' })).toBeVisible();
+    expect(screen.queryByRole('textbox', { name: 'Phone' })).toBeNull();
+    expect(fapi.mfa.phonePreparations).toHaveLength(1);
+  });
+
   it('lets the user cancel SMS MFA verification quietly and add the method again', async () => {
     const fapi = await renderMfa(undefined, mfaEnvironment(), { verification: { secrets: { password: 'hunter2' } } });
     demandReverificationOnce('/v1/me/phone_numbers/phone_1');
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts
index 59b2ea9de24..090de297d26 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts
@@ -307,9 +307,12 @@ function createSmsActions(model: ReadyModel, flow: MfaFlow, resendSeconds: numbe
         if (current.step !== 'phone' || !findOrCreatePhone) {
           return current;
         }
-        const phone = await findOrCreatePhone(current.phoneNumber);
+        const { phone, codeSent } = await findOrCreatePhone(current.phoneNumber);
         phoneId = phone.id;
         send({ type: 'PHONE_RESOLVED', id: phone.id, phoneNumber: phone.phoneNumber });
+        if (codeSent) {
+          return { ...current, step: 'verify', phoneId, phoneNumber: phone.phoneNumber, error: undefined };
+        }
       }
       const result = await enrollSms(phoneId, code ?? (current.step === 'verify' ? current.code : undefined));
       if (result.status === 'needsVerification') {
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts
index be968ca8e62..b278ece896f 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts
@@ -132,7 +132,10 @@ function createSmsActions(
       const existing = current.phoneNumbers.find(
         phone => !phone.reservedForSecondFactor && phone.phoneNumber === phoneNumber,
       );
-      return summarizePhone(existing ?? (await calls.createPhone(current, phoneNumber)));
+      if (existing) {
+        return { phone: summarizePhone(existing), codeSent: false };
+      }
+      return { phone: summarizePhone(await calls.createPhone(current, phoneNumber)), codeSent: true };
     },
     enrollSms: async (phoneId, code): Promise<SmsEnrollmentResult> => {
       let phone = currentPhone(phoneId);
@@ -200,8 +203,12 @@ export function useUserProfileMfaModel(): UserProfileMfaModel {
     await current.reload().catch(() => undefined);
     return result;
   });
-  const [createPhone, createPhoneReverification] = useReverificationFlow((current: UserResource, phoneNumber: string) =>
-    current.createPhoneNumber({ phoneNumber }),
+  const [createPhone, createPhoneReverification] = useReverificationFlow(
+    async (current: UserResource, phoneNumber: string) => {
+      const phone = await current.createPhoneNumber({ phoneNumber });
+      await phone.prepareVerification();
+      return phone;
+    },
   );
   const [reservePhone, enrollSmsReverification] = useReverificationFlow(async (phone: PhoneNumberResource) => {
     const result = await phone.setReservedForSecondFactor({ reserved: true });
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.types.ts b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.types.ts
index 3581282f5c2..834fce9f5d7 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.types.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.types.ts
@@ -38,7 +38,7 @@ export type UserProfileMfaModel =
       methods: readonly UserProfileMfaMethod[];
       addableMethods: readonly UserProfileMfaAddableMethod[];
       phones: readonly MfaPhone[];
-      findOrCreatePhone?: (phoneNumber: string) => Promise<MfaPhone>;
+      findOrCreatePhone?: (phoneNumber: string) => Promise<{ phone: MfaPhone; codeSent: boolean }>;
       enrollSms?: (phoneId: string, code?: string) => Promise<SmsEnrollmentResult>;
       resendSms?: (phoneId: string) => Promise<void>;
       createAuthenticator?: () => Promise<{ secret: string; uri: string }>;

From 1e7649cd8704829047cc2894b3fe9bc99127c2dd Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Mon, 26 Oct 2026 14:14:34 -0600
Subject: [PATCH 5/5] refactor(mosaic): consolidate MFA reverification state
 and SMS enrollment

---
 .../user-profile-mfa-section.controller.ts    | 163 +++++++++---------
 .../user-profile-mfa-section.model.ts         |  90 +++++-----
 .../user-profile-mfa-section.tsx              |   8 +-
 .../user-profile-mfa-section.types.ts         |   2 +-
 4 files changed, 137 insertions(+), 126 deletions(-)

diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts
index 090de297d26..aaf4638c728 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.controller.ts
@@ -7,7 +7,11 @@ import type { DoneInvokeEvent } from '../../../machine/types';
 import { useMachine } from '../../../machine/use-machine';
 import { toLocalizableError } from '../../../utils/errors';
 import type { ReverificationController } from '../../reverification';
-import type { UserProfileMfaAddableMethod, UserProfileMfaModel } from './user-profile-mfa-section.types';
+import type {
+  SmsEnrollmentResult,
+  UserProfileMfaAddableMethod,
+  UserProfileMfaModel,
+} from './user-profile-mfa-section.types';
 import type { UserProfileMfaSectionViewProps } from './user-profile-mfa-section.view';
 import type { UserProfileMfaSetupViewProps } from './user-profile-mfa-setup.view';
 
@@ -16,7 +20,7 @@ type AuthenticatorSetup = { secret: string; uri: string };
 type MfaAction = 'prepareAuthenticator' | 'verifyAuthenticator' | 'sms' | 'resend' | 'generate' | 'copy';
 type MfaFlow =
   | { kind: 'closed'; error?: ErrorDescription }
-  | { kind: 'select'; methods: readonly UserProfileMfaAddableMethod[]; error?: ErrorDescription }
+  | { kind: 'select'; error?: ErrorDescription }
   | {
       kind: 'authenticator';
       setup: AuthenticatorSetup;
@@ -39,6 +43,7 @@ interface MfaContext {
   flow: MfaFlow;
   savedSetup?: AuthenticatorSetup;
   pending?: MfaAction;
+  pendingMethods: readonly UserProfileMfaAddableMethod[];
   dismissed: boolean;
   resendSeconds: number;
   run: () => Promise<MfaFlow>;
@@ -47,27 +52,33 @@ interface MfaContext {
 }
 
 type MfaEvent =
-  | { type: 'OPEN'; methods: readonly UserProfileMfaAddableMethod[] }
+  | { type: 'OPEN' }
   | { type: 'CLOSE' }
-  | {
-      type: 'SELECT';
-      method: Exclude<UserProfileMfaAddableMethod, 'backup-codes'>;
-      phoneId: string;
-      hasPhones: boolean;
-    }
+  | { type: 'SELECT_SMS'; phoneId: string; hasPhones: boolean }
+  | { type: 'RESUME_AUTHENTICATOR'; setup: AuthenticatorSetup }
   | { type: 'ADD_PHONE' }
-  | { type: 'BACK'; hasPhones: boolean; methods: readonly UserProfileMfaAddableMethod[] }
+  | { type: 'BACK'; hasPhones: boolean }
   | { type: 'EDIT_PHONE_ID'; value: string }
   | { type: 'EDIT_PHONE_NUMBER'; value: string }
   | { type: 'EDIT_CODE'; value: string }
-  | { type: 'PHONE_RESOLVED'; id: string; phoneNumber: string }
   | { type: 'PRINT_FAILED' }
   | { type: 'TICK' }
-  | { type: 'RUN'; key: MfaAction; run: () => Promise<MfaFlow>; resolve: () => void; reject: (error: unknown) => void };
+  | {
+      type: 'RUN';
+      key: MfaAction;
+      methods: readonly UserProfileMfaAddableMethod[];
+      run: () => Promise<MfaFlow>;
+      resolve: () => void;
+      reject: (error: unknown) => void;
+    };
 
 const { createMachine, assign, fromPromise } = setup<MfaContext, MfaEvent>();
 const RESEND_COOLDOWN_SECONDS = 30;
 const REVERIFIABLE_ACTIONS: readonly MfaAction[] = ['generate', 'sms', 'prepareAuthenticator'];
+const PENDING_METHODS: Partial<Record<MfaAction, NonNullable<UserProfileMfaSetupViewProps['pendingMethod']>>> = {
+  prepareAuthenticator: 'authenticator',
+  generate: 'backup-codes',
+};
 const tick = { actions: assign(context => ({ resendSeconds: Math.max(0, context.resendSeconds - 1) })) };
 
 const mfaMachine = createMachine({
@@ -77,6 +88,7 @@ const mfaMachine = createMachine({
     flow: { kind: 'closed' },
     dismissed: false,
     resendSeconds: 0,
+    pendingMethods: [],
     run: () => Promise.resolve({ kind: 'closed' }),
     resolve: () => undefined,
     reject: () => undefined,
@@ -84,28 +96,26 @@ const mfaMachine = createMachine({
   states: {
     idle: {
       on: {
-        OPEN: { actions: assign((_, event) => ({ flow: { kind: 'select', methods: event.methods } })) },
+        OPEN: { actions: assign(() => ({ flow: { kind: 'select' } })) },
         CLOSE: {
           actions: assign(() => ({ flow: { kind: 'closed' }, savedSetup: undefined, resendSeconds: 0 })),
         },
         TICK: tick,
-        SELECT: {
-          actions: assign((context, event) => ({
-            flow:
-              event.method === 'sms'
-                ? {
-                    kind: 'sms',
-                    step: event.hasPhones ? 'select' : 'phone',
-                    origin: event.hasPhones ? 'existing' : 'new',
-                    selectedPhoneId: event.phoneId,
-                    phoneNumber: '',
-                    code: '',
-                  }
-                : context.savedSetup
-                  ? { kind: 'authenticator', setup: context.savedSetup, code: '' }
-                  : context.flow,
+        SELECT_SMS: {
+          actions: assign((_, event) => ({
+            flow: {
+              kind: 'sms',
+              step: event.hasPhones ? 'select' : 'phone',
+              origin: event.hasPhones ? 'existing' : 'new',
+              selectedPhoneId: event.phoneId,
+              phoneNumber: '',
+              code: '',
+            },
           })),
         },
+        RESUME_AUTHENTICATOR: {
+          actions: assign((_, event) => ({ flow: { kind: 'authenticator', setup: event.setup, code: '' } })),
+        },
         ADD_PHONE: {
           actions: assign(context => ({
             flow:
@@ -134,7 +144,7 @@ const mfaMachine = createMachine({
               return { flow: { ...flow, step: 'select', origin: 'existing', phoneId: undefined, error: undefined } };
             }
             return {
-              flow: { kind: 'select', methods: event.methods },
+              flow: { kind: 'select' },
               savedSetup: flow.kind === 'authenticator' ? flow.setup : context.savedSetup,
             };
           }),
@@ -180,6 +190,7 @@ const mfaMachine = createMachine({
           actions: assign((context, event) => ({
             flow: { ...context.flow, error: undefined },
             pending: event.key,
+            pendingMethods: event.methods,
             dismissed: false,
             run: event.run,
             resolve: event.resolve,
@@ -191,7 +202,7 @@ const mfaMachine = createMachine({
     busy: {
       on: {
         OPEN: {
-          actions: assign((_, event) => ({ flow: { kind: 'select', methods: event.methods }, dismissed: true })),
+          actions: assign(() => ({ flow: { kind: 'select' }, dismissed: true })),
         },
         CLOSE: {
           actions: assign(() => ({
@@ -202,14 +213,6 @@ const mfaMachine = createMachine({
           })),
         },
         TICK: tick,
-        PHONE_RESOLVED: {
-          actions: assign((context, event) => ({
-            flow:
-              context.flow.kind === 'sms'
-                ? { ...context.flow, phoneId: event.id, phoneNumber: event.phoneNumber }
-                : context.flow,
-          })),
-        },
       },
       invoke: fromPromise(context => context.run(), {
         onDone: {
@@ -223,7 +226,7 @@ const mfaMachine = createMachine({
               return {
                 flow: event.output,
                 savedSetup:
-                  event.output.kind === 'authenticator' && event.output.setup
+                  event.output.kind === 'authenticator'
                     ? event.output.setup
                     : event.output.kind === 'closed'
                       ? undefined
@@ -293,30 +296,32 @@ function createAuthenticatorActions(model: ReadyModel, flow: MfaFlow, run: RunMf
   return { prepareAuthenticator, verifyAuthenticator };
 }
 
-function createSmsActions(model: ReadyModel, flow: MfaFlow, resendSeconds: number, run: RunMfaAction, send: MfaSend) {
+function createSmsActions(model: ReadyModel, flow: MfaFlow, resendSeconds: number, run: RunMfaAction) {
   const submitSms = (code?: string) => {
     const enrollSms = model.enrollSms;
-    const findOrCreatePhone = model.findOrCreatePhone;
+    const enrollPhoneNumber = model.enrollPhoneNumber;
     if (!enrollSms || flow.kind !== 'sms') {
       return;
     }
     const current = flow;
     void run('sms', async () => {
-      let phoneId = current.step === 'phone' ? current.phoneId : (current.phoneId ?? current.selectedPhoneId);
-      if (!phoneId) {
-        if (current.step !== 'phone' || !findOrCreatePhone) {
-          return current;
-        }
-        const { phone, codeSent } = await findOrCreatePhone(current.phoneNumber);
-        phoneId = phone.id;
-        send({ type: 'PHONE_RESOLVED', id: phone.id, phoneNumber: phone.phoneNumber });
-        if (codeSent) {
-          return { ...current, step: 'verify', phoneId, phoneNumber: phone.phoneNumber, error: undefined };
-        }
+      const phoneId = current.step === 'phone' ? current.phoneId : (current.phoneId ?? current.selectedPhoneId);
+      let result: SmsEnrollmentResult;
+      if (phoneId) {
+        result = await enrollSms(phoneId, code ?? (current.step === 'verify' ? current.code : undefined));
+      } else if (current.step === 'phone' && enrollPhoneNumber) {
+        result = await enrollPhoneNumber(current.phoneNumber);
+      } else {
+        return current;
       }
-      const result = await enrollSms(phoneId, code ?? (current.step === 'verify' ? current.code : undefined));
       if (result.status === 'needsVerification') {
-        return { ...current, step: 'verify', phoneId, phoneNumber: result.phone.phoneNumber, error: undefined };
+        return {
+          ...current,
+          step: 'verify',
+          phoneId: result.phone.id,
+          phoneNumber: result.phone.phoneNumber,
+          error: undefined,
+        };
       }
       return result.status === 'complete' && result.backupCodes.length
         ? { kind: 'backup', codes: result.backupCodes }
@@ -432,16 +437,15 @@ function createSetupProps(
   actions: MfaSetupActions,
   errorText: ReturnType<typeof useErrorText>,
   reverification: ReverificationController,
+  reverifying: boolean,
 ): UserProfileMfaSetupViewProps {
   const flow = context.flow;
   const errorMessage = flow.error ? errorText(flow.error) : undefined;
   const sms = flow.kind === 'sms' ? flow : undefined;
   const authenticator = flow.kind === 'authenticator' ? flow : undefined;
   const backup = flow.kind === 'backup' ? flow : undefined;
-  const isReverifying =
-    context.pending !== undefined && REVERIFIABLE_ACTIONS.includes(context.pending) && reverification.visible;
   let step: UserProfileMfaSetupViewProps['step'];
-  if (isReverifying) {
+  if (reverifying) {
     step = 'verify';
   } else if (flow.kind === 'closed') {
     step = 'select';
@@ -452,15 +456,10 @@ function createSetupProps(
   }
   return {
     step,
-    pendingMethod:
-      context.pending === 'prepareAuthenticator'
-        ? 'authenticator'
-        : context.pending === 'generate'
-          ? 'backup-codes'
-          : undefined,
+    pendingMethod: context.pending && PENDING_METHODS[context.pending],
     errorMessage,
     reverification,
-    methods: flow.kind === 'select' ? flow.methods : model.addableMethods,
+    methods: context.pending ? context.pendingMethods : model.addableMethods,
     onSelect: actions.select,
     onBack: actions.back,
     onCancel: actions.close,
@@ -514,13 +513,19 @@ export function useUserProfileMfaController(model: ReadyModel) {
       return Promise.resolve();
     }
     return new Promise<void>((resolve, reject) => {
-      send({ type: 'RUN', key, run: action, resolve, reject });
+      send({ type: 'RUN', key, methods: model.addableMethods, run: action, resolve, reject });
     });
   };
   const { resendSeconds } = context;
   const flow = context.flow;
-  const dialogOpen =
-    flow.kind !== 'closed' || (context.pending === 'generate' && model.backupCodesReverification.visible);
+  // The machine guarantees that only one is running/visible at a time
+  const reverification =
+    [model.createPhoneReverification, model.enrollSmsReverification, model.authenticatorReverification].find(
+      controller => controller.visible,
+    ) ?? model.backupCodesReverification;
+  const hasPendingReverification = context.pending !== undefined && REVERIFIABLE_ACTIONS.includes(context.pending);
+  const reverifying = hasPendingReverification && reverification.visible;
+  const dialogOpen = flow.kind !== 'closed' || reverifying;
   useEffect(() => {
     if (!dialogOpen || resendSeconds === 0) {
       return;
@@ -529,7 +534,7 @@ export function useUserProfileMfaController(model: ReadyModel) {
     return () => clearTimeout(timer);
   }, [dialogOpen, resendSeconds, send]);
   const { prepareAuthenticator, verifyAuthenticator } = createAuthenticatorActions(model, flow, run);
-  const { submitSms, resendSms } = createSmsActions(model, flow, resendSeconds, run, send);
+  const { submitSms, resendSms } = createSmsActions(model, flow, resendSeconds, run);
   const { generateBackupCodes, copy, download, print } = createBackupCodeActions(
     model,
     flow,
@@ -539,26 +544,25 @@ export function useUserProfileMfaController(model: ReadyModel) {
   );
 
   const close = () => send({ type: 'CLOSE' });
-  const back = () => send({ type: 'BACK', hasPhones: model.phones.length > 0, methods: model.addableMethods });
+  const back = () => send({ type: 'BACK', hasPhones: model.phones.length > 0 });
 
   const select = (method: UserProfileMfaAddableMethod) => {
     if (isBusy) {
       return;
     }
-    if (method === 'authenticator' && !context.savedSetup) {
-      prepareAuthenticator();
+    if (method === 'authenticator') {
+      if (context.savedSetup) {
+        send({ type: 'RESUME_AUTHENTICATOR', setup: context.savedSetup });
+      } else {
+        prepareAuthenticator();
+      }
     } else if (method === 'backup-codes') {
       generateBackupCodes();
     } else {
-      send({ type: 'SELECT', method, phoneId: model.phones[0]?.id ?? '', hasPhones: model.phones.length > 0 });
+      send({ type: 'SELECT_SMS', phoneId: model.phones[0]?.id ?? '', hasPhones: model.phones.length > 0 });
     }
   };
 
-  // The machine guarantees that only one is running/visible at a time
-  const reverification =
-    [model.createPhoneReverification, model.enrollSmsReverification, model.authenticatorReverification].find(
-      controller => controller.visible,
-    ) ?? model.backupCodesReverification;
   const setupProps = createSetupProps(
     model,
     context,
@@ -577,6 +581,7 @@ export function useUserProfileMfaController(model: ReadyModel) {
     },
     errorText,
     reverification,
+    reverifying,
   );
 
   const sectionProps: UserProfileMfaSectionViewProps = {
@@ -591,7 +596,6 @@ export function useUserProfileMfaController(model: ReadyModel) {
   };
 
   const showAddTrigger = model.addableMethods.length > 0;
-  const hasPendingReverification = context.pending !== undefined && REVERIFIABLE_ACTIONS.includes(context.pending);
   const canClose = !hasPendingReverification || Boolean(reverification.onCancel);
 
   return {
@@ -599,6 +603,7 @@ export function useUserProfileMfaController(model: ReadyModel) {
     showAddTrigger,
     showAddControl: showAddTrigger || dialogOpen,
     isPending: isBusy,
+    reverifying,
     onDialogOpenChange: (open: boolean) => {
       if (!open && !canClose) {
         return;
@@ -606,7 +611,7 @@ export function useUserProfileMfaController(model: ReadyModel) {
       if (!open && hasPendingReverification) {
         reverification.onCancel?.();
       }
-      send(open ? { type: 'OPEN', methods: model.addableMethods } : { type: 'CLOSE' });
+      send({ type: open ? 'OPEN' : 'CLOSE' });
     },
     showCloseButton: canClose,
     sectionProps,
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts
index b278ece896f..bcc8e6e2d51 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.model.ts
@@ -17,6 +17,10 @@ import type {
 type ReadyModel = Extract<UserProfileMfaModel, { status: 'ready' }>;
 type MfaSnapshotData = Pick<ReadyModel, 'methods' | 'addableMethods' | 'phones'>;
 
+function reloadUser(user: UserResource): Promise<unknown> {
+  return user.reload().catch(() => undefined);
+}
+
 function configuredFactors(environment: EnvironmentResource | undefined): string[] {
   return Object.values(environment?.userSettings.attributes ?? {}).flatMap(attribute =>
     attribute?.used_for_second_factor ? attribute.second_factors : [],
@@ -112,11 +116,11 @@ function createSmsActions(
   userId: string,
   sessionId: string,
   calls: {
-    makeDefault: (phone: PhoneNumberResource) => Promise<unknown>;
+    makeDefault: (current: UserResource, phone: PhoneNumberResource) => Promise<unknown>;
     createPhone: (current: UserResource, phoneNumber: string) => Promise<PhoneNumberResource>;
-    reservePhone: (phone: PhoneNumberResource) => Promise<PhoneNumberResource>;
+    reservePhone: (current: UserResource, phone: PhoneNumberResource) => Promise<PhoneNumberResource>;
   },
-): Pick<ReadyModel, 'findOrCreatePhone' | 'enrollSms' | 'resendSms' | 'setDefault'> {
+): Pick<ReadyModel, 'enrollPhoneNumber' | 'enrollSms' | 'resendSms' | 'setDefault'> {
   const currentPhone = (phoneId: string) => {
     const current = requireIdentity(clerk, userId, sessionId);
     const phone = current.phoneNumbers.find(item => item.id === phoneId);
@@ -126,33 +130,35 @@ function createSmsActions(
     return phone;
   };
 
+  const enrollSms = async (phoneId: string, code?: string): Promise<SmsEnrollmentResult> => {
+    let phone = currentPhone(phoneId);
+    if (phone.verification.status !== 'verified') {
+      if (!code) {
+        await phone.prepareVerification();
+        return { status: 'needsVerification', phone: summarizePhone(phone) };
+      }
+      await phone.attemptVerification({ code });
+      phone = currentPhone(phoneId);
+    }
+    if (phone.reservedForSecondFactor || !configuredFactors(environment).includes('phone_code')) {
+      throw phoneUnavailable();
+    }
+    const result = await calls.reservePhone(requireIdentity(clerk, userId, sessionId), phone);
+    return { status: 'complete', backupCodes: result.backupCodes ?? [] };
+  };
+
   return {
-    findOrCreatePhone: async phoneNumber => {
+    enrollPhoneNumber: async phoneNumber => {
       const current = requireIdentity(clerk, userId, sessionId);
       const existing = current.phoneNumbers.find(
         phone => !phone.reservedForSecondFactor && phone.phoneNumber === phoneNumber,
       );
       if (existing) {
-        return { phone: summarizePhone(existing), codeSent: false };
+        return enrollSms(existing.id);
       }
-      return { phone: summarizePhone(await calls.createPhone(current, phoneNumber)), codeSent: true };
-    },
-    enrollSms: async (phoneId, code): Promise<SmsEnrollmentResult> => {
-      let phone = currentPhone(phoneId);
-      if (phone.verification.status !== 'verified') {
-        if (!code) {
-          await phone.prepareVerification();
-          return { status: 'needsVerification', phone: summarizePhone(phone) };
-        }
-        await phone.attemptVerification({ code });
-        phone = currentPhone(phoneId);
-      }
-      if (phone.reservedForSecondFactor || !configuredFactors(environment).includes('phone_code')) {
-        throw phoneUnavailable();
-      }
-      const result = await calls.reservePhone(phone);
-      return { status: 'complete', backupCodes: result.backupCodes ?? [] };
+      return { status: 'needsVerification', phone: summarizePhone(await calls.createPhone(current, phoneNumber)) };
     },
+    enrollSms,
     resendSms: async phoneId => {
       await currentPhone(phoneId).prepareVerification();
     },
@@ -161,7 +167,7 @@ function createSmsActions(
       if (phone.verification.status !== 'verified' || !phone.reservedForSecondFactor) {
         throw phoneUnavailable();
       }
-      await calls.makeDefault(phone);
+      await calls.makeDefault(requireIdentity(clerk, userId, sessionId), phone);
     },
   };
 }
@@ -185,7 +191,7 @@ async function removeMfaMethod(
     requireRemovable(current, environment);
     await phone.setReservedForSecondFactor({ reserved: false });
   }
-  await current.reload().catch(() => undefined);
+  await reloadUser(current);
 }
 
 export function useUserProfileMfaModel(): UserProfileMfaModel {
@@ -194,13 +200,15 @@ export function useUserProfileMfaModel(): UserProfileMfaModel {
   const { isLoaded: sessionLoaded, session } = useSession();
   const environment = useMosaicEnvironment();
   const [removeMethod, removeReverification] = useReverificationFlow(removeMfaMethod);
-  const [makeDefault, setDefaultReverification] = useReverificationFlow(async (phone: PhoneNumberResource) => {
-    await phone.makeDefaultSecondFactor();
-    await clerk.user?.reload().catch(() => undefined);
-  });
+  const [makeDefault, setDefaultReverification] = useReverificationFlow(
+    async (current: UserResource, phone: PhoneNumberResource) => {
+      await phone.makeDefaultSecondFactor();
+      await reloadUser(current);
+    },
+  );
   const [createBackupCode, backupCodesReverification] = useReverificationFlow(async (current: UserResource) => {
     const result = await current.createBackupCode();
-    await current.reload().catch(() => undefined);
+    await reloadUser(current);
     return result;
   });
   const [createPhone, createPhoneReverification] = useReverificationFlow(
@@ -210,11 +218,13 @@ export function useUserProfileMfaModel(): UserProfileMfaModel {
       return phone;
     },
   );
-  const [reservePhone, enrollSmsReverification] = useReverificationFlow(async (phone: PhoneNumberResource) => {
-    const result = await phone.setReservedForSecondFactor({ reserved: true });
-    await clerk.user?.reload().catch(() => undefined);
-    return result;
-  });
+  const [reservePhone, enrollSmsReverification] = useReverificationFlow(
+    async (current: UserResource, phone: PhoneNumberResource) => {
+      const result = await phone.setReservedForSecondFactor({ reserved: true });
+      await reloadUser(current);
+      return result;
+    },
+  );
   const [createTotp, authenticatorReverification] = useReverificationFlow((current: UserResource) =>
     current.createTOTP(),
   );
@@ -238,10 +248,6 @@ export function useUserProfileMfaModel(): UserProfileMfaModel {
   const sessionId = session.id;
   const { methods, addableMethods, phones } = describeMfa(user, environment);
   const usableCount = usableFactorCount(user, secondFactors);
-  const refresh = async () => {
-    const current = requireIdentity(clerk, userId, sessionId);
-    await current.reload();
-  };
 
   const smsActions = smsEnabled
     ? createSmsActions(clerk, environment, userId, sessionId, { makeDefault, createPhone, reservePhone })
@@ -269,10 +275,10 @@ export function useUserProfileMfaModel(): UserProfileMfaModel {
       : undefined,
     verifyAuthenticator: totpEnabled
       ? async (code): Promise<MfaEnrollmentResult> => {
-          const result = await requireIdentity(clerk, userId, sessionId).verifyTOTP({ code });
-          const backupCodes = result.backupCodes ?? [];
-          await refresh().catch(() => undefined);
-          return { backupCodes };
+          const current = requireIdentity(clerk, userId, sessionId);
+          const result = await current.verifyTOTP({ code });
+          await reloadUser(current);
+          return { backupCodes: result.backupCodes ?? [] };
         }
       : undefined,
     generateBackupCodes:
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx
index 8e7ae0d9df0..b172b1de188 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.tsx
@@ -34,8 +34,6 @@ export function mfaSectionNode(model: UserProfileMfaModel, fallback: ReactNode =
 function MfaEditor({ model }: { model: Extract<UserProfileMfaModel, { status: 'ready' }> }) {
   const controller = useUserProfileMfaController(model);
   const initialFocusRef = useRef<HTMLElement>(null);
-  const reverifying = controller.setupProps.step === 'verify';
-
   return (
     <UserProfileMfaSectionView
       {...controller.sectionProps}
@@ -46,10 +44,12 @@ function MfaEditor({ model }: { model: Extract<UserProfileMfaModel, { status: 'r
             disabled={controller.isPending}
             onOpenChange={controller.onDialogOpenChange}
             hideTrigger={!controller.showAddTrigger}
-            reverifying={reverifying}
+            reverifying={controller.reverifying}
             showCloseButton={controller.showCloseButton}
             initialFocus={
-              reverifying && controller.setupProps.reverification.status !== 'error' ? initialFocusRef : undefined
+              controller.reverifying && controller.setupProps.reverification.status !== 'error'
+                ? initialFocusRef
+                : undefined
             }
           >
             <UserProfileMfaSetupView
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.types.ts b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.types.ts
index 834fce9f5d7..31326325b31 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.types.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-mfa-section.types.ts
@@ -38,7 +38,7 @@ export type UserProfileMfaModel =
       methods: readonly UserProfileMfaMethod[];
       addableMethods: readonly UserProfileMfaAddableMethod[];
       phones: readonly MfaPhone[];
-      findOrCreatePhone?: (phoneNumber: string) => Promise<{ phone: MfaPhone; codeSent: boolean }>;
+      enrollPhoneNumber?: (phoneNumber: string) => Promise<SmsEnrollmentResult>;
       enrollSms?: (phoneId: string, code?: string) => Promise<SmsEnrollmentResult>;
       resendSms?: (phoneId: string) => Promise<void>;
       createAuthenticator?: () => Promise<{ secret: string; uri: string }>;