[HOLD for payment 2024-02-07] [$500] Web - Login - timer restarts or "login page is open" message is shown when switching tabs

[lanitochka17]

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: 1.4.13-8
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:

1. Go to the login screen and enter a new account email
2. Go to the email inbox, open the validate email, and copy the link
3. Modify the last portion of the link by a character, i.e. if the original link was https://stagin.new.expensify.com/v/7453760123884
   change a single character > https://staging.new.expensify.com/v/745376012388**8**
4. Navigate to the compiled link
5. Notice you're redirected to the "Magic code expired" page
6. Switch a couple of times between the original tab and the "Magic code expired" page. notice that the Request a new code timer restarts from 30s or "Another login page is open." message is shown
   he original link was https://stagin.new.expensify.com/v/7453760123884
   change a single character > https://staging.new.expe

Expected Result:

Request a new code timer does not restart when returning from the "Magic code expired" page

Actual Result:

Request a new code timer restarts when returning from the "Magic code expired" page or "Another login page is open." message is shown

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6315657_1702708782485.t1_Login_issue.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f8eb63ea6fa92fab
• Upwork Job ID: 1736767113363992576
• Last Price Increase: 2023-12-18
• Automatic offers:
• tienifr | Contributor | 28066972
• situchan | Contributor | 28067794

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[yh-0218]

Proposal

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

Web - Login - timer restarts or "login page is open" message is shown when switching tabs

What is the root cause of that problem?

Because BaseValidateCodeForm is refreshed when tap.
so state value is reset.

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Line 91 in 648c000

const [timeRemaining, setTimeRemaining] = useState(30);

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

1. We need to move this state value to SignInPageInner.js and pass timeRemaining and setTimeRemaining from SignInPageInner.js as paramter
2. We need to reset timeRemaining as 30 when we need to set continue button.
   

   App/src/pages/signin/LoginForm/BaseLoginForm.js

   Line 198 in 648c000

   // Check if this login has an account associated with it or not

   
   Result:

Screen.Recording.2023-12-18.at.7.16.13.PM.mov

What alternative solutions did you explore? (Optional)

[samilabud]

Proposal

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

Login - timer restarts or "login page is open" message is shown when switching tabs

What is the root cause of that problem?

The countdown does not have persistent storage, which means that every time the user refreshes the page the issue going to happen again when resizing or any other behavior that makes the webpage reload or re-render.

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

We should use our default library for persistent storage react-native-onyx (Onyx), the change should be inside the the next hook:

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Line 151 in 3e06e0e

useEffect(() => {

The resulting code should be something like this:

useEffect(() => {
        if (timeRemaining > 0) {
            timerRef.current = setTimeout(() => {
                setTimeRemaining(timeRemaining - 1);
                // eslint-disable-next-line rulesdir/prefer-actions-set-data
                Onyx.set(ONYXKEYS.MAGIC_CODE_TIME_REMAINING, timeRemaining - 1);
            }, 1000);
        }
        return () => {
            clearTimeout(timerRef.current);
        };
    }, [timeRemaining]);

And we should use withOnyx (for adding the new persisted variable) at the end of the component like this:

export default compose(
    withLocalize,
    withOnyx({
        account: {key: ONYXKEYS.ACCOUNT},
        credentials: {key: ONYXKEYS.CREDENTIALS},
        session: {key: ONYXKEYS.SESSION},
        **magicCodeTimeRemaining: {key: ONYXKEYS.MAGIC_CODE_TIME_REMAINING},**
    }),
    withNetwork(),
)(BaseValidateCodeForm);

After changes:

After.changes.31502.mp4

[tienifr]

Proposal

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

Request a new code timer restarts when returning from the "Magic code expired" page or "Another login page is open." message is shown

What is the root cause of that problem?

When we have 2 tabs open, the active tab will be the leader tab and another will be non-leader tab. So when we change to another tab and comes back, the isClientTheLeader here will changes from true > false > true, causing the ValidateCodeForm to be unmounted and the time remaining state here to be reset.

If instead we have only 1 tab, changing tab visibility will not cause the timer to be reset.

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

The isClientTheLeader check is originally added in this PR to make sure the user won't be able to interact with ValidateCodeForm in a non-leader tab. However, there's no need to unmount the ValidateCodeForm completely, we should only hide it if the current tab is non-leader, by using the same approach as for the LoginForm here. Basically the ValidateCodeForm will be still mounted, but invisible if the current tab is non-leader. If the current tab becomes leader again, ValidateCodeForm will become visible, with the correct timer.

We can do that by:

1. Add withToggleVisibilityView to the BaseValidateCodeForm here
2. Set isVisible to true if the isClientTheLeader is true here

{shouldShowValidateCodeForm && <ValidateCodeForm
    isVisible={isClientTheLeader}
    isUsingRecoveryCode={isUsingRecoveryCode}
    setIsUsingRecoveryCode={setIsUsingRecoveryCode}
/>}

And remove this block.

We can consider doing the same for the other components inside {isClientTheLeader && ( block

What alternative solutions did you explore? (Optional)

We can put both shouldShowValidateCodeForm and isClientTheLeader inside isVisible, but I think it's better for the ValidateCodeForm to be not mounted if shouldShowValidateCodeForm is false.

We might also want to refocus on the magic code input after the isVisible becomes true, similar to what we did for the LoginForm here

[isabelastisser]

Hi @burczu, can you please review the proposals above? Thanks!