[HOLD for payment 2025-02-04] [$125] mWeb - 2FA - In 2FA magic code page, after refresh briefly error message is displayed

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: V9. 0.75-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Applause Internal Team
Device used: Redmi note 10s android 13
App Component: User Settings

Action Performed:

Pre-condition: Login with unverified gmail account

1. Go to https://staging.new.expensify.com/home
2. Go to settings- security - two factor authentication
3. Enter incorrect magic code
4. Refresh the page

Expected Result:

In 2FA magic code page, after refresh briefly error message must not be displayed.

Actual Result:

In 2FA magic code page, after refresh briefly error message is displayed.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6691899_1733991788664.Screenrecorder-2024-12-12-13-48-04-520.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021867646284163514204
• Upwork Job ID: 1867646284163514204
• Last Price Increase: 2025-01-10
• Automatic offers:
• dominictb | Reviewer | 105714118
• nyomanjyotisa | Contributor | 105714119

Issue Owner

Current Issue Owner: @OfstadC / @michaelkwardrop

[melvin-bot]

Triggered auto assignment to @OfstadC (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.

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-12-12 13:36:14 UTC.

Proposal

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

2FA - In 2FA magic code page, after refresh briefly error message is displayed

What is the root cause of that problem?

When the page is refreshed while there were error previously the error will only be cleared after the server response of the resend validate code requested here

App/src/components/ValidateCodeActionModal/index.tsx

Lines 44 to 50 in 9603c2f

	useEffect(() => {
	if (!firstRenderRef.current || !isVisible || hasMagicCodeBeenSent) {
	return;
	}
	firstRenderRef.current = false;
	sendValidateCode();

so it will take a while to get cleared

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

We should clear errors on mount (or unmount/useBeforeRemove) just like we clear when user start entering code here

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 177 to 185 in 9603c2f

	const onTextInput = useCallback(
	(text: string) => {
	setValidateCode(text);
	setFormError({});
	if (!isEmptyObject(validateError)) {
	clearError();
	User.clearValidateCodeActionError('actionVerified');
	}

We can do that in BaseValidateCodeForm for more general fix like:

useEffect(() => {
        if (!isEmptyObject(validateError)) {
            clearError();
            User.clearValidateCodeActionError('actionVerified');
        }
    }, []);

Optionally, we might also similarly clear the error here too so that the error will be cleared immediately instead of waiting for BE response on pressing Didn't receive a magic code button

Alternatively, we can clear the errors on mount or before sendValidateCode here

App/src/components/ValidateCodeActionModal/index.tsx

Line 50 in 9603c2f

sendValidateCode();

Despite the claim by the below proposal here is a demo that clearing error on mount approach works well on mobile:

2024-12-12.17-44-00.mp4

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

What alternative solutions did you explore? (Optional)

We can also consider clearing errors on User.requestValidateCodeAction but this function is used in several other places and the errors are different in different instances so we can pass clearError callback to the function and run the respective callbacks on the start of the function to clear errors before requesting code resend is requested so that we don't wait to clear errors for the BE response.

[nyomanjyotisa]

Edited by proposal-police: This proposal was edited at 2025-01-09 02:02:16 UTC.

Proposal

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

In 2FA magic code page, after refresh briefly error message is displayed

What is the root cause of that problem?

On reload page we need to wait for API call response to clear the errors

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

Only allows to show error if validateAndSubmitForm is executed. We did the same approach here #52303. We can use something like this:

const [canShowError, setCanShowError] = useState<boolean>(false);

We can set setCanShowError to true here

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 193 in c2285e6

const validateAndSubmitForm = useCallback(() => {

const validateAndSubmitForm = useCallback(() => {
        setCanShowError(true);

And then use it in here

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Lines 217 to 218 in c2285e6

	errorText={formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {})}
	hasError={!isEmptyObject(validateError)}

errorText={canShowError ? formError?.validateCode ? translate(formError?.validateCode) : ErrorUtils.getLatestErrorMessage(account ?? {}) : ''}
hasError={canShowError ? !isEmptyObject(validateError) : false}

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 262 in c2285e6

errors={validateError}

errors={canShowError ? validateError : undefined}

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

[huult]

Edited by proposal-police: This proposal was edited at 2024-12-12 16:40:23 UTC.

Proposal

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

In 2FA magic code page, after refresh briefly error message is displayed

What is the root cause of that problem?

We sent an incorrect magic code to the API, which responds with errorFields, and it is then stored in Onyx.

• 
• 

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Line 57 in 3031b6d

const validateLoginError = ErrorUtils.getEarliestErrorField(loginData, 'validateLogin');

When refreshing the 2FA page, the errorFields data still exists (the error is still displayed). After reloading, ResendValidateCode is called. If ResendValidateCode responds without errorFields, the ONYXKEYS.LOGIN_LIST is updated, and the error is removed. However, if ResendValidateCode returns a 402 (sent too many times) error, the errorFields cannot be removed, and the error remains displayed.

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

The validateError appears when we input a valid magic code (6 digits) and submit it to the API for verification. When the page is reloaded, the code is removed. I think we should check if the magic code exists and is valid. If so, we should display the validateError. If it does not exist or is invalid, we should also display the validateError. This will resolve the issue.

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 74 in 6a5e1fb

function BaseValidateCodeForm({

Add this code to check validate code valid in BaseValidateCodeForm

    const isValidateCodeValid = !!validateCode.trim() || !!ValidationUtils.isValidValidateCode(validateCode);

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 262 in 6a5e1fb

errors={validateError}

To

 errors={isValidateCodeValid ? validateError : undefined}

App/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx

Line 218 in 6a5e1fb

hasError={!isEmptyObject(validateError)}

To

  hasError={!isEmptyObject(isValidateCodeValid ? validateError : undefined)}

POC

Screen.Recording.2024-12-12.at.23.38.05.mov

Test branch

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

This is UI bug no need the test

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[OfstadC]

I'm currently OoO - but will be back on Tuesday - Reassigning to get the ball rolling, but happy to take back on Tuesday

[melvin-bot]

Triggered auto assignment to @michaelkwardrop (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.

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @dominictb (External)

[michaelkwardrop]

@dominictb please attempt reproduction and review the above proposals - thanks!

[dominictb]

Will review tomorrow morning.

[melvin-bot]

@OfstadC, @dominictb, @michaelkwardrop Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[michaelkwardrop]

@dominictb lmk if this needs to wait until the new year! 🎄

[dominictb]

on it now, I'm just stuck on other PR

[dominictb]

@nyomanjyotisa's proposal looks promising. Onyx update is the async action and calling func in did-mount happens after rendering the component.

So using canShowError and clear the error on mount are the good ideas to solve the issue and be consistent with this PR

But I just wonder:

1. Should we call clearValidateCodeActionError along with clearError like what we did here?
2. If we use canShowError, I don't think we need to clear error in clean-up function. Please correct me if I miss something.

[michaelkwardrop]

@dominictb are we ready to move forward with @nyomanjyotisa's proposal?

[dominictb]

@michaelkwardrop Yes, let's go with @nyomanjyotisa's proposal

[dominictb]

@michaelkwardrop What do you think?

[michaelkwardrop]

@dominictb looks good to me! I agree with the problem/ solution statements, and if the code looks good to you I give this a 🟢

[dominictb]

I have approved the proposal. Just waiting for @cead22 approval.

[melvin-bot]

📣 @dominictb 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @nyomanjyotisa 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[nyomanjyotisa]

The PR is ready
cc @dominictb

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: In 2FA magic code page, after refresh briefly error message is displayed #55332

If no regressions arise, payment will be issued on 2025-02-04. 🎊

For reference, here are some details about the assignees on this issue:

• @nyomanjyotisa requires payment automatic offer (Contributor)
• @dominictb requires payment automatic offer (Reviewer)

[melvin-bot]

@dominictb @OfstadC / @michaelkwardrop @dominictb The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[OfstadC]

@dominictb Please complete BZ checklist prior to payment date 😃 Thanks!

[dominictb]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/48628/files#r1938900868

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again. Yes

Regression Test Proposal

Test:

Pre-condition: Login with unverified Gmail account

1, Go to settings - security - two-factor authentication
2, Enter incorrect magic code
3, Refresh the page
4, Verify that after refresh, briefly error message must not be displayed

Do we agree 👍 or 👎

[OfstadC]

Payment Summary

• @nyomanjyotisa paid $125
• @dominictb paid $125