MFA prompt page visible underneath outcome screen during dismiss animation

[chuckdries]

Version Number: 9.4.16
Reproducible in staging?: yes
Reproducible in production?: yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @chuckdries
Slack conversation (hyperlinked to channel name):

Action Performed:

1. Trigger a 3DS challenge
2. Authorize it and be taken to the outcome page
3. Press "Got it"

Expected Result:

Outcome page animates out smoothly

Actual Result:

Outcome page animates out, but prompt page is visible underneath

Workaround:

Not a blocking issue, everything works, but it's uggo

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

mobile.3ds.challenge.mfa.prompt.jank.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022068115387870329964
• Upwork Job ID: 2068115387870329964
• Last Price Increase: 2026-06-19

[MelvinBot]

Proposal

What is the root cause of that problem?

On native (HybridApp), the MFA outcome screen is left sitting on top of the still-mounted Prompt screen, and the close animation slides the outcome screen off to reveal it.

The MFA screens (MFA_INITIAL, PROMPT, OUTCOME_SUCCESS, OUTCOME_FAILURE) are sibling screens in a single platform stack navigator. To move between them, mfaNavigation.ts normally uses StackActions.replace. But on HybridApp, replace silently fails to commit, so for the terminal outcome screens it pushes instead:

if (CONFIG.IS_HYBRID_APP && OUTCOME_SCREENS.has(screen)) {
    mfaNavigationRef.dispatch(StackActions.push(screen, params));  // native: PUSH
    return;
}
mfaNavigationRef.dispatch(StackActions.replace(screen, params));    // web: REPLACE

This leaves the native stack as [MFA_INITIAL, PROMPT, OUTCOME_SUCCESS] — PROMPT is still mounted underneath. When "Got it" is pressed, the close effect in MultifactorAuthenticationModalNavigator.tsx:119-121 calls mfaNavigationRef.goBack(), which pops only the outcome screen with a slide animation — exposing the Prompt screen for the duration of that animation. The full-navigator unmount (RESET) only happens after the transition finishes, so it can't hide Prompt during the slide.

On web, replace works, so the stack is [MFA_INITIAL, OUTCOME] and goBack() reveals only the transparent placeholder screen — which is why this doesn't reproduce on web.

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

Fix this in the close path (not by switching native back to replace, since replace is load-bearing — it silently fails on native). Two clean options:

1. Gate the slide-out goBack() to non-native. In the close effect at MultifactorAuthenticationModalNavigator.tsx:119-121, skip the goBack() when CONFIG.IS_HYBRID_APP. The overlay then just fades out (backdrop fade) and is unmounted by the RESET, so nothing slides over the Prompt screen.

2. Reset the stack to a single entry before closing (e.g. StackActions.popToTop / CommonActions.reset to [MFA_INITIAL]) so the pop reveals only the transparent placeholder, matching web. This keeps a consistent animation on all platforms.

Option 1 is the smallest change; option 2 preserves the slide-out animation everywhere.

What alternative solutions did you explore? (Optional)

Making the outcome screen opaque/full-bleed during the closing phase would mask the Prompt, but it hides the symptom rather than fixing the extra live screen left underneath — not recommended.

Investigation details

• Screen registration / layering: PROMPT and the two OUTCOME_* screens are sibling Stack.Screens in one platform stack navigator (MultifactorAuthenticationModalNavigator.tsx). Native renders via NativeStackView, so each pushed route is a live native screen and goBack() animates the top one off to reveal the one beneath.
• "Got it" handler: OutcomeScreenBase.tsx → onClose → dispatch({type: 'CLOSE_MODAL'}) → reducer sets isModalOpen: false → navigator flips phase to 'closing' → close effect runs goBack() then RESET after the transition.
• Why native only: the push-vs-replace split at mfaNavigation.ts:79-84 is the entire difference. The in-code comment explains replace silently fails on HybridApp, which is why outcome screens are pushed there.
• Confidence: High — the push (native) vs replace (web) asymmetry, the single-stack layering, and the goBack() pop on close are all explicit in the code with confirming comments. Matches the reported platforms (iOS App + Android App only).

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/94101) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[yusufdeveloper2903]

Proposal

What is the root cause of that problem?

When navigating from the MFA prompt page to the outcome page, both screens are rendered in the navigation stack during the dismiss animation. The MFA prompt screen remains mounted and visible beneath the outcome screen as it animates out, because the navigator doesn't hide the underlying screen before the animation completes.

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

I'd look at the 3DS/MFA modal navigator configuration. The fix is to set detachPreviousScreen (or equivalent) so the prompt screen is detached/hidden when the outcome screen is active, preventing it from showing through during the pop animation.

In the relevant navigator (likely in src/libs/Navigation/ or a modal stack config for the 3DS flow), I'd suggest:

- <Stack.Screen name={SCREENS.MFA_PROMPT} component={MFAPromptPage} />
+ <Stack.Screen
+   name={SCREENS.MFA_PROMPT}
+   component={MFAPromptPage}
+   options={{ detachPreviousScreen: true }}
+ />

Or alternatively, on the outcome screen's stack options:

  <Stack.Screen
    name={SCREENS.THREE_DS_OUTCOME}
    component={ThreeDSOutcomePage}
+   options={{ detachPreviousScreen: true }}
  />

This ensures the prompt screen is unmounted/hidden once the outcome screen is fully on top, so it won't bleed through during the dismiss animation.

