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/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;
   }