[Due for payment 2025-04-17] [$250] iOS - MC page appears briefly, blank recovery codes page when enabling 2FA via Xero option

[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: v9.1.11-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: No, reproducible on hybrid only
If this was caught during regression testing, add the test name, ID and link from TestRail: Exploratory
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: iPhone 16/iOS 18.3.1
App Component: Workspace Settings

Action Performed:

Precondition: Account is not validated before from Security >> 2FA)

1. Launch Hybrid app on iOS & log in
2. Create a new Workspace
3. Go to WS settings >> More Features >> Enable Accounting feature
4. Go to Accounting page
5. Select Xero option
6. Click on Enable 2FA authentication button

Expected Result:

Magic code page should appear for unvalidated account when enabling 2FA via Xero option

Actual Result:

Magic code appears briefly & suddenly blank recovery codes is displayed when enabling 2FA via Xero

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

https://github.com/user-attachments/assets/df82f34a-4d0e-4685-af5a-7b109d470fee

View all open jobs on GitHub

Upwork Automation - Do Not Edit

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

Issue Owner

Current Issue Owner: @RachCHopkins

[melvin-bot]

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

[bernhardoj]

Proposal

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

The validate code modal disappears when we access it from 2FA required modal.

What is the root cause of that problem?

When we don't have 2FA enabled, the 2FA required modal will show.

App/src/components/ConnectToXeroFlow/index.native.tsx

Lines 42 to 47 in 69df56b

	{!is2FAEnabled && (
	<RequireTwoFactorAuthenticationModal
	onSubmit={() => {
	setIsRequire2FAModalOpen(false);
	Navigation.navigate(ROUTES.SETTINGS_2FA_ROOT.getRoute(ROUTES.POLICY_ACCOUNTING.getRoute(policyID), getXeroSetupLink(policyID)));
	}}

When pressing the button, it will navigate to the 2FA page, but also shows a validate code modal if the user isn't validated yet.

App/src/pages/settings/Security/TwoFactorAuth/CopyCodesPage.tsx

Line 55 in 69df56b

const [isValidateModalVisible, setIsValidateModalVisible] = useState(!isUserValidated);

I remember we had some issues on iOS where opening a 2nd modal from another modal will fail. In this case, the modal isn't immediately shown after the 1st modal, but I guess it has the same underlying issue.

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

So, to solve it, we can apply the same solution, that is to wait until the modal closes first using Modal.close.

App/src/components/ConnectToXeroFlow/index.native.tsx

Lines 42 to 47 in 69df56b

	{!is2FAEnabled && (
	<RequireTwoFactorAuthenticationModal
	onSubmit={() => {
	setIsRequire2FAModalOpen(false);
	Navigation.navigate(ROUTES.SETTINGS_2FA_ROOT.getRoute(ROUTES.POLICY_ACCOUNTING.getRoute(policyID), getXeroSetupLink(policyID)));
	}}

close(() => Navigation.navigate(ROUTES.SETTINGS_2FA_ROOT.getRoute(ROUTES.POLICY_ACCOUNTING.getRoute(policyID), getXeroSetupLink(policyID))));

We can optionally do it if the user isn't validated yet, because if the user is already validated, there will be no validate code modal.

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

N/A

[RachCHopkins]

Very clear to repro.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@rojiphil Whoops! This issue is 2 days overdue. Let's get this updated quick!

[rojiphil]

Thanks @bernhardoj for the proposal.
Initiating a navigate after the modal closes resolves the issue at hand. However, this would also result in the parent Accounting page being shown momentarily until validate code is displayed. This does not seem like a good UX. How can we overcome this?

[bernhardoj]

I think it's a common pattern on the app.

ios.mp4

[melvin-bot]

@rojiphil Whoops! This issue is 2 days overdue. Let's get this updated quick!

[rojiphil]

@bernhardoj proposal LGTM i.e. initiating the navigation only after the modal closes.
🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @MonilBhavsar, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@rojiphil @MonilBhavsar @RachCHopkins this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[bernhardoj]

PR is ready

cc: @rojiphil

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.25-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix validate code modal shows blank #59773

If no regressions arise, payment will be issued on 2025-04-17. 🎊

For reference, here are some details about the assignees on this issue:

• @rojiphil requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests

[melvin-bot]

@rojiphil @RachCHopkins @rojiphil The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[RachCHopkins]

@rojiphil was this a regression? I'm not sure who needs payment.

Also, do we need a checklist?

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @rojiphil owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@RachCHopkins)

• I have verified the correct assignees and roles are listed above and updated the necessary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1901458894316675553/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[melvin-bot]

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

[rojiphil]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] 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:

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source 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: Not Required. The existing checklist is good enough to capture such issues.

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Precondition:

Test:

1. Login as a new unvalidated user (using Join)
2. Create a new workspace
3. Enable accounting on the workspace
4. Open the accounting page
5. Select connect on Xero
6. Press Enable 2FA from the modal
7. Verify the validate code action modal is shown

Do we agree 👍 or 👎

[rojiphil]

was this a regression? I'm not sure who needs payment.

Also, do we need a checklist?

@RachCHopkins There was no regression here and the payment summary here looks correct to me.
BZ checklist is also done. Thanks.

[garrettmknight]

Payment Summary

• Reviewer: @rojiphil owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

[JmillsExpensify]

Payment Summary

• Reviewer: @rojiphil $250 via NewDot
• Reviewer: @bernhardoj $250 via NewDot

[garrettmknight]

$250 approved for @rojiphil

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj