fix: defer inline login enrollment

Author: rebelchris

packages/shared/src/contexts/AuthContext.tsx

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import type { QueryObserverResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
-import { useFeatureValue } from '@growthbook/growthbook-react';
+import { GrowthBookContext } 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';
@@ -24,6 +24,7 @@ import {
   onboardingUrl,
   webFunnelPrefix,
 } from '../lib/constants';
+import { featureInlineLogin } from '../lib/featureInlineLogin';
 
 export interface LoginState {
   trigger: AuthTriggersType;
@@ -79,6 +80,7 @@ export interface AuthContextData {
   isGdprCovered?: boolean;
   isValidRegion?: boolean;
   isFunnel?: boolean;
+  inlineLoginEnabled?: boolean;
 }
 
 const isExtension = checkIsExtension();
@@ -159,20 +161,35 @@ export const AuthContextProvider = ({
   isAndroidApp,
 }: AuthContextProviderProps): ReactElement => {
   const [loginState, setLoginState] = useState<LoginState | null>(null);
+  const [inlineLoginEnabled, setInlineLoginEnabled] = useState<boolean>();
+  const inlineLoginEnabledRef = useRef<boolean>();
   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 growthbookContext = useContext(GrowthBookContext);
+  const growthbook = growthbookContext?.growthbook;
   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);
+  const evaluateInlineLogin = useCallback((): boolean => {
+    if (!isNullOrUndefined(inlineLoginEnabledRef.current)) {
+      return inlineLoginEnabledRef.current;
+    }
+
+    const isEnabled =
+      growthbook?.getFeatureValue(
+        featureInlineLogin.id,
+        featureInlineLogin.defaultValue,
+      ) === true;
+
+    inlineLoginEnabledRef.current = isEnabled;
+    setInlineLoginEnabled(isEnabled);
+
+    return isEnabled;
+  }, [growthbook]);
 
   return (
     <AuthContext.Provider
@@ -186,6 +203,7 @@ export const AuthContextProvider = ({
         firstVisit: user?.firstVisit,
         trackingId: user?.id,
         shouldShowLogin: loginState !== null,
+        inlineLoginEnabled,
         showLogin: useCallback(
           ({ trigger, options = {} }) => {
             const hasCompanion = !!isCompanionActivated();
@@ -196,6 +214,7 @@ export const AuthContextProvider = ({
             }
 
             const params = new URLSearchParams(globalThis?.location.search);
+            const shouldUseInlineLogin = !isExtension && evaluateInlineLogin();
 
             setLoginState({ ...options, trigger });
             if (isExtension) {
@@ -206,19 +225,20 @@ 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 (shouldUseInlineLogin) {
               return;
             }
 
-            const onboardingPath = `${onboardingUrl}?${params.toString()}`;
-            router.push(
-              isExtension ? onboardingPath : `/onboarding?${params.toString()}`,
-            );
+            router.push(onboardingPath);
           },
-          [router, isInlineLoginEnabled],
+          [evaluateInlineLogin, 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/lib/featureInlineLogin.ts

@@ -0,0 +1,4 @@
+export const featureInlineLogin = {
+  id: 'inline_login',
+  defaultValue: false as boolean,
+};

packages/shared/src/lib/featureManagement.ts

@@ -5,6 +5,8 @@ import type { PlusItemStatus } from '../components/plus/PlusListItem';
 import { isDevelopment } from './constants';
 import { BriefingType } from '../graphql/posts';
 
+export { featureInlineLogin } from './featureInlineLogin';
+
 export class Feature<T extends JSONValue> {
   readonly id: string;
 
@@ -59,8 +61,6 @@ export const featurePlusCtaCopy = new Feature('plus_cta_copy', {
 
 export const featurePlusApiLanding = new Feature('plus_api_landing_v2', false);
 
-export const featureInlineLogin = new Feature('inline_login', false);
-
 export const featureLuckyButton = new Feature('lucky_button', false);
 
 export const featureSmartComposer = new Feature('smart_composer', false);

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}