feat(recovery): Add reset password recovery phone views and functionality

Author: vbudhram

packages/functional-tests/pages/resetPassword.ts

@@ -222,4 +222,21 @@ export class ResetPasswordPage extends BaseLayout {
   async continueWithoutDownloadingRecoveryKey() {
     return this.page.getByText('Continue without downloading').click();
   }
+
+  // Password reset with recovery phone
+  async fillRecoveryPhoneCodeForm(code: string) {
+    await this.page.locator('input[name="code"]').fill(code);
+  }
+
+  async clickConfirmButton() {
+    await this.page.getByRole('button', { name: 'Confirm' }).click();
+  }
+
+  async clickChoosePhone() {
+    return this.page.locator('.input-radio-wrapper').first().click();
+  }
+
+  async clickContinueButton() {
+    return this.page.getByRole('button', { name: 'Continue' });
+  }
 }

packages/functional-tests/tests/resetPassword/resetPassword2FA.spec.ts

@@ -4,6 +4,32 @@
 
 import { expect, test } from '../../lib/fixtures/standard';
 import { getCode } from 'fxa-settings/src/lib/totp';
+import { TargetName, getFromEnvWithFallback } from '../../lib/targets';
+
+// Default test number, see Twilio test credentials phone numbers:
+// https://www.twilio.com/docs/iam/test-credentials
+const TEST_NUMBER = '4159929960';
+
+/**
+ * Checks the process env for a configured twilio test phone number. Defaults
+ * to generic magic test number if one is not provided.
+ * @param targetName The test target name. eg local, stage, prod.
+ * @returns
+ */
+function getPhoneNumber(targetName: TargetName) {
+  if (targetName === 'local') {
+    return TEST_NUMBER;
+  }
+  return getFromEnvWithFallback(
+    'FUNCTIONAL_TESTS__TWILIO__TEST_NUMBER',
+    targetName,
+    TEST_NUMBER
+  );
+}
+
+function usingRealTestPhoneNumber(targetName: TargetName) {
+  return getPhoneNumber(targetName) !== TEST_NUMBER;
+}
 
 test.describe('severity-1 #smoke', () => {
   test('can reset password with 2FA enabled', async ({
@@ -332,3 +358,130 @@ test.describe('severity-1 #smoke', () => {
     credentials.password = newPassword;
   });
 });
+
+test.describe('reset password with recovery phone', () => {
+  test.describe.configure({ mode: 'serial' });
+
+  test.beforeAll(async ({ target }) => {
+    /**
+     * Important! Twilio does not allow you to fetch messages when using test
+     * credentials. Twilio also does not allow you to send messages to magic
+     * test numbers with real credentials.
+     *
+     * Therefore, if a 'magic' test number is configured, then we need to
+     * use redis to peek at codes sent out, and if a 'real' testing phone
+     * number is being being used, then we need to check the Twilio API for
+     * the message sent out and look at the code within.
+     */
+    if (
+      usingRealTestPhoneNumber(target.name) &&
+      !target.smsClient.isTwilioEnabled()
+    ) {
+      throw new Error(
+        'Twilio must be enabled when using a real test number.'
+      );
+    }
+    if (
+      !usingRealTestPhoneNumber(target.name) &&
+      !target.smsClient.isRedisEnabled()
+    ) {
+      throw new Error('Redis must be enabled when using a real test number.');
+    }
+  });
+
+  test.beforeEach(async ({ pages: { configPage } }) => {
+    // Ensure that the feature flag is enabled
+    const config = await configPage.getConfig();
+    test.skip(config.featureFlags.recoveryPhonePasswordReset2fa !== true);
+  });
+
+  test('can reset password with 2FA enabled using recovery phone', async ({
+                                                                            page,
+                                                                            target,
+                                                                            pages: { signin, resetPassword, settings, totp, recoveryPhone },
+                                                                            testAccountTracker,
+                                                                          }) => {
+    const credentials = await testAccountTracker.signUp();
+    const newPassword = testAccountTracker.generatePassword();
+
+    await signin.goto();
+    await signin.fillOutEmailFirstForm(credentials.email);
+    await signin.fillOutPasswordForm(credentials.password);
+
+    await expect(settings.settingsHeading).toBeVisible();
+    await expect(settings.totp.status).toHaveText('Disabled');
+
+    await settings.totp.addButton.click();
+    await totp.fillOutTotpForms();
+
+    await expect(settings.settingsHeading).toBeVisible();
+    await expect(settings.alertBar).toHaveText(
+      'Two-step authentication has been enabled'
+    );
+    await expect(settings.totp.status).toHaveText('Enabled');
+
+    await settings.totp.addRecoveryPhoneButton.click();
+    await page.waitForURL(/recovery_phone\/setup/);
+
+    await expect(recoveryPhone.addHeader()).toBeVisible();
+
+    await recoveryPhone.enterPhoneNumber(getPhoneNumber(target.name));
+    await recoveryPhone.clickSendCode();
+
+    await expect(recoveryPhone.confirmHeader).toBeVisible();
+
+    let smsCode = await target.smsClient.getCode(
+      getPhoneNumber(target.name),
+      credentials.uid
+    );
+
+    await recoveryPhone.enterCode(smsCode);
+    await recoveryPhone.clickConfirm();
+
+    await page.waitForURL(/settings/);
+    await expect(settings.alertBar).toHaveText('Recovery phone added');
+
+    await settings.signOut();
+
+    await resetPassword.goto();
+
+    await resetPassword.fillOutEmailForm(credentials.email);
+
+    const code = await target.emailClient.getResetPasswordCode(
+      credentials.email
+    );
+    await resetPassword.fillOutResetPasswordCodeForm(code);
+
+    await page.waitForURL(/confirm_totp_reset_password/);
+
+    await resetPassword.clickTroubleEnteringCode();
+
+    await page.waitForURL(/reset_password_totp_recovery_choice/);
+
+    await resetPassword.clickChoosePhone();
+    await resetPassword.clickContinueButton();
+
+    await page.waitForURL(/reset_password_recovery_phone/);
+
+    smsCode = await target.smsClient.getCode(
+      getPhoneNumber(target.name),
+      credentials.uid
+    );
+
+    await resetPassword.fillRecoveryPhoneCodeForm(smsCode);
+
+    await resetPassword.clickConfirmButton();
+
+    // Create and submit new password
+    await resetPassword.fillOutNewPasswordForm(newPassword);
+
+    await expect(settings.alertBar).toHaveText('Your password has been reset');
+
+    await expect(settings.settingsHeading).toBeVisible();
+
+    // Remove TOTP before teardown
+    await settings.disconnectTotp();
+    // Cleanup requires setting this value to correct password
+    credentials.password = newPassword;
+  });
+})

packages/fxa-auth-server/lib/routes/recovery-phone.ts

@@ -628,7 +628,11 @@ class RecoveryPhoneHandler {
   }
 
   async confirmResetPasswordCode(request: AuthRequest) {
-    const { uid, email } = request.auth.credentials as PasswordForgotToken;
+    const { id, uid, email } = request.auth.credentials as unknown as {
+      id: string;
+      uid: string;
+      email: string;
+    };
 
     const { code } = request.payload as unknown as {
       code: string;
@@ -661,6 +665,11 @@ class RecoveryPhoneHandler {
     }
 
     if (success) {
+      await this.db.verifyPasswordForgotTokenWithMethod(
+        id,
+        'totp-2fa'
+      );
+
       await this.glean.resetPassword.recoveryPhoneCodeComplete(request);
 
       this.statsd.increment('account.resetPassword.recoveryPhone.success');

packages/fxa-content-server/server/lib/beta-settings.js

@@ -101,6 +101,9 @@ const settingsConfig = {
     recoveryCodeSetupOnSyncSignIn: config.get(
       'featureFlags.recoveryCodeSetupOnSyncSignIn'
     ),
+    recoveryPhonePasswordReset2fa: config.get(
+      'featureFlags.recoveryPhonePasswordReset2fa'
+    ),
   },
   nimbusPreview: config.get('nimbusPreview'),
 };

packages/fxa-content-server/server/lib/routes/react-app/content-server-routes.js

@@ -59,6 +59,10 @@ const FRONTEND_ROUTES = [
   'reset_password_confirmed',
   'reset_password_verified',
   'reset_password_with_recovery_key_verified',
+  'reset_password_totp_recovery_choice',
+  'reset_password_recovery_phone',
+  'confirm_backup_code_reset_password',
+  'confirm_totp_reset_password',
   'security_events',
   'signin',
   'signin_bounced',

packages/fxa-content-server/server/lib/routes/react-app/route-definition-index.js

@@ -55,6 +55,9 @@ function getIndexRouteDefinition(config) {
   const FEATURE_FLAGS_RECOVERY_CODE_SETUP_ON_SYNC_SIGN_IN = config.get(
     'featureFlags.recoveryCodeSetupOnSyncSignIn'
   );
+  const FEATURE_FLAGS_RECOVERY_PHONE_PASSWORD_RESET_2FA = config.get(
+    'featureFlags.recoveryPhonePasswordReset2fa'
+  );
   const NIMBUS_PREVIEW = config.get('nimbusPreview');
   const GLEAN_ENABLED = config.get('glean.enabled');
   const GLEAN_APPLICATION_ID = config.get('glean.applicationId');
@@ -116,6 +119,7 @@ function getIndexRouteDefinition(config) {
       sendFxAStatusOnSettings: FEATURE_FLAGS_FXA_STATUS_ON_SETTINGS,
       recoveryCodeSetupOnSyncSignIn:
         FEATURE_FLAGS_RECOVERY_CODE_SETUP_ON_SYNC_SIGN_IN,
+      recoveryPhonePasswordReset2fa: FEATURE_FLAGS_RECOVERY_PHONE_PASSWORD_RESET_2FA
     },
     nimbusPreview: NIMBUS_PREVIEW,
     glean: {

packages/fxa-settings/src/components/App/index.tsx

@@ -85,6 +85,7 @@ import { IndexContainer } from '../../pages/Index/container';
 import AuthorizationContainer from '../../pages/Authorization/container';
 import CookiesDisabled from '../../pages/CookiesDisabled';
 import ResetPasswordRecoveryChoiceContainer from '../../pages/ResetPassword/ResetPasswordRecoveryChoice/container';
+import ResetPasswordRecoveryPhoneContainer from '../../pages/ResetPassword/ResetPasswordRecoveryPhone/container';
 
 const Settings = lazy(() => import('../Settings'));
 
@@ -375,6 +376,9 @@ const AuthAndAccountSetupRoutes = ({
       />
       <ConfirmResetPasswordContainer path="/confirm_reset_password/*" />
       <ResetPasswordRecoveryChoiceContainer path="/reset_password_totp_recovery_choice/*" />
+      <ResetPasswordRecoveryPhoneContainer path="/reset_password_recovery_phone/*"
+                                           {...{ integration }}
+      />
       <ConfirmTotpResetPasswordContainer path="/confirm_totp_reset_password/*" />
       <ConfirmBackupCodeResetPasswordContainer path="/confirm_backup_code_reset_password/*" />
       <CompleteResetPasswordContainer

packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/container.test.tsx

@@ -12,10 +12,12 @@ import { MOCK_EMAIL, MOCK_PASSWORD_CHANGE_TOKEN, MOCK_UID } from '../../mocks';
 import ConfirmTotpResetPasswordContainer from './container';
 
 const mockCheckTotp = jest.fn();
+const mockRecoveryPhoneGetWithPasswordForgotToken = jest.fn();
 jest.mock('../../../models', () => ({
   __esModule: true,
   useAuthClient: () => ({
     checkTotpTokenCodeWithPasswordForgotToken: mockCheckTotp,
+    recoveryPhoneGetWithPasswordForgotToken: mockRecoveryPhoneGetWithPasswordForgotToken,
   }),
   useFtlMsgResolver: () => ({
     getMsg: (_id: string, fallback: string) => fallback,
@@ -70,10 +72,12 @@ describe('ConfirmTotpResetPasswordContainer', () => {
     capturedProps = undefined;
     mockCheckTotp.mockReset();
     mockNavigate.mockReset();
+    mockRecoveryPhoneGetWithPasswordForgotToken.mockReset();
   });
 
   it('calls authClient then navigates on success', async () => {
     mockCheckTotp.mockResolvedValueOnce({ success: true });
+    mockRecoveryPhoneGetWithPasswordForgotToken.mockResolvedValueOnce({ exists: false });
 
     await renderComponent();
 
@@ -98,6 +102,7 @@ describe('ConfirmTotpResetPasswordContainer', () => {
 
   it('sets localized error message when authClient returns success: false', async () => {
     mockCheckTotp.mockResolvedValueOnce({ success: false });
+    mockRecoveryPhoneGetWithPasswordForgotToken.mockResolvedValueOnce({ exists: false });
 
     await renderComponent();
 
@@ -108,12 +113,13 @@ describe('ConfirmTotpResetPasswordContainer', () => {
     expect(capturedProps.codeErrorMessage).toBe('Valid code required');
   });
 
-  it('forwards location.state when onTroubleWithCode is invoked', async () => {
+  it.only('forwards location.state when onTroubleWithCode is invoked', async () => {
     mockCheckTotp.mockResolvedValueOnce({ success: true });
+    mockRecoveryPhoneGetWithPasswordForgotToken.mockResolvedValueOnce({ exists: true });
 
     await renderComponent();
 
-    capturedProps.onTroubleWithCode();
+    await capturedProps.onTroubleWithCode();
 
     expect(mockNavigate).toHaveBeenCalledWith(
       '/reset_password_totp_recovery_choice',

packages/fxa-settings/src/pages/ResetPassword/ConfirmTotpResetPassword/container.tsx

@@ -67,10 +67,15 @@ const ConfirmTotpResetPasswordContainer = (_: RouteComponentProps) => {
     }
   };
 
-  const onTroubleWithCode = () => {
-    const nextRoute = config.featureFlags?.recoveryPhonePasswordReset2fa
-      ? '/reset_password_totp_recovery_choice'
-      : '/confirm_backup_code_reset_password';
+  const onTroubleWithCode = async () => {
+    let nextRoute = '/confirm_backup_code_reset_password';
+
+    const { exists } = await authClient.recoveryPhoneGetWithPasswordForgotToken(token);
+
+    if (config.featureFlags?.recoveryPhonePasswordReset2fa && exists) {
+      nextRoute = '/reset_password_totp_recovery_choice';
+    }
+
     navigateWithQuery(nextRoute, {
       state: {
         code,

packages/fxa-settings/src/pages/ResetPassword/ResetPasswordRecoveryChoice/container.tsx

@@ -136,6 +136,7 @@ export const ResetPasswordRecoveryChoiceContainer = (
   if (!numBackupCodes || numBackupCodes === 0) {
     navigateWithQuery('/reset_password_recovery_phone', {
       state: {
+        ...locationState.state,
         lastFourPhoneDigits: phoneData.lastFourPhoneDigits,
       },
       // ensure back button on signin_recovery_code page skips choice page and