feat: uniform post page login

packages/extension/src/newtab/App.tsx

@@ -1,13 +1,10 @@
 import type { ReactElement } from 'react';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import dynamic from 'next/dynamic';
 import Modal from 'react-modal';
 import 'focus-visible';
 import { ProgressiveEnhancementContextProvider } from '@dailydotdev/shared/src/contexts/ProgressiveEnhancementContext';
-import AuthContext, {
-  useAuthContext,
-} from '@dailydotdev/shared/src/contexts/AuthContext';
+import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { SubscriptionContextProvider } from '@dailydotdev/shared/src/contexts/SubscriptionContext';
 import browser from 'webextension-polyfill';
 import type { BootDataProviderProps } from '@dailydotdev/shared/src/contexts/BootProvider';
@@ -53,13 +50,6 @@ structuredCloneJsonPolyfill();
 const DEFAULT_TAB_TITLE = 'New Tab';
 const router = new CustomRouter();
 const queryClient = new QueryClient(defaultQueryClientConfig);
-const AuthModal = dynamic(
-  () =>
-    import(
-      /* webpackChunkName: "authModal" */ '@dailydotdev/shared/src/components/auth/AuthModal'
-    ),
-);
-
 Modal.setAppElement('#__next');
 Modal.defaultStyles = {};
 
@@ -75,7 +65,6 @@ function InternalApp(): ReactElement {
       null,
     );
   const { unreadCount } = useNotificationContext();
-  const { closeLogin, shouldShowLogin, loginState } = useContext(AuthContext);
   const { contentScriptGranted } = useContentScriptStatus();
   const { hostGranted, isFetching: isCheckingHostPermissions } =
     useHostStatus();
@@ -147,14 +136,6 @@ function InternalApp(): ReactElement {
   return (
     <DndContextProvider>
       <MainFeedPage onPageChanged={onPageChanged} />
-      {shouldShowLogin && (
-        <AuthModal
-          isOpen={shouldShowLogin}
-          onRequestClose={closeLogin}
-          contentLabel="Login Modal"
-          {...loginState}
-        />
-      )}
     </DndContextProvider>
   );
 }

packages/shared/src/components/LoginButton.spec.tsx

@@ -1,35 +1,73 @@
 /* eslint-disable no-console */
 import React from 'react';
 import type { RenderResult } from '@testing-library/react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, act } from '@testing-library/react';
 import { QueryClient } from '@tanstack/react-query';
 import LoginButton from './LoginButton';
 import { TestBootProvider } from '../../__tests__/helpers/boot';
 import type { LoggedUser } from '../lib/user';
+import { AuthContextProvider } from '../contexts/AuthContext';
+import { AuthTriggers } from '../lib/auth';
 
 describe('LoginButton', () => {
   const showLogin = jest.fn();
+  const logEvent = jest.fn();
 
   beforeEach(() => {
     showLogin.mockReset();
+    logEvent.mockReset();
   });
 
   const renderLayout = (user: LoggedUser = null): RenderResult => {
     const client = new QueryClient();
 
     return render(
-      <TestBootProvider client={client} auth={{ user, showLogin }}>
-        <LoginButton />
-      </TestBootProvider>,
+      <AuthContextProvider
+        user={user}
+        updateUser={jest.fn()}
+        tokenRefreshed
+        getRedirectUri={jest.fn()}
+        loadingUser={false}
+        loadedUserFromCache
+      >
+        <TestBootProvider client={client} auth={{ user, showLogin }}>
+          <LoginButton />
+        </TestBootProvider>
+      </AuthContextProvider>,
     );
   };
 
-  it('should show login when clicking on the button', async () => {
+  it('should call showLogin when clicking the login button', async () => {
     renderLayout();
-    const el = await screen.findByText('Log in');
+    const loginButton = await screen.findByText('Log in');
+    expect(loginButton).toBeInTheDocument();
 
-    fireEvent.click(el);
+    await act(async () => {
+      fireEvent.click(loginButton);
+    });
 
-    expect(showLogin).toBeCalledTimes(1);
+    expect(showLogin).toHaveBeenCalledWith({
+      trigger: AuthTriggers.MainButton,
+      options: {
+        isLogin: true,
+      },
+    });
+  });
+
+  it('should call showLogin when clicking the signup button', async () => {
+    renderLayout();
+    const signupButton = await screen.findByText('Sign up');
+    expect(signupButton).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(signupButton);
+    });
+
+    expect(showLogin).toHaveBeenCalledWith({
+      trigger: AuthTriggers.MainButton,
+      options: {
+        isLogin: false,
+      },
+    });
   });
 });

packages/shared/src/components/LoginButton.tsx

@@ -2,11 +2,11 @@ import type { ReactElement } from 'react';
 import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { Button, ButtonVariant } from './buttons/Button';
-import AuthContext from '../contexts/AuthContext';
 import LogContext from '../contexts/LogContext';
 import type { LogEvent } from '../hooks/log/useLogQueue';
-import { AuthTriggers } from '../lib/auth';
 import { TargetType } from '../lib/log';
