feat(mosaic): reverify adding passkeys (#10329)

Author: austincalvelage

.changeset/passkey-reverification.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/features/user-profile/user-profile-passkeys-section/__tests__/user-profile-passkeys-section.feature.test.tsx

@@ -273,27 +273,62 @@ describe('Adding a passkey', () => {
     expect(add).toBeEnabled();
   });
 
-  it.each(['session_reverification_required', 'form_param_invalid'])(
-    'shows %s and allows a manual retry',
-    async code => {
-      const fapi = servePasskeys([]);
-      fakeAuthenticator();
-      await renderWithClerk(<UserProfilePasskeysSection />);
-      const creation = holdRequests('post', '/v1/me/passkeys');
-      const user = userEvent.setup();
-      await user.click(screen.getByRole('button', { name: 'Add passkey' }));
-      await waitFor(() => expect(creation.requests).toHaveLength(1));
-      creation.fail(code);
-      await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent(code));
-      expect(screen.queryByRole('dialog')).toBeNull();
-      expect(creation.requests).toHaveLength(1);
-      const retried = serveFapi(fapi);
-      await user.click(screen.getByRole('button', { name: 'Add passkey' }));
-      expect(await screen.findByText('Chrome on macOS')).toBeVisible();
-      expect(retried.client.sessions[0]?.user.passkeys).toHaveLength(1);
-      expect(screen.queryByRole('alert')).toBeNull();
-    },
-  );
+  it('shows a creation error and allows a manual retry', async () => {
+    const fapi = servePasskeys([]);
+    fakeAuthenticator();
+    await renderWithClerk(<UserProfilePasskeysSection />);
+    const creation = holdRequests('post', '/v1/me/passkeys');
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+    await waitFor(() => expect(creation.requests).toHaveLength(1));
+    creation.fail('form_param_invalid');
+    await waitFor(() => expect(screen.getByRole('alert')).toHaveTextContent('form_param_invalid'));
+    expect(screen.queryByRole('dialog')).toBeNull();
+    expect(creation.requests).toHaveLength(1);
+    const retried = serveFapi(fapi);
+    await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+    expect(await screen.findByText('Chrome on macOS')).toBeVisible();
+    expect(retried.client.sessions[0]?.user.passkeys).toHaveLength(1);
+    expect(screen.queryByRole('alert')).toBeNull();
+  });
+
+  it('verifies the session before adding a passkey, then creates it', async () => {
+    const fapi = servePasskeys([], { verification: { secrets: { password: 'hunter2' } } });
+    const authenticator = fakeAuthenticator();
+    await renderWithClerk(<UserProfilePasskeysSection />);
+    demandReverificationOnce('/v1/me/passkeys');
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+    expect(await screen.findByText('Enter your current password to continue')).toBeVisible();
+    await waitFor(() => expect(screen.getByLabelText('Password')).toHaveFocus());
+    await user.keyboard('hunter2{Enter}');
+
+    expect(await screen.findByText('Chrome on macOS')).toBeVisible();
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    expect(fapi.client.sessions[0]?.user.passkeys).toHaveLength(1);
+    expect(authenticator).toHaveBeenCalledOnce();
+  });
+
+  it('lets the user cancel passkey verification quietly and add one again', async () => {
+    const fapi = servePasskeys([], { verification: { secrets: { password: 'hunter2' } } });
+    const authenticator = fakeAuthenticator();
+    await renderWithClerk(<UserProfilePasskeysSection />);
+    demandReverificationOnce('/v1/me/passkeys');
+    const user = userEvent.setup();
+
+    await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+    await screen.findByText('Enter your current password to continue');
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Close' }));
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+    expect(fapi.client.sessions[0]?.user.passkeys).toHaveLength(0);
+    expect(authenticator).not.toHaveBeenCalled();
+    expect(screen.queryByRole('alert')).toBeNull();
+
+    await user.click(screen.getByRole('button', { name: 'Add passkey' }));
+    expect(await screen.findByText('Chrome on macOS')).toBeVisible();
+  });
 
   it('uses the localized fallback when FAPI rejects creation without a message', async () => {
     servePasskeys([]);

packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkeys-section.controller.ts

@@ -10,7 +10,7 @@ import type { UserProfilePasskeysSectionViewProps } from './user-profile-passkey
 
 type PasskeysControllerInput = Pick<
   Extract<UserProfilePasskeysModel, { status: 'ready' }>,
-  'passkeys' | 'onAdd' | 'onRename' | 'validateName' | 'onRemove' | 'reverification'
+  'passkeys' | 'onAdd' | 'onRename' | 'validateName' | 'onRemove' | 'reverification' | 'addReverification'
 >;
 
 export function useUserProfilePasskeysSectionController({
@@ -20,6 +20,7 @@ export function useUserProfilePasskeysSectionController({
   validateName,
   onRemove,
   reverification,
+  addReverification,
 }: PasskeysControllerInput): UserProfilePasskeysSectionViewProps {
   const messages = useMessages('userProfilePasskeys');
   const add = usePendingAction<'add'>({ errorFallback: messages.saveError });
@@ -47,5 +48,7 @@ export function useUserProfilePasskeysSectionController({
     registerTrigger: removalFocus.registerTrigger,
     remove,
     finalFocus: removalFocus.finalFocus,
+    addReverification,
+    addFinalFocus: addButtonRef,
   };
 }

packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkeys-section.model.ts

@@ -65,6 +65,7 @@ export type UserProfilePasskeysModel =
       validateName: UserProfilePasskeyNameValidator;
       onRemove: (id: string) => Promise<void>;
       reverification: ReverificationController;
+      addReverification: ReverificationController;
     };
 
 function getPasskeysProjection(
@@ -93,6 +94,7 @@ export function useUserProfilePasskeysModel(): UserProfilePasskeysModel {
   const locale = useLocale();
   const messages = useMessages('userProfilePasskeys');
   const [deletePasskey, reverification] = useReverificationFlow((passkey: PasskeyResource) => passkey.delete());
+  const [createPasskey, addReverification] = useReverificationFlow((current: UserResource) => current.createPasskey());
   const validateName: UserProfilePasskeyNameValidator = name =>
     new TextEncoder().encode(name).length > 256 ? { type: 'error', message: messages.nameTooLongError } : undefined;
 
@@ -162,7 +164,7 @@ export function useUserProfilePasskeysModel(): UserProfilePasskeysModel {
               global: { code: 'passkey_account_unavailable', message: messages.accountUnavailableError },
             });
           }
-          await save(() => current.createPasskey());
+          await save(() => createPasskey(current));
         }
       : undefined,
     onRename: async (id, name) => {
@@ -184,5 +186,6 @@ export function useUserProfilePasskeysModel(): UserProfilePasskeysModel {
       await save(() => deletePasskey(passkey));
     },
     reverification,
+    addReverification,
   };
 }

packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-passkeys-section.view.tsx

@@ -2,13 +2,15 @@ import type { Ref } from 'react';
 
 import type { ConfirmController } from '../../../blocks/confirm';
 import { Confirmation } from '../../../blocks/confirmation';
+import { ReverificationDialog } from '../../../blocks/reverification';
 import { Button } from '../../../components/button';
 import type { DialogFocusTarget } from '../../../components/dialog';
 import { Field } from '../../../components/field';
 import { Icon } from '../../../components/icon';
 import { Section } from '../../../components/section';
 import { Plus } from '../../../icons/glyphs/plus';
 import { fill, useMessages } from '../../../localization';
+import type { ReverificationController } from '../../reverification';
 import { UserProfilePasskeyRowView } from './user-profile-passkey-row.view';
 import { styles } from './user-profile-passkeys-section.styles';
 import type { UserProfilePasskey, UserProfilePasskeyNameValidator } from './user-profile-passkeys-section.types';
@@ -27,6 +29,8 @@ export interface UserProfilePasskeysSectionViewProps {
   registerTrigger: (id: string) => Ref<HTMLButtonElement>;
   remove?: ConfirmController<UserProfilePasskey>;
   finalFocus?: DialogFocusTarget;
+  addReverification?: ReverificationController;
+  addFinalFocus?: DialogFocusTarget;
 }
 
 export function UserProfilePasskeysSectionView({
@@ -41,6 +45,8 @@ export function UserProfilePasskeysSectionView({
   registerTrigger,
   remove,
   finalFocus,
+  addReverification,
+  addFinalFocus,
 }: UserProfilePasskeysSectionViewProps) {
   const m = useMessages('userProfilePasskeys');
 
@@ -117,6 +123,12 @@ export function UserProfilePasskeysSectionView({
           finalFocus={finalFocus}
         />
       ) : null}
+      {addReverification ? (
+        <ReverificationDialog
+          controller={addReverification}
+          finalFocus={addFinalFocus}
+        />
+      ) : null}
     </>
   );
 }

packages/swingset/src/stories/fixtures/user-profile-passkeys.ts

@@ -42,6 +42,7 @@ export function usePasskeysFixture({
   return useUserProfilePasskeysSectionController({
     passkeys,
     reverification: idleReverification,
+    addReverification: idleReverification,
     onAdd: async () => {
       await attempt('add');
       const id = nextId.current++;