[$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: 2024-12-13

Issue Owner

Current Issue Owner: @dominictb

[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]

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?

Clear the errors on mount and on unmount using useEffect hook

    useEffect(() => {
        clearError();

        return () => {
            clearError();
        };
    }, []);

And only allow to show error if validateAndSubmitForm executed, since clearing the errors on mount and on unmount alone still briefly show the error in mWeb Android & iOS(#52303 (comment)). We did the same approach here #52303

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

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

Line 193 in c2285e6

const validateAndSubmitForm = useCallback(() => {

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

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!