Fix: Infinite loader on login

[parasharrajat]

Details

After login,
We call many APIs asynchronously. but it is possible that users can logout before one of these requests is about to make. In this case, Queue will pause as Auth token is not present.
I checked that we pause it

App/src/libs/API.js

Line 62 in e511b1f

Network.clearRequestQueue();

here.
Now when you enter the password and send that request, the First auth token will be received as this overrides the paused queue. but I think the second call to createTemporaryLogin is not going through. Only after this call is completed loader is stopped and navigation happens.
In Code, the queue is resumed when re-authentication happens but we don't do this on sign up. So if we call Network.unpauseRequestQueue(); in

App/src/libs/actions/Session.js

Lines 207 to 225 in e511b1f

	function signIn(password, twoFactorAuthCode) {
	Onyx.merge(ONYXKEYS.ACCOUNT, {...CONST.DEFAULT_ACCOUNT_DATA, loading: true});
	API.Authenticate({
	useExpensifyLogin: true,
	partnerName: CONFIG.EXPENSIFY.PARTNER_NAME,
	partnerPassword: CONFIG.EXPENSIFY.PARTNER_PASSWORD,
	partnerUserID: credentials.login,
	partnerUserSecret: password,
	twoFactorAuthCode,
	email: credentials.login,
	})
	.then((authenticateResponse) => {
	const {authToken, encryptedAuthToken, email} = authenticateResponse;
	createTemporaryLogin(authToken, encryptedAuthToken, email);
	})
	.catch((error) => {
	Onyx.merge(ONYXKEYS.ACCOUNT, {error: translateLocal(error.message), loading: false});
	});

. It should fix the issue. Also, it does not affect the app logic as Queue should be active after Auth token is received. Even if the queue was already active. resuming it again does hot have any effect.

There was one similar issue like this where the user was blocked on the first stage where the user enters the email which I fixed by forcefully sending that request even if the queue is paused as that did not need auth token but now this issue is happening on the password step which does require Auth token.

Fixed Issues

$ Fixes #4221

Tests | QA Steps

1. Open the Web app on Browser 1 and browser 2.
2. Login with USER A on both browsers.
3. Close the Browser 1 's tab which has the app opened. Don't close the browser.
4. Go to browser 2 and send 4-5 messages in a row to the USER B.
5. Go to browser 1 and Press ctrl+shit+T to restore the tab. As soon as you see the App window. Quickly log out before data sync is complete. You should be logging out the USER A.
6. Now don't reload, Login with User B whom you sent the messages from Browser 2.
7. You should be logged into the app instead of seeing an infinite loader on the Password form.

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

I am not able to reproduce the breaking behavior consistently. If someone can help me do that I will try to show that being fixed here.

Web

Mobile Web

Desktop

iOS

Android

[roryabraham]

I'm still able to reproduce the issue while testing this branch on web:

1. Log out
2. Enter email
3. Enter password
4. Infinite loading spinner.

[parasharrajat]

Thanks, @roryabraham for the feedback. I will try to reproduce this and update it here.

[parasharrajat]

I found out what is happening. Even I unpause the queue. Old requests that are being retried will pause it again because those requests are checking the old authToken.

App/src/libs/API.js

Line 54 in c2d21c0

if (isAuthTokenRequired(command) && !parameters.authToken) {

Here we check auth token from request data.

The token is only set after call to createTemporaryLogin

App/src/libs/actions/Session.js

Line 172 in 36b86e9

setSuccessfulSignInData({...createLoginResponse, encryptedAuthToken});

Thus I checked we can force this request as well. It's safe to use forceNetworkRequest for this call as we pass the token manually to the API.
After that unpaused the queue when the token is set so that other app requests can continue to work.

Pass this check

App/src/libs/Network.js

Line 133 in c2d21c0

if (!canMakeRequest(queuedRequest)) {

We can update this

App/src/libs/API.js

Line 20 in 36b86e9

callback: val => authToken = val ? val.authToken : null,

to unpause the queue when the token is set.

or We unpause the queue after this

App/src/libs/actions/Session.js

Line 172 in 36b86e9

setSuccessfulSignInData({...createLoginResponse, encryptedAuthToken});

.

As Token is set by now. But I have little doubt that should I wait for Onyx.merge promise to finish.

---

I have found a way to reproduce this reliably and I will post both videos here (fix and issue).

[parasharrajat]

ISSUE

issue-loader.mp4

FIX

issue-loader-fix.mp4

Seems like the video got corrupted.
Updating the correct reprodcution steps on the Test; ⬆️

[roryabraham]

Seems to work on web, can no longer reproduce the issue, even with your updated steps.

[parasharrajat]

@AndrewGable All yours.

[AndrewGable]

Looks great, thanks for hopping on this one so quickly!

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[Jag96]

CP'ing this so it can be re-tested on the deploy blocker checklist

[OSBotify]

🚀 Deployed to staging in version: 1.0.82-5🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production in version: 1.0.82-7🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to staging in version: 1.0.82-8🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by @francoisl in version: 1.0.83-1 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	failure ❌
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