[$500] Sign in - Auto Sign-In Fails When Entering Correct Magic Code After an Incorrect One

[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.3-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 - Interanal Team
Slack conversation:

Action Performed:

1. Log out if you are logged in
2. Enter an email and click on "Continue"
3. Enter an incorrect magic code
4. Now enter the correct magic code
5. Notice it does not sign in automatically

Expected Result:

When entering the correct magic code after an incorrect one, it should automatically sign in

Actual Result:

Auto Sign-In Fails When Entering Correct Magic Code After an Incorrect One

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

Bug6288542_1700746451421.2023-11-22_17-11-31.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01eeb6f4313958fefe
• Upwork Job ID: 1727793711608205312
• Last Price Increase: 2023-11-23

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @garrettmknight (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)

[akamefi202]

Proposal

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

Auto Sign-In Fails When Entering Correct Magic Code After an Incorrect One.

What is the root cause of that problem?

The issue is caused by this PR: #29731.

App/src/components/MagicCodeInput.js

Lines 133 to 138 in f52c59d

	if (wasSubmitted || !props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) {
	return;
	}
	if (!wasSubmitted) {
	setWasSubmitted(true);
	}

The PR prevents resubmitting the code again if the user updated digits.

It was supposed to prevent resubmitting every time if the user updated only one digit.
But it also prevent resubmitting even if your inputted all digits again,

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

We can fix this issue by resetting wasSubmitted as false, if the user completed inputting of last digit.

App/src/components/MagicCodeInput.js

Lines 186 to 190 in f52c59d

	const numbersArr = value
	.trim()
	.split('')
	.slice(0, props.maxLength - editIndex);
	const updatedFocusedIndex = Math.min(editIndex + (numbersArr.length - 1) + 1, props.maxLength - 1);

For this, we can update onChangeText function by adding below code.

const updatedIndex = editIndex + (numbersArr.length - 1) + 1
if (updatedIndex > props.maxLength - 1) {
    setWasSubmitted(false);
}

This code will check if the user completed inputting last digit and allow resubmitting again.

What alternative solutions did you explore? (Optional)

N/A

[rojiphil]

Proposal

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

After initial submission of magic code, auto sign-in does not happen on entering the correct magic code again.

What is the root cause of that problem?

There was a lengthy discussion on the issue of auto sign-in after initial submission of incorrect magic code. All the available options had been summarised here. However, the final conclusion was to ignore auto sign-in after initial incorrect submission and PR for the issue implemented manually submission if the magic code was submitted incorrectly for the first time. This is the reason why auto sign-in does not work here.

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

To allow auto sign-in post initial incorrect submission, we need to reset the wasSubmitted flag only if all the other inputs are set already and if this was the last key that was entered. We can do as follows here in onChangeText

    const newIndex = editIndex + (numbersArr.length - 1) + 1;
    if (_.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length === props.maxLength && newIndex > props.maxLength - 1) {
        setWasSubmitted(false);
    }   

If we do not check that all the other inputs are set already, the user will notice that sometimes keying in any input within the magic code also triggers resubmission which is not a consistent behaviour for users.

Additionally, post initial incorrect submission, the focus on the magic code text input is lost for the user. So, the user is forced to select any one input and, then, proceed. Here, on validateAndSubmit we may want to bring the focus back on to the first input as follows here so that the user does not have to select any input before keying again with the correct magic code.

    // Set the focus on the first input
    inputRefs.current[0].focus(); 

What alternative solutions did you explore? (Optional)

[DylanDylann]

Proposal

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

• Sign in - Auto Sign-In Fails When Entering Correct Magic Code After an Incorrect One

What is the root cause of that problem?

• We prevented the user from auto-submitting the magic code in here

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

• If we still want to auto-submit the form, we can delay the auto-signin function.
• To do that, in MagicCodeInput we can create the debounce function:

    const debounceBlurMagicCodeInputAndCallOnFulfill = useMemo(
        () =>
            _.debounce(() => {
                blurMagicCodeInput();
                props.onFulfill(props.value);
            }, 3000),
        [blurMagicCodeInput, props],
    );

• Then, update:
  

  App/src/components/MagicCodeInput.js

  Lines 131 to 143 in a2fc32b

  	const validateAndSubmit = () => {
  	const numbers = decomposeString(props.value, props.maxLength);
  	if (wasSubmitted || !props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) {
  	return;
  	}
  	if (!wasSubmitted) {
  	setWasSubmitted(true);
  	}
  	// Blurs the input and removes focus from the last input and, if it should submit
  	// on complete, it will call the onFulfill callback.
  	blurMagicCodeInput();
  	props.onFulfill(props.value);
  	};

  
  to:

    const validateAndSubmit = () => {
        const numbers = decomposeString(props.value, props.maxLength);
+      if (!props.shouldSubmitOnComplete || _.filter(numbers, (n) => ValidationUtils.isNumeric(n)).length !== props.maxLength || props.network.isOffline) {
            return;
        }
        if (!wasSubmitted) {
            setWasSubmitted(true);
        }
+      if (wasSubmitted) {
+          debounceBlurMagicCodeInputAndCallOnFulfill();
+          return;
        }
        blurMagicCodeInput();
        props.onFulfill(props.value);
    };

What alternative solutions did you explore? (Optional)

• NA

[melvin-bot]

@garrettmknight, @mananjadhav Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mananjadhav]

Reviewing this now.

[mananjadhav]

I think this is a non-issue. Considering we explicitly removed the auto-submission, do we want to add it again here?

cc - @garrettmknight @shawnborton @Expensify/design Your inputs please.

[aimane-chnaif]

This is intentional after #28019

[mananjadhav]

Agreed.

[shawnborton]

Cool, I think we can close then