What alternative solutions did you explore?

An alternative would be to programmatically reset the navigation stack when reaching the outcome screen (replacing rather than pushing), so the prompt screen is never in the stack during dismissal. However, detachPreviousScreen is cleaner and avoids disrupting navigation history handling.

[ahmdshrif]

Proposal

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

On native (iOS/Android app) after a 3DS challenge, pressing "Got it" on the outcome screen slides the outcome page out but briefly reveals the earlier MFA Prompt page underneath, instead of dismissing cleanly. Web/mWeb are fine.

What is the root cause of that problem?

The dismiss only pops ONE screen, but on native the stack has TWO screens above the transparent placeholder.

1. On HybridApp (the native iOS/Android builds) StackActions.replace silently fails, so the terminal outcome screen is pushed on top of the Prompt screen instead of replacing it: mfaNavigation.ts#L74-L80. So the native stack is MFA_INITIAL → PROMPT → OUTCOME.
2. On close, the navigator runs a single mfaNavigationRef.goBack(): MultifactorAuthenticationModalNavigator.tsx#L118-L121. That pops OUTCOME → PROMPT, so the SLIDE_FROM_RIGHT back-transition slides the Prompt page into view while the overlay tears down.

This is why it's native-only: standalone/web use replace (#L84), so their stack is just MFA_INITIAL → OUTCOME and the one goBack() reveals only the transparent placeholder. The single-pop assumption is correct for replace but wrong for the pushed hybrid stack.

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

Dismiss the whole flow to the transparent placeholder in one transition instead of popping a single level. At line 120 of MultifactorAuthenticationModalNavigator.tsx:

// import {StackActions} from '`@react-navigation`/native';
if (mfaNavigationRef.isReady() && mfaNavigationRef.canGoBack()) {
    mfaNavigationRef.dispatch(StackActions.popToTop());
}

popToTop() slides OUTCOME out and reveals only MFA_INITIAL (transparent) regardless of stack depth — Prompt is removed in the same transaction, never painted. Regression-safe: on the replace path the stack is one deep so popToTop ≡ the old goBack, and the runAfterUpcomingTransition reset still fires unchanged. Covers the cancel-confirm dismiss path too, since it routes through the same closing effect.

What alternative solutions did you explore? (Optional)

• Loop/call goBack() twice: still animates each pop, so Prompt visibly slides in then out — janky, and brittle if depth changes. popToTop is one clean transition.
• Switch hybrid back to replace so Prompt isn't on the stack: reintroduces the original "stuck on spinner" bug the push intentionally fixes.

[aswin-s]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[melvin-bot]

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

[melvin-bot]

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

[godzillaxbox19982014-lgtm]

Proposal

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

MFA prompt page visible underneath outcome screen during dismiss animation

What is the root cause of that problem?

I traced this to the path that handles MFA, 3DS:

• src/pages/workspace/expensifyCard/WorkspaceExpensifyCardAddWorkEmailPage.tsx:38 (WorkspaceExpensifyCardAddWorkEmailPage): type WorkspaceExpensifyCardAddWorkEmailPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_ADD_WORK_EMAIL>;
• src/pages/workspace/expensifyCard/WorkspaceExpensifyCardVerifyWorkAccountPage.tsx:22 (WorkspaceExpensifyCardVerifyWorkAccountPage): type WorkspaceExpensifyCardVerifyWorkAccountPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_VERIFY_WORK_EMAIL>;
• src/pages/workspace/expensifyCard/WorkspaceExpensifyCardPageEmptyState.tsx:39 (WorkspaceExpensifyCardPageEmptyState): route: PlatformStackScreenProps<WorkspaceSplitNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD>['route'];
• The local evidence matches this recurring failure shape: NewDot and OldDot read different default account/card fields. Here, src/pages/workspace/expensifyCard/WorkspaceExpensifyCardAddWorkEmailPage.tsx:38 and src/pages/workspace/expensifyCard/WorkspaceExpensifyCardVerifyWorkAccountPage.tsx:22 do not agree on the same MFA, 3DS value, so the user-visible path can show a missing or stale state even though nearby data already has the needed context.

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

• Update src/pages/workspace/expensifyCard/WorkspaceExpensifyCardAddWorkEmailPage.tsx:38 to derive MFA, 3DS from the card/accounting data source that owns this flow before the value is consumed.
• Carry the same normalized value through src/pages/workspace/expensifyCard/WorkspaceExpensifyCardVerifyWorkAccountPage.tsx:22; that follows the safer family move to add fallback at the export/mapping layer, so the write/optimistic/read paths agree instead of only changing the visible component.
• Keep the change inside the Payments, Wallet, Bank, Billing, Cards surface and avoid changing money movement, bank/card/account settings.

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

1. Add or update a regression in tests/unit/Payment*.ts for the exact issue flow: MFA prompt page visible underneath outcome screen during dismiss animation.
2. Cover the counter-case near src/pages/workspace/expensifyCard/WorkspaceExpensifyCardAddWorkEmailPage.tsx:38 so valid existing MFA, 3DS behavior still works.
3. Manually repeat the issue steps after the patch and confirm the visible state/action is no longer stale.

What alternative solutions did you explore? (Optional)

• I would not add a broad new condition outside these referenced paths; the safer fix is to keep MFA, 3DS consistent at the first read/write boundary shown above.

[lorretheboy]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.