Merge pull request #20385 from mozilla/FXA-13072

task(settings): passkey registration UI flow

Author: dschom

packages/fxa-settings/src/components/Settings/PagePasskeyAdd/en.ftl

@@ -0,0 +1,12 @@
+## PagePasskeyAdd - Loading page shown during passkey creation
+
+page-passkey-add-creating-heading = Creating passkey…
+page-passkey-add-follow-prompts = Follow the prompts on your device.
+page-passkey-add-cancel = Cancel
+
+## Success / Error messages (shown in alert bar after returning to settings)
+
+page-passkey-add-success = Passkey created
+page-passkey-add-error-system = System not available. Try again later.
+
+##

packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.stories.tsx

@@ -0,0 +1,78 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { withLocalization } from 'fxa-react/lib/storybooks';
+import { LocationProvider } from '@reach/router';
+import { PagePasskeyAdd } from '.';
+import { AppContext } from 'fxa-settings/src/models';
+import {
+  mockAppContext,
+  mockSettingsContext,
+} from 'fxa-settings/src/models/mocks';
+import { SettingsContext } from 'fxa-settings/src/models/contexts/SettingsContext';
+import { MfaContext } from '../MfaGuard';
+import { getDefault } from '../../../lib/config';
+
+export default {
+  title: 'Pages/Settings/PasskeyAdd',
+  component: PagePasskeyAdd,
+  decorators: [withLocalization],
+} as Meta;
+
+const mockAccount = {
+  getCachedJwtByScope: () => 'mock-jwt',
+} as any;
+
+// Auth client that never resolves — keeps the loading page visible.
+const hangingAuthClient = {
+  beginPasskeyRegistration: () => new Promise(() => {}),
+  completePasskeyRegistration: () => new Promise(() => {}),
+};
+
+function initLocalAccount() {
+  const NS = '__fxa_storage';
+  const uid = 'abc123';
+  const accounts = {
+    [uid]: {
+      uid,
+      sessionToken: 'mock-session-token',
+      email: '[email protected]',
+      verified: true,
+      lastLogin: Date.now(),
+    },
+  };
+  window.localStorage.setItem(`${NS}.accounts`, JSON.stringify(accounts));
+  window.localStorage.setItem(`${NS}.currentAccountUid`, JSON.stringify(uid));
+}
+
+const configWithPasskeys = {
+  ...getDefault(),
+  featureFlags: {
+    ...getDefault().featureFlags,
+    passkeyRegistrationEnabled: true,
+  },
+};
+
+export const CeremonyInProgress = () => {
+  initLocalAccount();
+  return (
+    <LocationProvider>
+      <AppContext.Provider
+        value={mockAppContext({
+          account: mockAccount,
+          authClient: hangingAuthClient as any,
+          config: configWithPasskeys,
+        })}
+      >
+        <SettingsContext.Provider value={mockSettingsContext()}>
+          <MfaContext.Provider value="passkey">
+            <PagePasskeyAdd />
+          </MfaContext.Provider>
+        </SettingsContext.Provider>
+      </AppContext.Provider>
+    </LocationProvider>
+  );
+};

packages/fxa-settings/src/components/Settings/PagePasskeyAdd/index.test.tsx

