[$500] Log in - Unable to log in again after entering the incorrect magic code

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to to the login page.
2. Enter any email/phone number >> click 'Continue.'
3. Enter an INCORRECT magic code (e.g., 123456) >> an error message will appear.
4. Edit each digit field one-by-one, from the 1st to the 6th field, using the CORRECT magic code.
5. Observation: Despite entering the correct magic code, the user is unable to log in.

Expected Result:

User should be able to login when using correct magic code.

Actual Result:

Despite entering the CORRECT magic code, the user is UNABLE to log in

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.73.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
Notes/Photos/Videos: Any additional supporting documentation

ANDROID-Unable-To-Login.mp4

Recording.4702.mp4

Expensify/Expensify Issue URL:
Issue reported by: @tranvantoan-qn
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1695233198179649

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019165a8d87ce7d34b
• Upwork Job ID: 1705287566946873344
• Last Price Increase: 2023-09-22

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~019165a8d87ce7d34b

[melvin-bot]

Triggered auto assignment to @sakluger (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 @stephanieelliott (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[saranshbalyan-1234]

unable to reproduce on local

[tranvantoan-qn]

Maybe try it on ANDORID/IOS (as showing in attached video here ) may help you reproduce it easier. I'm sure it will happen

[ZhenjaHorbach]

I think the problem is different

The main problem I have identified is
This is that when entering the magic code we only have 5 attempts

If we make 4 incorrect entries, then we will be able to enter on 5

So for me it's a backend problem.

But from our side

Proposal

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

After several unsuccessful attempts we cannot login even with the correct code

What is the root cause of that problem?

Theory(We have an unlimited number of attempts)

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

To add a little clarity to the situation
We can update the text after several unsuccessful attempts so that the user requests a new code

To do this we can add a failed attempts counter
And when reaching 5 failed attempts, we can ask the user to request a new magic code in the text error

What alternative solutions did you explore? (Optional)

NA

[Bucephalus-lgtm]

Hi @ZhenjaHorbach can you please guide me how can I get the setup of Expensify app up and running?

[melvin-bot]

📣 @Bucephalus-lgtm! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[ZhenjaHorbach]

Hi @ZhenjaHorbach can you please guide me how can I get the setup of Expensify app up and running?

First clone the repository )
And then find README.md
There are instructions for each platform )

[dukenv0307]

Proposal

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

Despite entering the CORRECT magic code, the user is UNABLE to log in

What is the root cause of that problem?

This is because any time we change a digit in the OTP input, we'll send the API call again. When it's called too many times (>5 attempts), we'll be blocked from entering more and have to request a new code.

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

1. We should make the error clear if we're being blocked due to too many attempts, currently it's still sending Incorrect magic code. Please try again or request a new code., which misleads the user. We can use something like You've attempted too many times. Please request a new code.. This should be fixed in the back-end to return the correct message.
2. We should adjust the UX since this scenario can happen very frequently. Let's say if the user sees a wrong outdated OTP and enters it. Then realize the issue and modify the code. They'll almost for sure face this issue because by the time they edit all 6 digits, they would have attempted 6 times already because each digit change is an API call.

Some options to consider:
a. Clear all the digits if the OTP is incorrect (this is the same as what Apple does when trying to login to Apple ID)
b. Only auto submit the OTP if the digits are filled and the user currently is focused on the 6th digit. This is to make sure if the user changes the OTP completely, they'll submit the API call only once after they change the last digit. If the user only needs to change 1 digit in the middle, they can always click Sign in to submit the OTP manually.
c. Same as b, but never submit the OTP if it failed the first time. The user should click the Sign in button manually once they're done fixing the OTP. The button copy can optionally be changed to something like Validate and sign in in this case to be clear.

Once we decide on the UX, the change should be straight forward.

What alternative solutions did you explore? (Optional)

NA

[albac]

Proposal

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

The user enter an incorrect magic code and then modify individual digits, the user unable to log in even when entering the correct code.

What is the root cause of that problem?

After an incorrect OTP attempt, if a user modifies individual digits without clearing out all fields, the length of the OTP value remains six.

src/CONST.ts:    MAGIC_CODE_LENGTH: 6,
src/components/MagicCodeInput.js:    maxLength: CONST.MAGIC_CODE_LENGTH,
const validateAndSubmit = () => {
...
if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) {
            return;
        }
...

This results in the system believing that a complete OTP has been entered, which in turn triggers the API call for validation.

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

Clear the OTP fields upon a failed verification, so It forces users to re-enter the entire OTP. By clearing the code after a failed verification, the length of the OTP value gets reset. This ensures the condition for making an API call (all fields being filled) isn't met until all six fields are populated again.

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

📣 @albac! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[albac]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01cca145e98bf4d1e2

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[rojiphil]

Can be considered dupe of #28019 as the final solution arrived at that issue should also resolve this issue.

[parasharrajat]

Yes, it is a duplicate. @stephanieelliott

[sakluger]

Thanks for finding the dupe! Closing in favor of #28019.