mozilla · dschom · Jul 6, 2026 · Jul 3, 2026 · LZoog · Jul 3, 2026
@@ -32,6 +32,10 @@ test.describe('relay integration', () => {
     ).toBeVisible();
 
     await signup.passwordTextbox.fill(password);
+    // keys_optional can't be sent in Firefox tests yet (FXA-13647), so this
+    // key-deriving desktop signup requires a password and renders the
+    // confirmation field.
+    await signup.verifyPasswordTextbox.fill(password);
     await signup.createAccountButton.click();
 
     await page.waitForURL(/confirm_signup_code/);

@@ -28,6 +28,10 @@ test.describe('smart window integration', () => {
     await page.waitForURL(/signup/);
 
     await signup.passwordTextbox.fill(password);
+    // keys_optional can't be sent in Firefox tests yet (FXA-13647), so this
+    // key-deriving desktop signup requires a password and renders the
+    // confirmation field.
+    await signup.verifyPasswordTextbox.fill(password);
     await signup.createAccountButton.click();
 
     await page.waitForURL(/confirm_signup_code/);

@@ -27,3 +27,8 @@ export const Default = storyWithProps();
 export const WithCms = storyWithProps({
   integration: createMockIntegrationWithCms(),
 });
+
+export const OtpWithCms = storyWithProps({
+  passwordCreationReason: 'otp',
+  integration: createMockIntegrationWithCms(),
+});
@@ -6,7 +6,11 @@ import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localiz
 import { createMockIntegration, Subject } from './mocks';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { MOCK_EMAIL } from '../../mocks';
+import {
+  MOCK_EMAIL,
+  MOCK_CMS_INFO,
+  createMockIntegrationWithCms,
+} from '../../mocks';
 import { RelierCmsInfo } from '../../../models';
 import GleanMetrics from '../../../lib/glean';
 
@@ -55,14 +59,14 @@ describe('SetPassword page', () => {
   });
 
   it('renders CMS overrides when PostVerifySetPasswordPage is set', () => {
-    const cmsInfo = {
-      shared: { buttonColor: '#333' },
+    const cmsInfo: RelierCmsInfo = {
+      ...MOCK_CMS_INFO,
       PostVerifySetPasswordPage: {
         headline: 'Set a sync password',
         description: 'Your password encrypts your synced data.',
         primaryButtonText: 'Sync now',
       },
-    } as unknown as RelierCmsInfo;
+    };
 
     renderWithLocalizationProvider(
       <Subject integration={createMockIntegration(cmsInfo)} />
@@ -80,6 +84,37 @@ describe('SetPassword page', () => {
     ).not.toBeInTheDocument();
   });
 
+  it.each([['otp'], ['passkey']] as const)(
+    'renders the CMS description instead of the passwordless copy on the %s path',
+    (passwordCreationReason) => {
+      renderWithLocalizationProvider(
+        <Subject
+          passwordCreationReason={passwordCreationReason}
+          integration={createMockIntegrationWithCms()}
+        />
+      );
+
+      expect(
+        screen.getByText(MOCK_CMS_INFO.PostVerifySetPasswordPage.description)
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByText(
+          'This password encrypts your synced data and keeps it secure.'
+        )
+      ).not.toBeInTheDocument();
+    }
+  );
+
+  it('falls back to the passwordless info copy on the OTP path when no CMS description is set', () => {
+    renderWithLocalizationProvider(<Subject passwordCreationReason="otp" />);
+
+    expect(
+      screen.getByText(
+        'This password encrypts your synced data and keeps it secure.'
+      )
+    ).toBeInTheDocument();
+  });
+
   describe('Glean events', () => {
     // First row asserts the default-arg behaviour (no prop passed); the
     // others assert explicit pass-through for each non-default value.

@@ -124,17 +124,17 @@ export const SetPassword = ({
         <Banner type="error" content={{ localizedHeading: bannerErrorText }} />
       )}
 
-      {passwordCreationReason === 'third_party_auth' ? (
-        cmsDescription ? (
-          <p className="text-sm mt-6 mb-5">{cmsDescription}</p>
-        ) : (
-          <FtlMsg id="set-password-info-v2">
-            <p className="text-sm mt-6 mb-5">
-              This encrypts your data. It needs to be different from your Google
-              or Apple account password.
-            </p>
-          </FtlMsg>
-        )
+      {/* CMS copy is client-scoped, so it wins on every arrival path; the
+          hardcoded copy (which differs per path) is the no-CMS fallback. */}
+      {cmsDescription ? (
+        <p className="text-sm mt-6 mb-5">{cmsDescription}</p>
+      ) : passwordCreationReason === 'third_party_auth' ? (
+        <FtlMsg id="set-password-info-v2">
+          <p className="text-sm mt-6 mb-5">
+            This encrypts your data. It needs to be different from your Google
+            or Apple account password.
+          </p>
+        </FtlMsg>
       ) : (
         <FtlMsg id="set-password-passwordless-info">
           <p className="text-sm mt-6 mb-5">

@@ -418,6 +418,31 @@ describe('ConfirmSignupCode page', () => {
       });
     });
 
+    it('does not navigate to service_welcome when service=vpn on mobile (page automatically closes on fxaOAuthLogin)', async () => {
+      const integration = createMockOAuthNativeIntegration(
+        false,
+        OAuthNativeServices.Vpn
+      );
+      jest.spyOn(integration, 'isFirefoxMobileClient').mockReturnValue(true);
+      renderWithSession({
+        session,
+        integration,
+        finishOAuthFlowHandler: mockFinishOAuthFlowHandler,
+      });
+      submit();
+
+      await waitFor(() => {
+        expect(fxaOAuthLoginSpy).toHaveBeenCalledWith({
+          action: 'signup',
+          code: MOCK_OAUTH_FLOW_HANDLER_RESPONSE.code,
+          redirect: MOCK_OAUTH_FLOW_HANDLER_RESPONSE.redirect,
+          state: MOCK_OAUTH_FLOW_HANDLER_RESPONSE.state,
+          scope: MOCK_OAUTH_FLOW_HANDLER_RESPONSE.scope,
+        });
+      });
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+
     it('does not submit on paste when service=sync', async () => {
       const user = userEvent.setup();
       const integration = createMockOAuthNativeIntegration();

@@ -294,9 +294,15 @@ const ConfirmSignupCode = ({
               scope,
             });
             if (integration.isFirefoxClientServiceVpn()) {
-              navigate('/post_verify/service_welcome', {
-                state: { origin: 'signup' },
-              });
+              // Don't navigate mobile users. The client controls the web view
+              // and users will see a "blip" of the service welcome page before
+              // the client closes the view in response to the fxaOAuthLogin web
+              // channel message. See FXA-11944.
+              if (!integration.isFirefoxMobileClient()) {
+                navigate('/post_verify/service_welcome', {
+                  state: { origin: 'signup' },
+                });
+              }
             } else {
               goToSettingsWithAlertSuccess();
             }

@@ -58,6 +58,7 @@ function mockIntegration() {
     isSync: () => true,
     requiresKeys: () => true,
     wantsKeys: () => true,
+    requiresPasswordForLogin: () => true,
     isFirefoxClientServiceRelay: () => false,
     isFirefoxClientServiceSmartWindow: () => false,
     isFirefoxClientServiceVpn: () => false,

@@ -110,9 +110,10 @@ async function submit() {
 
 const user = userEvent.setup();
 
-// Note: we are removing the password confirmation requirement for signup
-// except for Sync (in in FXA-10467). All tests by default will assume that
-// password confirmation is not present or required except for Sync/Desktop Relay.
+// Password confirmation is required only when the password derives encryption
+// keys: Sync (keys mandatory), and non-Sync Firefox services (Relay/VPN/
+// SmartWindow) when the browser lacks the keys-optional capability
+// (`supportsKeysOptionalLogin` false). Plain web/OAuth-web signups omit it.
 
 describe('Signup page', () => {
   beforeEach(() => {
@@ -187,7 +188,7 @@ describe('Signup page', () => {
       );
     });
 
-    expect(screen.queryByLabelText('Repeat password')).not.toBeInTheDocument();
+    expect(screen.getByLabelText('Repeat password')).toBeVisible();
 
     // newsletters and third party auth should not be displayed
     expect(screen.queryAllByRole('checkbox')).toHaveLength(0);
@@ -246,6 +247,42 @@ describe('Signup page', () => {
     ).toBeInTheDocument();
   });
 
+  it('requires password confirmation for a service when keys-optional login is unsupported', async () => {
+    await act(() => {
+      renderWithLocalizationProvider(
+        <Subject
+          integration={createMockSignupOAuthNativeIntegration(
+            OAuthNativeServices.Vpn,
+            false
+          )}
+          supportsKeysOptionalLogin={false}
+        />
+      );
+    });
+
+    expect(screen.getByLabelText('Repeat password')).toBeVisible();
+  });
+
+  it('does not require password confirmation for a service when keys-optional login is supported', async () => {
+    await act(() => {
+      renderWithLocalizationProvider(
+        <Subject
+          integration={createMockSignupOAuthNativeIntegration(
+            OAuthNativeServices.Relay,
+            false,
+            undefined,
+            // keys-optional login supported → the service doesn't require a
+            // password, so the confirmation field is dropped.
+            /* requiresPasswordForLogin */ false
+          )}
+          supportsKeysOptionalLogin={true}
+        />
+      );
+    });
+
+    expect(screen.queryByLabelText('Repeat password')).not.toBeInTheDocument();
+  });
+
   it('renders as expected when cms enabled', async () => {
     renderWithLocalizationProvider(
       <Subject
@@ -625,7 +662,7 @@ describe('Signup page', () => {
           beginSignupHandler={mockBeginSignupHandler}
         />
       );
-      await fillOutForm(false);
+      await fillOutForm(true);
       await submit();
 
       await waitFor(() => {

@@ -338,7 +338,13 @@ export const Signup = ({
           handleSubmit,
           onSubmit,
           offeredSyncEngineConfigs,
-          requirePasswordConfirmation: isSync,
+          // Require password confirmation whenever the password is used for key
+          // derivation — Sync (keys mandatory) and non-Sync Firefox services
+          // that derive keys when the browser can't complete a keyless login
+          // (`supportsKeysOptionalLogin` false).
+          requirePasswordConfirmation:
+            integration.isSync() ||
+            integration.requiresPasswordForLogin(supportsKeysOptionalLogin),
           setSelectedNewsletterSlugs,
           cmsButton: {
             text: cmsInfo?.SignupSetPasswordPage.primaryButtonText,

@@ -54,6 +54,7 @@ export type SignupOAuthIntegration = Pick<
   | 'getWebChannelServices'
   | 'requiresKeys'
   | 'wantsKeys'
+  | 'requiresPasswordForLogin'
   | 'getClientId'
   | 'getCmsInfo'
   | 'getLegalTerms'
@@ -71,6 +72,7 @@ export type SignupBaseIntegration = Pick<
   | 'getWebChannelServices'
   | 'requiresKeys'
   | 'wantsKeys'
+  | 'requiresPasswordForLogin'
   | 'getClientId'
   | 'getCmsInfo'
   | 'getLegalTerms'

@@ -39,6 +39,7 @@ export function createMockSignupWebIntegration(): SignupBaseIntegration {
     getWebChannelServices: mockGetWebChannelServices(),
     requiresKeys: () => false,
     wantsKeys: () => false,
+    requiresPasswordForLogin: () => false,
     getCmsInfo: () => undefined,
     getLegalTerms: () => undefined,
   };
@@ -57,6 +58,7 @@ export function createMockSignupSyncDesktopV3Integration(): SignupBaseIntegratio
     getWebChannelServices: mockGetWebChannelServices({ isSync: true }),
     requiresKeys: () => true,
     wantsKeys: () => true,
+    requiresPasswordForLogin: () => true,
     getCmsInfo: () => undefined,
     getLegalTerms: () => undefined,
   };
@@ -81,6 +83,7 @@ export function createMockSignupOAuthWebIntegration(
     getWebChannelServices: mockGetWebChannelServices(),
     requiresKeys: () => false,
     wantsKeys: () => false,
+    requiresPasswordForLogin: () => false,
     getCmsInfo: () => cmsInfo,
     getLegalTerms: () => undefined,
   };
@@ -89,7 +92,8 @@ export function createMockSignupOAuthWebIntegration(
 export function createMockSignupOAuthNativeIntegration(
   service?: string,
   isSync = true,
-  cmsInfo?: RelierCmsInfo
+  cmsInfo?: RelierCmsInfo,
+  requiresPasswordForLogin = true
 ): SignupOAuthIntegration {
   const isRelay = service === OAuthNativeServices.Relay;
   const isSmartWindow = service === OAuthNativeServices.SmartWindow;
@@ -113,6 +117,7 @@ export function createMockSignupOAuthNativeIntegration(
     }),
     requiresKeys: () => true,
     wantsKeys: () => true,
+    requiresPasswordForLogin: () => requiresPasswordForLogin,
     getCmsInfo: () => cmsInfo,
     getLegalTerms: () => undefined,
   };

@@ -157,6 +157,13 @@ export const MOCK_CMS_INFO = {
     },
   },
 
+  PostVerifySetPasswordPage: {
+    headline: 'Create a password to sync',
+    description:
+      'A Mozilla account works with sync to help protect your browsing, passwords, and more.',
+    primaryButtonText: 'Continue',
+    pageTitle: 'Create a password to sync',
+  },
   SigninPage: {
     headline: 'Enter your password',
     description: 'for your Mozilla account',