[$250] Android - 2-FA – Use two-factor authentication code and Use recovery codes blinks

[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: 9.0.30-2
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+gm103086@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

User have 2-FA established

1. Open New Dot app
2. On login page enter your email address and magic code
3. Verify 2-FA page is opened
4. Switch between "Use two-factor authentication code" and "Use recovery codes"

Expected Result:

"Use two-factor authentication code" and "Use recovery codes" options should not blink

Actual Result:

Options "Use two-factor authentication code" and "Use recovery codes" blinks

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

Bug6595150_1725614013433.Recording__3889.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834200655136685716
• Upwork Job ID: 1834200655136685716
• Last Price Increase: 2024-09-19
• Automatic offers:
• brunovjk | Reviewer | 104097398

Issue Owner

Current Issue Owner: @brunovjk

[melvin-bot]

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@kevinksullivan FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[bernhardoj]

Proposal

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

The use recovery code/use 2fa code blinks when pressing it.

What is the root cause of that problem?

The text button for use recovery code/2fa code use the same Pressable. We just conditionally render the text depends on whether we want to use recovery/2fa code.

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

Lines 347 to 357 in 9affb13

	<PressableWithFeedback
	style={[styles.mt2]}
	onPress={switchBetween2faAndRecoveryCode}
	hoverDimmingValue={1}
	pressDimmingValue={0.2}
	disabled={isValidateCodeFormSubmitting}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={isUsingRecoveryCode ? translate('recoveryCodeForm.use2fa') : translate('recoveryCodeForm.useRecoveryCode')}
	>
	<Text style={[styles.link]}>{isUsingRecoveryCode ? translate('recoveryCodeForm.use2fa') : translate('recoveryCodeForm.useRecoveryCode')}</Text>
	</PressableWithFeedback>

So, when we press the text button, the press dim is applied, which reduces the opacity to 0.2 and because it uses the same Pressable, the dim affects the 2nd text too. For example, if the text is initially Use recovery code, when we press it, the text is switched to Use 2FA code and the dim is applied briefly to Use 2FA code too, so it looks like the text is blinking. The 0.2 opacity makes the "blink" obvious.

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

We can remove the 0.2 dim value and just let it use the default value (0.8), just like the Go back text button but I don't think it solves the root cause.

So, to solve the root cause, we can set a key to the pressable so a new instance of pressable is created every time we switch between codes.

We can use the boolean value (and convert it to string) as the key or use the text itself or any other value.

key={isUsingRecoveryCode}
key={isUsingRecoveryCode ? translate('recoveryCodeForm.use2fa') : translate('recoveryCodeForm.useRecoveryCode')}

[github-actions]

@bernhardoj Your proposal will be dismissed because you did not follow the proposal template.

[melvin-bot]

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

[melvin-bot]

@kevinksullivan Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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

[melvin-bot]

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