+import { useAuthContext } from '../contexts/AuthContext';
+import { AuthTriggers } from '../lib/auth';
 
 interface ClassName {
   container?: string;
@@ -33,14 +33,15 @@ const getLogEvent = (copy: ButtonCopy): LogEvent => ({
 export default function LoginButton({
   className = {},
 }: LoginButtonProps): ReactElement {
-  const { showLogin } = useContext(AuthContext);
   const { logEvent } = useContext(LogContext);
-
+  const { showLogin } = useAuthContext();
   const onClick = (copy: ButtonCopy) => {
     logEvent(getLogEvent(copy));
     showLogin({
       trigger: AuthTriggers.MainButton,
-      options: { isLogin: copy === ButtonCopy.Login },
+      options: {
+        isLogin: copy === ButtonCopy.Login,
+      },
     });
   };
 

packages/shared/src/components/auth/AuthenticationBanner.tsx

@@ -58,16 +58,12 @@ export function AuthenticationBanner({
             className={{
               onboardingSignup: '!gap-4',
             }}
-            onAuthStateUpdate={(props) =>
+            onAuthStateUpdate={(props) => {
               showLogin({
                 trigger: AuthTriggers.Onboarding,
-                options: {
-                  formValues: {
-                    email: props?.email,
-                  },
-                },
-              })
-            }
+                options: { isLogin: true, formValues: props },
+              });
+            }}
             onboardingSignupButton={{
               variant: ButtonVariant.Primary,
             }}

packages/shared/src/components/auth/common.tsx

@@ -9,6 +9,8 @@ export interface Provider {
   value: string;
 }
 
+export const AFTER_AUTH_PARAM = 'after_auth';
+
 export enum SocialProvider {
   // Twitter = 'twitter',
   Facebook = 'facebook',

packages/shared/src/contexts/AuthContext.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement, ReactNode } from 'react';
 import React, { useCallback, useContext, useState } from 'react';
 import type { QueryObserverResult } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import type { AnonymousUser, LoggedUser } from '../lib/user';
 import {
   deleteAccount,
@@ -13,6 +14,7 @@ import type { AuthTriggersType } from '../lib/auth';
 import { AuthTriggers } from '../lib/auth';
 import type { Squad } from '../graphql/sources';
 import { checkIsExtension, isNullOrUndefined } from '../lib/func';
+import { AFTER_AUTH_PARAM } from '../components/auth/common';
 import { Continent, outsideGdpr } from '../lib/geo';
 
 export interface LoginState {
@@ -140,7 +142,7 @@ export const AuthContextProvider = ({
   const endUser = user && 'providers' in user ? user : null;
   const referral = user?.referralId || user?.referrer;
   const referralOrigin = user?.referralOrigin;
-
+  const router = useRouter();
   if (firstLoad === true && endUser && !endUser?.infoConfirmed) {
     logout(LogoutReason.IncomleteOnboarding);
   }
@@ -160,15 +162,24 @@ export const AuthContextProvider = ({
         firstVisit: user?.firstVisit,
         trackingId: user?.id,
         shouldShowLogin: loginState !== null,
-        showLogin: useCallback(({ trigger, options = {} }) => {
-          const hasCompanion = !!isCompanionActivated();
-          if (hasCompanion) {
-            const signup = `${process.env.NEXT_PUBLIC_WEBAPP_URL}signup?close=true`;
-            window.open(signup);
-          } else {
-            setLoginState({ ...options, trigger });
-          }
-        }, []),
+        showLogin: useCallback(
+          ({ trigger, options = {} }) => {
+            const hasCompanion = !!isCompanionActivated();
+            if (hasCompanion) {
+              const signup = `${process.env.NEXT_PUBLIC_WEBAPP_URL}signup?close=true`;
+              window.open(signup);
+            } else {
+              const params = new URLSearchParams(globalThis?.location.search);
+
+              setLoginState({ ...options, trigger });
+              if (!params.get(AFTER_AUTH_PARAM)) {
+                params.set(AFTER_AUTH_PARAM, window.location.pathname);
+              }
+              router.push(`/onboarding?${params.toString()}`);
+            }
+          },
+          [router],
+        ),
         closeLogin: useCallback(() => setLoginState(null), []),
         loginState,
         updateUser,

packages/shared/src/hooks/useRegistration.ts

@@ -30,6 +30,7 @@ import { getUserDefaultTimezone } from '../lib/timezones';
 import LogContext from '../contexts/LogContext';
 import { Origin } from '../lib/log';
 import { LogoutReason } from '../lib/user';
+import { AFTER_AUTH_PARAM } from '../components/auth/common';
 
 type ParamKeys = keyof RegistrationParameters;
 
@@ -86,11 +87,16 @@ const useRegistration = ({
         origin: Origin.InitializeRegistrationFlow,
       }),
     });
+    const params = new URLSearchParams(window.location.search);
+    const afterAuth = params.get(AFTER_AUTH_PARAM);
     /**
-     * In case a valid session exists on kratos, but not FE we should logout the user
+     * In case a valid session exists on kratos, but not FE we should logout the user.
+     * We ignore it if 'after_auth' param exists, because it means we manually redirected the user here, and that will trigger this error.
      */
     if (
-      registration.error?.id === KRATOS_ERROR_MESSAGE.SESSION_ALREADY_AVAILABLE
+      registration.error?.id ===
+        KRATOS_ERROR_MESSAGE.SESSION_ALREADY_AVAILABLE &&
+      !afterAuth
     ) {
       logout(LogoutReason.KratosSessionAlreadyAvailable);
     }