Refactor captcha token usage in authentication

The handling of the captcha token was decentralized and moved into each individual authentication component. All components that use a captcha token now import and use their own tokens from the 'useCaptchaToken()' hook, improving individual component autonomy. This change simplifies the hierarchical structure and reduces dependencies.

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

@@ -22,15 +22,16 @@ import { If } from '@kit/ui/if';
 import { Input } from '@kit/ui/input';
 import { Trans } from '@kit/ui/trans';
 
+import { useCaptchaToken } from '../captcha/client';
+
 export function MagicLinkAuthContainer({
   inviteToken,
   redirectUrl,
-  captchaToken,
 }: {
   inviteToken?: string;
-  captchaToken?: string;
   redirectUrl: string;
 }) {
+  const { captchaToken, resetCaptchaToken } = useCaptchaToken();
   const { t } = useTranslation();
   const signInWithOtpMutation = useSignInWithOtp();
 
@@ -63,6 +64,8 @@ export function MagicLinkAuthContainer({
       success: t(`auth:sendLinkSuccessToast`),
       error: t(`auth:errors.link`),
     });
+
+    resetCaptchaToken();
   };
 
   if (signInWithOtpMutation.data) {

packages/features/auth/src/components/password-sign-in-container.tsx

@@ -14,7 +14,7 @@ import { PasswordSignInForm } from './password-sign-in-form';
 export const PasswordSignInContainer: React.FC<{
   onSignIn?: (userId?: string) => unknown;
 }> = ({ onSignIn }) => {
-  const { captchaToken } = useCaptchaToken();
+  const { captchaToken, resetCaptchaToken } = useCaptchaToken();
   const signInMutation = useSignInWithEmailPassword();
   const isLoading = signInMutation.isPending;
 
@@ -33,9 +33,11 @@ export const PasswordSignInContainer: React.FC<{
         }
       } catch (e) {
         // wrong credentials, do nothing
+      } finally {
+        resetCaptchaToken();
       }
     },
-    [captchaToken, onSignIn, signInMutation],
+    [captchaToken, onSignIn, resetCaptchaToken, signInMutation],
   );
 
   return (

packages/features/auth/src/components/password-sign-up-container.tsx

@@ -9,20 +9,21 @@ import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
+import { useCaptchaToken } from '../captcha/client';
 import { AuthErrorAlert } from './auth-error-alert';
 import { PasswordSignUpForm } from './password-sign-up-form';
 
 interface EmailPasswordSignUpContainerProps {
   onSignUp?: (userId?: string) => unknown;
   emailRedirectTo: string;
-  captchaToken?: string;
 }
 
 export function EmailPasswordSignUpContainer({
   onSignUp,
   emailRedirectTo,
-  captchaToken,
 }: EmailPasswordSignUpContainerProps) {
+  const { captchaToken, resetCaptchaToken } = useCaptchaToken();
+
   const signUpMutation = useSignUpWithEmailAndPassword();
   const redirecting = useRef(false);
   const loading = signUpMutation.isPending || redirecting.current;
@@ -48,9 +49,18 @@ export function EmailPasswordSignUpContainer({
         }
       } catch (error) {
         console.error(error);
+      } finally {
+        resetCaptchaToken();
       }
     },
-    [captchaToken, emailRedirectTo, loading, onSignUp, signUpMutation],
+    [
+      captchaToken,
+      emailRedirectTo,
+      loading,
+      onSignUp,
+      resetCaptchaToken,
+      signUpMutation,
+    ],
   );
 
   return (

packages/features/auth/src/components/sign-up-methods-container.tsx

@@ -8,7 +8,6 @@ import { If } from '@kit/ui/if';
 import { Separator } from '@kit/ui/separator';
 import { Trans } from '@kit/ui/trans';
 
-import { useCaptchaToken } from '../captcha/client';
 import { MagicLinkAuthContainer } from './magic-link-auth-container';
 import { OauthProviders } from './oauth-providers';
 import { EmailPasswordSignUpContainer } from './password-sign-up-container';
@@ -28,7 +27,6 @@ export function SignUpMethodsContainer(props: {
   inviteToken?: string;
 }) {
   const redirectUrl = getCallbackUrl(props);
-  const { captchaToken } = useCaptchaToken();
 
   return (
     <>
@@ -37,17 +35,13 @@ export function SignUpMethodsContainer(props: {
       </If>
 
       <If condition={props.providers.password}>
-        <EmailPasswordSignUpContainer
+        <EmailPasswordSignUpContainer emailRedirectTo={redirectUrl} />
-          captchaToken={captchaToken}
-          emailRedirectTo={redirectUrl}
-        />
       </If>
 
       <If condition={props.providers.magicLink}>
         <MagicLinkAuthContainer
           inviteToken={props.inviteToken}
           redirectUrl={redirectUrl}
-          captchaToken={captchaToken}
         />
       </If>