[HOLD for payment 2023-07-20] [$1000] "Incorrect magic code" error if click login in 2FA input page

[kavimuru]

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

---

Action Performed:

1. logout if you already logged in
2. enter email which has 2FA enable
3. enter magic code and click on sign in button
4. scroll login page and click on login

Expected Result:

should not show "Incorrect magic code" error

Actual Result:

shows "Incorrect magic code" error

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.29-8
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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-06-15.at.11.02.25.AM.mov

Recording.1038.mp4

Expensify/Expensify Issue URL:
Issue reported by: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686808469824509

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010bba1d812d6c5f0f
• Upwork Job ID: 1673472692971782144
• Last Price Increase: 2023-07-03

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[hungvu193]

Proposal

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

"Incorrect magic code" error if click login in 2FA input page

What is the root cause of that problem?

When user clicked Login button, we cleared session and credentials. But inside BaseValidateCodeForm we didn't clear the validateCode. So when account is being clear, the condition to render 2Factor MagicCodeInput is failed, it will render MagicCodeInput for validate code, and because validateCode isn't cleared, it will trigger onFullFill again which caused this issue.

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Lines 220 to 250 in 342d4fd

	{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
	/>
	</View>
	) : (
	<View style={[styles.mv3]}>
	<MagicCodeInput
	autoComplete={props.autoComplete}
	ref={inputValidateCodeRef}
	label={props.translate('common.magicCode')}
	name="validateCode"
	value={validateCode}
	onChangeText={(text) => onTextInput(text, 'validateCode')}
	onFulfill={validateAndSubmitForm}
	errorText={formError.validateCode ? props.translate(formError.validateCode) : ''}
	hasError={hasError}
	autoFocus
	/>
	<View>

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

Inside validateAndSubmitForm of BaseValidateCodeForm, we should check if we already validate the validate code and we didn't have 2Factor fullfill code yet, we shouldn't do anything.

        const accountID = lodashGet(props.credentials, 'accountID');
        if (accountID) {
            Session.signInWithValidateCode(accountID, validateCode, props.preferredLocale, twoFactorAuthCode);
        } else {
            if (props.credentials.validateCode && twoFactorAuthCode.length !== CONST.TFA_CODE_LENGTH) {
                return;
            }
            Session.signIn('', validateCode, twoFactorAuthCode, props.preferredLocale);
        }

What alternative solutions did you explore? (Optional)

N/A

[tienifr]

Proposal

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

"Incorrect magic code" error if click login in 2FA input page

What is the root cause of that problem?

When users press login we execute navigateHome function

App/src/pages/signin/SignInPageLayout/Footer.js

Line 141 in 1096b6e

onPress: () => navigateHome(scrollPageToTop),

then we will clear account and credential data

App/src/libs/actions/Session/index.js

Lines 569 to 574 in 1096b6e

	function clearSignInData() {
	Onyx.multiSet({
	[ONYXKEYS.ACCOUNT]: null,
	[ONYXKEYS.CREDENTIALS]: {},
	});
	}

Unfortunately, the BaseValidateCodeForm is still appear, and at that time props.account.requiresTwoFactorAuth change to false => MagicCodeInput for validateCode is mounted again => onFulfill is executed again

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Lines 237 to 245 in 1096b6e

	<View style={[styles.mv3]}>
	<MagicCodeInput
	autoComplete={props.autoComplete}
	ref={inputValidateCodeRef}
	label={props.translate('common.magicCode')}
	name="validateCode"
	value={validateCode}
	onChangeText={(text) => onTextInput(text, 'validateCode')}
	onFulfill={validateAndSubmitForm}

=> We call API signIn again with the old code => the error is shown

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

If we just check props.credentials.validateCode && !twoFactorAuthCode as proposal above, and users type several numbers (1->5 numbers) on 2FA input, the condition will be false => We'll call signIn again

In

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Line 178 in 1096b6e

const validateAndSubmitForm = useCallback(() => {

we should check if the props.account is empty then early return. And update the dependencies if needed

    const validateAndSubmitForm = useCallback(() => {
        if(_.isEmpty(props.account)){ // this line means the account is cleared
            return;
        }
...

[hungvu193]

If we just check props.credentials.validateCode && !twoFactorAuthCode as proposal above, and users type several numbers (1->5 numbers) on 2FA input, the condition will be false => We'll call signIn again

Oh thank you, I've updated, it should be

            if (props.credentials.validateCode && twoFactorAuthCode.length !== CONST.TFA_CODE_LENGTH) {
                return;
            }

[bernhardoj]

Proposal

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

A sign-in request is unexpectedly fired when pressing the Login button in the Footer while in 2fa form.

What is the root cause of that problem?

On the Sign In page, it will show the 2FA form only if showValidateCodeForm is true.

App/src/pages/signin/SignInPage.js

Line 166 in 1096b6e

{showValidateCodeForm ? <ValidateCodeForm isVisible={showValidateCodeForm} /> : <PasswordForm isVisible={showPasswordForm} />}

App/src/pages/signin/SignInPage.js

Lines 96 to 101 in 1096b6e

	// Show the new magic code / validate code form if
	// - A login has been entered or a validateCode has been cached from sign in link
	// - AND the login isn't an unvalidated secondary login
	// - AND the user is on the 'passwordless' beta
	const showValidateCodeForm =
	Boolean(this.props.credentials.login || this.props.credentials.validateCode) && !showUnlinkLoginForm && Permissions.canUsePasswordlessLogins(this.props.betas);

One of the requirements to show the form is the credentials from Onyx should contain either login or validateCode property. This means, when the credentials is cleared, the form will be hidden.

When we press Login in Footer, it will clear both ACCOUNT and CREDENTIALS onyx

App/src/libs/actions/Session/index.js

Lines 569 to 574 in 1096b6e

	function clearSignInData() {
	Onyx.multiSet({
	[ONYXKEYS.ACCOUNT]: null,
	[ONYXKEYS.CREDENTIALS]: {},
	});
	}

The problem is when we are clearing both ACCOUNT and CREDENTIALS Onyx, it will notify the update to the subscriber (component) one by one. In our case, SignInPage will first rerender with an empty (null) ACCOUNT. Empty ACCOUNT won't affect the value of showValidateCodeForm, it will stay true. This makes the BaseValidateCodeForm a chance to rerender with an empty (null) ACCOUNT.

BaseValidateCodeForm is the component for rendering 2FA/magic code form.

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Lines 220 to 272 in 1096b6e

	{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
	/>
	</View>
	) : (
	<View style={[styles.mv3]}>
	<MagicCodeInput
	autoComplete={props.autoComplete}
	ref={inputValidateCodeRef}
	label={props.translate('common.magicCode')}
	name="validateCode"
	value={validateCode}
	onChangeText={(text) => onTextInput(text, 'validateCode')}
	onFulfill={validateAndSubmitForm}
	errorText={formError.validateCode ? props.translate(formError.validateCode) : ''}
	hasError={hasError}
	autoFocus
	/>
	<View>
	<PressableWithFeedback
	style={[styles.mt2, resendButtonStyle]}
	onPress={resendValidateCode}
	underlayColor={themeColors.componentBG}
	disabled={props.network.isOffline}
	hoverDimmingValue={1}
	pressDimmingValue={0.2}
	accessibilityRole="button"
	accessibilityLabel={props.translate('validateCodeForm.magicCodeNotReceived')}
	>
	<Text style={[styles.link]}>{props.translate('validateCodeForm.magicCodeNotReceived')}</Text>
	</PressableWithFeedback>
	{linkSent && !hasError && !_.isEmpty(props.account.message) && (
	<DotIndicatorMessage
	type="success"
	style={[styles.mt2]}
	messages={{0: props.translate(props.account.message)}}
	/>
	)}
	</View>
	</View>
	)}

As the ACCOUNT Onyx is cleared, props.account.requiresTwoFactorAuth condition becomes false and now it will rerender with magic code instead. When magic code input is mounted, it will trigger the onFulfill props because validateCode state is never cleared.

App/src/components/MagicCodeInput.js

Lines 134 to 152 in 1096b6e

	const validateAndSubmit = () => {
	const numbers = decomposeString(props.value, props.maxLength);
	if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) {
	return;
	}
	// Blurs the input and removes focus from the last input and, if it should submit
	// on complete, it will call the onFulfill callback.
	blurMagicCodeInput();
	props.onFulfill(props.value);
	};
	useOnNetworkReconnect(validateAndSubmit);
	useEffect(() => {
	validateAndSubmit();
	// We have not added the editIndex as the dependency because we don't want to run this logic after focusing on an input to edit it after the user has completed the code.
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [props.value, props.shouldSubmitOnComplete, props.onFulfill]);

onFulfill will trigger the sign in request with the used magic code which then returns an error from the server.

Finally, SignInPage will rerender with an empty CREDENTIALS which hides the form.

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

What we want to achieve is, as soon as the user press Login in the Footer, we want to immediately hide the validate code form. As validate code form depends on both ACCOUNT and CREDENTIALS, we should show the form only if both exist and hide if one of them is cleared.

ACCOUNT and CREDENTIALS onyx will always have data when we are signing in (CREDENTIALS onyx is set from the API response).

App/src/libs/actions/Session/index.js

Lines 208 to 219 in a4dfac7

	const optimisticData = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.ACCOUNT,
	value: {
	...CONST.DEFAULT_ACCOUNT_DATA,
	isLoading: true,
	message: null,
	loadingForm: CONST.FORMS.LOGIN_FORM,
	},
	},
	];

And as explained on the root cause, both are cleared when pressing the Login button in the Footer (it's also being cleared if we press Go back, see img below).

Currently, showValidateCodeForm only depends on CREDENTIALS, so what we need to do is to add a new condition to check if ACCOUNT onyx is not empty, then we show the validate code form.

Add && !_.isEmpty(this.props.account) to showValidateCodeForm.

What alternative solutions did you explore? (Optional)

Clears CREDENTIALS first by switching up the position of ACCOUNT and CREDENTIALS.

App/src/libs/actions/Session/index.js

Lines 569 to 574 in 1096b6e

	function clearSignInData() {
	Onyx.multiSet({
	[ONYXKEYS.ACCOUNT]: null,
	[ONYXKEYS.CREDENTIALS]: {},
	});
	}

[alexpensify]

This is on my test list

[alexpensify]

I'm catching up from my half day, I'll review soon.

[alexpensify]

There is a similar GH here: #19712. I'm going to test in Staging to confirm if this one is not fixed by the GH I mentioned.