fix: defer inline login enrollment

Author: rebelchris

packages/shared/src/contexts/AuthContext.tsx

@@ -2,13 +2,13 @@ import type { ReactElement, ReactNode } from 'react';
 import React, {
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
 import type { QueryObserverResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
-import { useFeatureValue } from '@growthbook/growthbook-react';
 import type { AnonymousUser, LoggedUser } from '../lib/user';
 import { deleteAccount, logout as dispatchLogout } from '../lib/user';
 import type { AccessToken, Boot, Visit } from '../lib/boot';
@@ -49,6 +49,12 @@ type ShowLoginParams = {
   options?: LoginOptions;
 };
 
+export interface InlineLoginExperiment {
+  enabled?: boolean;
+  isLoading: boolean;
+  requestEvaluation: () => void;
+}
+
 export interface AuthContextData {
   user?: LoggedUser;
   isLoggedIn: boolean;
@@ -79,6 +85,7 @@ export interface AuthContextData {
   isGdprCovered?: boolean;
   isValidRegion?: boolean;
   isFunnel?: boolean;
+  inlineLoginEnabled?: boolean;
 }
 
 const isExtension = checkIsExtension();
@@ -126,6 +133,7 @@ export type AuthContextProviderProps = {
   isFetched?: boolean;
   children?: ReactNode;
   firstLoad?: boolean;
+  inlineLoginExperiment?: InlineLoginExperiment;
 } & Pick<
   AuthContextData,
   | 'getRedirectUri'
@@ -157,22 +165,39 @@ export const AuthContextProvider = ({
   firstLoad,
   geo,
   isAndroidApp,
+  inlineLoginExperiment,
 }: AuthContextProviderProps): ReactElement => {
   const [loginState, setLoginState] = useState<LoginState | null>(null);
+  const [pendingLoginPath, setPendingLoginPath] = useState<string | null>(null);
   const endUser = user && 'providers' in user ? user : null;
   const referral = user?.referralId || user?.referrer;
   const referralOrigin = user?.referralOrigin;
   const router = useRouter();
   const isFunnelRef = useRef(!!router?.pathname?.startsWith(webFunnelPrefix));
+  const inlineLoginEnabled = inlineLoginExperiment?.enabled;
   const isValidRegion = useMemo(
     () => !invalidPlusRegions.includes(geo?.region),
     [geo?.region],
   );
-  // Inline-login experiment flag. Source of truth for the local default lives
-  // in `lib/featureManagement.ts` as `featureInlineLogin`. We can't import it
-  // here because `featureManagement` → `graphql/posts` → `AuthContext` would
-  // be a cycle, so the default is duplicated below; keep them in sync.
-  const isInlineLoginEnabled = useFeatureValue<boolean>('inline_login', true);
+
+  useEffect(() => {
+    if (!pendingLoginPath || inlineLoginExperiment?.isLoading) {
+      return;
+    }
+
+    if (inlineLoginEnabled) {
+      setPendingLoginPath(null);
+      return;
+    }
+
+    router.push(pendingLoginPath);
+    setPendingLoginPath(null);
+  }, [
+    inlineLoginEnabled,
+    inlineLoginExperiment?.isLoading,
+    pendingLoginPath,
+    router,
+  ]);
 
   return (
     <AuthContext.Provider
@@ -186,6 +211,7 @@ export const AuthContextProvider = ({
         firstVisit: user?.firstVisit,
         trackingId: user?.id,
         shouldShowLogin: loginState !== null,
+        inlineLoginEnabled,
         showLogin: useCallback(
           ({ trigger, options = {} }) => {
             const hasCompanion = !!isCompanionActivated();
@@ -206,19 +232,22 @@ export const AuthContextProvider = ({
               params.set(AFTER_AUTH_PARAM, window.location.pathname);
             }
 
+            const onboardingPath = isExtension
+              ? `${onboardingUrl}?${params.toString()}`
+              : `/onboarding?${params.toString()}`;
+
             // Inline login experiment: render the modal in-place instead of
             // redirecting to /onboarding. Extension keeps the redirect because
             // it has no host page to mount the modal on.
-            if (isInlineLoginEnabled && !isExtension) {
+            if (inlineLoginExperiment && !isExtension) {
+              inlineLoginExperiment.requestEvaluation();
+              setPendingLoginPath(onboardingPath);
               return;
             }
 
-            const onboardingPath = `${onboardingUrl}?${params.toString()}`;
-            router.push(
-              isExtension ? onboardingPath : `/onboarding?${params.toString()}`,
-            );
+            router.push(onboardingPath);
           },
-          [router, isInlineLoginEnabled],
+          [inlineLoginExperiment, router],
         ),
         closeLogin: useCallback(() => setLoginState(null), []),
         loginState,

packages/shared/src/contexts/BootProvider.spec.tsx

@@ -417,6 +417,7 @@ const AuthMock = ({ updatedUser, loginTrigger }: AuthMockProps) => {
     getRedirectUri,
     trackingId,
     anonymous,
+    inlineLoginEnabled,
   } = useContext(AuthContext);
 
   return (
@@ -461,6 +462,9 @@ const AuthMock = ({ updatedUser, loginTrigger }: AuthMockProps) => {
       </button>
       <span data-test-value={trackingId}>Tracking ID</span>
       <span data-test-value={JSON.stringify(anonymous)}>Anonymous User</span>
+      <span data-test-value={`${inlineLoginEnabled}`}>
+        Inline Login Enabled
+      </span>
     </>
   );
 };
@@ -501,6 +505,31 @@ it('should trigger show login callback', async () => {
   await expectToHaveTestValue(login, JSON.stringify({ trigger: expected }));
 });
 
+it('should evaluate inline login only after auth intent', async () => {
+  renderComponent(<AuthMock loginTrigger={AuthTriggers.Comment} />, {
+    ...defaultBootData,
+    user: defaultAnonymousUser,
+    exp: {
+      f: '{}',
+      e: [],
+      a: [],
+      features: {
+        inline_login: {
+          defaultValue: true,
+        },
+      },
+    },
+  });
+
+  const login = await screen.findByText('Log in');
+  const inlineLogin = await screen.findByText('Inline Login Enabled');
+  await expectToHaveTestValue(inlineLogin, 'undefined');
+
+  fireEvent.click(login);
+
+  await expectToHaveTestValue(inlineLogin, 'true');
+});
+
 it('should trigger close login callback', async () => {
   const expected = AuthTriggers.Comment;
   renderComponent(<AuthMock loginTrigger={expected} />, {

packages/shared/src/contexts/BootProvider.tsx

@@ -5,6 +5,7 @@ import dynamic from 'next/dynamic';
 import type { Boot, BootApp, BootCacheData } from '../lib/boot';
 import { getBootData } from '../lib/boot';
 import { AuthContextProvider } from './AuthContext';
+import type { AuthContextProviderProps } from './AuthContext';
 import type { AnonymousUser, LoggedUser } from '../lib/user';
 import { AlertContextProvider } from './AlertContext';
 import { generateQueryKey, RequestKey, STALE_TIME } from '../lib/query';
@@ -29,6 +30,7 @@ import { LogContextProvider } from './LogContext';
 import { REQUEST_APP_ACCOUNT_TOKEN_MUTATION } from '../graphql/users';
 import { isConnectionError } from '../lib/errors';
 import { EngagementAdsProvider } from './EngagementAdsContext';
+import { useInlineLoginExperiment } from '../hooks/auth/useInlineLoginExperiment';
 
 const ServerError = dynamic(
   () =>
@@ -44,6 +46,19 @@ const ConnectionError = dynamic(
     ),
 );
 
+const AuthContextProviderWithInlineLogin = (
+  props: AuthContextProviderProps,
+): ReactElement => {
+  const inlineLoginExperiment = useInlineLoginExperiment();
+
+  return (
+    <AuthContextProvider
+      {...props}
+      inlineLoginExperiment={inlineLoginExperiment}
+    />
+  );
+};
+
 function filteredProps<T extends Record<string, unknown>>(
   obj: T,
   filteredKeys: (keyof T)[],
@@ -365,7 +380,7 @@ export const BootDataProvider = ({
       experimentation={cachedBootData?.exp}
       updateExperimentation={updateExperimentation}
     >
-      <AuthContextProvider
+      <AuthContextProviderWithInlineLogin
         user={user}
         updateUser={updateUser}
         tokenRefreshed={updatedAtActive > 0}
@@ -411,7 +426,7 @@ export const BootDataProvider = ({
             </AlertContextProvider>
           </EngagementAdsProvider>
         </SettingsContextProvider>
-      </AuthContextProvider>
+      </AuthContextProviderWithInlineLogin>
     </GrowthBookProvider>
   );
 };

packages/shared/src/hooks/auth/useInlineLoginExperiment.ts

@@ -0,0 +1,34 @@
+import { useCallback, useMemo, useState } from 'react';
+import { useFeaturesReadyContext } from '../../components/GrowthBookProvider';
+import type { InlineLoginExperiment } from '../../contexts/AuthContext';
+import { featureInlineLogin } from '../../lib/featureManagement';
+import { useConditionalFeature } from '../useConditionalFeature';
+
+export const useInlineLoginExperiment = (): InlineLoginExperiment => {
+  const { ready: areFeaturesReady } = useFeaturesReadyContext();
+  const [shouldEvaluate, setShouldEvaluate] = useState(false);
+  const requestEvaluation = useCallback(() => {
+    setShouldEvaluate(true);
+  }, []);
+  const canEvaluate = shouldEvaluate && areFeaturesReady;
+  const { value, isLoading } = useConditionalFeature({
+    feature: featureInlineLogin,
+    shouldEvaluate: canEvaluate,
+  });
+
+  return useMemo(
+    () => ({
+      enabled: canEvaluate && !isLoading ? value : undefined,
+      isLoading: shouldEvaluate && (!areFeaturesReady || isLoading),
+      requestEvaluation,
+    }),
+    [
+      areFeaturesReady,
+      canEvaluate,
+      isLoading,
+      requestEvaluation,
+      shouldEvaluate,
+      value,
+    ],
+  );
+};

packages/webapp/pages/_app.tsx

@@ -52,8 +52,6 @@ import {
   WebKitMessageHandlers,
 } from '@dailydotdev/shared/src/lib/ios';
 import { useCheckLocation } from '@dailydotdev/shared/src/hooks/useCheckLocation';
-import { useFeature } from '@dailydotdev/shared/src/components/GrowthBookProvider';
-import { featureInlineLogin } from '@dailydotdev/shared/src/lib/featureManagement';
 import Seo, { defaultSeo, defaultSeoTitle } from '../next-seo';
 import useWebappVersion from '../hooks/useWebappVersion';
 import { getAppOrigin, getSiteOrigin } from '../lib/seo';
@@ -104,8 +102,8 @@ const onboardingExcludedPaths = [
   '/jobs',
   '/settings',
 ];
-// When the inline_login experiment is on, we only force the rest of onboarding
-// when the user lands on the main feed — everywhere else they can keep
+// Once auth intent assigns the user to inline_login, only force the rest of
+// onboarding when they land on the main feed. Everywhere else they can keep
 // browsing after the inline first step.
 const mainFeedPathnames = new Set([
   '/',
@@ -177,8 +175,8 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
     shouldShowLogin,
     closeLogin,
     loginState,
+    inlineLoginEnabled,
   } = useAuthContext();
-  const isInlineLoginEnabled = useFeature(featureInlineLogin);
   const { showBanner, onAcceptCookies, onOpenBanner, onHideBanner } =
     useCookieBanner();
   useWebVitals();
@@ -240,9 +238,10 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
       return;
     }
 
-    // Inline login experiment: defer the rest of onboarding until the user
-    // navigates to the main feed; otherwise let them keep browsing.
-    if (isInlineLoginEnabled && !mainFeedPathnames.has(router.pathname)) {
+    // Inline login experiment: after auth intent enrolls the user, defer the
+    // rest of onboarding until they navigate to the main feed; otherwise let
+    // them keep browsing.
+    if (inlineLoginEnabled && !mainFeedPathnames.has(router.pathname)) {
       return;
     }
 
@@ -255,7 +254,7 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
     router,
     router.pathname,
     isOnboardingComplete,
-    isInlineLoginEnabled,
+    inlineLoginEnabled,
   ]);
 
   useEffect(() => {
@@ -407,7 +406,7 @@ function InternalApp({ Component, pageProps, router }: AppProps): ReactElement {
         <DndContextProvider>
           {getLayout(<Component {...pageProps} />, pageProps, layoutProps)}
         </DndContextProvider>
-        {isInlineLoginEnabled && shouldShowLogin && (
+        {inlineLoginEnabled && shouldShowLogin && (
           <AuthModal
             isOpen={shouldShowLogin}
             onRequestClose={closeLogin}