Merge pull request Expensify#23390 from alitoshmatov/22335/2fa-recove…

…ry-code

Added recovery code option to 2fa

src/CONST.ts

@@ -757,6 +757,9 @@ const CONST = {
     // 6 numeric digits
     VALIDATE_CODE_REGEX_STRING: /^\d{6}$/,
 
+    // 8 alphanumeric characters
+    RECOVERY_CODE_REGEX_STRING: /^[a-zA-Z0-9]{8}$/,
+
     // The server has a WAF (Web Application Firewall) which will strip out HTML/XML tags using this regex pattern.
     // It's copied here so that the same regex pattern can be used in form validations to be consistent with the server.
     VALIDATE_FOR_HTML_TAG_REGEX: /<([^>\s]+)(?:[^>]*?)>/g,
@@ -806,6 +809,8 @@ const CONST = {
     MAGIC_CODE_LENGTH: 6,
     MAGIC_CODE_EMPTY_CHAR: ' ',
 
+    RECOVERY_CODE_LENGTH: 8,
+
     KEYBOARD_TYPE: {
         PHONE_PAD: 'phone-pad',
         NUMBER_PAD: 'number-pad',

src/languages/en.ts

@@ -740,6 +740,15 @@ export default {
         copy: 'Copy',
         disable: 'Disable',
     },
+    recoveryCodeForm: {
+        error: {
+            pleaseFillRecoveryCode: 'Please enter your recovery code',
+            incorrectRecoveryCode: 'Incorrect recovery code. Please try again.',
+        },
+        useRecoveryCode: 'Use recovery code',
+        recoveryCode: 'Recovery code',
+        use2fa: 'Use two-factor authentication code',
+    },
     twoFactorAuthForm: {
         error: {
             pleaseFillTwoFactorAuth: 'Please enter your two-factor authentication code',
@@ -893,6 +902,7 @@ export default {
     validateCodeForm: {
         magicCodeNotReceived: "Didn't receive a magic code?",
         enterAuthenticatorCode: 'Please enter your authenticator code',
+        enterRecoveryCode: 'Please enter your recovery code',
         requiredWhen2FAEnabled: 'Required when 2FA is enabled',
         requestNewCode: 'Request a new code in ',
         requestNewCodeAfterErrorOccurred: 'Request a new code',

src/languages/es.ts

@@ -735,6 +735,15 @@ export default {
         copy: 'Copiar',
         disable: 'Deshabilitar',
     },
+    recoveryCodeForm: {
+        error: {
+            pleaseFillRecoveryCode: 'Por favor, introduce tu código de recuperación',
+            incorrectRecoveryCode: 'Código de recuperación incorrecto. Por favor, inténtalo de nuevo',
+        },
+        useRecoveryCode: 'Usar código de recuperación',
+        recoveryCode: 'Código de recuperación',
+        use2fa: 'Usar autenticación de dos factores',
+    },
     twoFactorAuthForm: {
         error: {
             pleaseFillTwoFactorAuth: 'Por favor, introduce tu código de autenticación de dos factores',
@@ -889,6 +898,7 @@ export default {
     validateCodeForm: {
         magicCodeNotReceived: '¿No recibiste un código mágico?',
         enterAuthenticatorCode: 'Por favor, introduce el código de autenticador',
+        enterRecoveryCode: 'Por favor, introduce tu código de recuperación',
         requiredWhen2FAEnabled: 'Obligatorio cuando A2F está habilitado',
         requestNewCode: 'Pedir un código nuevo en ',
         requestNewCodeAfterErrorOccurred: 'Solicitar un nuevo código',

src/libs/ValidationUtils.js

@@ -314,6 +314,10 @@ function isValidValidateCode(validateCode) {
     return validateCode.match(CONST.VALIDATE_CODE_REGEX_STRING);
 }
 
+function isValidRecoveryCode(recoveryCode) {
+    return recoveryCode.match(CONST.RECOVERY_CODE_REGEX_STRING);
+}
+
 /**
  * @param {String} code
  * @returns {Boolean}
@@ -484,4 +488,5 @@ export {
     doesContainReservedWord,
     isNumeric,
     isValidAccountRoute,
+    isValidRecoveryCode,
 };

src/pages/signin/SignInPage.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -87,6 +87,9 @@ function SignInPage({credentials, account, isInModal}) {
     const shouldShowSmallScreen = isSmallScreenWidth || isInModal;
     const safeAreaInsets = useSafeAreaInsets();
     const signInPageLayoutRef = useRef();
+    /** This state is needed to keep track of if user is using recovery code instead of 2fa code,
+     * and we need it here since welcome text(`welcomeText`) also depends on it */
+    const [isUsingRecoveryCode, setIsUsingRecoveryCode] = useState(false);
 
     useEffect(() => Performance.measureTTI(), []);
     useEffect(() => {
@@ -114,7 +117,7 @@ function SignInPage({credentials, account, isInModal}) {
         if (account.requiresTwoFactorAuth) {
             // We will only know this after a user signs in successfully, without their 2FA code
             welcomeHeader = isSmallScreenWidth ? '' : translate('welcomeText.welcomeBack');
-            welcomeText = translate('validateCodeForm.enterAuthenticatorCode');
+            welcomeText = isUsingRecoveryCode ? translate('validateCodeForm.enterRecoveryCode') : translate('validateCodeForm.enterAuthenticatorCode');
         } else {
             const userLogin = Str.removeSMSDomain(credentials.login || '');
 
@@ -162,7 +165,12 @@ function SignInPage({credentials, account, isInModal}) {
                     blurOnSubmit={account.validated === false}
                     scrollPageToTop={signInPageLayoutRef.current && signInPageLayoutRef.current.scrollPageToTop}
                 />
-                {shouldShowValidateCodeForm && <ValidateCodeForm />}
+                {shouldShowValidateCodeForm && (
+                    <ValidateCodeForm
+                        isUsingRecoveryCode={isUsingRecoveryCode}
+                        setIsUsingRecoveryCode={setIsUsingRecoveryCode}
+                    />
+                )}
                 {shouldShowUnlinkLoginForm && <UnlinkLoginForm />}
                 {shouldShowEmailDeliveryFailurePage && <EmailDeliveryFailurePage />}
             </SignInPageLayout>

src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

@@ -26,6 +26,7 @@ import Terms from '../Terms';
 import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
 import usePrevious from '../../../hooks/usePrevious';
 import * as StyleUtils from '../../../styles/StyleUtils';
+import TextInput from '../../../components/TextInput';
 
 const propTypes = {
     /* Onyx Props */
@@ -60,6 +61,12 @@ const propTypes = {
     /** Specifies autocomplete hints for the system, so it can provide autofill */
     autoComplete: PropTypes.oneOf(['sms-otp', 'one-time-code']).isRequired,
 
+    /** Determines if user is switched to using recovery code instead of 2fa code */
+    isUsingRecoveryCode: PropTypes.bool.isRequired,
+
+    /** Function to change `isUsingRecoveryCode` state when user toggles between 2fa code and recovery code */
+    setIsUsingRecoveryCode: PropTypes.func.isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -77,6 +84,7 @@ function BaseValidateCodeForm(props) {
     const [validateCode, setValidateCode] = useState(props.credentials.validateCode || '');
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
     const [timeRemaining, setTimeRemaining] = useState(30);
+    const [recoveryCode, setRecoveryCode] = useState('');
 
     const prevRequiresTwoFactorAuth = usePrevious(props.account.requiresTwoFactorAuth);
     const prevValidateCode = usePrevious(props.credentials.validateCode);
@@ -149,7 +157,17 @@ function BaseValidateCodeForm(props) {
      * @param {String} key
      */
     const onTextInput = (text, key) => {
-        const setInput = key === 'validateCode' ? setValidateCode : setTwoFactorAuthCode;
+        let setInput;
+        if (key === 'validateCode') {
+            setInput = setValidateCode;
+        }
+        if (key === 'twoFactorAuthCode') {
+            setInput = setTwoFactorAuthCode;
+        }
+        if (key === 'recoveryCode') {
+            setInput = setRecoveryCode;
+        }
+
         setInput(text);
         setFormError((prevError) => ({...prevError, [key]: ''}));
 
@@ -174,6 +192,8 @@ function BaseValidateCodeForm(props) {
         setTwoFactorAuthCode('');
         setFormError({});
         setValidateCode('');
+        props.setIsUsingRecoveryCode(false);
+        setRecoveryCode('');
     };
 
     /**
@@ -184,11 +204,30 @@ function BaseValidateCodeForm(props) {
         Session.clearSignInData();
     };
 
+    /**
+     * Switches between 2fa and recovery code, clears inputs and errors
+     */
+    const switchBetween2faAndRecoveryCode = () => {
+        props.setIsUsingRecoveryCode(!props.isUsingRecoveryCode);
+
+        setRecoveryCode('');
+        setTwoFactorAuthCode('');
+
+        setFormError((prevError) => ({...prevError, recoveryCode: '', twoFactorAuthCode: ''}));
+
+        if (props.account.errors) {
+            Session.clearAccountMessages();
+        }
+    };
+
     useEffect(() => {
         if (!isLoadingResendValidationForm) {
             return;
         }
         clearLocalSignInData();
+        // `clearLocalSignInData` is not required as a dependency, and adding it
+        // overcomplicates things requiring clearLocalSignInData function to use useCallback
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isLoadingResendValidationForm]);
 
     /**
@@ -203,13 +242,27 @@ function BaseValidateCodeForm(props) {
             if (input2FARef.current) {
                 input2FARef.current.blur();
             }
-            if (!twoFactorAuthCode.trim()) {
-                setFormError({twoFactorAuthCode: 'validateCodeForm.error.pleaseFillTwoFactorAuth'});
-                return;
-            }
-            if (!ValidationUtils.isValidTwoFactorCode(twoFactorAuthCode)) {
-                setFormError({twoFactorAuthCode: 'passwordForm.error.incorrect2fa'});
-                return;
+            /**
+             * User could be using either recovery code or 2fa code
+             */
+            if (!props.isUsingRecoveryCode) {
+                if (!twoFactorAuthCode.trim()) {
+                    setFormError({twoFactorAuthCode: 'validateCodeForm.error.pleaseFillTwoFactorAuth'});
+                    return;
+                }
+                if (!ValidationUtils.isValidTwoFactorCode(twoFactorAuthCode)) {
+                    setFormError({twoFactorAuthCode: 'passwordForm.error.incorrect2fa'});
+                    return;
+                }
+            } else {
+                if (!recoveryCode.trim()) {
+                    setFormError({recoveryCode: 'recoveryCodeForm.error.pleaseFillRecoveryCode'});
+                    return;
+                }
+                if (!ValidationUtils.isValidRecoveryCode(recoveryCode)) {
+                    setFormError({recoveryCode: 'recoveryCodeForm.error.incorrectRecoveryCode'});
+                    return;
+                }
             }
         } else {
             if (inputValidateCodeRef.current) {
@@ -226,33 +279,61 @@ function BaseValidateCodeForm(props) {
         }
         setFormError({});
 
+        const recoveryCodeOr2faCode = props.isUsingRecoveryCode ? recoveryCode : twoFactorAuthCode;
+
         const accountID = lodashGet(props.credentials, 'accountID');
         if (accountID) {
-            Session.signInWithValidateCode(accountID, validateCode, props.preferredLocale, twoFactorAuthCode);
+            Session.signInWithValidateCode(accountID, validateCode, props.preferredLocale, recoveryCodeOr2faCode);
         } else {
-            Session.signIn(validateCode, twoFactorAuthCode, props.preferredLocale);
+            Session.signIn(validateCode, recoveryCodeOr2faCode, props.preferredLocale);
         }
-    }, [props.account, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode]);
+    }, [props.account, props.credentials, props.preferredLocale, twoFactorAuthCode, validateCode, props.isUsingRecoveryCode, recoveryCode]);
 
     return (
         <>
             {/* At this point, if we know the account requires 2FA we already successfully authenticated */}
             {props.account.requiresTwoFactorAuth ? (
                 <View style={[styles.mv3]}>
-                    <MagicCodeInput
-                        autoComplete={props.autoComplete}
-                        ref={input2FARef}
-                        label={props.translate('common.twoFactorCode')}
-                        name="twoFactorAuthCode"
-                        value={twoFactorAuthCode}
-                        onChangeText={(text) => onTextInput(text, 'twoFactorAuthCode')}
-                        onFulfill={validateAndSubmitForm}
-                        maxLength={CONST.TFA_CODE_LENGTH}
-                        errorText={formError.twoFactorAuthCode ? props.translate(formError.twoFactorAuthCode) : ''}
-                        hasError={hasError}
-                        autoFocus
-                    />
+                    {props.isUsingRecoveryCode ? (
+                        <TextInput
+                            shouldDelayFocus
+                            accessibilityLabel={props.translate('recoveryCodeForm.recoveryCode')}
+                            value={recoveryCode}
+                            onChangeText={(text) => onTextInput(text, 'recoveryCode')}
+                            maxLength={CONST.RECOVERY_CODE_LENGTH}
+                            label={props.translate('recoveryCodeForm.recoveryCode')}
+                            errorText={formError.recoveryCode ? props.translate(formError.recoveryCode) : ''}
+                            hasError={hasError}
+                            autoFocus
+                        />
+                    ) : (
+                        <MagicCodeInput
+                            shouldDelayFocus
+                            autoComplete={props.autoComplete}
+                            ref={input2FARef}
+                            label={props.translate('common.twoFactorCode')}
+                            name="twoFactorAuthCode"
+                            value={twoFactorAuthCode}
+                            onChangeText={(text) => onTextInput(text, 'twoFactorAuthCode')}
+                            onFulfill={validateAndSubmitForm}
+                            maxLength={CONST.TFA_CODE_LENGTH}
+                            errorText={formError.twoFactorAuthCode ? props.translate(formError.twoFactorAuthCode) : ''}
+                            hasError={hasError}
+                            autoFocus
+                        />
+                    )}
                     {hasError && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(props.account)} />}
+                    <PressableWithFeedback
+                        style={[styles.mt2]}
+                        onPress={switchBetween2faAndRecoveryCode}
+                        underlayColor={themeColors.componentBG}
+                        hoverDimmingValue={1}
+                        pressDimmingValue={0.2}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        accessibilityLabel={props.isUsingRecoveryCode ? props.translate('recoveryCodeForm.use2fa') : props.translate('recoveryCodeForm.useRecoveryCode')}
+                    >
+                        <Text style={[styles.link]}>{props.isUsingRecoveryCode ? props.translate('recoveryCodeForm.use2fa') : props.translate('recoveryCodeForm.useRecoveryCode')}</Text>
+                    </PressableWithFeedback>
                 </View>
             ) : (
                 <View style={[styles.mv3]}>

src/pages/signin/ValidateCodeForm/index.android.js

@@ -1,11 +1,24 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
 const defaultProps = {};
 
-const propTypes = {};
-function ValidateCodeForm() {
-    return <BaseValidateCodeForm autoComplete="sms-otp" />;
+const propTypes = {
+    /** Determines if user is switched to using recovery code instead of 2fa code */
+    isUsingRecoveryCode: PropTypes.bool.isRequired,
+
+    /** Function to change `isUsingRecoveryCode` state when user toggles between 2fa code and recovery code */
+    setIsUsingRecoveryCode: PropTypes.func.isRequired,
+};
+function ValidateCodeForm(props) {
+    return (
+        <BaseValidateCodeForm
+            autoComplete="sms-otp"
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...props}
+        />
+    );
 }
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';

src/pages/signin/ValidateCodeForm/index.js

@@ -1,11 +1,24 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import BaseValidateCodeForm from './BaseValidateCodeForm';
 
 const defaultProps = {};
 
-const propTypes = {};
-function ValidateCodeForm() {
-    return <BaseValidateCodeForm autoComplete="one-time-code" />;
+const propTypes = {
+    /** Determines if user is switched to using recovery code instead of 2fa code */
+    isUsingRecoveryCode: PropTypes.bool.isRequired,
+
+    /** Function to change `isUsingRecoveryCode` state when user toggles between 2fa code and recovery code */
+    setIsUsingRecoveryCode: PropTypes.func.isRequired,
+};
+function ValidateCodeForm(props) {
+    return (
+        <BaseValidateCodeForm
+            autoComplete="one-time-code"
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...props}
+        />
+    );
 }
 
 ValidateCodeForm.displayName = 'ValidateCodeForm';