5509 remove flash on intermediate verify step when sign in with sso (#5526)

- remove flash on /verify
- remove flash on signInUp
- remove useless redirections and hooks
- Remove DefaultHomePage component
- Move redirections to /objects/companies in PageChangeEffect
- add useShowAuthModal hooks and tests
- add usePageChangeEffectNaviteLocation hooks and tests
- fix refresh token expired produces blank screen

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -1,11 +1,14 @@
 import { useMemo, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { InMemoryCache, NormalizedCacheObject } from '@apollo/client';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState, useSetRecoilState } from 'recoil';
 
+import { currentUserState } from '@/auth/states/currentUserState';
+import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { previousUrlState } from '@/auth/states/previousUrlState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
+import { workspacesState } from '@/auth/states/workspaces';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { AppPath } from '@/types/AppPath';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
@@ -18,12 +21,20 @@ import { ApolloFactory, Options } from '../services/apollo.factory';
 export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
   // eslint-disable-next-line @nx/workspace-no-state-useref
   const apolloRef = useRef<ApolloFactory<NormalizedCacheObject> | null>(null);
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const [isDebugMode] = useRecoilState(isDebugModeState);
 
   const navigate = useNavigate();
   const isMatchingLocation = useIsMatchingLocation();
   const [tokenPair, setTokenPair] = useRecoilState(tokenPairState);
+  const [currentWorkspace, setCurrentWorkspace] = useRecoilState(
+    currentWorkspaceState,
+  );
+  const setCurrentUser = useSetRecoilState(currentUserState);
+  const setCurrentWorkspaceMember = useSetRecoilState(
+    currentWorkspaceMemberState,
+  );
+
+  const setWorkspaces = useSetRecoilState(workspacesState);
   const [, setPreviousUrl] = useRecoilState(previousUrlState);
   const location = useLocation();
 
@@ -55,6 +66,10 @@ export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
       },
       onUnauthenticatedError: () => {
         setTokenPair(null);
+        setCurrentUser(null);
+        setCurrentWorkspaceMember(null);
+        setCurrentWorkspace(null);
+        setWorkspaces(null);
         if (
           !isMatchingLocation(AppPath.Verify) &&
           !isMatchingLocation(AppPath.SignInUp) &&
@@ -75,6 +90,10 @@ export const useApolloFactory = (options: Partial<Options<any>> = {}) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     setTokenPair,
+    setCurrentUser,
+    setCurrentWorkspaceMember,
+    setCurrentWorkspace,
+    setWorkspaces,
     isDebugMode,
     currentWorkspace?.currentCacheVersion,
     setPreviousUrl,

packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx

@@ -1,16 +1,13 @@
 import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
 
 import { useAuth } from '@/auth/hooks/useAuth';
 import { useIsLogged } from '@/auth/hooks/useIsLogged';
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { AppPath } from '@/types/AppPath';
 
 export const VerifyEffect = () => {
   const [searchParams] = useSearchParams();
   const loginToken = searchParams.get('loginToken');
-  const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   const isLogged = useIsLogged();
   const navigate = useNavigate();
@@ -23,12 +20,6 @@ export const VerifyEffect = () => {
         navigate(AppPath.SignInUp);
       } else {
         await verify(loginToken);
-
-        if (currentWorkspace?.activationStatus === 'active') {
-          navigate(AppPath.Index);
-        } else {
-          navigate(AppPath.CreateWorkspace);
-        }
       }
     };
 

packages/twenty-front/src/modules/auth/hooks/useOnboardingStatus.ts

@@ -20,6 +20,6 @@ export const useOnboardingStatus = (): OnboardingStatus | undefined => {
     isLoggedIn,
     currentWorkspaceMember,
     currentWorkspace,
-    isBillingEnabled: billing?.isBillingEnabled,
+    isBillingEnabled: billing?.isBillingEnabled || false,
   });
 };

packages/twenty-front/src/modules/auth/hooks/useSignOutAndRedirect.ts

@@ -1,15 +0,0 @@
-import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { useAuth } from '@/auth/hooks/useAuth';
-import { AppPath } from '@/types/AppPath';
-
-export const useSignOutAndRedirect = () => {
-  const { signOut } = useAuth();
-  const navigate = useNavigate();
-
-  return useCallback(() => {
-    signOut();
-    navigate(AppPath.SignInUp);
-  }, [signOut, navigate]);
-};

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useNavigateAfterSignInUp.ts

