Verify account - No right side window animation when 2FA setup is dismissed

[IuliiaHerets]

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: 9.0.60-0
Reproducible in staging?: Y
Reproducible in production?: N/A - new feature, doesn't exist in prod
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with a new Gmail account.
3. Go to Settings > Security > Two-factor authentication.
4. Dismiss the RHP.

Expected Result:

There will be animation when Validate your account RHP from 2FA setup is dismissed.

Actual Result:

There is no animation (side window doesn't slide close like on other pages) when Validate your account RHP from 2FA setup is dismissed.

Workaround:

Гтлтщцт

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6661746_1731353635975.20241112_032620.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @mountiny

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (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.

[melvin-bot]

Triggered auto assignment to @deetergp (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[deetergp]

I don't think this is a blocker since it is a new feature and isn't breaking any existing functionality.

[Christinadobrzyn]

The steps in the OP verify the issue but I'm not sure if this should be a priority. Asking the team. https://expensify.slack.com/archives/C05LX9D6E07/p1731385484769539

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-11-12 04:57:55 UTC.

Proposal

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

No animation when closing the 2fa validate code page.

What is the root cause of that problem?

The validate code itself is a modal and it will be visible as long as the user is not validated.

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Lines 164 to 176 in 64cb4ee

	<ValidateCodeActionModal
	title={translate('contacts.validateAccount')}
	description={translate('contacts.featureRequiresValidate')}
	isVisible={!isUserValidated}
	hasMagicCodeBeenSent={hasMagicCodeBeenSent}
	validatePendingAction={loginData?.pendingFields?.validateCodeSent}
	sendValidateCode={() => User.requestValidateCodeAction()}
	handleSubmitForm={(validateCode) => User.validateSecondaryLogin(loginList, contactMethod, validateCode)}
	validateError={!isEmptyObject(validateLoginError) ? validateLoginError : ErrorUtils.getLatestErrorField(loginData, 'validateCodeSent')}
	clearError={() => User.clearContactMethodErrors(contactMethod, !isEmptyObject(validateLoginError) ? 'validateLogin' : 'validateCodeSent')}
	onModalHide={() => {}}
	onClose={() => TwoFactorAuthActions.quitAndNavigateBack(backTo)}
	/>

When we close the page, the modal stays visible until the 2FA page is closed (by TwoFactorAuthActions.quitAndNavigateBack).

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

We need to store the modal visibility state to a state.

const [isModalVisible, setIsModalVisible] = useState(!isUserValidated);

Then use it as the isVisible prop.

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Line 167 in 64cb4ee

isVisible={!isUserValidated}

isVisible={isModalVisible}

And we can update it whenever isUserValidated is updated.

useEffect(() => {
    setIsModalVisible(!isUserValidated);
}, [isUserValidated]);

Then, we can set it to false when closing the modal.

onClose={() => {
    setIsModalVisible(false)
    TwoFactorAuthActions.quitAndNavigateBack(backTo)
}}

[mountiny]

@deetergp feel free to assign me if you want as I reviewed the offending PR, happy to take over

[mountiny]

@hungvu193 as a C+ on the offending PR, can you please review the proposal here?

[hungvu193]

Yeah surre

[ishakakkad]

Proposal

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

Animation is not showing when closing two factor authentication modal.

What is the root cause of that problem?

2FA modal only shows when isUserValidated = false. In case we close the modal without authenticate isUserValidated is always false so it does not animate it.

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Lines 164 to 167 in 64cb4ee

	<ValidateCodeActionModal
	title={translate('contacts.validateAccount')}
	description={translate('contacts.featureRequiresValidate')}
	isVisible={!isUserValidated}

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

To fix this problem we need to make sure as long as close event is fire modal will hidden. To fix this we need to introduce new state variable.

const [showValidateCodeModal, setShowValidateCodeModal] = useState(false);

And pass state value as props in ValidateCodeActionModal, so once state value set to false modal will be closed.

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Line 167 in 64cb4ee

isVisible={!isUserValidated}

Replace with

isVisible={showValidateCodeModal}

Set showValidateCodeModal to false when we close modal. To make it cleaner extract modal close logic into handler.

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Line 175 in 64cb4ee

onClose={() => TwoFactorAuthActions.quitAndNavigateBack(backTo)}

Replace with

onClose={handleValidateCodeModalClose}

const handleValidateCodeModalClose = () => {
    setShowValidateCodeModal(false);
    TwoFactorAuthActions.quitAndNavigateBack(backTo);
};

Update showValidateCodeModal value whenever isUserValidated is changed. We already have useEffect which runs when isUserValidated value changed. So we can use same effect.

App/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx

Lines 55 to 62 in 64cb4ee

	useEffect(() => {
	// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
	if (account?.requiresTwoFactorAuth || account?.recoveryCodes || !isUserValidated) {
	return;
	}
	Session.toggleTwoFactorAuth(true);
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- We want to run this when component mounts
	}, [isUserValidated]);

Replace with

useEffect(() => {
    setShowValidateCodeModal(!isUserValidated);
    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
    if (account?.requiresTwoFactorAuth || account?.recoveryCodes || !isUserValidated) {
        return;
    }
    Session.toggleTwoFactorAuth(true);
    // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- We want to run this when component mounts
}, [isUserValidated]);

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

📣 @ishakakkad! 📣
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>

[ishakakkad]

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

[melvin-bot]

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

[Christinadobrzyn]

Just checking in on this, @hungvu193 is there a proposal we're already going with for this fix or are you reviewing these new proposals?

[hungvu193]

Just checking in on this, @hungvu193 is there a proposal we're already going with for this fix or are you reviewing these new proposals?

I'm still reviewing proposals

[mountiny]

@hungvu193 any updates?

[hungvu193]

Sorry not yet. I've been a bit under the water today. I'll try to review this weekend

[hungvu193]

@ishakakkad Your proposal is a dupe of @bernhardoj proposal. Please checkout our contributing guides here before posting proposal. Ty.

Let's go with @bernhardoj 's proposal.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Current assignee @mountiny is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[bernhardoj]

PR is ready

cc: @hungvu193