[C+ payment required, Situ out until May] [HOLD for payment 2024-04-03] [$500] Desktop - Login - Unable to enter the 2FA code or exit the opened screen on desktop

[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.23-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:
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:

Prerequisites: User must be logged into web app as User A.

1. Launch the Desktop app
2. Enter an email for an existing account with 2FA (User b)
3. Go to the email inbox and locate the magic code
4. Copy the Magic link and modify it to staging
5. On the web, open a new tab and navigate to the staging magic link
6. Confirm that the user is prompted to open the desktop app
7. Click on the "Open app" option

Expected Result:

When the desktop is launched by the magic code link, it glitches, briefly shows a skeleton and then returns to the first login screen

Actual Result:

When the desktop is launched by the magic code link, there's just a blocker screen asking to enter the magic code, with no field and no option to exit the screen

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

Bug6337005_1704825484892.2FA_-_Desktop.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0183573e4ff04521ad
• Upwork Job ID: 1744794019492372480
• Last Price Increase: 2024-03-06
• Automatic offers:
• situchan | Contributor | 28115507

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @peterdbarkerUK (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[ikevin127]

Proposal

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

When the desktop is launched by the magic code link via web - desktop prompt, we see a 2FA blocker screen asking to enter the magic code, with no field and no option to exit the screen.

What is the root cause of that problem?

The root cause of this happening stems from within ValidateLoginPage/index.website.tsx where there is no logic that specifically handles the 2FA login flow on the desktop app (where there's no multi-tab functionality like on web).

For example the flow on web goes as follows:

• we input the email for login
• the UI changes showing us the magic code input
• we click the magic code link from the email
• a new tab opens rendering the same 2FA screen telling the user to input their 2FA code in the tab where the magic code input was showing previously before opening the magic link, tab which now shows the input for the 2FA code

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

My solution is to create a desktop specific library @libs/desktopTwoFactorRedirect/index.desktop.js (with index.js noop) where we perform the following check and pop the stack:

if ((autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED || autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN) && !isSignedIn) {
    Navigation.isNavigationReady().then(() => Navigation.resetToHome());
}

Notes:

• autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED to cover for edge case of when autoAuthState is not initialized yet (after logout)
• autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN confirms that we passed the magic code step of the login process which is one of the conditions that if true we're shown the 2FA screen
• !isSignedIn confirms that we're not signed-in yet as there's one last step and that's the 2FA validation
• calling newly added Navigation.resetToHome() when above conditions are true will pop the navigation stack to home causing the user to then be navigated to the 2FA code validation screen, autocompleting the magic code since we opened the magic code deep-link (prompt) from web -> desktop

This will handle both 2FA / non-2FA login flows when transitioned from web -> desktop.

The lib function will take in as arguments autoAuthState and isSignedIn and will be called at the bottom of the first useEffect inside the ValidateLoginPage/index.website.js component, right after this line (magic code validation call is performed) which is an important step in order for the login flow to work on desktop for both 2FA and non-2FA accounts.

Videos

MacOS: Desktop (+ edge case flow fix)

Screen.Recording.2024-01-10.at.04.mp4

• edge case flow

5821f276-3cf1-4141-a6bf-cfa4861f0607.mp4

[tienifr]

Proposal

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

When the desktop is launched by the magic code link, there's just a blocker screen asking to enter the magic code, with no field and no option to exit the screen

What is the root cause of that problem?

By design here, we don't want to prompt opening the desktop app for magic link

(The autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED condition, can check this PR for more info)

The problem here is that when the magic link is opened for the first time, autoAuthState is not available yet, the prompt to open desktop was made, then it becomes not-started after being initialized here. So the root cause is we're evaluating whether to show the open-in-desktop prompt before the autoAuthState is available.

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

If we're on the magic link route and the autoAuthState is not available, early return here because we don't have enough information to evaluate if we should prompt yet (the magic link state is not initialized).

Later once it's initialized, the useEffect will run again and it will evaluate correctly based on the updated autoAuthState value.

So the steps are:

• Here

const isMagicLink = CONST.REGEX.ROUTES.VALIDATE_LOGIN.test(window.location.pathname);

(same condition we're already using in here, can extract to an util method for easy reuse)

• Here, change || autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED to

|| autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED || (isMagicLink && !autoAuthState)

or

|| (isMagicLink && (!autoAuthState || autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED))

What alternative solutions did you explore? (Optional)

NA

[ikevin127]

Updated proposal

• updated solution if to account for the edge case where autoAuthState === CONST.AUTO_AUTH_STATE.NOT_STARTED (after logout) which would still cause the 2FA screen lock

[melvin-bot]

@peterdbarkerUK, @thesahindia Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[thesahindia]

Won't be able to take this! Please reassign.

[situchan]

I can take over

[melvin-bot]

📣 @situchan 🎉 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 📖

[peterdbarkerUK]

Note on the above, @situchan is added as the reviewer

[peterdbarkerUK]

Hmmm, I can't reproduce this: the link takes me to the desktop app and successfully logs me in. @ikevin127 @tienifr @situchan are you able to reproduce?

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

• Desktop - Login - Unable to enter the 2FA code or exit the screen #38142

If no regressions arise, payment will be issued on 2024-04-03. 🎊

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

• @ikevin127 requires payment (Needs manual offer from BZ)
• @adamgrzybowski does not require payment (Contractor)
• @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.
• [@trjExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[mountiny]

$500 to @ikevin127 and $500 to @situchan

[ikevin127]

Note

I did receive an Upwork Contributor offer for this issue on 12th of March despite this message, but I cannot accept it as it errors (see error below) - therefore I declined it and will await BZ manual offer 🙌

[trjExpensify]

Sounds good! Payment summary as follows:

• $500 to @ikevin127 for the fix - paid
• $500 to @situchan for the C+ review

Offers sent.

[ikevin127]

@trjExpensify Offer accepted, thank you! 🥳

[trjExpensify]

Paid you!

[trjExpensify]

Situ is out until May, so this is going to sit until then. Updated the title to make that clear.

[trjExpensify]

Still awaiting Situ's return.

[trjExpensify]

@situchan - are you back?

[trjExpensify]

Still waiting on Situ so I can pay this.

[situchan]

Sorry for late. I think job expired. Can you please send new offer?

[trjExpensify]

Offer sent!

[trjExpensify]

Situ paid, closing!