[HOLD for payment 2024-01-31] [$500] mWeb- Login - Error message appear on original tab when navigate from "Magic code expired" page

[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.17-1
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. Navigate to staging.new.expensify.com
2. On the log in screen, enter a new account email
3. Navigate to the email inbox and open the validate email and copy the link
4. Modify the last portion of the link by a character
5. Verify you're redirected the "Magic code expired" page
6. Navigate to the original login tab

Expected Result:

There should be no error messages on the login page

Actual Result:

"Auth Authenticate returned an error" message appear for a second on original tab when navigate from "Magic code expired" page

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

Bug6326464_1703630998611.az_recorder_20231226_183110.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e24ce791ae307499
• Upwork Job ID: 1739822234402959360
• Last Price Increase: 2024-01-10
• Automatic offers:
• tienifr | Contributor | 28104854

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @slafortune (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 - @mananjadhav (External)

[tienifr]

Proposal

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

"Auth Authenticate returned an error" message appear for a second on original tab when navigate from "Magic code expired" page

What is the root cause of that problem?

We're not clearing the account errors when the ValidateCodeForm is rendered. So when coming back to the original tab, it will wait for this to happen before clearing the account messages here.

That's why we see the error message showing briefly.

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

Clearing the account errors in useEffect when the ValidateCodeForm is rendered, we already do the same thing in BaseValidateCodeForm in Profile -> Contacts here so can just apply the same for the sign in flow.

We can add to here

useEffect(() => {
    Session.clearAccountMessages();
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Optionally we can check if (props.account.errors) { as well before clearing.

We can also modify hasError so that it only shows error if it's first render (using isFirstRenderRef for example)

If later we ever change so that the ValidateCodeForm will be invisible (but still mounted) when tab is not leader tab, then the above useEffect will check if the ValidateCodeForm becomes visible.

What alternative solutions did you explore? (Optional)

1. In SignInPage, we can create the new state isClearingError to indicate that the error is clearing. And we just show the magic code when isClearingError is false. we will set it to true when isClientTheLeader become true

    const [isClearingError, setIsClearingError] = useState(false);

    useEffect(()=>{
        if(!isClientTheLeader){
            return;
        }
        setIsClearingError(true);
        Session.clearAccountMessages()
    },[isClientTheLeader])

    useEffect(()=>{
        if(account.errors || !isClearingError){
            return;
        }
        setIsClearingError(false)
    },[account.errors, isClearingError])

...
                {isClientTheLeader && !isClearingError && (
...

2. In ValidateCodeForm, create new state isFirstRender (default is true), and set it to false when error is null. We just show the error when isFirstRender is false

3. Show error if all 6 characters are present

[slafortune]

@lanitochka17 I don't really get this. Why would anyone "Modify the last portion of the link by a character" ? I'm not sure this is something we need to account for.

[tienifr]

@slafortune The same bug happens if we wait for the magic code to be expired then try, I think magic code expiring is a pretty common case.

[melvin-bot]

@mananjadhav, @slafortune Whoops! This issue is 2 days overdue. Let's get this updated quick!

[slafortune]

@mananjadhav will you be able to get to this or are you waiting on more proposals?

[melvin-bot]

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

[mananjadhav]

@tienifr I reviewed the proposal, but I am not sure if we implement the code based on tab. Do you have a reference of the code where we're implementing tab specific checks/conditions?

[melvin-bot]

@mananjadhav, @slafortune Eep! 4 days overdue now. Issues have feelings too...

[mananjadhav]

Still waiting on response of the previous proposals. Open to others as well.

[melvin-bot]

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

[melvin-bot]

@mananjadhav @slafortune this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[slafortune]

@tienifr can you provide an update to #33637 (comment)

[mananjadhav]

I think @tienifr's original proposal with work. I got a bit confused by mixing the current proposal and the alternative proposals.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @yuwenmemon, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

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

[melvin-bot]

@mananjadhav @yuwenmemon @slafortune @tienifr this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

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

• fix: Error message appear on original tab when navigate from Magic code expired page #34703

If no regressions arise, payment will be issued on 2024-01-31. 🎊

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

• @mananjadhav requires payment through NewDot Manual Requests
• @tienifr 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:

• [@mananjadhav] The PR that introduced the bug has been identified. Link to the PR:
• [@mananjadhav] 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:
• [@mananjadhav] 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:
• [@mananjadhav] Determine if we should create a regression test for this bug.
• [@mananjadhav] 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.
• [@slafortune] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[slafortune]

@mananjadhav When you get a chance can you complete the above checklist for NewDot payment to proceed

[slafortune]

@tienifr Paid 👍

[mananjadhav]

I don't think we did consider the case of different tab when building the magic code and I can't seem to pinpoint a specific PR where this could've been handled. Considering this is not a very general use-case I don't think we need a regression test step either.

@slafortune I think we're good to close this one out. Can you please post the payout summary so that I can raise a request?

[mananjadhav]

@slafortune quick bump on the payment summary.

[slafortune]

• @mananjadhav is due $500 paid via NewDot
• @tienifr has been paid $500 paid via Upworks

[JmillsExpensify]

$500 approved for @mananjadhav based on summary above.