[Due for Payment] [CFI] [HIGH] [$250] Users are unable to use their 2FA recovery codes to disable the 2FA feature in New Expensify

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.2.22-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @brianlee-expensify
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to Accounts > Security
2. Enable 2 FA in settings
3. Disable the 2FA
4. Observe the modal asking to input code from authenticator app and no option to enter the downloaded recovery code

Expected Result:

Users are able to use their 2FA recovery codes to disable the 2FA feature in New Expensify

Actual Result:

Users are unable to use their 2FA recovery codes to disable the 2FA feature in New Expensify

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

496162888-ad397231-bfee-4ac1-bda9-f8af99d758a6.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021975343735334780505
• Upwork Job ID: 1975343735334780505
• Last Price Increase: 2025-10-06
• Automatic offers:
• ShridharGoel | Contributor | 109035695

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

Triggered auto assignment to @heyjennahay (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[ShridharGoel]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Users who previously enabled 2FA can no longer disable it if they only have their one-time recovery codes. The current disable flow in New Expensify only accepts a 6-digit authenticator code, so the modal blocks users from entering valid recovery codes and they cannot turn 2FA off.

What is the root cause of that problem?

The disable screen reuses BaseTwoFactorAuthForm, which always renders a numeric MagicCodeInput and validates against isValidTwoFactorCode. There is no toggle or alternate input wired up for recovery codes, so the form rejects any alphanumeric value and never sends it to the DISABLE_TWO_FACTOR_AUTH API

App/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx

Line 35 in f3b8616

function BaseTwoFactorAuthForm({autoComplete, validateInsteadOfDisable, onFocus, shouldAutoFocusOnMobile = true, ref}: BaseTwoFactorAuthFormProps) {

What changes do you think we should make in order to solve the problem?

• Extend BaseTwoFactorAuthForm to support a recovery-code mode whenever it is used for disabling 2FA (means when validateInsteadOfDisable === false).
  • Add local state for isUsingRecoveryCode and recoveryCode, along with helpers to keep account?.errors in sync when the input type changes.
  • When the user switches to recovery-code mode, render a standard TextInput, with validation via isValidRecoveryCode.
  • Keep the existing MagicCodeInput path for normal authenticator codes.
  • Update validateAndSubmitForm to call toggleTwoFactorAuth(false, recoveryOrTwoFactorCode) after trimming the selected input and surfacing new form error messages when validation fails.
• Render a PressableWithFeedback toggle below the input, allowing users to switch between “Use recovery code” and “Use two-factor authentication code”. This matches the sign-in screen UX and keeps the control within the form component so that both web and native share the flow.
• Ensure we continue to clear account?.errors via clearAccountMessages() when the user edits or toggles inputs so any backend error resets cleanly.

Snippet of the proposed form update:

const [formError, setFormError] = useState<{twoFactorAuthCode?: string; recoveryCode?: string}>({});
const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
const [recoveryCode, setRecoveryCode] = useState('');
const [isUsingRecoveryCode, setIsUsingRecoveryCode] = useState(false);

const clearAccountErrorsIfPresent = useCallback(() => {
    if (account?.errors) {
        clearAccountMessages();
    }
}, [account?.errors]);

const onRecoveryCodeInput = useCallback((text: string) => {
    setRecoveryCode(text);
    setFormError((prev) => ({...prev, recoveryCode: undefined}));
    clearAccountErrorsIfPresent();
}, [clearAccountErrorsIfPresent]);

const validateAndSubmitForm = useCallback(() => {
    if (shouldAllowRecoveryCode && isUsingRecoveryCode) {
        const sanitizedRecoveryCode = recoveryCode.trim();
        if (!sanitizedRecoveryCode) {
            setFormError({recoveryCode: translate('recoveryCodeForm.error.pleaseFillRecoveryCode')});
            return;
        }
        if (!isValidRecoveryCode(sanitizedRecoveryCode)) {
            setFormError({recoveryCode: translate('recoveryCodeForm.error.incorrectRecoveryCode')});
            return;
        }

        setFormError({});
        toggleTwoFactorAuth(false, sanitizedRecoveryCode);
        return;
    }

    const sanitizedTwoFactorCode = twoFactorAuthCode.trim();
    if (!sanitizedTwoFactorCode) {
        setFormError({twoFactorAuthCode: translate('twoFactorAuthForm.error.pleaseFillTwoFactorAuth')});
        return;
    }
    if (!isValidTwoFactorCode(sanitizedTwoFactorCode)) {
        setFormError({twoFactorAuthCode: translate('twoFactorAuthForm.error.incorrect2fa')});
        return;
    }

    setFormError({});
    toggleTwoFactorAuth(false, sanitizedTwoFactorCode);
}, [
    clearAccountErrorsIfPresent,
    isUsingRecoveryCode,
    recoveryCode,
    shouldAllowRecoveryCode,
    translate,
    twoFactorAuthCode,
]);

return (
    <>
        {shouldAllowRecoveryCode && isUsingRecoveryCode ? (
            <TextInput
                value={recoveryCode}
                onChangeText={onRecoveryCodeInput}
                autoCapitalize="characters"
                label={translate('recoveryCodeForm.recoveryCode')}
                errorText={formError.recoveryCode ?? getLatestErrorMessage(account)}
                onSubmitEditing={validateAndSubmitForm}
            />
        ) : (
            <MagicCodeInput
                autoComplete={autoComplete}
                value={twoFactorAuthCode}
                onChangeText={onTwoFactorCodeInput}
                onFulfill={validateAndSubmitForm}
                errorText={formError.twoFactorAuthCode ?? getLatestErrorMessage(account)}
                ref={inputRef}
            />
        )}
        {shouldAllowRecoveryCode && (
            <PressableWithFeedback
                style={[styles.mt2]}
                onPress={handleToggleInputType}
                accessibilityLabel={translate(toggleLabelKey)}
            >
                <Text style={[styles.link]}>{translate(toggleLabelKey)}</Text>
            </PressableWithFeedback>
        )}
    </>
);

Certain optimisations and reuse of components can be discussed during implementation.

TwoFact.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• Unit test BaseTwoFactorAuthForm logic to confirm that recovery codes pass validation, while malformed or empty values surface the correct errors.

[PiyushChandra17]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Users are unable to use their 2FA recovery codes to disable the 2FA feature in New Expensify

What is the root cause of that problem?

1. When user taps on "Disable two factor auth" on (2FA) page , we trigger disableTwoFactorAuth

2. We have recoveryCodes, needsTwoFactorAuth and requiresTwoFactorAuth flags under ACCOUNT ONYX KEY. Now
   account?.recoveryCodes is undefined in disabled page whereas needsTwoFactorAuth is set false and when we get on step 3 is finished then requiresTwoFactorAuth sets to true.

3. Currently we do not have logic to add an option to enter the downloaded recovery code on disabled page, only TwoFactorAuthForm exist

What changes do you think we should make in order to solve the problem?

1. Add an option to enter the downloaded recovery code via TextInput if !!account?.recoveryCodes is truthy right below the TwoFactorAuthForm

2. Here's the updated pseudo-code:

<View style={[styles.mh5, styles.mb4, styles.mt3]}>
<TwoFactorAuthForm
    innerRef={formRef}
    validateInsteadOfDisable={false}
/>
</View>
<View>
{!!account?.recoveryCodes && (
    <TextInput
        accessibilityLabel={translate('recoveryCodeForm.recoveryCode')}
        value={recoveryCode}
        onChangeText={(text) => onTextInput(text, 'recoveryCode')}
        maxLength={CONST.FORM_CHARACTER_LIMIT}
        label={translate('recoveryCodeForm.recoveryCode')}
        errorText={formError?.recoveryCode ? translate(formError?.recoveryCode) : ''}
        hasError={hasError}
        onSubmitEditing={validateAndSubmitForm}
        autoFocus
    />
)}
</View>

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

n/A

What alternative solutions did you explore? (Optional)

n/A

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021975343735334780505