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

@brunovjk

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

Open New Dot app
On login page enter your email address and magic code
Verify 2-FA page is opened
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?

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

@kevinksullivan

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.

@kevinksullivan

@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

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')}

@bernhardoj

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

@kevinksullivan

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

@kevinksullivan

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

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

@brunovjk

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

@bernhardoj

Yep! @bernhardoj proposal looks good 👍

@brunovjk

📣 @brunovjk 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

@brunovjk

PR is ready

cc: @brunovjk

@VictoriaExpensify

The PR went into production on Sep 30.

cc: @VictoriaExpensify

@brunovjk

[@brunovjk] The PR that introduced the bug has been identified. Link to the PR: I haven't found any PR that could have introduced this bug, as it's an edge case and it seems like it's always been there.
[@brunovjk] 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:
[@brunovjk] 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:
[@brunovjk] Determine if we should create a regression test for this bug. Yes
[@brunovjk] 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.

Regression Test Proposal:

Prerequisite: 2FA is enabled; Plataform: Android native.

Log out
Enter your login and magic code
Press the Use two-factor authentication code/Use recovery codes multiple times to switch between those two text
Verify the text is not blinking.

Do we agree 👍 or 👎?

cc: @VictoriaExpensify

@bernhardoj

Payment summary:
Contributor: @bernhardoj owed $250 via NewDot
Contributor+: @brunovjk paid $250 via Upwork

Thanks for your work on this!

Requested in ND.

@bernhardoj

$250 approved for @bernhardoj

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

25 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<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>

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Sep 6, 2024

lanitochka17 commented on Sep 6, 2024

bernhardoj commented on Sep 8, 2024

Proposal

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

What is the root cause of that problem?

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

github-actions commented on Sep 8, 2024

melvin-bot commented on Sep 9, 2024

melvin-bot commented on Sep 11, 2024

melvin-bot commented on Sep 12, 2024

melvin-bot commented on Sep 12, 2024

25 remaining items

NikkiWines commented on Sep 24, 2024

melvin-bot commented on Sep 24, 2024

bernhardoj commented on Sep 24, 2024

brunovjk commented on Oct 2, 2024

brunovjk commented on Oct 7, 2024

VictoriaExpensify commented on Oct 9, 2024

bernhardoj commented on Oct 10, 2024

JmillsExpensify commented on Oct 15, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions