fix(auth): add captcha auto-refresh via ApolloLink (#12758)

- Introduced `createCaptchaRefreshLink` to trigger captcha token refresh
automatically.
- Removed redundant manual captcha refresh calls and integrated it into
Apollo Provider.

packages/twenty-front/src/modules/apollo/components/ApolloProvider.tsx

@@ -1,10 +1,17 @@
 import { ApolloProvider as ApolloProviderBase } from '@apollo/client';
 
 import { useApolloFactory } from '@/apollo/hooks/useApolloFactory';
+import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
+import { createCaptchaRefreshLink } from '@/apollo/utils/captchaRefreshLink';
 
 export const ApolloProvider = ({ children }: React.PropsWithChildren) => {
+  const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken();
+
+  const captchaRefreshLink = createCaptchaRefreshLink(requestFreshCaptchaToken);
+
   const apolloClient = useApolloFactory({
     connectToDevTools: true,
+    extraLinks: [captchaRefreshLink],
   });
 
   // This will attach the right apollo client to Apollo Dev Tools

packages/twenty-front/src/modules/apollo/utils/captchaRefreshLink.ts

@@ -0,0 +1,19 @@
+import { ApolloLink } from '@apollo/client';
+
+export const createCaptchaRefreshLink = (
+  requestFreshCaptchaToken: () => void,
+) => {
+  return new ApolloLink((operation, forward) => {
+    const { variables } = operation;
+
+    const hasCaptchaToken = variables && 'captchaToken' in variables;
+
+    return forward(operation).map((response) => {
+      if (hasCaptchaToken) {
+        requestFreshCaptchaToken();
+      }
+
+      return response;
+    });
+  });
+};

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

@@ -501,7 +501,8 @@ export const useAuth = () => {
 
   const handleSignOut = useCallback(async () => {
     await clearSession();
-  }, [clearSession]);
+    await requestFreshCaptchaToken();
+  }, [clearSession, requestFreshCaptchaToken]);
 
   const handleCredentialsSignUpInWorkspace = useCallback(
     async ({
@@ -519,7 +520,6 @@ export const useAuth = () => {
       captchaToken?: string;
       verifyEmailNextPath?: string;
     }) => {
-      try {
       const signUpInWorkspaceResult = await signUpInWorkspace({
         variables: {
           email,
@@ -559,8 +559,7 @@ export const useAuth = () => {
           {
             ...(!isEmailVerificationRequired && {
               loginToken:
-                  signUpInWorkspaceResult.data.signUpInWorkspace.loginToken
+                signUpInWorkspaceResult.data.signUpInWorkspace.loginToken.token,
-                    .token,
             }),
             email,
           },
@@ -570,9 +569,6 @@ export const useAuth = () => {
       await handleGetAuthTokensFromLoginToken(
         signUpInWorkspaceResult.data?.signUpInWorkspace.loginToken.token,
       );
-      } finally {
-        requestFreshCaptchaToken();
-      }
     },
     [
       signUpInWorkspace,
@@ -583,7 +579,6 @@ export const useAuth = () => {
       setSearchParams,
       isEmailVerificationRequired,
       redirectToWorkspaceDomain,
-      requestFreshCaptchaToken,
     ],
   );
 

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

@@ -10,7 +10,6 @@ import {
 } from '@/auth/states/signInUpStepState';
 import { SignInUpMode } from '@/auth/types/signInUpMode';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
-import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { useBuildSearchParamsFromUrlSyncedStates } from '@/domain-manager/hooks/useBuildSearchParamsFromUrlSyncedStates';
 import { AppPath } from '@/types/AppPath';
 import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
@@ -47,16 +46,14 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
     checkUserExists: { checkUserExistsQuery },
   } = useAuth();
 
-  const { requestFreshCaptchaToken } = useRequestFreshCaptchaToken();
   const { readCaptchaToken } = useReadCaptchaToken();
 
   const { buildSearchParamsFromUrlSyncedStates } =
     useBuildSearchParamsFromUrlSyncedStates();
 
   const continueWithEmail = useCallback(() => {
-    requestFreshCaptchaToken();
     setSignInUpStep(SignInUpStep.Email);
-  }, [requestFreshCaptchaToken, setSignInUpStep]);
+  }, [setSignInUpStep]);
 
   const continueWithCredentials = useCallback(async () => {
     const token = await readCaptchaToken();
@@ -74,7 +71,6 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
         });
       },
       onCompleted: (data) => {
-        requestFreshCaptchaToken();
         setSignInUpMode(
           data?.checkUserExists.exists
             ? SignInUpMode.SignIn
@@ -88,7 +84,6 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
     form,
     checkUserExistsQuery,
     enqueueSnackBar,
-    requestFreshCaptchaToken,
     setSignInUpStep,
     setSignInUpMode,
   ]);
@@ -154,8 +149,6 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
         enqueueSnackBar(err?.message, {
           variant: SnackBarVariant.Error,
         });
-      } finally {
-        requestFreshCaptchaToken();
       }
     },
     [
@@ -169,7 +162,6 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
       workspaceInviteHash,
       workspacePersonalInviteToken,
       enqueueSnackBar,
-      requestFreshCaptchaToken,
       buildSearchParamsFromUrlSyncedStates,
       isOnAWorkspace,
     ],