fix(twenty-front): error on captcha initialisation (#11039)

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

@@ -2,9 +2,12 @@ import React from 'react';
 
 import { CaptchaProviderScriptLoaderEffect } from '@/captcha/components/CaptchaProviderScriptLoaderEffect';
 import { isCaptchaRequiredForPath } from '@/captcha/utils/isCaptchaRequiredForPath';
+import { useLocation } from 'react-router-dom';
 
 export const CaptchaProvider = ({ children }: React.PropsWithChildren) => {
-  if (!isCaptchaRequiredForPath(window.location.pathname)) {
+  const location = useLocation();
+
+  if (!isCaptchaRequiredForPath(location.pathname)) {
     return <>{children}</>;
   }
 

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

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
@@ -10,7 +10,7 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 export const CaptchaProviderScriptLoaderEffect = () => {
   const captcha = useRecoilValue(captchaState);
-  const setIsCaptchaScriptLoaded = useSetRecoilState(
+  const [isCaptchaScriptLoaded, setIsCaptchaScriptLoaded] = useRecoilState(
     isCaptchaScriptLoadedState,
   );
   const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken();
@@ -46,8 +46,9 @@ export const CaptchaProviderScriptLoaderEffect = () => {
       document.body.appendChild(scriptElement);
     }
   }, [captcha?.provider, captcha?.siteKey, setIsCaptchaScriptLoaded]);
+
   useEffect(() => {
-    if (isUndefinedOrNull(captcha?.provider)) {
+    if (isUndefinedOrNull(captcha?.provider) || !isCaptchaScriptLoaded) {
       return;
     }
 
@@ -68,7 +69,7 @@ export const CaptchaProviderScriptLoaderEffect = () => {
     }
 
     return () => clearInterval(refreshInterval);
-  }, [captcha?.provider, requestFreshCaptchaToken]);
+  }, [captcha?.provider, requestFreshCaptchaToken, isCaptchaScriptLoaded]);
 
   return <></>;
 };

packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts

@@ -6,6 +6,7 @@ import { isCaptchaRequiredForPath } from '@/captcha/utils/isCaptchaRequiredForPa
 import { captchaState } from '@/client-config/states/captchaState';
 import { CaptchaDriverType } from '~/generated-metadata/graphql';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+import { useLocation } from 'react-router-dom';
 
 declare global {
   interface Window {
@@ -20,10 +21,12 @@ export const useRequestFreshCaptchaToken = () => {
     isRequestingCaptchaTokenState,
   );
 
+  const location = useLocation();
+
   const requestFreshCaptchaToken = useRecoilCallback(
     ({ snapshot }) =>
       async () => {
-        if (!isCaptchaRequiredForPath(window.location.pathname)) {
+        if (!isCaptchaRequiredForPath(location.pathname)) {
           return;
         }
 
@@ -62,7 +65,7 @@ export const useRequestFreshCaptchaToken = () => {
             });
         }
       },
-    [setCaptchaToken, setIsRequestingCaptchaToken],
+    [location.pathname, setCaptchaToken, setIsRequestingCaptchaToken],
   );
 
   return { requestFreshCaptchaToken };