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

packages/twenty-front/src/modules/app/components/App.tsx

@@ -1,5 +1,4 @@
 import { AppRouter } from '@/app/components/AppRouter';
-import { CaptchaProvider } from '@/captcha/components/CaptchaProvider';
 import { ApolloDevLogEffect } from '@/debug/components/ApolloDevLogEffect';
 import { RecoilDebugObserverEffect } from '@/debug/components/RecoilDebugObserver';
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
@@ -21,19 +20,17 @@ export const App = () => {
       <RecoilURLSyncJSON location={{ part: 'queryParams' }}>
         <AppErrorBoundary>
           <I18nProvider i18n={i18n}>
-            <CaptchaProvider>
-              <RecoilDebugObserverEffect />
-              <ApolloDevLogEffect />
-              <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-                <IconsProvider>
-                  <ExceptionHandlerProvider>
-                    <HelmetProvider>
-                      <AppRouter />
-                    </HelmetProvider>
-                  </ExceptionHandlerProvider>
-                </IconsProvider>
-              </SnackBarProviderScope>
-            </CaptchaProvider>
+            <RecoilDebugObserverEffect />
+            <ApolloDevLogEffect />
+            <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+              <IconsProvider>
+                <ExceptionHandlerProvider>
+                  <HelmetProvider>
+                    <AppRouter />
+                  </HelmetProvider>
+                </ExceptionHandlerProvider>
+              </IconsProvider>
+            </SnackBarProviderScope>
           </I18nProvider>
         </AppErrorBoundary>
       </RecoilURLSyncJSON>

packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx

@@ -1,3 +1,4 @@
+import { CaptchaProvider } from '@/captcha/components/CaptchaProvider';
 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
 import { GotoHotkeysEffectsProvider } from '@/app/effect-components/GotoHotkeysEffectsProvider';
 import { PageChangeEffect } from '@/app/effect-components/PageChangeEffect';
@@ -32,46 +33,48 @@ export const AppRouterProviders = () => {
   const pageTitle = getPageTitleFromPath(pathname);
 
   return (
-    <ApolloProvider>
-      <BaseThemeProvider>
-        <ClientConfigProviderEffect />
-        <ClientConfigProvider>
-          <ChromeExtensionSidecarEffect />
-          <ChromeExtensionSidecarProvider>
-            <UserProviderEffect />
-            <WorkspaceProviderEffect />
-            <UserProvider>
-              <AuthProvider>
-                <ApolloMetadataClientProvider>
-                  <ObjectMetadataItemsProvider>
-                    <ObjectMetadataItemsGater>
-                      <PrefetchDataProvider>
-                        <UserThemeProviderEffect />
-                        <SnackBarProvider>
-                          <DialogManagerScope dialogManagerScopeId="dialog-manager">
-                            <DialogManager>
-                              <StrictMode>
-                                <PromiseRejectionEffect />
-                                <GotoHotkeysEffectsProvider />
-                                <ServerPreconnect />
-                                <PageTitle title={pageTitle} />
-                                <PageFavicon />
-                                <Outlet />
-                              </StrictMode>
-                            </DialogManager>
-                          </DialogManagerScope>
-                        </SnackBarProvider>
-                        <MainContextStoreProvider />
-                      </PrefetchDataProvider>
-                      <PageChangeEffect />
-                    </ObjectMetadataItemsGater>
-                  </ObjectMetadataItemsProvider>
-                </ApolloMetadataClientProvider>
-              </AuthProvider>
-            </UserProvider>
-          </ChromeExtensionSidecarProvider>
-        </ClientConfigProvider>
-      </BaseThemeProvider>
-    </ApolloProvider>
+    <CaptchaProvider>
+      <ApolloProvider>
+        <BaseThemeProvider>
+          <ClientConfigProviderEffect />
+          <ClientConfigProvider>
+            <ChromeExtensionSidecarEffect />
+            <ChromeExtensionSidecarProvider>
+              <UserProviderEffect />
+              <WorkspaceProviderEffect />
+              <UserProvider>
+                <AuthProvider>
+                  <ApolloMetadataClientProvider>
+                    <ObjectMetadataItemsProvider>
+                      <ObjectMetadataItemsGater>
+                        <PrefetchDataProvider>
+                          <UserThemeProviderEffect />
+                          <SnackBarProvider>
+                            <DialogManagerScope dialogManagerScopeId="dialog-manager">
+                              <DialogManager>
+                                <StrictMode>
+                                  <PromiseRejectionEffect />
+                                  <GotoHotkeysEffectsProvider />
+                                  <ServerPreconnect />
+                                  <PageTitle title={pageTitle} />
+                                  <PageFavicon />
+                                  <Outlet />
+                                </StrictMode>
+                              </DialogManager>
+                            </DialogManagerScope>
+                          </SnackBarProvider>
+                          <MainContextStoreProvider />
+                        </PrefetchDataProvider>
+                        <PageChangeEffect />
+                      </ObjectMetadataItemsGater>
+                    </ObjectMetadataItemsProvider>
+                  </ApolloMetadataClientProvider>
+                </AuthProvider>
+              </UserProvider>
+            </ChromeExtensionSidecarProvider>
+          </ClientConfigProvider>
+        </BaseThemeProvider>
+      </ApolloProvider>
+    </CaptchaProvider>
   );
 };

packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx

@@ -24,6 +24,7 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
 import { isDefined } from 'twenty-shared';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';
+import { isCaptchaRequiredForPath } from '@/captcha/utils/isCaptchaRequiredForPath';
 
 // TODO: break down into smaller functions and / or hooks
 //  - moved usePageChangeEffectNavigateLocation into dedicated hook
@@ -178,15 +179,10 @@ export const PageChangeEffect = () => {
   const isCaptchaScriptLoaded = useRecoilValue(isCaptchaScriptLoadedState);
 
   useEffect(() => {
-    if (
-      isCaptchaScriptLoaded &&
-      (isMatchingLocation(AppPath.SignInUp) ||
-        isMatchingLocation(AppPath.Invite) ||
-        isMatchingLocation(AppPath.ResetPassword))
-    ) {
+    if (isCaptchaScriptLoaded && isCaptchaRequiredForPath(location.pathname)) {
       requestFreshCaptchaToken();
     }
-  }, [isCaptchaScriptLoaded, isMatchingLocation, requestFreshCaptchaToken]);
+  }, [isCaptchaScriptLoaded, location.pathname, requestFreshCaptchaToken]);
 
   return <></>;
 };

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