feat(settings): Add code resend for secondary email add

Because:

* We want to allow a resend option directly on the verification page
* The resend option on settings will no longer be available on the settings page (unconfirmed emails no longer stored in db and there not displayed in settings)
* We want the resend to be authenticated with the email scoped JWT token

This commit:

* Add button to resend confirmation code in PageSecondaryEmailVerify
* Adds success/error banner for code resend
* Include cool-off to prevent successive clicks, including disabled state
* Add unit tests, l10n, storybook states
* Add mfa-authed secondary email code resend endpoint that relies on redis, not unconfirmed email in db, and returns an error if no valid reservation is found
* Add route unit tests for the new resend endpoint
* Add functional test for resend

Closes #FXA-12649

Author: vpomerleau

packages/functional-tests/pages/settings/secondaryEmail.ts

@@ -33,7 +33,18 @@ export class SecondaryEmailPage extends SettingsLayout {
   }
 
   get confirmButton() {
-    return this.page.getByRole('button', { name: 'confirm' });
+    return this.page.getByRole('button', { name: /^Confirm/ });
+  }
+
+  get resendConfirmationCodeButton() {
+    return this.page.getByRole('button', {
+      name: 'Resend confirmation code',
+    });
+  }
+
+  async clickResendConfirmationCode() {
+    await expect(this.step2Heading).toBeVisible();
+    await this.resendConfirmationCodeButton.click();
   }
 
   async submit() {

packages/functional-tests/tests/settings/changeEmail.spec.ts

@@ -217,6 +217,33 @@ test.describe('severity-1 #smoke', () => {
 
       await expect(settings.alertBar).toHaveText(/successfully deleted/);
     });
+
+    test('resend secondary email code and verify', async ({
+      target,
+      pages: { page, secondaryEmail, settings, signin },
+      testAccountTracker,
+    }) => {
+      const credentials = await testAccountTracker.signUpAndPrimeMfa({
+        scopes: 'email',
+      });
+      await signInAccount(target, page, settings, signin, credentials);
+
+      const newEmail = testAccountTracker.generateEmail();
+
+      await settings.goto();
+      await settings.secondaryEmail.addButton.click();
+      await secondaryEmail.fillOutEmail(newEmail);
+      // let's make sure to retrieve and clear the initial code
+      // to make sure that the next code we get is the one we just resent
+      await target.emailClient.getVerifySecondaryCode(newEmail);
+      await secondaryEmail.clickResendConfirmationCode();
+      // Fetch the new secondary verification code and submit
+      const resentCode: string =
+        await target.emailClient.getVerifySecondaryCode(newEmail);
+      await secondaryEmail.fillOutVerificationCode(resentCode);
+
+      await expect(settings.alertBar).toHaveText(/successfully added/);
+    });
   });
 });
 

packages/fxa-auth-client/lib/client.ts

@@ -1994,6 +1994,28 @@ export default class AuthClient {
     );
   }
 