@@ -0,0 +1,251 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { PagePasskeyAdd } from '.';
+import { Account, AppContext } from '../../../models';
+import { mockAppContext, mockSettingsContext } from '../../../models/mocks';
+import { SettingsContext } from '../../../models/contexts/SettingsContext';
+import { MfaContext } from '../MfaGuard';
+import {
+  WebAuthnErrorCategory,
+  WebAuthnErrorType,
+} from '../../../lib/passkeys/webauthn-errors';
+
+// Mock navigate
+const mockNavigateWithQuery = jest.fn();
+jest.mock('../../../lib/hooks/useNavigateWithQuery', () => ({
+  useNavigateWithQuery: () => mockNavigateWithQuery,
+}));
+
+// Mock LoadingSpinner
+jest.mock('fxa-react/components/LoadingSpinner', () => () => (
+  <div data-testid="loading-spinner">Loading…</div>
+));
+
+// Mock Sentry
+const mockCaptureException = jest.fn();
+jest.mock('@sentry/browser', () => ({
+  captureException: (...args: unknown[]) => mockCaptureException(...args),
+}));
+
+// Mock WebAuthn utilities
+const mockCreateCredential = jest.fn();
+jest.mock('../../../lib/passkeys/webauthn', () => ({
+  createCredential: (...args: unknown[]) => mockCreateCredential(...args),
+}));
+
+const mockHandleWebAuthnError = jest.fn();
+jest.mock('../../../lib/passkeys/webauthn-errors', () => ({
+  ...jest.requireActual('../../../lib/passkeys/webauthn-errors'),
+  handleWebAuthnError: (...args: unknown[]) => mockHandleWebAuthnError(...args),
+}));
+
+// Mock cache
+jest.mock('../../../lib/cache', () => ({
+  ...jest.requireActual('../../../lib/cache'),
+  JwtTokenCache: {
+    hasToken: jest.fn(() => true),
+    getToken: jest.fn(() => 'mock-jwt'),
+    subscribe: jest.fn(() => () => {}),
+    getSnapshot: jest.fn(() => ({})),
+    getKey: jest.fn(() => 'key'),
+  },
+  sessionToken: jest.fn(() => 'session-123'),
+}));
+
+// Mock auth client methods
+const mockBeginPasskeyRegistration = jest.fn();
+const mockCompletePasskeyRegistration = jest.fn();
+
+const mockAlertSuccess = jest.fn();
+const mockAlertError = jest.fn();
+
+const mockCreationOptions = {
+  rp: { name: 'Mozilla', id: 'accounts.firefox.com' },
+  user: { id: 'dXNlcg', name: '[email protected]', displayName: 'Test' },
+  challenge: 'Y2hhbGxlbmdl',
+  pubKeyCredParams: [{ alg: -7, type: 'public-key' as const }],
+};
+
+const mockCredential = {
+  id: 'Y3JlZA',
+  rawId: 'Y3JlZA',
+  type: 'public-key' as const,
+  response: {
+    clientDataJSON: 'ZXlK',
+    attestationObject: 'bzJO',
+  },
+};
+
+function renderPage() {
+  const account = {
+    getCachedJwtByScope: jest.fn(() => 'mock-jwt'),
+  } as unknown as Account;
+
+  const authClient = {
+    beginPasskeyRegistration: mockBeginPasskeyRegistration,
+    completePasskeyRegistration: mockCompletePasskeyRegistration,
+  };
+
+  const alertBarInfo = {
+    success: mockAlertSuccess,
+    error: mockAlertError,
+    info: jest.fn(),
+    show: jest.fn(),
+    hide: jest.fn(),
+    setType: jest.fn(),
+    setContent: jest.fn(),
+    visible: false,
+    type: 'success' as const,
+    content: null,
+  };
+
+  return render(
+    <AppContext.Provider
+      value={mockAppContext({
+        account,
+        authClient: authClient as any,
+      })}
+    >
+      <SettingsContext.Provider
+        value={mockSettingsContext({
+          alertBarInfo: alertBarInfo as any,
+        })}
+      >
+        <MfaContext.Provider value="passkey">
+          <PagePasskeyAdd />
+        </MfaContext.Provider>
+      </SettingsContext.Provider>
+    </AppContext.Provider>
+  );
+}
+
+describe('PagePasskeyAdd', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockBeginPasskeyRegistration.mockResolvedValue(mockCreationOptions);
+    mockCreateCredential.mockResolvedValue(mockCredential);
+    mockCompletePasskeyRegistration.mockResolvedValue({
+      credentialId: 'cred-1',
+      name: 'Test Passkey',
+      createdAt: Date.now(),
+      lastUsedAt: null,
+      transports: ['internal'],
+      aaguid: 'aaguid-1',
+      backupEligible: true,
+      backupState: false,
+      prfEnabled: false,
+    });
+  });
+
+  it('shows loading modal on mount', () => {
+    // Make the ceremony hang so we can see the modal
+    mockBeginPasskeyRegistration.mockReturnValue(new Promise(() => {}));
+    renderPage();
+    expect(screen.getByTestId('page-passkey-add')).toBeInTheDocument();
+    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+    expect(screen.getByText('Creating passkey…')).toBeInTheDocument();
+    expect(
+      screen.getByText('Follow the prompts on your device.')
+    ).toBeInTheDocument();
+    expect(screen.getByTestId('passkey-add-cancel')).toBeInTheDocument();
+  });
+
+  it('completes ceremony and shows success alert', async () => {
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertSuccess).toHaveBeenCalledWith('Passkey created');
+    });
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+    expect(mockBeginPasskeyRegistration).toHaveBeenCalledWith('mock-jwt');
+    expect(mockCreateCredential).toHaveBeenCalledWith(mockCreationOptions);
+    expect(mockCompletePasskeyRegistration).toHaveBeenCalledWith(
+      'mock-jwt',
+      mockCredential,
+      'Y2hhbGxlbmdl'
+    );
+  });
+
+  it('handles user cancel (NotAllowedError)', async () => {
+    const cancelError = new DOMException('User cancelled', 'NotAllowedError');
+    mockCreateCredential.mockRejectedValue(cancelError);
+    mockHandleWebAuthnError.mockReturnValue({
+      category: WebAuthnErrorCategory.UserAction,
+      errorType: WebAuthnErrorType.NotAllowed,
+      userMessageKey: 'passkey-registration-error-not-allowed',
+      logToSentry: false,
+    });
+
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertError).toHaveBeenCalled();
+    });
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+  });
+
+  it('handles timeout error', async () => {
+    const timeoutError = new DOMException('Timeout', 'TimeoutError');
+    mockCreateCredential.mockRejectedValue(timeoutError);
+    mockHandleWebAuthnError.mockReturnValue({
+      category: WebAuthnErrorCategory.UserAction,
+      errorType: WebAuthnErrorType.Timeout,
+      userMessageKey: 'passkey-registration-error-timeout',
+      logToSentry: false,
+    });
+
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertError).toHaveBeenCalled();
+    });
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+  });
+
+  it('handles server error on beginPasskeyRegistration', async () => {
+    const serverError = new Error('Server error');
+    mockBeginPasskeyRegistration.mockRejectedValue(serverError);
+
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertError).toHaveBeenCalledWith(
+        'System not available. Try again later.'
+      );
+    });
+    expect(mockCaptureException).toHaveBeenCalledWith(serverError);
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+  });
+
+  it('handles server error on completePasskeyRegistration', async () => {
+    const serverError = new Error('Completion failed');
+    mockCompletePasskeyRegistration.mockRejectedValue(serverError);
+
+    renderPage();
+    await waitFor(() => {
+      expect(mockAlertError).toHaveBeenCalledWith(
+        'System not available. Try again later.'
+      );
+    });
+    expect(mockCaptureException).toHaveBeenCalledWith(serverError);
+  });
+
+  it('cancel button navigates back to settings', () => {
+    mockBeginPasskeyRegistration.mockReturnValue(new Promise(() => {}));
+    renderPage();
+    fireEvent.click(screen.getByTestId('passkey-add-cancel'));
+    expect(mockNavigateWithQuery).toHaveBeenCalledWith('/settings#security', {
+      replace: true,
+    });
+  });
+});