[HOLD for payment 2024-10-29] [$250] Sign in-User remains in first step of Onboarding when tapping an option after closing the app

[IuliiaHerets]

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: v9.0.42-3
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Open the New Expensify app
2. Log in with new gmail account
3. Close the app and reopen
4. Tap on any option in onboarding modal

Expected Result:

The next step of onboarding flow should be displayed.

Actual Result:

User remains on the same page.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6622099_1727873782030.Record_2024-10-02-14-55-13.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843801370397066465
• Upwork Job ID: 1843801370397066465
• Last Price Increase: 2024-10-15
• Automatic offers:
• dukenv0307 | Reviewer | 104442039
• truph01 | Contributor | 104442040

Issue Owner

Current Issue Owner: @stephanieelliott

[melvin-bot]

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[IuliiaHerets]

@stephanieelliott FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[bernhardoj]

Proposal

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

The onboarding modal shows again from the first step after selecting an option if we reopen the app.

What is the root cause of that problem?

When we open the app, the onboarding page is shown by useOnboardingFlowRouter hook and the linking listener here is triggered with an empty URL string.

App/src/Expensify.tsx

Lines 207 to 210 in bad93d5

	// Open chat report from a deep link (only mobile native)
	Linking.addEventListener('url', (state) => {
	Report.openReportFromDeepLink(state.url);
	});

Inside the function, we check whether the user already completed the onboarding or not. It's to prevent the user from deep-linking to another page if the onboarding hasn't been completed yet.

App/src/libs/actions/Report.ts

Lines 2683 to 2721 in bad93d5

	Navigation.waitForProtectedRoutes().then(() => {
	if (route && Session.isAnonymousUser() && !Session.canAnonymousUserAccessRoute(route)) {
	Session.signOutAndRedirectToSignIn(true);
	return;
	}
	// We don't want to navigate to the exitTo route when creating a new workspace from a deep link,
	// because we already handle creating the optimistic policy and navigating to it in App.setUpPoliciesAndNavigate,
	// which is already called when AuthScreens mounts.
	if (url && new URL(url).searchParams.get('exitTo') === ROUTES.WORKSPACE_NEW) {
	return;
	}
	const handleDeeplinkNavigation = () => {
	const state = navigationRef.getRootState();
	const currentFocusedRoute = findFocusedRoute(state);
	if (isOnboardingFlowName(currentFocusedRoute?.name)) {
	Welcome.setOnboardingErrorMessage(Localize.translateLocal('onboarding.purpose.errorBackButton'));
	return;
	}
	if (shouldSkipDeepLinkNavigation(route)) {
	return;
	}
	if (isAuthenticated) {
	return;
	}
	Navigation.navigate(route as Route, CONST.NAVIGATION.ACTION_TYPE.PUSH);
	};
	// We need skip deeplinking if the user hasn't completed the guided setup flow.
	Welcome.isOnboardingFlowCompleted({
	onNotCompleted: OnboardingFlow.startOnboardingFlow,
	onCompleted: handleDeeplinkNavigation,
	onCanceled: handleDeeplinkNavigation,
	});

But, we only execute it if the protected routes are ready. So, the checking is currently pending. The function will wait for the navigation to be ready first, however, even after the nav is ready, the state is undefined.

App/src/libs/Navigation/Navigation.ts

Lines 391 to 404 in bad93d5

	isNavigationReady().then(() => {
	const currentState = navigationRef.current?.getState();
	if (navContainsProtectedRoutes(currentState)) {
	resolve();
	return;
	}
	const unsubscribe = navigationRef.current?.addListener('state', ({data}) => {
	const state = data?.state;
	if (navContainsProtectedRoutes(state)) {
	unsubscribe?.();
	resolve();
	}
	});

The ready promise is resolved here, which doesn't guarantee that the state is ready.

App/src/libs/Navigation/NavigationRoot.tsx

Line 181 in bad93d5

onReady={onReady}

We also resolve the promise here whenever the state is changed.

App/src/libs/Navigation/NavigationRoot.tsx

Line 76 in bad93d5

Navigation.setIsNavigationReady();

We can remove the first resolve from onReady, but the nav state still doesn't contains routeNames property yet which is required when checking the protected route.

App/src/libs/Navigation/Navigation.ts

Lines 369 to 375 in bad93d5

	function navContainsProtectedRoutes(state: State | undefined): boolean {
	if (!state?.routeNames || !Array.isArray(state.routeNames)) {
	return false;
	}
	// If one protected screen is in the routeNames then other screens are there as well.
	return state?.routeNames.includes(PROTECTED_SCREENS.CONCIERGE);

Only after we complete the first step by selecting any option, the protected route becomes available, and the pending onboarding flow check is executed, which triggers the 2nd startOnboardingFlow.

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

We actually have a logic to ignore the onboarding start if the onboarding is currently in progress,

App/src/libs/actions/Welcome/index.ts

Lines 41 to 56 in 837152e

	let isOnboardingInProgress = false;
	function isOnboardingFlowCompleted({onCompleted, onNotCompleted, onCanceled}: HasCompletedOnboardingFlowProps) {
	isOnboardingFlowStatusKnownPromise.then(() => {
	if (Array.isArray(onboarding) || onboarding?.hasCompletedGuidedSetupFlow === undefined) {
	onCanceled?.();
	return;
	}
	if (onboarding?.hasCompletedGuidedSetupFlow) {
	isOnboardingInProgress = false;
	onCompleted?.();
	} else if (!isOnboardingInProgress) {
	isOnboardingInProgress = true;
	onNotCompleted?.();
	}
	});

however, it uses a local variable which is only updated within the Welcome file, but the initial onboarding is started from useOnboardingFlowRouter hook.

We can create a global variable to hold it, but I think a cleaner way to check if an onboarding is in progress is to check the focused route. If it's an onboarding modal navigator, then the onboarding is in progress.

function isOnboardingInProgress() {
    return navigationRef.current?.getRootState().routes?.at(-1)?.name === NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR;
}

if (onboarding?.hasCompletedGuidedSetupFlow) {
    onCompleted?.();
} else if (!isOnboardingInProgress()) {
    onNotCompleted?.();
}

In openReportFromDeepLink, we can early return if url is empty, but that doesn't solve the root cause since we can open the app using deep link

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[stephanieelliott]

Is this still happening? I'm not able to repro this on either platform --

RPReplay_Final1727995452.MP4

@IuliiaHerets if it's still reproducible for you, can you please confirm the repro steps in the issue body?

[bernhardoj]

This is still happening to me

ios.mp4

[melvin-bot]

@stephanieelliott Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[stephanieelliott]

Ok, this is a critical flow and the issue makes sense given the proposal, so we should move forward with fixing it. Applying labels.