+  /**
+   * Resend secondary email verification code using MFA JWT (email scope).
+   * This route supports resending when the email is reserved in Redis but
+   * not yet persisted in the DB.
+   *
+   * @param jwt MFA JWT with scope 'mfa:email'
+   * @param email Secondary email address to resend code to
+   * @param headers Optional extra headers
+   */
+  async recoveryEmailSecondaryResendCodeWithJwt(
+    jwt: string,
+    email: string,
+    headers?: Headers
+  ) {
+    return this.jwtPost(
+      '/mfa/recovery_email/secondary/resend_code',
+      jwt,
+      { email },
+      headers
+    );
+  }
+
   /**
    * @deprecated Use createTotpTokenWithJwt instead
    *

packages/fxa-auth-server/lib/routes/emails.js

@@ -1407,6 +1407,111 @@ module.exports = (
       },
       handler: handlers.recoveryEmailSecondaryVerifyCodePost,
     },
+    {
+      method: 'POST',
+      path: '/mfa/recovery_email/secondary/resend_code',
+      options: {
+        ...EMAILS_DOCS.RECOVERY_EMAIL_SECONDARY_RESEND_CODE_POST,
+        auth: {
+          strategy: 'mfa',
+          scope: ['mfa:email'],
+          payload: false,
+        },
+        validate: {
+          payload: isA.object({
+            email: validators
+              .email()
+              .required()
+              .description(DESCRIPTION.emailSecondaryVerify),
+          }),
+        },
+        response: {},
+      },
+      handler: async function (request) {
+        // This MFA-protected route resends a secondary email verification code
+        // when the email is reserved in Redis but not yet stored in the DB.
+        // It avoids returning "unowned email" errors for reserved-but-not-stored emails.
+        log.begin('Account.RecoveryEmailSecondaryResend.mfa', request);
+        const sessionToken = request.auth.credentials;
+        const { email } = request.payload;
+        const normalizedEmail = normalizeEmail(email);
+
+        await customs.checkAuthenticated(
+          request,
+          sessionToken.uid,
+          sessionToken.email,
+          'recoveryEmailSecondaryResendCode'
+        );
+
+        // Verify Redis reservation exists and belongs to this account
+        const key = toRedisSecondaryEmailReservationKey(normalizedEmail);
+        const rawRecord = await authServerCacheRedis.get(key);
+        let parsedRecord;
+        if (rawRecord) {
+          try {
+            parsedRecord = JSON.parse(rawRecord);
+          } catch (err) {
+            // Bad record: cleanup and throw unowned email error
+            await authServerCacheRedis.del(key);
+            throw error.cannotResendEmailCodeToUnownedEmail();
+          }
+        }
+
+        const uidStr = Buffer.isBuffer(sessionToken.uid)
+          ? sessionToken.uid.toString('base64')
+          : String(sessionToken.uid);
+
+        // If there is no reservation or it belongs to another user, throw.
+        if (!parsedRecord || parsedRecord.uid !== uidStr) {
+          throw error.cannotResendEmailCodeToUnownedEmail();
+        }
+
+        // Generate a new OTP code using the reserved secret and resend the email.
+        const secret = parsedRecord.secret;
+        const code = otpUtils.generateOtpCode(secret, otpOptions);
+
+        const {
+          deviceId,
+          uaBrowser,
+          uaBrowserVersion,
+          uaOS,
+          uaOSVersion,
+          uaDeviceType,
+          uid,
+        } = sessionToken;
+
+        const geoData = request.app.geo;
+        await mailer.sendVerifySecondaryCodeEmail(
+          [
+            {
+              email,
+              normalizedEmail,
+              isVerified: false,
+              isPrimary: false,
+              uid,
+            },
+          ],
+          sessionToken,
+          {
+            code,
+            deviceId,
+            acceptLanguage: request.app.acceptLanguage,
+            email,
+            primaryEmail: sessionToken.email,
+            location: geoData.location,
+            timeZone: geoData.timeZone,
+            uaBrowser,
+            uaBrowserVersion,
+            uaOS,
+            uaOSVersion,
+            uaDeviceType,
+            uid,
+          }
+        );
+
+        return {};
+      },
+    },
     {
       method: 'POST',
       path: '/recovery_email/secondary/verify_code',

packages/fxa-auth-server/test/local/routes/emails.js

@@ -1790,6 +1790,120 @@ describe('/recovery_email', () => {
   });
 });
 
+describe('/mfa/recovery_email/secondary/resend_code', () => {
+  it('resends code when redis reservation exists for this uid', async () => {
+    const uid = uuid.v4({}, Buffer.alloc(16)).toString('hex');
+    const email = TEST_EMAIL_ADDITIONAL;
+    const normalized = normalizeEmail(email);
+    const mockLog = mocks.mockLog();
+    const mockMailer = mocks.mockMailer();
+    const secret = 'abcd1234abcd1234abcd1234abcd1234';
+
+    const authServerCacheRedis = {
+      get: sinon.stub().resolves(JSON.stringify({ uid, secret })),
+      set: sinon.stub().resolves('OK'),
+      del: sinon.stub().resolves(1),
+    };
+
+    const routes = makeRoutes(
+      {
+        authServerCacheRedis,
+        mailer: mockMailer,
+        log: mockLog,
+      },
+      {}
+    );
+    const route = getRoute(routes, '/mfa/recovery_email/secondary/resend_code');
+
+    const request = mocks.mockRequest({
+      credentials: {
+        uid,
+        email: TEST_EMAIL,
+        deviceId: 'device-xyz',
+      },
+      payload: { email },
+      app: { geo: knownIpLocation },
+    });
+
+    const otpUtilsLocal = require('../../../lib/routes/utils/otp').default(
+      {},
+      { histogram: () => {} }
+    );
+    const expectedCode = otpUtilsLocal.generateOtpCode(secret, otpOptions);
+
+    const response = await runTest(route, request);
+    assert.ok(response);
+    assert.calledOnce(mockMailer.sendVerifySecondaryCodeEmail);
+    const args = mockMailer.sendVerifySecondaryCodeEmail.args[0];
+    assert.equal(args[0][0].normalizedEmail, normalized);
+    assert.equal(args[2].code, expectedCode, 'verification codes match');
+  });
+
+  it('errors when no reservation exists', async () => {
+    const uid = uuid.v4({}, Buffer.alloc(16)).toString('hex');
+    const email = TEST_EMAIL_ADDITIONAL;
+    const mockMailer = mocks.mockMailer();
+    const authServerCacheRedis = {
+      get: sinon.stub().resolves(null),
+      set: sinon.stub().resolves('OK'),
+      del: sinon.stub().resolves(1),
+    };
+    const routes = makeRoutes({ authServerCacheRedis, mailer: mockMailer }, {});
+    const route = getRoute(routes, '/mfa/recovery_email/secondary/resend_code');
+    const request = mocks.mockRequest({
+      credentials: { uid, email: TEST_EMAIL },
+      payload: { email },
+    });
+    await assert.failsAsync(runTest(route, request), {
+      errno: error.ERRNO.RESEND_EMAIL_CODE_TO_UNOWNED_EMAIL,
+    });
+  });
+
+  it('errors when reservation belongs to a different uid', async () => {
+    const uid = uuid.v4({}, Buffer.alloc(16)).toString('hex');
+    const otherUid = uuid.v4({}, Buffer.alloc(16)).toString('hex');
+    const email = TEST_EMAIL_ADDITIONAL;
+    const mockMailer = mocks.mockMailer();
+    const authServerCacheRedis = {
+      get: sinon
+        .stub()
+        .resolves(JSON.stringify({ uid: otherUid, secret: 'abc' })),
+      set: sinon.stub().resolves('OK'),
+      del: sinon.stub().resolves(1),
+    };
+    const routes = makeRoutes({ authServerCacheRedis, mailer: mockMailer }, {});
+    const route = getRoute(routes, '/mfa/recovery_email/secondary/resend_code');
+    const request = mocks.mockRequest({
+      credentials: { uid, email: TEST_EMAIL },
+      payload: { email },
+    });
+    await assert.failsAsync(runTest(route, request), {
+      errno: error.ERRNO.RESEND_EMAIL_CODE_TO_UNOWNED_EMAIL,
+    });
+  });
+
+  it('cleans invalid redis record and errors', async () => {
+    const uid = uuid.v4({}, Buffer.alloc(16)).toString('hex');
+    const email = TEST_EMAIL_ADDITIONAL;
+    const mockMailer = mocks.mockMailer();
+    const authServerCacheRedis = {
+      get: sinon.stub().resolves('not-json'),
+      set: sinon.stub().resolves('OK'),
+      del: sinon.stub().resolves(1),
+    };
+    const routes = makeRoutes({ authServerCacheRedis, mailer: mockMailer }, {});
+    const route = getRoute(routes, '/mfa/recovery_email/secondary/resend_code');
+    const request = mocks.mockRequest({
+      credentials: { uid, email: TEST_EMAIL },
+      payload: { email },
+    });
+    await assert.failsAsync(runTest(route, request), {
+      errno: error.ERRNO.RESEND_EMAIL_CODE_TO_UNOWNED_EMAIL,
+    });
+    assert.calledOnce(authServerCacheRedis.del);
+  });
+});
+
 describe('/emails/reminders/cad', () => {
   const mockLog = mocks.mockLog();
   let accountRoutes, mockRequest, route, uid;

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

@@ -1,7 +1,6 @@
 ## Verify secondary email page
 
 add-secondary-email-step-2 = Step 2 of 2
-verify-secondary-email-error-3 = There was a problem sending the confirmation code
 verify-secondary-email-page-title =
   .title = Secondary email
 verify-secondary-email-verification-code-2 =
@@ -16,5 +15,6 @@ verify-secondary-email-please-enter-code-2 = Please enter the confirmation code
 # Variables:
 #   $email (String) - the user's email address, which does not need translation.
 verify-secondary-email-success-alert-2 = { $email } successfully added
+verify-secondary-email-resend-code-button = Resend confirmation code
 
 ##