diff --git a/packages/twenty-front/src/modules/app/components/App.tsx b/packages/twenty-front/src/modules/app/components/App.tsx
index 4f77a520b..77064d34a 100644
--- a/packages/twenty-front/src/modules/app/components/App.tsx
+++ b/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 = () => {
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx b/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
index d95977b84..633af6248 100644
--- a/packages/twenty-front/src/modules/app/components/AppRouterProviders.tsx
+++ b/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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
};
diff --git a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx b/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx
index 67ccb250c..12b6c4f7e 100644
--- a/packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx
+++ b/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 <>;
};
diff --git a/packages/twenty-front/src/modules/captcha/components/CaptchaProvider.tsx b/packages/twenty-front/src/modules/captcha/components/CaptchaProvider.tsx
index 65ba6dcf3..97599b6c4 100644
--- a/packages/twenty-front/src/modules/captcha/components/CaptchaProvider.tsx
+++ b/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};
}
diff --git a/packages/twenty-front/src/modules/captcha/components/CaptchaProviderScriptLoaderEffect.tsx b/packages/twenty-front/src/modules/captcha/components/CaptchaProviderScriptLoaderEffect.tsx
index a2f4db085..301fcfe97 100644
--- a/packages/twenty-front/src/modules/captcha/components/CaptchaProviderScriptLoaderEffect.tsx
+++ b/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 <>;
};
diff --git a/packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts b/packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts
index d6b4c8a99..37457fa41 100644
--- a/packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts
+++ b/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 };