Fix captcha token not being loaded early enough (#9800)

I've re-investigated the captchaToken being invalid on workspace domain
url in case where email is passed in the URL.
We need to be a bit more granular

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx

@@ -21,12 +21,12 @@ import {
 import { SignInUpMode } from '@/auth/types/signInUpMode';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
+import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { isDefined } from '~/utils/isDefined';
-import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
 
 const StyledContentContainer = styled(motion.div)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};

packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx

@@ -1,15 +1,22 @@
 import { useSignInUp } from '@/auth/sign-in-up/hooks/useSignInUp';
 import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { SignInUpStep } from '@/auth/states/signInUpStepState';
+import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
+import { captchaState } from '@/client-config/states/captchaState';
 import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from '~/utils/isDefined';
-import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
 
 const searchParams = new URLSearchParams(window.location.search);
 const email = searchParams.get('email');
 
+enum LoadingStatus {
+  Loading = 'loading',
+  RequestingCaptchaToken = 'requestingCaptchaToken',
+  Done = 'done',
+}
+
 export const SignInUpWorkspaceScopeFormEffect = () => {
   const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState);
 
@@ -17,7 +24,11 @@ export const SignInUpWorkspaceScopeFormEffect = () => {
     isRequestingCaptchaTokenState,
   );
 
-  const [isInitialLoading, setIsInitialLoading] = useState(false);
+  const captcha = useRecoilValue(captchaState);
+
+  const [loadingStatus, setLoadingStatus] = useState<LoadingStatus>(
+    LoadingStatus.Loading,
+  );
 
   const { form } = useSignInUpForm();
 
@@ -25,10 +36,26 @@ export const SignInUpWorkspaceScopeFormEffect = () => {
     useSignInUp(form);
 
   useEffect(() => {
-    if (!isRequestingCaptchaToken) {
-      setIsInitialLoading(true);
+    if (loadingStatus === LoadingStatus.Done) {
+      return;
     }
-  }, [isRequestingCaptchaToken]);
+
+    if (!isDefined(captcha?.provider)) {
+      setLoadingStatus(LoadingStatus.Done);
+      return;
+    }
+
+    if (isRequestingCaptchaToken) {
+      setLoadingStatus(LoadingStatus.RequestingCaptchaToken);
+    }
+
+    if (
+      !isRequestingCaptchaToken &&
+      loadingStatus === LoadingStatus.RequestingCaptchaToken
+    ) {
+      setLoadingStatus(LoadingStatus.Done);
+    }
+  }, [captcha?.provider, isRequestingCaptchaToken, loadingStatus]);
 
   useEffect(() => {
     if (
@@ -44,7 +71,7 @@ export const SignInUpWorkspaceScopeFormEffect = () => {
     if (
       isDefined(email) &&
       workspaceAuthProviders.password &&
-      isInitialLoading
+      loadingStatus === LoadingStatus.Done
     ) {
       continueWithCredentials();
     }
@@ -56,7 +83,7 @@ export const SignInUpWorkspaceScopeFormEffect = () => {
     workspaceAuthProviders.password,
     continueWithEmail,
     continueWithCredentials,
-    isInitialLoading,
+    loadingStatus,
   ]);
 
   return <></>;