[Due for payment 2025-04-28] [$250] Two-Factor Authentication Required Page Needs UI/UX Improvements

[m-natarajan]

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.1.23-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @neil-marcellini
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Log in with any account
2. Go to settings > security > Enable 2FA
3. Create a workspace if needed
4. Got to workspace settings, more features, and enable accounting
5. Got to accounting settings
6. Connect to Xero following this guide for internal devs
7. Invite another user as an admin of the workspace
8. Sign out
9. Sign in as the invited user

Expected Result:

The "Two-factor authentication required" page has all content centered and looks nice

Actual Result:

The title is aligned to the top left, while the rest of the content is centered, creating an imbalanced layout

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021909266952278589580
• Upwork Job ID: 1909266952278589580
• Last Price Increase: 2025-04-07

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

🚨 Edited by proposal-police: This proposal was edited at 2025-04-04 16:26:25 UTC.

Proposal

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

Improved

What is the root cause of that problem?

We are using HeaderWithBackButton with shouldShowBackButton = false

App/src/pages/RequireTwoFactorAuthenticationPage.tsx

Lines 21 to 25 in 3814c36

	<HeaderWithBackButton
	title={translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsHeader')}
	shouldShowBackButton={false}
	shouldDisplayHelpButton={false}
	/>

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

• We can remove the header with back button and update as the following code below:

            <View style={[styles.twoFARequiredContainer]}>
                <View style={[styles.cardSectionIllustration2FA, styles.alignItemsCenter]}>
                    <Icon
                        src={Encryption}
                        width={variables.modalTopIconHeight2FA}
                        height={variables.modalTopIconHeight2FA}
                    />
                </View>
                <View style={[styles.mt2, styles.mh5, styles.dFlex, styles.alignItemsCenter]}>
                    <View style={[styles.mb5]}>
                        <Text style={[styles.textHeadlineH1, styles.textAlignCenter, styles.mv2]}>{translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsHeader')}</Text>
                        <Text style={[styles.textSupporting, styles.textAlignCenter]}>{translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsDescription')}</Text>
                    </View>
                    <Button
                        large
                        success
                        style={styles.wFitContent}
                        pressOnEnter
                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_ROOT.getRoute(ROUTES.REQUIRE_TWO_FACTOR_AUTH))}
                        text={translate('twoFactorAuth.enableTwoFactorAuth')}
                    />
                </View>
            </View>

With modalTopIconHeight2FA = 140 and cardSectionIllustration2FA has height is 140

• Update translation twoFactorAuthIsRequiredForAdminsDescription to Your Xero accounting connection requires two-factor authentication.\nTo continue using Expensify, please enable it. both in en and es file

• Update styles twoFARequiredContainer to with maxWith = 520

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-04 16:45:13 UTC.

Proposal

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

Two-Factor Authentication Required Page Needs UI/UX Improvements

What is the root cause of that problem?

this is because here

App/src/pages/RequireTwoFactorAuthenticationPage.tsx

Lines 21 to 22 in a6edd3a

	<HeaderWithBackButton
	title={translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsHeader')}

we use it in HeaderWithBackButton without explicitly checking the platform

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

We should check the platform and only display this for SmallScreenWidth where we will have back button

const {isSmallScreenWidth} = useResponsiveLayout();
title={isSmallScreenWidth ? translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsHeader') : ''}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

@Expensify/design is this expected? Or can you provide a mock of what they would look like?

cc @shawnborton @dannymcclain

[dannymcclain]

Here's an updated mock of how we're thinking this screen should look:

[dukenv0307]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-05 00:20:34 UTC.

Proposal

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

The title is aligned to the top left, while the rest of the content is centered, creating an imbalanced layout

What is the root cause of that problem?

Improved

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

As we discuss in Slack we want to remove the header title and make some changes about the size

1. Remove the header text
   

   App/src/pages/RequireTwoFactorAuthenticationPage.tsx

   Lines 21 to 25 in 3814c36

   	<HeaderWithBackButton
   	title={translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsHeader')}
   	shouldShowBackButton={false}
   	shouldDisplayHelpButton={false}
   	/>

2. Remove the maxWidth here
   

   App/src/styles/index.ts

   Lines 5338 to 5341 in 3814c36

   	twoFARequiredContainer: {
   	maxWidth: 350,
   	margin: 'auto',
   	},

3. Update the twoFactorAuthIsRequiredForAdminsDescription to Your Xero accounting connection requires the use of two-factor authentication. To continue using Expensify, please enable it. (without \n)

4. Create variable for modalTopIconHeight2FA: 140px

5. Update style to fit the design

<ScreenWrapper testID={RequireTwoFactorAuthenticationPage.displayName}>
            <View style={[styles.twoFARequiredContainer]}>
                <View style={[styles.dFlex, styles.alignItemsCenter]}>
                    <Icon
                        src={Encryption}
                        width={variables.modalTopIconHeight2FA}
                        height={variables.modalTopIconHeight2FA}
                    />
                </View>
                <View style={[styles.mt2, styles.mh5, styles.alignItemsCenter]}>
                    <View style={[styles.gap2, styles.mb5, {
                    maxWidth: '520px'
                }]}>
                        <Text style={[styles.textHeadlineH1, styles.textAlignCenter]}>{translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsTitle')}</Text>
                        <Text style={[styles.textSupporting, styles.textAlignCenter]}>{translate('twoFactorAuth.twoFactorAuthIsRequiredForAdminsDescription')}</Text>
                    </View>
                    <Button
                        large
                        success
                        pressOnEnter
                        onPress={() => Navigation.navigate(ROUTES.SETTINGS_2FA_ROOT.getRoute(ROUTES.REQUIRE_TWO_FACTOR_AUTH))}
                        text={translate('twoFactorAuth.enableTwoFactorAuth')}
                    />
                </View>
            </View>
        </ScreenWrapper>

the style can be adjust and refactor during PR phase

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Result

[github-actions]

⚠️ @dukenv0307 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

thanks @dannymcclain, updated proposal to match with expected

[dukenv0307]

Updated the proposal based on the new design