[$250] Sign in - Deep linking to onboarding and signing up with new gmail bypasses onboarding flow

[izarutskaya]

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.0.37-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): nathanmulugetatesting+1553@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: #Applause-Internal team

Action Performed:

1. Sign out from the app
2. Deep link/navigate to staging.new.expensify.com/onboarding/purpose
3. Sign up with a new gmail account

Expected Result:

Onboarding flow continues after signing up

Actual Result:

Onboarding flow gets bypassed after signing up

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Bug6607556_1726655914402.bandicam_2024-09-18_13-32-50-558.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021837068489231789407
• Upwork Job ID: 1837068489231789407
• Last Price Increase: 2024-09-20

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[izarutskaya]

We think this issue might be related to the #collect project

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2024-09-19 12:23:26 UTC.

Proposal

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

Sign in - Deep linking to onboarding and signing up with new gmail bypasses onboarding flow

What is the root cause of that problem?

After we sign in with new account, the startOnboardingFlow function will get invoked 2 times, first inside the BottomTabBar file and second is inside openReportFromDeepLink function because we open the app from deep link

But inside the openReportFromDeepLink function we always redirect the user to onboarding if the user not yet complete the onboarding before redirecting the user to the deep link

App/src/libs/actions/Report.ts

Lines 2702 to 2706 in f7a4aa1

	if (!hasCompletedGuidedSetupFlow) {
	Welcome.isOnboardingFlowCompleted({
	onNotCompleted: () => OnboardingFlow.startOnboardingFlow(),
	});
	return;

BottomTabBar file

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

Lines 96 to 98 in f7a4aa1

	Welcome.isOnboardingFlowCompleted({
	onNotCompleted: () => OnboardingFlow.startOnboardingFlow(),
	});

So when startOnboardingFlow got invoked 2 times it causes conflict issue and we do not wrap inside Navigation.isNavigationReady when invoking the startOnboardingFlow function

Because after we sign in with new account inside the BottomTabBar file we invoke the startOnboardingFlow function and inside the openReportFromDeepLink function we also invoke the startOnboardingFlow function which causes conflict

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

We can wrap inside Navigation.isNavigationReady when invoking the startOnboardingFlow function

Welcome.isOnboardingFlowCompleted({
    onNotCompleted: () => {
        Navigation.isNavigationReady().then(() => {
            OnboardingFlow.startOnboardingFlow();
        });
    },
});

Or we can wrap inside the startOnboardingFlow function

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

Lines 90 to 98 in f7a4aa1

	function startOnboardingFlow() {
	const currentRoute = navigationRef.getCurrentRoute();
	const {adaptedState} = getAdaptedStateFromPath(getOnboardingInitialPath(), linkingConfig.config, false);
	const focusedRoute = findFocusedRoute(adaptedState as PartialState<NavigationState<RootStackParamList>>);
	if (focusedRoute?.name === currentRoute?.name) {
	return;
	}
	navigationRef.resetRoot(adaptedState);
	}

function startOnboardingFlow() {
    const currentRoute = navigationRef.getCurrentRoute();
    const {adaptedState} = getAdaptedStateFromPath(getOnboardingInitialPath(), linkingConfig.config, false);
    const focusedRoute = findFocusedRoute(adaptedState as PartialState<NavigationState<RootStackParamList>>);
    if (focusedRoute?.name === currentRoute?.name) {
        return;
    }
    Navigation.isNavigationReady().then(() => {
        navigationRef.resetRoot(adaptedState);
    })
}

What alternative solutions did you explore? (Optional)

[blazejkustra]

I can't reproduce it locally, am I doing something wrong? I used both gmail and swmansion domains, and the onboarding modal was always displayed.

Screen.Recording.2024-09-19.at.10.44.47.mov

[blazejkustra]

Two additional questions @izarutskaya:

1. Why would we deeplink to the onboarding?
2. Should I sign in as a completely new user or a user that logged in before but haven't finished onboarding flow yet?

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-09-19 11:32:57 UTC.

Proposal

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

The onboarding modal doesn't show when deep linking to the onboarding and sign up as a new user

What is the root cause of that problem?

When we deep link to the onboarding page, we first check whether the user has completed the onboarding flow or not.

App/src/libs/actions/Report.ts

Lines 2699 to 2707 in 37bf6b2

	const hasCompletedGuidedSetupFlow = hasCompletedGuidedSetupFlowSelector(onboarding);
	// We need skip deeplinking if the user hasn't completed the guided setup flow.
	if (!hasCompletedGuidedSetupFlow) {
	Welcome.isOnboardingFlowCompleted({
	onNotCompleted: () => OnboardingFlow.startOnboardingFlow(),
	});
	return;
	}

After sign up, the onboarding data isn't ready yet and hasCompletedGuidedSetupFlowSelector by default returns true. So, the if is passed and the user is navigated to the onboarding page.

In the onboarding modal navigator, if the user has completed the flow (which is true because the default value is true), they will be redirected back to concierge chat,

App/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx

Lines 36 to 48 in 37bf6b2

	if (!hasCompletedGuidedSetupFlow) {
	return;
	}
	Navigation.isNavigationReady().then(() => {
	// On small screens, pop all navigation states and go back to HOME.
	// On large screens, need to go back to previous route and then redirect to Concierge,
	// otherwise going back on Concierge will go to onboarding and then redirected to Concierge again
	if (shouldUseNarrowLayout) {
	Navigation.setShouldPopAllStateOnUP(true);
	Navigation.goBack(ROUTES.HOME, true, true);
	} else {
	Navigation.goBack();
	Report.navigateToConciergeChat();

but it will wait for the app loading to complete first.

App/src/libs/actions/Report.ts

Lines 2164 to 2170 in 37bf6b2

	Welcome.onServerDataReady().then(() => {
	// If we don't have a chat with Concierge then create it
	if (!checkIfCurrentPageActive()) {
	return;
	}
	navigateToAndOpenReport([CONST.EMAIL.CONCIERGE], shouldDismissModal, actionType);
	});

When the data is ready, the OnboardingFlow.startOnboardingFlow() is also triggered which calls resetRoot on the navigation container.

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

Lines 90 to 97 in 37bf6b2

	function startOnboardingFlow() {
	const currentRoute = navigationRef.getCurrentRoute();
	const {adaptedState} = getAdaptedStateFromPath(getOnboardingInitialPath(), linkingConfig.config, false);
	const focusedRoute = findFocusedRoute(adaptedState as PartialState<NavigationState<RootStackParamList>>);
	if (focusedRoute?.name === currentRoute?.name) {
	return;
	}
	navigationRef.resetRoot(adaptedState);

Based on my log, the calls to reset happens first before the navigation to the concierge chat and looks like the reset is ignored.

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

Because we default hasCompletedGuidedSetupFlowSelector to true, we need to check it only if the onboarding is available.

App/src/libs/actions/Report.ts

Lines 2677 to 2689 in 37bf6b2

	callback: (onboarding) => {
	if (onboarding) {
	// Once the onboarding data is available, we want to disconnect the connection
	// so it won't trigger the deeplink again every time the data is changed, for example, when relogin.
	Onyx.disconnect(connection);
	}
	Navigation.waitForProtectedRoutes().then(() => {
	if (route && Session.isAnonymousUser() && !Session.canAnonymousUserAccessRoute(route)) {
	Session.signOutAndRedirectToSignIn(true);
	return;
	}

if (onboarding === undefined) {
    return;
}
...

What alternative solutions did you explore? (Optional)

Remove hasCompletedGuidedSetupFlow check and move the rest of the logic to onCompleted callback because isOnboardingFlowCompleted only trigger the callback if the data is ready.

App/src/libs/actions/Report.ts

Lines 2702 to 2707 in 37bf6b2

	if (!hasCompletedGuidedSetupFlow) {
	Welcome.isOnboardingFlowCompleted({
	onNotCompleted: () => OnboardingFlow.startOnboardingFlow(),
	});
	return;
	}

[bernhardoj]

@blazejkustra you need to sign in as a new user.

[NJ-2020]

Proposal Updated

[trjExpensify]

@blazejkustra @allgandalf @mountiny you guys taking this? Let's get it assigned if so.

[blazejkustra]

Absolutely, as it seems it is a regression from my PR. However I'm unable to reproduce it and asked some questions above.

Bump @izarutskaya:

Should I sign in as a completely new user or a user that logged in before but haven't finished onboarding flow yet?

(comment with video above)

[blazejkustra]

Okay, I was able to reproduce - I'm on it!