[HOLD for payment 2024-02-14] [$500] Login - Blank screen and infinite spinner when logging in using magic link

[lanitochka17]

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: 1.4.36
Reproducible in staging?: Y
Reproducible in production?: N
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Open the app
2. Enter the email and tap "Continue"
3. Find the email and use the magic link to log in (change to staging if needed)

Expected Result:

User is logged in and lands on LHN

Actual Result:

The blank screen and the infinite spinner displayed

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6365447_1706916982856.video_2024-02-02_18-34-20.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b3cfffaf993f802b
• Upwork Job ID: 1754481620046606336
• Last Price Increase: 2024-02-05
• Automatic offers:
• situchan | Contributor | 28142697
• aswin-s | Contributor | 28142698

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @Gonals (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[Gonals]

I have not been able to reproduce this. Is it only happening on staging?

[melvin-bot]

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

[melvin-bot]

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

[mountiny]

@Gonals You need to use the link from the email, have you tried that. I was able to reproduce, this is a real blocker.

[mountiny]

And given we use the last visited path on native now, when user gets to the loading page, kills the app and opens it again, they are stuck on the infinite spinner and they have to uninstall the app to fix it

[aswin-s]

Proposal

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

Infinite spinner when logging in using magic link

What is the root cause of that problem?

In ValidateLoginPage a useEffect is used to authenticateUser and signIn.

App/src/pages/ValidateLoginPage/index.tsx

Lines 15 to 24 in d765c37

	useEffect(() => {
	if (session?.authToken) {
	// If already signed in, do not show the validate code if not on web,
	// because we don't want to block the user with the interstitial page.
	Navigation.goBack();
	} else {
	Session.signInWithValidateCodeAndNavigate(Number(accountID), validateCode);
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

When sign-in using deep link Navigation.isNavigationReady() return in false when invoked the first time. This results in non action.

App/src/libs/Navigation/Navigation.ts

Lines 172 to 175 in d765c37

	function goBack(fallbackRoute?: Route, shouldEnforceFallback = false, shouldPopToTop = false) {
	if (!canNavigate('goBack')) {
	return;
	}

App/src/libs/Navigation/Navigation.ts

Lines 39 to 45 in d765c37

	function canNavigate(methodName: string, params: Record<string, unknown> = {}): boolean {
	if (navigationRef.isReady()) {
	return true;
	}
	Log.hmmm(`[Navigation] ${methodName} failed because navigation ref was not yet ready`, params);
	return false;
	}

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

We should wait till Navigation.isNavigationReady() is ready before invoking the effect.

    const [isNavReady, setIsNavReady] = useState(false)
    useEffect(() => {
        if (!isNavReady) { return }
        if (session?.authToken) {
            // If already signed in, do not show the validate code if not on web,
            // because we don't want to block the user with the interstitial page.
            Navigation.goBack();
        } else {
            Session.signInWithValidateCodeAndNavigate(Number(accountID), validateCode);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isNavReady]);

   
    useEffect(() => {
        // Wait till navigation becomes available
        Navigation.isNavigationReady().then(() => {
            setIsNavReady(true)
        })
    }, [])

Result

fix-login_out.mp4

What alternative solutions did you explore? (Optional)

None

[Gonals]

We should wait till Navigation.isNavigationReady() is ready before invoking the effect.

Yep. I was able to reproduce this time

[mountiny]

@aswin-s Can you also test if this fixed #35782

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[Gonals]

@aswin-s, the proposal looks good! I'll assign you so we can get it fixed ASAP! Could you check the other issue @mountiny mentioned here?

[melvin-bot]

❌ There was an error making the offer to @ntdiary for the Reviewer role. The BZ member will need to manually hire the contributor.

[melvin-bot]

❌ There was an error making the offer to @aswin-s for the Contributor role. The BZ member will need to manually hire the contributor.

[mountiny]

Feel free to make drafts first in these scenarios so C+ can jump in sooner than later.

[aswin-s]

Draft PR here

[aswin-s]

@situchan @aswin-s please test on the PR if this was fixed too #35782, thank you!

@mountiny

Nope. This one looks like a different issue. However it affects testing of this issue on desktop environment.

desktop_out.mp4

[situchan]

yup different issue.
While #35745 is android/iOS bug, #35782 is web bug (wrongly tagged platform)

[marcaaron]

Testing well on iOS staging. Gonna remove the blocker here. Thanks for the quick solutions 🙇

[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 1.4.37-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] fix: wait for navigation ready state before signing in #35827

If no regressions arise, payment will be issued on 2024-02-14. 🎊

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

• @aswin-s requires payment automatic offer (Contributor)
• @situchan requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@situchan] The PR that introduced the bug has been identified. Link to the PR:
• [@situchan] 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:
• [@situchan] A discussion in #expensify-bugs 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:
• [@situchan] Determine if we should create a regression test for this bug.
• [@situchan] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@johncschuster] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[johncschuster]

Payment has been issued! 🎉

@situchan, can you complete the BZ Checklist above? Thank you!

[situchan]

I think this regression came from ideal nav.
As this was caught in staging by QA team, we don't need another regression test.

[johncschuster]

Sounds great! Thanks for confirming that!