[$175] IOU - Blank screen appears on Onfido identity verification step after entering magic code

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.94-0
Reproducible in staging?: Yes
Reproducible in production?: Unable to validate in Prod - Provide reasoning.
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #102055
Email or phone of affected tester (no customers): applausetester+bm890333@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Web
App Component: Money Requests

Action Performed:

Preconditions:
Users preferred currency is set to USD.
User A sends an IOU to User B in USD

1. Go to staging.new.expensify.com
2. Log in as User B and open the IOU request from User A
3. Click Pay with personal bank account
4. Complete the payment setup steps until reaching identity verification 3rd step
5. If the magic code page appears, enter the magic code.

Expected Result:

Onfido identity verification screen should load properly after entering magic code.

Actual Result:

A blank screen appears instead of the Onfido identity verification flow.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7269539_1790356612882.bandicam_2026-09-25_19-48-57-049.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Nathan Lemma
Bug ID: 7269539

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022103554217231854968
• Upwork Job ID: 2103554217231854968
• Last Price Increase: 2026-09-25

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/b4a3ddfcc0aa0a81462bb5e8fc935602746b5f9da3880f2336293f4aca841c4a

[nlemma]

I added the DeployBlocker label because we can’t verify this on production. Since it’s about a bank account flow.

[MelvinBot]

⚠️ Preliminary analysis (low confidence) — treat as a starting point, not a conclusion.

This is probably not a regression from the 9.4.94-0 deploy. None of the 55 PRs in the current staging deploy touch the Onfido, wallet, or magic-code files. Migrate src/components single-account personal details reads to usePersonalDetail appears in the issue only because it was the PR under regression testing. Its BaseKYCWall change affects only the business-bank-account branch, not "Pay with personal bank account."

I think the blank screen comes from the magic-code page sending the user to a second copy of the identity-verification screen:

1. The IOU flow opens the Pay-flow page. When the phone number changes, useWalletPhoneValidateCode.ts:31 opens the Settings magic-code page.
2. After the code is accepted, WalletConfirmValidateCodePage.tsx:64-67 always goes to the Settings/Wallet VERIFY_IDENTITY page, even when the user started in the Pay flow.
3. The Pay-flow page likely stays mounted underneath and also moves to its Onfido step (EnablePaymentsPage.tsx:95). Once the SDK token arrives, OnfidoStep.tsx:59-65 and VerifyIdentity.tsx:76-82 both mount <Onfido>.
4. Both render <div id="onfido-mount">, and the SDK is started by containerId (BaseOnfidoWeb.tsx:34). If the SDK looks up the first matching element, it renders into the hidden screen and the visible one stays blank.

There's also a simpler possibility. The Wallet VerifyIdentity mounts Onfido with sdkToken ?? '' and no loading check, unlike OnfidoStep.tsx:26. The SDK starts only once, on mount (BaseOnfidoWeb.tsx:149-170), so an empty token never recovers.

The cross-flow navigation came from Strip new magic codes instances and Preserve wallet SSN errorCode across validate-code navigation. Both are already on production.

I couldn't confirm this because I didn't reproduce the flow, and the Onfido SDK's container lookup isn't visible in the package. To confirm, you can:

1. After entering the magic code, run document.querySelectorAll('#onfido-mount').length in DevTools. A result of 2 confirms the duplicate-mount theory.
2. Ask Applause to retry on 9.4.93 or production to confirm this isn't a new regression.

Possible fix (if confirmed)

• In WalletConfirmValidateCodePage, call Navigation.goBack() when the user came from the Pay flow, instead of always navigating to the Settings VERIFY_IDENTITY route.
• Pass containerEl (the ref) instead of the shared containerId in BaseOnfidoWeb. Also add the !isLoading && sdkToken check to Wallet VerifyIdentity.

---

Next Steps: Reply with @MelvinBot <your feedback> to refine this analysis.

---

view run

[melvin-bot]

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

[melvin-bot]

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

[ashusatyarthi-wq]

Proposal

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

When paying an IOU with a personal bank account, after submitting the magic code on the phone number validation step, a blank screen appears instead of the Onfido identity verification flow.

---

What is the root cause of that problem?

In src/pages/EnablePayments/shared/WalletConfirmValidateCodePage.tsx:

