Captcha Refactoring (#397)

* refactor: replace useCaptchaToken with useCaptcha hook and integrate CaptchaField across forms

packages/features/auth/src/components/magic-link-auth-container.tsx

@@ -23,7 +23,7 @@ import { Input } from '@kit/ui/input';
 import { toast } from '@kit/ui/sonner';
 import { Trans } from '@kit/ui/trans';
 
-import { useCaptchaToken } from '../captcha/client';
+import { useCaptcha } from '../captcha/client';
 import { useLastAuthMethod } from '../hooks/use-last-auth-method';
 import { TermsAndConditionsFormField } from './terms-and-conditions-form-field';
 
@@ -32,16 +32,18 @@ export function MagicLinkAuthContainer({
   shouldCreateUser,
   defaultValues,
   displayTermsCheckbox,
+  captchaSiteKey,
 }: {
   redirectUrl: string;
   shouldCreateUser: boolean;
   displayTermsCheckbox?: boolean;
+  captchaSiteKey?: string;
 
   defaultValues?: {
     email: string;
   };
 }) {
-  const { captchaToken, resetCaptchaToken } = useCaptchaToken();
+  const captcha = useCaptcha({ siteKey: captchaSiteKey });
   const { t } = useTranslation();
   const signInWithOtpMutation = useSignInWithOtp();
   const appEvents = useAppEvents();
@@ -68,7 +70,7 @@ export function MagicLinkAuthContainer({
         email,
         options: {
           emailRedirectTo,
-          captchaToken,
+          captchaToken: captcha.token,
           shouldCreateUser,
         },
       });
@@ -91,7 +93,7 @@ export function MagicLinkAuthContainer({
       error: t(`auth:errors.linkTitle`),
     });
 
-    resetCaptchaToken();
+    captcha.reset();
   };
 
   if (signInWithOtpMutation.data) {
@@ -106,6 +108,8 @@ export function MagicLinkAuthContainer({
             <ErrorAlert />
           </If>
 
+          {captcha.field}
+
           <FormField
             render={({ field }) => (
               <FormItem>