Merge pull request #20383 from mozilla/fxa-13321

vbudhram · web-flow · commit 9d76edf19482 · 2026-04-16T13:12:12.000-04:00
feat(passwordless): switch OTP from 8 digits to 6 and harden rate limits
diff --git a/libs/accounts/email-renderer/src/renderer/__snapshots__/fxa-email-renderer.spec.ts.snap b/libs/accounts/email-renderer/src/renderer/__snapshots__/fxa-email-renderer.spec.ts.snap
@@ -6701,8 +6701,8 @@ exports[`FxA Email Renderer should render renderPasswordlessSigninOtp strapi: ma
               <tr>
                 <td align="left" class="text-body" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                   
-      <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><span data-l10n-id="passwordless-signin-otp-code">
-        Use this confirmation code:
+      <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><span data-l10n-id="passwordless-signin-otp-code-v2">
+        Your verification code is
       </span></div>
     
                 </td>
@@ -7110,8 +7110,8 @@ exports[`FxA Email Renderer should render renderPasswordlessSigninOtp: matches f
               <tr>
                 <td align="left" class="text-body" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                   
-      <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><span data-l10n-id="passwordless-signin-otp-code">
-        Use this confirmation code:
+      <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><span data-l10n-id="passwordless-signin-otp-code-v2">
+        Your verification code is
       </span></div>
     
                 </td>
@@ -7515,8 +7515,8 @@ exports[`FxA Email Renderer should render renderPasswordlessSignupOtp strapi: ma
               <tr>
                 <td align="left" class="text-body" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                   
-      <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><span data-l10n-id="passwordless-signup-otp-code">
-        Use this confirmation code:
+      <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><span data-l10n-id="passwordless-signup-otp-code-v2">
+        Your verification code is
       </span></div>
     
                 </td>
@@ -7924,8 +7924,8 @@ exports[`FxA Email Renderer should render renderPasswordlessSignupOtp: matches f
               <tr>
                 <td align="left" class="text-body" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                   
-      <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><span data-l10n-id="passwordless-signup-otp-code">
-        Use this confirmation code:
+      <div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"><span data-l10n-id="passwordless-signup-otp-code-v2">
+        Your verification code is
       </span></div>
     
                 </td>
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/en.ftl b/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/en.ftl
@@ -5,5 +5,5 @@ passwordless-signin-otp-subject = Use { $code } to finish sign in
 passwordless-signin-otp-preview = Code expires in { $codeExpiryMinutes } minutes
 passwordless-signin-otp-title = Finish your sign in 
 passwordless-signin-otp-request = This email was used to sign in from:
-passwordless-signin-otp-code = Use this confirmation code:
+passwordless-signin-otp-code-v2 = Your verification code is
 passwordless-signin-otp-expiry-notice = It expires in { $codeExpiryMinutes } minutes.
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/index.mjml b/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/index.mjml
@@ -22,8 +22,8 @@ can obtain one at http://mozilla.org/MPL/2.0/. %>
   <mj-column>
 
     <mj-text css-class="text-body">
-      <span data-l10n-id="passwordless-signin-otp-code">
-        Use this confirmation code:
+      <span data-l10n-id="passwordless-signin-otp-code-v2">
+        Your verification code is
       </span>
     </mj-text>
 
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/index.stories.ts b/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/index.stories.ts
@@ -13,7 +13,7 @@ export default {
 
 const data: TemplateData = {
   ...MOCK_USER_INFO,
-  code: '96318398',
+  code: '963183',
   codeExpiryMinutes: 10,
   supportUrl: 'https://support.mozilla.org',
   target: 'index',
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/index.txt b/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/index.txt
@@ -4,7 +4,7 @@ passwordless-signin-otp-request = "This email was used to sign in from:"
 
 <%- include('/partials/userInfo/index.txt') %>
 
-passwordless-signin-otp-code = "Use this confirmation code:"
+passwordless-signin-otp-code-v2 = "Your verification code is"
 
 <%- code %>
 
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/strapi.mjml b/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/strapi.mjml
@@ -20,8 +20,8 @@
   <mj-column>
 
     <mj-text css-class="text-body">
-      <span data-l10n-id="passwordless-signin-otp-code">
-        Use this confirmation code:
+      <span data-l10n-id="passwordless-signin-otp-code-v2">
+        Your verification code is
       </span>
     </mj-text>
 
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/strapi.stories.ts b/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/strapi.stories.ts
@@ -13,7 +13,7 @@ export default {
 
 const data: TemplateData = {
   ...MOCK_USER_INFO,
-  code: '12345678',
+  code: '123456',
   codeExpiryMinutes: 10,
   supportUrl: 'https://support.mozilla.org',
   time: '11:45 AM',
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/strapi.txt b/libs/accounts/email-renderer/src/templates/passwordlessSigninOtp/strapi.txt
@@ -4,7 +4,7 @@
 
 <%- include('/partials/userInfo/index.txt') %>
 
-passwordless-signin-otp-code = "Use this confirmation code:"
+passwordless-signin-otp-code-v2 = "Your verification code is"
 
 <%- code %>
 
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/en.ftl b/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/en.ftl
@@ -5,5 +5,5 @@ passwordless-signup-otp-subject = Use { $code } to finish sign up
 passwordless-signup-otp-preview = Code expires in { $codeExpiryMinutes } minutes
 passwordless-signup-otp-title = Finish your sign up
 passwordless-signup-otp-request = An account was created using this email address from:
-passwordless-signup-otp-code = Use this confirmation code:
+passwordless-signup-otp-code-v2 = Your verification code is
 passwordless-signup-otp-expiry-notice = It expires in { $codeExpiryMinutes } minutes.
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/index.mjml b/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/index.mjml
@@ -22,8 +22,8 @@ can obtain one at http://mozilla.org/MPL/2.0/. %>
   <mj-column>
 
     <mj-text css-class="text-body">
-      <span data-l10n-id="passwordless-signup-otp-code">
-        Use this confirmation code:
+      <span data-l10n-id="passwordless-signup-otp-code-v2">
+        Your verification code is
       </span>
     </mj-text>
 
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/index.stories.ts b/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/index.stories.ts
@@ -13,7 +13,7 @@ export default {
 
 const data: TemplateData = {
   ...MOCK_USER_INFO,
-  code: '96318398',
+  code: '963183',
   codeExpiryMinutes: 10,
   supportUrl: 'https://support.mozilla.org',
   target: 'index',
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/index.txt b/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/index.txt
@@ -4,7 +4,7 @@ passwordless-signup-otp-request = "An account was created using this email addre
 
 <%- include('/partials/userInfo/index.txt') %>
 
-passwordless-signup-otp-code = "Use this confirmation code:"
+passwordless-signup-otp-code-v2 = "Your verification code is"
 
 <%- code %>
 
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/strapi.mjml b/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/strapi.mjml
@@ -20,8 +20,8 @@
   <mj-column>
 
     <mj-text css-class="text-body">
-      <span data-l10n-id="passwordless-signup-otp-code">
-        Use this confirmation code:
+      <span data-l10n-id="passwordless-signup-otp-code-v2">
+        Your verification code is
       </span>
     </mj-text>
 
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/strapi.stories.ts b/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/strapi.stories.ts
@@ -13,7 +13,7 @@ export default {
 
 const data: TemplateData = {
   ...MOCK_USER_INFO,
-  code: '12345678',
+  code: '123456',
   codeExpiryMinutes: 10,
   supportUrl: 'https://support.mozilla.org',
   time: '11:45 AM',
diff --git a/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/strapi.txt b/libs/accounts/email-renderer/src/templates/passwordlessSignupOtp/strapi.txt
@@ -4,7 +4,7 @@
 
 <%- include('/partials/userInfo/index.txt') %>
 
-passwordless-signup-otp-code = "Use this confirmation code:"
+passwordless-signup-otp-code-v2 = "Your verification code is"
 
 <%- code %>
 
diff --git a/packages/functional-tests/pages/signinPasswordlessCode.ts b/packages/functional-tests/pages/signinPasswordlessCode.ts
@@ -16,7 +16,7 @@ export class SigninPasswordlessCodePage extends BaseTokenCodePage {
 
   get codeInput() {
     this.checkPath();
-    return this.page.getByLabel('Enter 8-digit code');
+    return this.page.getByLabel('Enter 6-digit code');
   }
 
   get submitButton() {
diff --git a/packages/functional-tests/tests/passwordless/passwordlessApi.spec.ts b/packages/functional-tests/tests/passwordless/passwordlessApi.spec.ts
@@ -229,13 +229,15 @@ test.describe('severity-2', () => {
           target.ciHeader
         );
 
-        // Consume the real code so we can test with a bogus one
-        await target.emailClient.getPasswordlessSignupCode(email);
+        // Get the real code, then derive an invalid one by mutating a digit
+        const realCode =
+          await target.emailClient.getPasswordlessSignupCode(email);
+        const invalidCode = `${(Number(realCode[0]) + 1) % 10}${realCode.slice(1)}`;
 
         try {
           await target.authClient.passwordlessConfirmCode(
             email,
-            '00000000',
+            invalidCode,
             {
               clientId: target.relierClientID,
               service: SUPPORTED_SERVICE,
diff --git a/packages/functional-tests/tests/passwordless/signinPasswordless.spec.ts b/packages/functional-tests/tests/passwordless/signinPasswordless.spec.ts
@@ -660,8 +660,8 @@ test.describe('severity-1 #smoke', () => {
 
         await page.waitForURL(/signin_passwordless_code/);
 
-        // Enter an invalid 8-digit code
-        await signinPasswordlessCode.fillOutCodeForm('12345678');
+        // Enter an invalid 6-digit code
+        await signinPasswordlessCode.fillOutCodeForm('123456');
 
         // Should show error message (tooltip or error text)
         await expect(
diff --git a/packages/fxa-auth-server/config/index.ts b/packages/fxa-auth-server/config/index.ts
@@ -2201,7 +2201,7 @@ const convictConf = convict({
     },
     digits: {
       doc: 'Number of digits in passwordless OTP code',
-      default: 8,
+      default: 6,
       format: 'nat',
       env: 'OTP_PASSWORDLESS_DIGITS',
     },
diff --git a/packages/fxa-auth-server/config/rate-limit-rules.txt b/packages/fxa-auth-server/config/rate-limit-rules.txt
@@ -193,8 +193,8 @@ passwordlessSendOtp                    : ip               : 100         : 24 hou
 
 # Passwordless OTP Verification Limits
 passwordlessVerifyOtp                  : ip_email         : 5           : 10 minutes      : 15 minutes   : block
-passwordlessVerifyOtp                  : email            : 10          : 10 minutes      : 30 minutes   : report
+passwordlessVerifyOtp                  : email            : 10          : 10 minutes      : 30 minutes   : block
 passwordlessVerifyOtp                  : ip               : 100         : 24 hours        : 15 minutes   : ban
 passwordlessVerifyOtpPerDay            : ip_email         : 10          : 24 hours        : 24 hours     : block
-passwordlessVerifyOtpPerDay            : email            : 20          : 24 hours        : 24 hours     : report
+passwordlessVerifyOtpPerDay            : email            : 20          : 24 hours        : 24 hours     : block
 passwordlessVerifyOtpPerDay            : ip               : 100         : 24 hours        : 15 minutes   : ban
diff --git a/packages/fxa-settings/src/components/FormVerifyCode/index.test.tsx b/packages/fxa-settings/src/components/FormVerifyCode/index.test.tsx
@@ -76,15 +76,21 @@ describe('FormVerifyCode component', () => {
   describe('Submit button state management', () => {
     it('should disable submit button initially', () => {
       renderWithLocalizationProvider(<Subject />);
-      const submitButton = screen.getByRole('button', { name: 'Check that code' });
+      const submitButton = screen.getByRole('button', {
+        name: 'Check that code',
+      });
       expect(submitButton).toBeDisabled();
     });
 
     it('should enable submit button when valid code is entered', async () => {
       const user = userEvent.setup();
       renderWithLocalizationProvider(<Subject />);
-      const input = screen.getByRole('textbox', { name: 'Enter your 4-digit code' });
-      const submitButton = screen.getByRole('button', { name: 'Check that code' });
+      const input = screen.getByRole('textbox', {
+        name: 'Enter your 4-digit code',
+      });
+      const submitButton = screen.getByRole('button', {
+        name: 'Check that code',
+      });
 
       // Initially disabled
       expect(submitButton).toBeDisabled();
@@ -99,8 +105,12 @@ describe('FormVerifyCode component', () => {
     it('should disable submit button when invalid code is entered', async () => {
       const user = userEvent.setup();
       renderWithLocalizationProvider(<Subject />);
-      const input = screen.getByRole('textbox', { name: 'Enter your 4-digit code' });
-      const submitButton = screen.getByRole('button', { name: 'Check that code' });
+      const input = screen.getByRole('textbox', {
+        name: 'Enter your 4-digit code',
+      });
+      const submitButton = screen.getByRole('button', {
+        name: 'Check that code',
+      });
 
       // Type invalid code (less than 4 digits)
       await user.type(input, '123');
@@ -112,8 +122,12 @@ describe('FormVerifyCode component', () => {
     it('should disable submit button when code becomes invalid', async () => {
       const user = userEvent.setup();
       renderWithLocalizationProvider(<Subject />);
-      const input = screen.getByRole('textbox', { name: 'Enter your 4-digit code' });
-      const submitButton = screen.getByRole('button', { name: 'Check that code' });
+      const input = screen.getByRole('textbox', {
+        name: 'Enter your 4-digit code',
+      });
+      const submitButton = screen.getByRole('button', {
+        name: 'Check that code',
+      });
 
       // Type valid code first
       await user.type(input, '1234');
@@ -131,19 +145,26 @@ describe('FormVerifyCode component', () => {
         inputLabelText: 'Enter your 6-digit code',
         pattern: '[0-9]{6}',
         maxLength: 6,
+
         submitButtonFtlId: 'demo-submit-button-id',
         submitButtonText: 'Check that code',
       };
 
       renderWithLocalizationProvider(
         <Subject
           formAttributes={customFormAttributes}
-          verifyCode={jest.fn().mockImplementation((code: string) => Promise.resolve())}
+          verifyCode={jest
+            .fn()
+            .mockImplementation((code: string) => Promise.resolve())}
         />
       );
 
-      const input = screen.getByRole('textbox', { name: 'Enter your 6-digit code' });
-      const submitButton = screen.getByRole('button', { name: 'Check that code' });
+      const input = screen.getByRole('textbox', {
+        name: 'Enter your 6-digit code',
+      });
+      const submitButton = screen.getByRole('button', {
+        name: 'Check that code',
+      });
 
       // Initially disabled
       expect(submitButton).toBeDisabled();
@@ -163,8 +184,12 @@ describe('FormVerifyCode component', () => {
       const user = userEvent.setup();
       renderWithLocalizationProvider(<Subject />);
 
-      const input = screen.getByRole('textbox', { name: 'Enter your 4-digit code' });
-      const submitButton = screen.getByRole('button', { name: 'Check that code' });
+      const input = screen.getByRole('textbox', {
+        name: 'Enter your 4-digit code',
+      });
+      const submitButton = screen.getByRole('button', {
+        name: 'Check that code',
+      });
 
       // Type character by character
       await user.type(input, '1');
@@ -184,8 +209,12 @@ describe('FormVerifyCode component', () => {
       const user = userEvent.setup();
       renderWithLocalizationProvider(<Subject />);
 
-      const input = screen.getByRole('textbox', { name: 'Enter your 4-digit code' });
-      const submitButton = screen.getByRole('button', { name: 'Check that code' });
+      const input = screen.getByRole('textbox', {
+        name: 'Enter your 4-digit code',
+      });
+      const submitButton = screen.getByRole('button', {
+        name: 'Check that code',
+      });
 
       // Type valid code
       await user.type(input, '1234');
@@ -221,6 +250,7 @@ describe('FormVerifyCode component', () => {
         inputMode: InputModeEnum.text,
         pattern: '[a-zA-Z0-9]',
         maxLength: 10,
+
         submitButtonFtlId: 'demo-submit-button-id',
         submitButtonText: 'Check that code',
       };
diff --git a/packages/fxa-settings/src/components/FormVerifyCode/index.tsx b/packages/fxa-settings/src/components/FormVerifyCode/index.tsx
@@ -31,6 +31,7 @@ export type FormAttributes = {
   inputMode?: InputModeEnum;
   pattern: string;
   maxLength: number;
+  autoComplete?: 'off' | 'one-time-code';
   submitButtonText: string;
   submitButtonFtlId: string;
 };
@@ -172,7 +173,7 @@ const FormVerifyCode = ({
         maxLength={formAttributes.maxLength}
         className="text-start"
         anchorPosition="start"
-        autoComplete="off"
+        autoComplete={formAttributes.autoComplete ?? 'off'}
         spellCheck={false}
         prefixDataTestId={viewName}
         tooltipPosition="bottom"
diff --git a/packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/en.ftl b/packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/en.ftl
@@ -20,7 +20,7 @@ signin-passwordless-code-instruction = { $expirationMinutes ->
     *[other] Enter the code that was sent to <email>{ $email }</email> within { $expirationMinutes } minutes.
   }
 
-signin-passwordless-code-input-label = Enter 8-digit code
+signin-passwordless-code-input-label-v2 = Enter 6-digit code
 
 signin-passwordless-code-confirm-button = Confirm
 
diff --git a/packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/index.test.tsx b/packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/index.test.tsx
diff --git a/packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/index.tsx b/packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/index.tsx
diff --git a/packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/mocks.tsx b/packages/fxa-settings/src/pages/Signin/SigninPasswordlessCode/mocks.tsx
