feat: uniform post page login (#4046)

AmarTrebinjac · web-flow · commit 31918f76fc6b · 2025-01-22T22:43:48.000+01:00
* redirect on social click

* handle email case

* add logic for banner as well

* linting memes

* lint

* linter decided to not work anymore :)

* update loginbutton test

* update trigger type

* import as type

* keep old params

* delete authmodal

* useAuthContext

* refactor showLogin

* add after auth param key

* remove toString on params

* remove auth trigger param from onboarding

* redirect correclty to signin page

* update test

* lint
diff --git a/packages/extension/src/newtab/App.tsx b/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>
   );
 }
diff --git a/packages/shared/src/components/LoginButton.spec.tsx b/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,
+      },
+    });
   });
 });
diff --git a/packages/shared/src/components/LoginButton.tsx b/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,
+      },
     });
   };
 
diff --git a/packages/shared/src/components/auth/AuthModal.tsx b/packages/shared/src/components/auth/AuthModal.tsx
diff --git a/packages/shared/src/components/auth/AuthenticationBanner.tsx b/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,
             }}
diff --git a/packages/shared/src/components/auth/common.tsx b/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',
diff --git a/packages/shared/src/contexts/AuthContext.tsx b/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,
diff --git a/packages/shared/src/hooks/useRegistration.ts b/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);
     }
diff --git a/packages/webapp/pages/_app.tsx b/packages/webapp/pages/_app.tsx
diff --git a/packages/webapp/pages/onboarding.tsx b/packages/webapp/pages/onboarding.tsx

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@ export interface Provider {`
`9`	`9`	`value: string;`
`10`	`10`	`}`
`11`	`11`
	`12`	`+export const AFTER_AUTH_PARAM = 'after_auth';`
	`13`	`+`
`12`	`14`	`export enum SocialProvider {`
`13`	`15`	`// Twitter = 'twitter',`
`14`	`16`	`Facebook = 'facebook',`