if (wasLoading.current && !hasErrors) {
    wasLoading.current = false;
    Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS.getRoute({page: CONST.ENABLE_PAYMENTS.PAGE_NAMES.VERIFY_IDENTITY}));
}

1. useWalletPhoneValidateCode is shared between both the Settings Wallet KYC flow and the IOU Pay flow (src/pages/EnablePayments/Pay/EnablePaymentsPage.tsx).
2. When the user submits the magic code, updatePersonalDetails succeeds on the backend, advancing userWallet.currentStep to CONST.WALLET.STEP.ONFIDO.
3. The underlying IOU screen (EnablePaymentsPage.tsx) is already mounted in the EnablePaymentsStackNavigator and observes userWallet.currentStep === CONST.WALLET.STEP.ONFIDO, mounting its own OnfidoStep.tsx.
4. However, WalletConfirmValidateCodePage.tsx unconditionally executes Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS.getRoute({page: CONST.ENABLE_PAYMENTS.PAGE_NAMES.VERIFY_IDENTITY})).
5. This forcibly pushes the Settings Wallet stack (Settings/Wallet/EnablePayments.tsx -> VerifyIdentity.tsx) right on top of the Pay flow.
6. When VerifyIdentity.tsx mounts, it also renders <Onfido />. Both Onfido components look for the hardcoded container ID CONST.ONFIDO.CONTAINER_ID (#onfido-mount). The duplicate mounting/teardown collides in the DOM, leaving the user with a completely blank screen.
7. Additionally, VerifyIdentity.tsx mounts <Onfido sdkToken={walletOnfidoData?.sdkToken ?? ''} /> without checking !walletOnfidoData?.isLoading && !walletOnfidoData?.errors && !!walletOnfidoData?.sdkToken (unlike OnfidoStep.tsx). Because BaseOnfidoWeb.tsx initializes the Onfido SDK only once on mount (useEffect(..., [])), initializing with an empty token fails silently and never recovers.

---

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

1. In src/pages/EnablePayments/shared/WalletConfirmValidateCodePage.tsx:
   Replace the hardcoded navigation to the Settings route with Navigation.goBack():

-        if (wasLoading.current && !hasErrors) {
-            wasLoading.current = false;
-            Navigation.navigate(ROUTES.SETTINGS_ENABLE_PAYMENTS.getRoute({page: CONST.ENABLE_PAYMENTS.PAGE_NAMES.VERIFY_IDENTITY}));
-        }
+        if (wasLoading.current && !hasErrors) {
+            wasLoading.current = false;
+            Navigation.goBack();
+        }

When Navigation.goBack() is called:

• In the IOU Pay flow: It cleanly pops WalletConfirmValidateCodePage and returns to EnablePaymentsPage.tsx, which renders OnfidoStep.tsx without route conflicts or duplicate Onfido instances.
• In the Settings Wallet flow: It cleanly pops back to Settings/Wallet/EnablePayments.tsx, where the existing useEffect in EnablePayments.tsx (lines 78-90) automatically performs the URL correction to the canonical step.

2. In src/pages/EnablePayments/Wallet/VerifyIdentity/VerifyIdentity.tsx:
   Add the guard to ensure Onfido is only mounted when a valid token is loaded, matching OnfidoStep.tsx:

-                    {walletOnfidoData?.hasAcceptedPrivacyPolicy ? (
+                    {walletOnfidoData?.hasAcceptedPrivacyPolicy && !walletOnfidoData?.isLoading && !walletOnfidoData?.errors && !!walletOnfidoData?.sdkToken ? (
                         <Onfido
-                            sdkToken={walletOnfidoData?.sdkToken ?? ''}
+                            sdkToken={walletOnfidoData.sdkToken}
                             onUserExit={goBack}
                             onError={handleOnfidoError}
                             onSuccess={handleOnfidoSuccess}
                         />
                     ) : (

---

What alternative solutions did you explore? (Optional)

Pass a backTo query param through useWalletPhoneValidateCode. However, since all other ConfirmValidateCodePage components in the app (e.g., PrivatePersonalDetailsConfirmValidateCodePage, IssueNewCardConfirmValidateCodePage) simply call Navigation.goBack() upon successful code verification, using Navigation.goBack() is the most consistent and standard architectural approach.

---

Verified Branch & Pre-tested Commits:

The implementation has been staged and verified on:
ashusatyarthi-wq/App:fix/iou-onfido-blank-screen-102336 (Commits c624972, fd14e2b).