diff --git a/packages/features/auth/src/components/magic-link-auth-container.tsx b/packages/features/auth/src/components/magic-link-auth-container.tsx index aed7103c5..6a41e58eb 100644 --- a/packages/features/auth/src/components/magic-link-auth-container.tsx +++ b/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) { diff --git a/packages/features/auth/src/components/password-sign-in-container.tsx b/packages/features/auth/src/components/password-sign-in-container.tsx index f685ed813..6e8a9b081 100644 --- a/packages/features/auth/src/components/password-sign-in-container.tsx +++ b/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 ( diff --git a/packages/features/auth/src/components/password-sign-up-container.tsx b/packages/features/auth/src/components/password-sign-up-container.tsx index 14e5c407c..56dce60d7 100644 --- a/packages/features/auth/src/components/password-sign-up-container.tsx +++ b/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 ( diff --git a/packages/features/auth/src/components/sign-up-methods-container.tsx b/packages/features/auth/src/components/sign-up-methods-container.tsx index 51f5bb54a..511dd5b44 100644 --- a/packages/features/auth/src/components/sign-up-methods-container.tsx +++ b/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: { - +