refactor(captcha): add path-based captcha check and cleanup unused to… (#14803)

…ken requests

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

@@ -65,6 +65,7 @@ import { type AuthToken } from '~/generated/graphql';
 import { cookieStorage } from '~/utils/cookie-storage';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
 import { loginTokenState } from '../states/loginTokenState';
+import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
 
 export const useAuth = () => {
   const setTokenPair = useSetRecoilState(tokenPairState);
@@ -72,6 +73,7 @@ export const useAuth = () => {
 
   const { origin } = useOrigin();
   const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken();
+  const isCaptchaScriptLoaded = useRecoilValue(isCaptchaScriptLoadedState);
   const isMultiWorkspaceEnabled = useRecoilValue(isMultiWorkspaceEnabledState);
   const isEmailVerificationRequired = useRecoilValue(
     isEmailVerificationRequiredState,
@@ -164,6 +166,7 @@ export const useAuth = () => {
           set(isCurrentUserLoadedState, isCurrentUserLoaded);
           set(isMultiWorkspaceEnabledState, isMultiWorkspaceEnabled);
           set(domainConfigurationState, domainConfiguration);
+          set(isCaptchaScriptLoadedState, isCaptchaScriptLoaded);
           return undefined;
         });
 
@@ -183,6 +186,7 @@ export const useAuth = () => {
       setLastAuthenticateWorkspaceDomain,
       loadMockedObjectMetadataItems,
       navigate,
+      isCaptchaScriptLoaded,
     ],
   );
 
@@ -493,8 +497,8 @@ export const useAuth = () => {
 
   const handleSignOut = useCallback(async () => {
     await clearSession();
-    await requestFreshCaptchaToken();
-  }, [clearSession, requestFreshCaptchaToken]);
+    if (isCaptchaScriptLoaded) await requestFreshCaptchaToken();
+  }, [clearSession, isCaptchaScriptLoaded, requestFreshCaptchaToken]);
 
   const handleCredentialsSignUpInWorkspace = useCallback(
     async ({

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

@@ -3,6 +3,8 @@ import { useParams, useSearchParams } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { type BillingCheckoutSession } from '@/auth/types/billingCheckoutSession.type';
 import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
+import { BillingPlanKey } from '~/generated/graphql';
+import { SubscriptionInterval } from '~/generated-metadata/graphql';
 
 export const useSignInWithGoogle = () => {
   const workspaceInviteHash = useParams().workspaceInviteHash;
@@ -10,8 +12,8 @@ export const useSignInWithGoogle = () => {
   const workspacePersonalInviteToken =
     searchParams.get('inviteToken') ?? undefined;
   const billingCheckoutSession = {
-    plan: 'PRO',
-    interval: 'Month',
+    plan: BillingPlanKey.PRO,
+    interval: SubscriptionInterval.Month,
     requirePaymentMethod: true,
   } as BillingCheckoutSession;
 

packages/twenty-front/src/modules/captcha/components/CaptchaProviderScriptLoaderEffect.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { useLocation } from 'react-router-dom';
 
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
@@ -7,6 +8,7 @@ import { getCaptchaUrlByProvider } from '@/captcha/utils/getCaptchaUrlByProvider
 import { captchaState } from '@/client-config/states/captchaState';
 import { CaptchaDriverType } from '~/generated/graphql';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+import { isCaptchaRequiredForPath } from '@/captcha/utils/isCaptchaRequiredForPath';
 
 export const CaptchaProviderScriptLoaderEffect = () => {
   const captcha = useRecoilValue(captchaState);
@@ -14,9 +16,14 @@ export const CaptchaProviderScriptLoaderEffect = () => {
     isCaptchaScriptLoadedState,
   );
   const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken();
+  const location = useLocation();
 
   useEffect(() => {
-    if (!captcha?.provider || !captcha.siteKey) {
+    if (
+      !captcha?.provider ||
+      !captcha.siteKey ||
+      !isCaptchaRequiredForPath(location.pathname)
+    ) {
       return;
     }
 
@@ -45,7 +52,12 @@ export const CaptchaProviderScriptLoaderEffect = () => {
       };
       document.body.appendChild(scriptElement);
     }
-  }, [captcha?.provider, captcha?.siteKey, setIsCaptchaScriptLoaded]);
+  }, [
+    captcha?.provider,
+    captcha?.siteKey,
+    setIsCaptchaScriptLoaded,
+    location.pathname,
+  ]);
 
   useEffect(() => {
     if (isUndefinedOrNull(captcha?.provider) || !isCaptchaScriptLoaded) {