feat(fxa-settings): Implement using recovery phone to sign in

Because:

* New feature: recovery phone as recovery method for 2FA during sign in

This commit:

* Hook up new pages to choose recovery method and use recovery phone during sign in

Closes #FXA-10374

libs/accounts/recovery-phone/src/index.ts

@@ -3,7 +3,7 @@ export * from './lib/recovery-phone.service';
 export * from './lib/recovery-phone.provider';
 export * from './lib/recovery-phone.service.config';
 export * from './lib/sms.manager';
-export * from './lib/sms.manger.config';
+export * from './lib/sms.manager.config';
 export * from './lib/twilio.config';
 export * from './lib/twilio.provider';
 export * from './lib/recovery-phone.errors';

libs/accounts/recovery-phone/src/lib/recovery-phone.provider.ts

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { ConfigService } from '@nestjs/config';
-import { SmsManagerConfig } from './sms.manger.config';
+import { SmsManagerConfig } from './sms.manager.config';
 import Redis from 'ioredis';
 import { RecoveryPhoneConfig } from './recovery-phone.service.config';
 

libs/accounts/recovery-phone/src/lib/sms.manager.spec.ts

@@ -6,7 +6,7 @@ import { LOGGER_PROVIDER } from '@fxa/shared/log';
 import { StatsDService } from '@fxa/shared/metrics/statsd';
 import { Test, TestingModule } from '@nestjs/testing';
 import { SmsManager } from './sms.manager';
-import { SmsManagerConfig } from './sms.manger.config';
+import { SmsManagerConfig } from './sms.manager.config';
 import { TwilioProvider } from './twilio.provider';
 import { TwilioErrorCodes } from './recovery-phone.errors';
 

libs/accounts/recovery-phone/src/lib/sms.manager.ts

@@ -8,7 +8,7 @@ import { Inject, Injectable, LoggerService } from '@nestjs/common';
 import { StatsD } from 'hot-shots';
 import { Twilio } from 'twilio';
 import { MessageInstance } from 'twilio/lib/rest/api/v2010/account/message';