@@ -1,46 +0,0 @@
-import { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
-
-import { CurrentWorkspace } from '@/auth/states/currentWorkspaceState';
-import { previousUrlState } from '@/auth/states/previousUrlState';
-import { billingState } from '@/client-config/states/billingState';
-import { AppPath } from '@/types/AppPath';
-import { WorkspaceMember } from '~/generated/graphql';
-
-export const useNavigateAfterSignInUp = () => {
-  const navigate = useNavigate();
-  const billing = useRecoilValue(billingState);
-  const previousUrl = useRecoilValue(previousUrlState);
-  const navigateAfterSignInUp = useCallback(
-    (
-      currentWorkspace: CurrentWorkspace,
-      currentWorkspaceMember: WorkspaceMember | null,
-    ) => {
-      if (
-        billing?.isBillingEnabled === true &&
-        !['active', 'trialing'].includes(currentWorkspace.subscriptionStatus)
-      ) {
-        navigate(AppPath.PlanRequired);
-        return;
-      }
-
-      if (currentWorkspace.activationStatus !== 'active') {
-        navigate(AppPath.CreateWorkspace);
-        return;
-      }
-
-      if (
-        !currentWorkspaceMember?.name.firstName ||
-        !currentWorkspaceMember?.name.lastName
-      ) {
-        navigate(AppPath.CreateProfile);
-        return;
-      }
-      if (previousUrl !== '') navigate(previousUrl);
-      else navigate(AppPath.Index);
-    },
-    [billing, previousUrl, navigate],
-  );
-  return { navigateAfterSignInUp };
-};

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -2,7 +2,6 @@ import { useCallback, useState } from 'react';
 import { SubmitHandler, UseFormReturn } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
 
-import { useNavigateAfterSignInUp } from '@/auth/sign-in-up/hooks/useNavigateAfterSignInUp';
 import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
@@ -31,8 +30,6 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
 
   const workspaceInviteHash = useParams().workspaceInviteHash;
 
-  const { navigateAfterSignInUp } = useNavigateAfterSignInUp();
-
   const [isInviteMode] = useState(() => isMatchingLocation(AppPath.Invite));
 
   const [signInUpStep, setSignInUpStep] = useState<SignInUpStep>(
@@ -105,24 +102,18 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
           throw new Error('Email and password are required');
         }
 
-        const {
-          workspace: currentWorkspace,
-          workspaceMember: currentWorkspaceMember,
-        } =
-          signInUpMode === SignInUpMode.SignIn && !isInviteMode
-            ? await signInWithCredentials(
-                data.email.toLowerCase().trim(),
-                data.password,
-                token,
-              )
-            : await signUpWithCredentials(
-                data.email.toLowerCase().trim(),
-                data.password,
-                workspaceInviteHash,
-                token,
-              );
-
-        navigateAfterSignInUp(currentWorkspace, currentWorkspaceMember);
+        signInUpMode === SignInUpMode.SignIn && !isInviteMode
+          ? await signInWithCredentials(
+              data.email.toLowerCase().trim(),
+              data.password,
+              token,
+            )
+          : await signUpWithCredentials(
+              data.email.toLowerCase().trim(),
+              data.password,
+              workspaceInviteHash,
+              token,
+            );
       } catch (err: any) {
         enqueueSnackBar(err?.message, {
           variant: SnackBarVariant.Error,
@@ -136,7 +127,6 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
       signInWithCredentials,
       signUpWithCredentials,
       workspaceInviteHash,
-      navigateAfterSignInUp,
       enqueueSnackBar,
     ],
   );

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts

@@ -1,12 +1,51 @@
-import { useParams } from 'react-router-dom';
+import { useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { AppPath } from '@/types/AppPath';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
 import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
+import { isDefined } from '~/utils/isDefined';
 
 export const useWorkspaceFromInviteHash = () => {
+  const { enqueueSnackBar } = useSnackBar();
+  const navigate = useNavigate();
   const workspaceInviteHash = useParams().workspaceInviteHash;
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const [initiallyLoggedIn] = useState(isDefined(currentWorkspace));
+  const setIsDefaultLayoutAuthModalVisible = useSetRecoilState(
+    isDefaultLayoutAuthModalVisibleState,
+  );
   const { data: workspaceFromInviteHash, loading } =
     useGetWorkspaceFromInviteHashQuery({
       variables: { inviteHash: workspaceInviteHash || '' },
+      onError: () => {
+        enqueueSnackBar('workspace does not exist', {
+          variant: SnackBarVariant.Error,
+        });
+        navigate(AppPath.Index);
+      },
+      onCompleted: (data) => {
+        if (
+          isDefined(currentWorkspace) &&
+          data?.findWorkspaceFromInviteHash &&
+          currentWorkspace.id === data.findWorkspaceFromInviteHash.id
+        ) {
+          initiallyLoggedIn &&
+            enqueueSnackBar(
+              `You already belong to ${data?.findWorkspaceFromInviteHash?.displayName} workspace`,
+              {
+                variant: SnackBarVariant.Info,
+              },
+            );
+          navigate(AppPath.Index);
+        } else {
+          setIsDefaultLayoutAuthModalVisible(true);
+        }
+      },
     });
   return {
     workspace: workspaceFromInviteHash?.findWorkspaceFromInviteHash,

packages/twenty-front/src/modules/auth/utils/__test__/getOnboardingStatus.test.ts

@@ -9,6 +9,7 @@ describe('getOnboardingStatus', () => {
       isLoggedIn: false,
       currentWorkspaceMember: null,
       currentWorkspace: null,
+      isBillingEnabled: false,
     });
 
     const ongoingWorkspaceActivation = getOnboardingStatus({
@@ -18,6 +19,7 @@ describe('getOnboardingStatus', () => {
         id: '1',
         activationStatus: 'inactive',
       } as CurrentWorkspace,
+      isBillingEnabled: false,
     });
 
     const ongoingProfileCreation = getOnboardingStatus({
@@ -30,6 +32,7 @@ describe('getOnboardingStatus', () => {
         id: '1',
         activationStatus: 'active',
       } as CurrentWorkspace,
+      isBillingEnabled: false,
     });
 
     const completed = getOnboardingStatus({
@@ -45,6 +48,7 @@ describe('getOnboardingStatus', () => {
         id: '1',
         activationStatus: 'active',
       } as CurrentWorkspace,
+      isBillingEnabled: false,
     });
 
     const incomplete = getOnboardingStatus({
@@ -78,6 +82,7 @@ describe('getOnboardingStatus', () => {
         activationStatus: 'active',
         subscriptionStatus: 'incomplete',
       } as CurrentWorkspace,
+      isBillingEnabled: false,
     });
 
     const canceled = getOnboardingStatus({

packages/twenty-front/src/modules/auth/utils/getOnboardingStatus.ts

@@ -25,7 +25,7 @@ export const getOnboardingStatus = ({
     'createdAt' | 'updatedAt' | 'userId' | 'userEmail' | '__typename'
   > | null;
   currentWorkspace: CurrentWorkspace | null;
-  isBillingEnabled?: boolean;
+  isBillingEnabled: boolean;
 }) => {
   if (!isLoggedIn) {
     return OnboardingStatus.OngoingUserCreation;
@@ -38,7 +38,7 @@ export const getOnboardingStatus = ({
   }
 
   if (
-    isBillingEnabled === true &&
+    isBillingEnabled &&
     currentWorkspace.subscriptionStatus === 'incomplete'
   ) {
     return OnboardingStatus.Incomplete;
@@ -55,31 +55,19 @@ export const getOnboardingStatus = ({
     return OnboardingStatus.OngoingProfileCreation;
   }
 
-  if (
-    isBillingEnabled === true &&
-    currentWorkspace.subscriptionStatus === 'canceled'
-  ) {
+  if (isBillingEnabled && currentWorkspace.subscriptionStatus === 'canceled') {
     return OnboardingStatus.Canceled;
   }
 
-  if (
-    isBillingEnabled === true &&
-    currentWorkspace.subscriptionStatus === 'past_due'
-  ) {
+  if (isBillingEnabled && currentWorkspace.subscriptionStatus === 'past_due') {
     return OnboardingStatus.PastDue;
   }
 
-  if (
-    isBillingEnabled === true &&
-    currentWorkspace.subscriptionStatus === 'unpaid'
-  ) {
+  if (isBillingEnabled && currentWorkspace.subscriptionStatus === 'unpaid') {
     return OnboardingStatus.Unpaid;
   }
 
-  if (
-    isBillingEnabled === true &&
-    !currentWorkspace.currentBillingSubscription
-  ) {
+  if (isBillingEnabled && !currentWorkspace.currentBillingSubscription) {
     return OnboardingStatus.CompletedWithoutSubscription;
   }
 

packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx

@@ -15,7 +15,7 @@ import {
   IconUsers,
 } from 'twenty-ui';
 
-import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
+import { useAuth } from '@/auth/hooks/useAuth';
 import { billingState } from '@/client-config/states/billingState';
 import { SettingsNavigationDrawerItem } from '@/settings/components/SettingsNavigationDrawerItem';
 import { SettingsPath } from '@/types/SettingsPath';
@@ -25,7 +25,7 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 
 export const SettingsNavigationDrawerItems = () => {
-  const handleLogout = useSignOutAndRedirect();
+  const { signOut } = useAuth();
 
   const billing = useRecoilValue(billingState);
 
@@ -113,7 +113,7 @@ export const SettingsNavigationDrawerItems = () => {
         />
         <NavigationDrawerItem
           label="Logout"
-          onClick={handleLogout}
+          onClick={signOut}
           Icon={IconDoorEnter}
         />
       </NavigationDrawerSection>

packages/twenty-front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { H2Title } from 'twenty-ui';
 
-import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
+import { useAuth } from '@/auth/hooks/useAuth';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { Button } from '@/ui/input/button/components/Button';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
@@ -15,11 +15,11 @@ export const DeleteAccount = () => {
   const [deleteUserAccount] = useDeleteUserAccountMutation();
   const currentUser = useRecoilValue(currentUserState);
   const userEmail = currentUser?.email;
-  const handleLogout = useSignOutAndRedirect();
+  const { signOut } = useAuth();
 
   const deleteAccount = async () => {
     await deleteUserAccount();
-    handleLogout();
+    await signOut();
   };
 
   return (

packages/twenty-front/src/modules/settings/profile/components/DeleteWorkspace.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { H2Title } from 'twenty-ui';
 
-import { useSignOutAndRedirect } from '@/auth/hooks/useSignOutAndRedirect';
+import { useAuth } from '@/auth/hooks/useAuth';
 import { currentUserState } from '@/auth/states/currentUserState';
 import {
   ConfirmationModal,
@@ -18,11 +18,11 @@ export const DeleteWorkspace = () => {
   const currentUser = useRecoilValue(currentUserState);
   const userEmail = currentUser?.email;
 
-  const handleLogout = useSignOutAndRedirect();
+  const { signOut } = useAuth();
 
   const deleteWorkspace = async () => {
     await deleteCurrentWorkspace();
-    handleLogout();
+    await signOut();
   };
 
   return (

packages/twenty-front/src/modules/ui/layout/hooks/__tests__/useShowAuthModal.test.tsx

@@ -0,0 +1,269 @@
+import { renderHook } from '@testing-library/react';
+import { RecoilRoot, useSetRecoilState } from 'recoil';
+
+import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
+import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
+import { AppPath } from '@/types/AppPath';
+import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
+import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+
+jest.mock('@/auth/hooks/useOnboardingStatus');
+const setupMockOnboardingStatus = (onboardingStatus: OnboardingStatus) => {
+  jest.mocked(useOnboardingStatus).mockReturnValueOnce(onboardingStatus);
+};
+
+jest.mock('~/hooks/useIsMatchingLocation');
+const mockUseIsMatchingLocation = jest.mocked(useIsMatchingLocation);
+
+const setupMockIsMatchingLocation = (pathname: string) => {
+  mockUseIsMatchingLocation.mockReturnValueOnce(
+    (path: string) => path === pathname,
+  );
+};
+
+const getResult = (isDefaultLayoutAuthModalVisible = true) =>
+  renderHook(
+    () => {
+      const setIsDefaultLayoutAuthModalVisible = useSetRecoilState(
+        isDefaultLayoutAuthModalVisibleState,
+      );
+      setIsDefaultLayoutAuthModalVisible(isDefaultLayoutAuthModalVisible);
+
+      return useShowAuthModal();
+    },
+    {
+      wrapper: RecoilRoot,
+    },
+  );
+
+// prettier-ignore
+const testCases = [
+  { loc: AppPath.Verify, status: OnboardingStatus.Incomplete, res: false },
+  { loc: AppPath.Verify, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.Verify, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.Verify, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.Verify, status: OnboardingStatus.OngoingUserCreation, res: false },
+  { loc: AppPath.Verify, status: OnboardingStatus.OngoingWorkspaceActivation, res: false },
+  { loc: AppPath.Verify, status: OnboardingStatus.OngoingProfileCreation, res: false },
+  { loc: AppPath.Verify, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.Verify, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.SignInUp, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.SignInUp, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.Invite, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.Invite, status: OnboardingStatus.Canceled, res: true },
+  { loc: AppPath.Invite, status: OnboardingStatus.Unpaid, res: true },
+  { loc: AppPath.Invite, status: OnboardingStatus.PastDue, res: true },
+  { loc: AppPath.Invite, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.Invite, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.Invite, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.Invite, status: OnboardingStatus.Completed, res: true },
+  { loc: AppPath.Invite, status: OnboardingStatus.CompletedWithoutSubscription, res: true },
+
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.Canceled, res: true },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.Unpaid, res: true },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.PastDue, res: true },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.Completed, res: true },
+  { loc: AppPath.ResetPassword, status: OnboardingStatus.CompletedWithoutSubscription, res: true },
+
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.CreateWorkspace, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.CreateProfile, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.Canceled, res: true },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.PlanRequired, status: OnboardingStatus.CompletedWithoutSubscription, res: true },
+
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.PlanRequiredSuccess, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.Index, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.Index, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.Index, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.Index, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.Index, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.Index, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.Index, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.Index, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.Index, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.TasksPage, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.TasksPage, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.OpportunitiesPage, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.RecordIndexPage, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.RecordShowPage, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.SettingsCatchAll, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.DevelopersCatchAll, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.Impersonate, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.Impersonate, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.Authorize, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.Authorize, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.Authorize, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.Authorize, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.Authorize, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.Authorize, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.Authorize, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.Authorize, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.Authorize, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.NotFoundWildcard, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+
+  { loc: AppPath.NotFound, status: OnboardingStatus.Incomplete, res: true },
+  { loc: AppPath.NotFound, status: OnboardingStatus.Canceled, res: false },
+  { loc: AppPath.NotFound, status: OnboardingStatus.Unpaid, res: false },
+  { loc: AppPath.NotFound, status: OnboardingStatus.PastDue, res: false },
+  { loc: AppPath.NotFound, status: OnboardingStatus.OngoingUserCreation, res: true },
+  { loc: AppPath.NotFound, status: OnboardingStatus.OngoingWorkspaceActivation, res: true },
+  { loc: AppPath.NotFound, status: OnboardingStatus.OngoingProfileCreation, res: true },
+  { loc: AppPath.NotFound, status: OnboardingStatus.Completed, res: false },
+  { loc: AppPath.NotFound, status: OnboardingStatus.CompletedWithoutSubscription, res: false },
+];
+
+describe('useShowAuthModal', () => {
+  testCases.forEach((testCase) => {
+    it(`testCase for location ${testCase.loc} with onboardingStatus ${testCase.status} should return ${testCase.res}`, () => {
+      setupMockOnboardingStatus(testCase.status);
+      setupMockIsMatchingLocation(testCase.loc);
+      const { result } = getResult();
+      if (testCase.res) {
+        expect(result.current).toBeTruthy();
+      } else {
+        expect(result.current).toBeFalsy();
+      }
+    });
+  });
+
+  describe('test with token validation loading', () => {
+    it(`with appPath ${AppPath.Invite} and isDefaultLayoutAuthModalVisible=false`, () => {
+      setupMockOnboardingStatus(OnboardingStatus.Completed);
+      setupMockIsMatchingLocation(AppPath.Invite);
+      const { result } = getResult(false);
+      expect(result.current).toBeFalsy();
+    });
+    it(`with appPath ${AppPath.ResetPassword} and isDefaultLayoutAuthModalVisible=false`, () => {
+      setupMockOnboardingStatus(OnboardingStatus.Completed);
+      setupMockIsMatchingLocation(AppPath.ResetPassword);
+      const { result } = getResult(false);
+      expect(result.current).toBeFalsy();
+    });
+  });
+
+  describe('tests should be exhaustive', () => {
+    it('all location and onboarding status should be tested', () => {
+      expect(testCases.length).toEqual(
+        Object.keys(AppPath).length * Object.keys(OnboardingStatus).length,
+      );
+    });
+  });
+});

packages/twenty-front/src/modules/ui/layout/hooks/useShowAuthModal.ts

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
+import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
+import { AppPath } from '@/types/AppPath';
+import { isDefaultLayoutAuthModalVisibleState } from '@/ui/layout/states/isDefaultLayoutAuthModalVisibleState';
+import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
+
+export const useShowAuthModal = () => {
+  const isMatchingLocation = useIsMatchingLocation();
+  const onboardingStatus = useOnboardingStatus();
+  const isDefaultLayoutAuthModalVisible = useRecoilValue(
+    isDefaultLayoutAuthModalVisibleState,
+  );
+  return useMemo(() => {
+    if (isMatchingLocation(AppPath.Verify)) {
+      return false;
+    }
+    if (
+      isMatchingLocation(AppPath.Invite) ||
+      isMatchingLocation(AppPath.ResetPassword)
+    ) {
+      return isDefaultLayoutAuthModalVisible;
+    }
+    if (
+      OnboardingStatus.Incomplete === onboardingStatus ||
+      OnboardingStatus.OngoingUserCreation === onboardingStatus ||
+      OnboardingStatus.OngoingProfileCreation === onboardingStatus ||
+      OnboardingStatus.OngoingWorkspaceActivation === onboardingStatus
+    ) {
+      return true;
+    }
+    if (isMatchingLocation(AppPath.PlanRequired)) {
+      return (
+        OnboardingStatus.CompletedWithoutSubscription === onboardingStatus ||
+        OnboardingStatus.Canceled === onboardingStatus
+      );
+    }
+    return false;
+  }, [isDefaultLayoutAuthModalVisible, isMatchingLocation, onboardingStatus]);
+};

packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx

@@ -1,12 +1,9 @@
-import { useMemo } from 'react';
 import { Outlet } from 'react-router-dom';
 import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup, motion } from 'framer-motion';
 
 import { AuthModal } from '@/auth/components/Modal';
-import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
-import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
@@ -15,11 +12,10 @@ import { MobileNavigationBar } from '@/navigation/components/MobileNavigationBar
 import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
 import { OBJECT_SETTINGS_WIDTH } from '@/settings/data-model/constants/ObjectSettings';
 import { SignInBackgroundMockPage } from '@/sign-in-background-mock/components/SignInBackgroundMockPage';
-import { AppPath } from '@/types/AppPath';
+import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
 import { DESKTOP_NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/DesktopNavDrawerWidths';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useScreenSize } from '@/ui/utilities/screen-size/hooks/useScreenSize';
-import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 
 const StyledLayout = styled.div`
   background: ${({ theme }) => theme.background.noisy};
@@ -64,28 +60,11 @@ const StyledMainContainer = styled.div`
 `;
 
 export const DefaultLayout = () => {
-  const onboardingStatus = useOnboardingStatus();
   const isMobile = useIsMobile();
   const isSettingsPage = useIsSettingsPage();
   const theme = useTheme();
-  const widowsWidth = useScreenSize().width;
-  const isMatchingLocation = useIsMatchingLocation();
-  const showAuthModal = useMemo(() => {
-    return (
-      (onboardingStatus &&
-        [
-          OnboardingStatus.Incomplete,
-          OnboardingStatus.OngoingUserCreation,
-          OnboardingStatus.OngoingProfileCreation,
-          OnboardingStatus.OngoingWorkspaceActivation,
-        ].includes(onboardingStatus)) ||
-      isMatchingLocation(AppPath.ResetPassword) ||
-      isMatchingLocation(AppPath.Invite) ||
-      (isMatchingLocation(AppPath.PlanRequired) &&
-        (OnboardingStatus.CompletedWithoutSubscription ||
-          OnboardingStatus.Canceled))
-    );
-  }, [isMatchingLocation, onboardingStatus]);
+  const windowsWidth = useScreenSize().width;
+  const showAuthModal = useShowAuthModal();
 
   return (
     <>
@@ -104,7 +83,7 @@ export const DefaultLayout = () => {
           animate={{
             marginLeft:
               isSettingsPage && !isMobile
-                ? (widowsWidth -
+                ? (windowsWidth -
                     (OBJECT_SETTINGS_WIDTH +
                       DESKTOP_NAV_DRAWER_WIDTHS.menu +
                       64)) /

packages/twenty-front/src/modules/ui/layout/states/isDefaultLayoutAuthModalVisibleState.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const isDefaultLayoutAuthModalVisibleState = createState<boolean>({
+  key: 'isDefaultLayoutAuthModalVisibleState',
+  defaultValue: false,
+});