[HOLD for payment 2024-10-14] [$250] Sign in–Magic code expired appears briefly if use Request one here link & login via magic link

[IuliiaHerets]

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.0.24-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4886771
Email or phone of affected tester (no customers): applausetester+jp_322824@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. On the log in screen, enter a new account email
3. Repeat the previous step with the same email - This is to receive 2 validation links
4. Navigate to the account email inbox and open the first email of the 2
5. Copy the magic link and change it to staging
6. Navigate to the staging link
7. Verify Magic code expired page opens
8. Click on Request one here link
9. Navigate to the account email inbox and open the email
10. Copy the magic link, change it to staging and navigate to the staging link

Expected Result:

Magic code expired not appears briefly

Actual Result:

Magic code expired appears briefly

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6579619_1724356216934.MC.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015ba582e21228c322
• Upwork Job ID: 1828311848767754708
• Last Price Increase: 2024-09-10

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

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

[IuliiaHerets]

@greg-schroeder FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[Amoralchik]

Proposal

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

The user sees the ValidateCodeModal instead of a loading screen when accessing the magic link.

What is the root cause of that problem?

Here in ValidateLoginPage:

App/src/pages/ValidateLoginPage/index.website.tsx

Line 77 in 844c6bf

{(!session?.autoAuthState ? !shouldStartSignInWithValidateCode : autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED) && !exitTo && (

This condition returns true even when shouldStartSignInWithValidateCode is true. This caused the ValidateCodeModal to be shown to the user.

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

By changing the condition to
!shouldStartSignInWithValidateCode && autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && !exitTo
By this we can prevent the display ValidateCodeModal, and we can display the Loading Indicator instead of the ValidateCodeModal including it in the condition for FullScreenLoadingIndicator.
I suggest making the changes as follows:

    // If session.autoAuthState isn't available yet, we use shouldStartSignInWithValidateCode to conditionally render the component instead of local autoAuthState which contains a default value of NOT_STARTED
    const shouldValidateModal = !shouldStartSignInWithValidateCode && autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED && !exitTo;
    const isFailed = autoAuthState === CONST.AUTO_AUTH_STATE.FAILED;
    const isJustSignedIn2FA = autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && login;
    const isJustSignedIn = autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && !exitTo && login;

    return (
        <>
            {isFailed && <ExpiredValidateCodeModal />}
            {isJustSignedIn2FA && <JustSignedInModal is2FARequired />}
            {isJustSignedIn && <JustSignedInModal is2FARequired={false} />}
            {shouldValidateModal && (
                <ValidateCodeModal
                    accountID={Number(accountID)}
                    code={validateCode}
                />
            )}
            {!shouldValidateModal && !isJustSignedIn && !isJustSignedIn2FA && <FullScreenLoadingIndicator />}
        </>
    );

[melvin-bot]

@greg-schroeder Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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