feat(auth): integrate captcha validation and component for sign-in/up… (#15054)

… process

Added captcha token validation to the sign-in/up flow. Introduced
`StyledLoaderContainer` for better UI feedback during loading. Enhanced
error handling within `useSignInUp` to handle GraphQL errors
effectively.

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/client-config/hooks/useCaptcha.ts

@@ -0,0 +1,31 @@
+import { captchaTokenState } from '@/captcha/states/captchaTokenState';
+import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
+import { captchaState } from '@/client-config/states/captchaState';
+import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
+
+export const useCaptcha = () => {
+  const captcha = useRecoilValue(captchaState);
+  const captchaToken = useRecoilValue(captchaTokenState);
+  const clientConfigApiStatus = useRecoilValue(clientConfigApiStatusState);
+  const isCaptchaScriptLoaded = useRecoilValue(isCaptchaScriptLoadedState);
+
+  const isClientConfigLoaded = clientConfigApiStatus.isLoadedOnce;
+  const isSiteKeyDefined = isDefined(captcha?.siteKey);
+  const isTokenAvailable = isDefined(captchaToken);
+
+  // Captcha is ready when:
+  // - Client config is loaded
+  // - And either captcha is not configured with a site key (no captcha required)
+  // - Or, when configured, a captcha token is available
+  const isCaptchaReady =
+    isClientConfigLoaded && (!isSiteKeyDefined || isTokenAvailable);
+
+  return {
+    isCaptchaScriptLoaded,
+    isCaptchaConfigured: !isUndefinedOrNull(captcha),
+    isCaptchaReady,
+  };
+};