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';
@@ -79,9 +79,12 @@ export interface AuthContextData {
   isGdprCovered?: boolean;
   isValidRegion?: boolean;
   isFunnel?: boolean;
+  inlineLoginEnabled?: boolean;
 }
 
 const isExtension = checkIsExtension();
+const inlineLoginFeatureId = 'inline_login';
+const inlineLoginDefaultValue = false;
 const AuthContext = React.createContext<AuthContextData>(null);
 export const useAuthContext = (): AuthContextData => useContext(AuthContext);
 export default AuthContext;
@@ -159,20 +162,38 @@ 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;
+    }
+
+    // Keep this id/default in sync with `featureInlineLogin`. Importing it here
+    // would create a cycle through `graphql/posts` back to `AuthContext`.
+    const nextValue =
+      growthbook?.getFeatureValue(
+        inlineLoginFeatureId,
+        inlineLoginDefaultValue,
+      ) ?? inlineLoginDefaultValue;
+
+    const isEnabled = nextValue === true;
+    inlineLoginEnabledRef.current = isEnabled;
+    setInlineLoginEnabled(isEnabled);
+
+    return isEnabled;
+  }, [growthbook]);
 
   return (
     <AuthContext.Provider
@@ -186,6 +207,7 @@ export const AuthContextProvider = ({
         firstVisit: user?.firstVisit,
         trackingId: user?.id,
         shouldShowLogin: loginState !== null,
+        inlineLoginEnabled,
         showLogin: useCallback(
           ({ trigger, options = {} }) => {
             const hasCompanion = !!isCompanionActivated();
@@ -196,6 +218,7 @@ export const AuthContextProvider = ({
             }
 
             const params = new URLSearchParams(globalThis?.location.search);
+            const shouldUseInlineLogin = evaluateInlineLogin();
 
             setLoginState({ ...options, trigger });
             if (isExtension) {
@@ -209,7 +232,7 @@ export const AuthContextProvider = ({
             // 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 && !isExtension) {
               return;
             }
 
@@ -218,7 +241,7 @@ export const AuthContextProvider = ({
               isExtension ? onboardingPath : `/onboarding?${params.toString()}`,
             );
           },
-          [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/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}