From aef01816d7aa8028e0ad9d32dff30675921d2304 Mon Sep 17 00:00:00 2001
From: Antoine Moreaux <moreaux.antoine@gmail.com>
Date: Tue, 21 Jan 2025 18:07:20 +0100
Subject: [PATCH] fix(recaptcha|sso): recaptcha not generated issue (#9764)

Fix https://github.com/twentyhq/twenty/issues/9759
https://github.com/twentyhq/twenty/issues/9694
https://github.com/twentyhq/twenty/issues/9323
---
 .../components/SignInUpGlobalScopeForm.tsx    |  7 +++-
 .../SignInUpWorkspaceScopeFormEffect.tsx      | 33 ++++++++++++++-----
 ...SettingsSSOIdentitiesProvidersListCard.tsx |  1 +
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
index 775667c80..b78b82320 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
@@ -26,6 +26,7 @@ import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirect
 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)};
@@ -49,6 +50,10 @@ export const SignInUpGlobalScopeForm = () => {
   const setSignInUpStep = useSetRecoilState(signInUpStepState);
   const [signInUpMode, setSignInUpMode] = useRecoilState(signInUpModeState);
 
+  const isRequestingCaptchaToken = useRecoilValue(
+    isRequestingCaptchaTokenState,
+  );
+
   const { enqueueSnackBar } = useSnackBar();
   const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken();
 
@@ -118,8 +123,8 @@ export const SignInUpGlobalScopeForm = () => {
                 signInUpMode={signInUpMode}
               />
             )}
-
             <MainButton
+              disabled={isRequestingCaptchaToken}
               title={
                 signInUpStep === SignInUpStep.Password ? 'Sign Up' : 'Continue'
               }
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx
index 530a9dee5..00a7831f1 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeFormEffect.tsx
@@ -2,9 +2,10 @@ 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 { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
-import { useCallback, useEffect } from 'react';
+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');
@@ -12,23 +13,40 @@ const email = searchParams.get('email');
 export const SignInUpWorkspaceScopeFormEffect = () => {
   const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState);
 
+  const isRequestingCaptchaToken = useRecoilValue(
+    isRequestingCaptchaTokenState,
+  );
+
+  const [isInitialLoading, setIsInitialLoading] = useState(false);
+
   const { form } = useSignInUpForm();
 
   const { signInUpStep, continueWithEmail, continueWithCredentials } =
     useSignInUp(form);
 
-  const checkAuthProviders = useCallback(() => {
+  useEffect(() => {
+    if (!isRequestingCaptchaToken) {
+      setIsInitialLoading(true);
+    }
+  }, [isRequestingCaptchaToken]);
+
+  useEffect(() => {
     if (
       signInUpStep === SignInUpStep.Init &&
       !workspaceAuthProviders.google &&
       !workspaceAuthProviders.microsoft &&
       !workspaceAuthProviders.sso
     ) {
-      return continueWithEmail();
+      continueWithEmail();
+      return;
     }
 
-    if (isDefined(email) && workspaceAuthProviders.password) {
-      return continueWithCredentials();
+    if (
+      isDefined(email) &&
+      workspaceAuthProviders.password &&
+      isInitialLoading
+    ) {
+      continueWithCredentials();
     }
   }, [
     signInUpStep,
@@ -38,11 +56,8 @@ export const SignInUpWorkspaceScopeFormEffect = () => {
     workspaceAuthProviders.password,
     continueWithEmail,
     continueWithCredentials,
+    isInitialLoading,
   ]);
 
-  useEffect(() => {
-    checkAuthProviders();
-  }, [checkAuthProviders]);
-
   return <></>;
 };
diff --git a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCard.tsx b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCard.tsx
index 8d3f2efc8..32b4f97f6 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SettingsSSOIdentitiesProvidersListCard.tsx
@@ -37,6 +37,7 @@ export const SettingsSSOIdentitiesProvidersListCard = () => {
   );
 
   const { loading } = useListSsoIdentityProvidersByWorkspaceIdQuery({
+    fetchPolicy: 'network-only',
     skip: currentWorkspace?.hasValidEntrepriseKey === false,
     onCompleted: (data) => {
       setSSOIdentitiesProviders(