[Due for payment 2025-11-07] [$250] Login - Onboarding modal overlaps “Abracadabra you’re signed in!” screen

[jponikarchuk]

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.2.23-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/folder/13176924/test-cases/41237539 Issue was found during this TC. Steps are not the same.
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Windows 11, Chrome | Samsung A15, Android 15, Chrome
App Component: Other

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Enter a Gmail address to sign up and copy the email.
3. Click on Continue > Join.
4. Open an incognito tab, go to https://staging.new.expensify.com/ and paste the email.
5. Click on Continue.
6. Go to your inbox and copy the Magic Link
7. In the incognito window, open a new tab and close the original one.
8. Paste the Magic Link in the new tab, change it to staging, press enter

Expected Result:

“Abracadabra you’re signed in!” should not be shown behind the onboarding modal.

Actual Result:

Onboarding modal is shown over 'Abracadabra you're signed in!'

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

11.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021976758190647082275
• Upwork Job ID: 1976758190647082275
• Last Price Increase: 2025-10-17

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[paulnjs]

Proposal

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

Onboarding modal is shown over 'Abracadabra you're signed in!'

What is the root cause of that problem?

The onboarding modal is always rendered if the user is not complete it.

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Line 659 in b1a83aa

{(isOnboardingCompleted === false || shouldRenderOnboardingExclusivelyOnHybridApp || shouldRenderOnboardingExclusively) && (

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

We can prevent the onboarding from rendering if the current route is the validate login page

function isValidateLoginFlow() {
    const state = navigationRef.getRootState();
    const currentFocusedRoute = findFocusedRoute(state);
    return currentFocusedRoute?.name === SCREENS.VALIDATE_LOGIN;
}
{((isOnboardingCompleted === false || shouldRenderOnboardingExclusivelyOnHybridApp || shouldRenderOnboardingExclusively) && !Navigation.isValidateLoginFlow()) && (

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Line 659 in b1a83aa

{(isOnboardingCompleted === false || shouldRenderOnboardingExclusivelyOnHybridApp || shouldRenderOnboardingExclusively) && (

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

undefined

What alternative solutions did you explore? (Optional)

We can prevent the onboarding flow from starting if the current URL is validate login URL the same as transition URL here and here

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.

[TaduJR]

Proposal

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

When a new user signs up and clicks the magic link to authenticate, the "Abracadabra you're signed in!" modal overlaps the onboarding modal, making both screens unreadable and creating a confusing user experience.

What is the root cause of that problem?

The issue occurs because both JustSignedInModal and OnboardingModalNavigator are rendered simultaneously during the magic link sign-in flow for new users:

1. JustSignedInModal is rendered in ValidateLoginPage when:

   • autoAuthState === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN
   • User is signed in (isSignedIn === true)
   • No exitTo parameter exists
   • User has a login

2. OnboardingModalNavigator is conditionally rendered in AuthScreens.tsx when:

   • isOnboardingCompleted === false (new users haven't completed onboarding)

For new users signing up via magic link:

• Authentication succeeds → autoAuthState changes to JUST_SIGNED_IN → JustSignedInModal appears
• useOnboardingFlowRouter hook detects isOnboardingCompleted === false → triggers OnboardingModalNavigator
• Since OnboardingModalNavigator is defined after VALIDATE_LOGIN screen in the stack navigator, it has a higher z-index and renders on top of JustSignedInModal

The root cause is that ValidateLoginPage doesn't check whether the user needs onboarding before showing the "Abracadabra" screen. The "Abracadabra" screen is designed for multi-tab authentication flows where users should "Head back to your original tab to continue," but new users completing onboarding should stay in the current tab, making this message inappropriate and confusing.

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

Solution: Hide JustSignedInModal for new users who need to complete onboarding

Modify ValidateLoginPage to check if onboarding is completed before showing JustSignedInModal. New users should proceed directly to the onboarding modal instead of seeing the "go back to your original tab" message.

Code Changes

File: src/pages/ValidateLoginPage/index.website.tsx

1. Import the onboarding selector (add to imports section):

Reference:

App/src/pages/ValidateLoginPage/index.website.tsx

Lines 1 to 15 in b76a740

	import React, {useEffect} from 'react';
	import type {OnyxEntry} from 'react-native-onyx';
	import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
	import ExpiredValidateCodeModal from '@components/ValidateCode/ExpiredValidateCodeModal';
	import JustSignedInModal from '@components/ValidateCode/JustSignedInModal';
	import ValidateCodeModal from '@components/ValidateCode/ValidateCodeModal';
	import useOnyx from '@hooks/useOnyx';
	import desktopLoginRedirect from '@libs/desktopLoginRedirect';
	import Navigation from '@libs/Navigation/Navigation';
	import {isValidValidateCode} from '@libs/ValidationUtils';
	import {handleExitToNavigation, initAutoAuthState, signInWithValidateCode} from '@userActions/Session';
	import CONST from '@src/CONST';
	import ONYXKEYS from '@src/ONYXKEYS';
	import type {Session as SessionType} from '@src/types/onyx';
	import type ValidateLoginPageProps from './types';

import {hasCompletedGuidedSetupFlowSelector} from '@libs/onboardingSelectors';

2. Add onboarding state check in the component:

Reference:

App/src/pages/ValidateLoginPage/index.website.tsx

Lines 38 to 40 in b76a740

	const isNavigatingToExitTo = isSignedIn && !!exitTo;
	const [preferredLocale] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE, {canBeMissing: true});

Add after line 39:

const [onboardingValues] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {canBeMissing: true});
const isOnboardingCompleted = hasCompletedGuidedSetupFlowSelector(onboardingValues);

3. Update the render condition for JustSignedInModal:

Reference:

App/src/pages/ValidateLoginPage/index.website.tsx

Lines 82 to 96 in b76a740

	return (
	<>
	{autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.FAILED && <ExpiredValidateCodeModal />}
	{autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && is2FARequired && !isSignedIn && !!login && <JustSignedInModal is2FARequired />}
	{autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && !exitTo && !!login && <JustSignedInModal is2FARequired={false} />}
	{/* If session.autoAuthState isn't available yet, we use shouldStartSignInWithValidateCode to conditionally render the component instead of local autoAuthState which contains a default value of NOT_STARTED */}
	{(!autoAuthState ? !shouldStartSignInWithValidateCode : autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.NOT_STARTED && !isNavigatingToExitTo) && (
	<ValidateCodeModal
	accountID={Number(accountID)}
	code={validateCode}
	/>
	)}
	{(!autoAuthState ? shouldStartSignInWithValidateCode : autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.SIGNING_IN) && <FullScreenLoadingIndicator />}
	</>
	);

Update line 86 from:

{autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && !exitTo && !!login && <JustSignedInModal is2FARequired={false} />}

To:

{/* Don't show JustSignedInModal for new users who need to complete onboarding - they should see the onboarding modal instead */}
{autoAuthStateWithDefault === CONST.AUTO_AUTH_STATE.JUST_SIGNED_IN && isSignedIn && !exitTo && !!login && isOnboardingCompleted !== false && (
    <JustSignedInModal is2FARequired={false} />
)}

[melvin-bot]

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

[melvin-bot]

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

[CortneyOfstad]

Hey @hoangzinh! There are two reviews above for review. Thank you!