-import { SmsManagerConfig } from './sms.manger.config';
+import { SmsManagerConfig } from './sms.manager.config';
 import { TwilioProvider } from './twilio.provider';
 import {
   RecoveryNumberInvalidFormatError,
@@ -70,12 +70,14 @@ export class SmsManager {
     retryCount: number
   ): Promise<MessageInstance> {
     const from = this.rotateFromNumber();
+
     try {
-      const msg = await this.client.messages.create({
+      const msg: MessageInstance = await this.client.messages.create({
         to,
         from,
         body,
       });
+
       // Typically the message will be in queued status. The following metric and log
       // can help track or debug send problems.
       this.metrics.increment('sms.send.' + msg.status);

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

@@ -2260,6 +2260,13 @@ export default class AuthClient {
     );
   }
 
+  async getRecoveryPhoneNumber(
+    sessionToken: string,
+    headers?: Headers
+  ): Promise<{ exists: boolean; phoneNumber: string }> {
+    return this.sessionGet('/recovery_phone', sessionToken, headers);
+  }
+
   async recoveryPhoneCreate(
     sessionToken: string,
     phoneNumber: string,
@@ -2288,7 +2295,20 @@ export default class AuthClient {
     headers?: Headers
   ) {
     return this.sessionPost(
-      '/recovery_phone/available',
+      '/recovery_phone/confirm',
+      sessionToken,
+      { code },
+      headers
+    );
+  }
+
+  async recoveryPhoneSigninConfirm(
+    sessionToken: string,
+    code: string,
+    headers?: Headers
+  ) {
+    return this.sessionPost(
+      '/recovery_phone/signin/confirm',
       sessionToken,
       { code },
       headers

packages/fxa-auth-server/test/remote/recovery_phone_tests.js

@@ -101,7 +101,7 @@ describe(`#integration - recovery phone`, function () {
     await TestServer.stop(server);
   });
 
-  it('setups a recovery phone', async function () {
+  it('sets up a recovery phone', async function () {
     if (!isTwilioConfigured) {
       this.skip('Invalid twilio accountSid or authToken. Check env / config!');
     }
@@ -183,7 +183,7 @@ describe(`#integration - recovery phone`, function () {
     assert.isFalse(checkResp2.exists);
   });
 
-  it('fails to setup invalid phone number', async function () {
+  it('fails to set up invalid phone number', async function () {
     if (!isTwilioConfigured) {
       this.skip('Invalid twilio accountSid or authToken. Check env / config!');
     }

packages/fxa-content-server/app/scripts/lib/router.js

@@ -527,12 +527,18 @@ Router = Router.extend({
     'signin_permissions(/)': createViewHandler(PermissionsView, {
       type: VerificationReasons.SIGN_IN,
     }),
+    'signin_recovery_choice(/)': function () {
+      this.createReactViewHandler('signin_recovery_choice');
+    },
     'signin_recovery_code(/)': function () {
       this.createReactOrBackboneViewHandler(
         'signin_recovery_code',
         SignInRecoveryCodeView
       );
     },
+    'sigin_recovery_phone(/)': function () {
+      this.createReactViewHandler('signin_recovery_phone');
+    },
     'signin_reported(/)': function () {
       this.createReactOrBackboneViewHandler(
         'signin_reported',

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

@@ -67,6 +67,8 @@ const FRONTEND_ROUTES = [
   'signin_push_code_confirm',
   'signin_totp_code',
   'signin_recovery_code',
+  'signin_recovery_choice',
+  'signin_recovery_phone',
   'signin_confirmed',
   'signin_permissions',
   'signin_reported',

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

@@ -82,6 +82,8 @@ const getReactRouteGroups = (showReactApp, reactRoute) => {
         'signin_unblock',
         'force_auth',
         'signin_recovery_code',
+        'signin_recovery_choice',
+        'signin_recovery_phone',
         'inline_totp_setup',
         'inline_recovery_setup',
         'inline_recovery_key_setup',

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

@@ -2,7 +2,12 @@
  * 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 { RouteComponentProps, Router, useLocation } from '@reach/router';
+import {
+  Redirect,
+  RouteComponentProps,
+  Router,
+  useLocation,
+} from '@reach/router';
 import {
   lazy,
   Suspense,
@@ -80,6 +85,8 @@ import WebChannelExample from '../../pages/WebChannelExample';
 import SignoutSync from '../Settings/SignoutSync';
 import InlineRecoveryKeySetupContainer from '../../pages/InlineRecoveryKeySetup/container';
 import SetPasswordContainer from '../../pages/PostVerify/SetPassword/container';
+import SigninRecoveryChoiceContainer from '../../pages/Signin/SigninRecoveryChoice/container';
+import SigninRecoveryPhoneContainer from '../../pages/Signin/SigninRecoveryPhone/container';
 
 const Settings = lazy(() => import('../Settings'));
 
@@ -290,6 +297,7 @@ const AuthAndAccountSetupRoutes = ({
   integration: Integration;
   flowQueryParams: QueryParams;
 } & RouteComponentProps) => {
+  const config = useConfig();
   const localAccount = currentAccount();
   // TODO: MozServices / string discrepancy, FXA-6802
   const serviceName = integration.getServiceName() as MozServices;
@@ -378,9 +386,26 @@ const AuthAndAccountSetupRoutes = ({
         path="/signin_confirmed/*"
         {...{ isSignedIn, serviceName }}
       />
+      {config.featureFlags?.enableUsing2FABackupPhone ? (
+        <>
+          <SigninRecoveryChoiceContainer path="/signin_recovery_choice/*" />
+          <SigninRecoveryPhoneContainer
+            path="/signin_recovery_phone/*"
+            {...{ integration }}
+          />
+        </>
+      ) : (
+        <>
+          <Redirect
+            from="/signin_recovery_choice/*"
+            to="/signin_recovery_code/*"
+            noThrow
+          />
+        </>
+      )}
       <SigninRecoveryCodeContainer
         path="/signin_recovery_code/*"
-        {...{ integration, serviceName }}
+        {...{ integration }}
       />
       <SigninReported path="/signin_reported/*" />
       <SigninTokenCodeContainer

packages/fxa-settings/src/lib/auth-errors/auth-errors.ts

@@ -119,7 +119,7 @@ const ERRORS = {
   // We don't currently support sms but still keep the error codes to avoid conflicts
   SMS_ID_INVALID: {
     errno: 131,
-    // should not be user facing, not wrapped in t
+    // This message should not be user-facing or localized
     message: 'SMS ID invalid',
   },
   SMS_REJECTED: {
@@ -307,6 +307,10 @@ const ERRORS = {
     errno: 206,
     message: 'Can not create password, password already set',
   },
+  SMS_SEND_RATE_LIMIT_EXCEEDED: {
+    errno: 216,
+    message: 'Client has sent too many requests',
+  },
   SERVICE_UNAVAILABLE: {
     errno: 998,
     message: 'System unavailable, try again soon',

packages/fxa-settings/src/lib/auth-errors/en.ftl

@@ -17,8 +17,11 @@ auth-error-125 = The request was blocked for security reasons
 auth-error-138-2 = Unconfirmed session
 auth-error-139 = Secondary email must be different than your account email
 auth-error-155 = TOTP token not found
+# Error shown when the user submits an invalid backup authentication code
+auth-error-156 = Backup authentication code not found
 auth-error-159 = Invalid account recovery key
 auth-error-183-2 = Invalid or expired confirmation code
+auth-error-203 = System unavailable, try again soon
 auth-error-206 = Can not create password, password already set
 auth-error-999 = Unexpected error
 auth-error-1001 = Login attempt cancelled

packages/fxa-settings/src/pages/PostVerify/SetPassword/container.test.tsx

@@ -110,7 +110,7 @@ function mockCurrentAccount(
 }
 
 let currentSetPasswordProps: SetPasswordProps | undefined;
-function mockInlineRecoveryKeySetupModule() {
+function mockSetPasswordModule() {
   jest
     .spyOn(SetPasswordModule, 'default')
     .mockImplementation((props: SetPasswordProps) => {
@@ -123,7 +123,7 @@ function applyDefaultMocks() {
   jest.resetAllMocks();
   jest.restoreAllMocks();
   mockModelsModule();
-  mockInlineRecoveryKeySetupModule();
+  mockSetPasswordModule();
   mockCurrentAccount(MOCK_STORED_ACCOUNT);
   (useFinishOAuthFlowHandler as jest.Mock).mockImplementation(() => ({
     finishOAuthFlowHandler: jest