chore: bump version to 2.21.6 in package.json and enhance captcha integration across auth components (#418)

- Updated application version from 2.21.4 to 2.21.6 in package.json.
- Added "verifyingCaptcha" message to auth.json for improved user feedback during captcha verification.
- Enhanced captcha handling in various authentication components, including MagicLinkAuthContainer, PasswordResetRequestContainer, and SignUpContainer, to reflect loading states and improve user experience.

apps/web/public/locales/en/auth.json

@@ -10,6 +10,7 @@
   "signOut": "Sign out",
   "signingIn": "Signing in...",
   "signingUp": "Signing up...",
+  "verifyingCaptcha": "Verifying...",
   "doNotHaveAccountYet": "Do not have an account yet?",
   "alreadyHaveAnAccount": "Already have an account?",
   "signUpToAcceptInvite": "Please sign in/up to accept the invite",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-supabase-saas-kit-turbo",
-  "version": "2.21.4",
+  "version": "2.21.6",
   "private": true,
   "sideEffects": false,
   "engines": {

packages/features/auth/src/captcha/client/use-captcha.tsx

@@ -67,15 +67,20 @@ export function useCaptcha(
     [siteKey, nonce, handleTokenChange, handleInstanceChange],
   );
 
+  // Ready when captcha is not configured (no siteKey) or token is available
+  const isReady = !siteKey || token !== '';
+
   return useMemo(
     () => ({
       /** The current captcha token */
       token,
+      /** Whether the captcha is ready (not configured or token available) */
+      isReady,
       /** Reset the captcha (clears token and resets widget) */
       reset,
       /** The captcha field component to render */
       field,
     }),
-    [token, reset, field],
+    [token, isReady, reset, field],
   );
 }

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

@@ -49,6 +49,8 @@ export function MagicLinkAuthContainer({
   const appEvents = useAppEvents();
   const { recordAuthMethod } = useLastAuthMethod();
 
+  const captchaLoading = !captcha.isReady;
+
   const form = useForm({
     resolver: zodResolver(
       z.object({
@@ -131,13 +133,18 @@ export function MagicLinkAuthContainer({
             <TermsAndConditionsFormField />
           </If>
 
-          <Button disabled={signInWithOtpMutation.isPending}>
+          <Button disabled={signInWithOtpMutation.isPending || captchaLoading}>
-            <If
+            <If condition={captchaLoading}>
-              condition={signInWithOtpMutation.isPending}
+              <Trans i18nKey={'auth:verifyingCaptcha'} />
-              fallback={<Trans i18nKey={'auth:sendEmailLink'} />}
+            </If>
-            >
+
+            <If condition={signInWithOtpMutation.isPending && !captchaLoading}>
               <Trans i18nKey={'auth:sendingEmailLink'} />
             </If>
+
+            <If condition={!signInWithOtpMutation.isPending && !captchaLoading}>
+              <Trans i18nKey={'auth:sendEmailLink'} />
+            </If>
           </Button>
         </div>
       </form>

packages/features/auth/src/components/password-reset-request-container.tsx

@@ -34,6 +34,7 @@ export function PasswordResetRequestContainer(params: {
   const { t } = useTranslation('auth');
   const resetPasswordMutation = useRequestResetPassword();
   const captcha = useCaptcha({ siteKey: params.captchaSiteKey });
+  const captchaLoading = !captcha.isReady;
 
   const error = resetPasswordMutation.error;
   const success = resetPasswordMutation.data;
@@ -101,8 +102,16 @@ export function PasswordResetRequestContainer(params: {
                 )}
               />
 
-              <Button disabled={resetPasswordMutation.isPending} type="submit">
+              <Button
-                <Trans i18nKey={'auth:passwordResetLabel'} />
+                disabled={resetPasswordMutation.isPending || captchaLoading}
+                type="submit"
+              >
+                <If
+                  condition={captchaLoading}
+                  fallback={<Trans i18nKey={'auth:passwordResetLabel'} />}
+                >
+                  <Trans i18nKey={'auth:verifyingCaptcha'} />
+                </If>
               </Button>
             </div>
             {captcha.field}

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

@@ -24,6 +24,7 @@ export function PasswordSignInContainer({
   const { recordAuthMethod } = useLastAuthMethod();
   const isLoading = signInMutation.isPending;
   const isRedirecting = signInMutation.isSuccess;
+  const captchaLoading = !captcha.isReady;
 
   const onSubmit = useCallback(
     async (credentials: z.infer<typeof PasswordSignInSchema>) => {
@@ -59,6 +60,7 @@ export function PasswordSignInContainer({
           onSubmit={onSubmit}
           loading={isLoading}
           redirecting={isRedirecting}
+          captchaLoading={captchaLoading}
         />
 
         {captcha.field}

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

@@ -29,10 +29,12 @@ import { PasswordInput } from './password-input';
 
 export function PasswordSignInForm({
   onSubmit,
+  captchaLoading = false,
   loading = false,
   redirecting = false,
 }: {
   onSubmit: (params: z.infer<typeof PasswordSignInSchema>) => unknown;
+  captchaLoading: boolean;
   loading: boolean;
   redirecting: boolean;
 }) {
@@ -126,6 +128,12 @@ export function PasswordSignInForm({
             </span>
           </If>
 
+          <If condition={captchaLoading}>
+            <span className={'animate-in fade-in slide-in-from-bottom-24'}>
+              <Trans i18nKey={'auth:verifyingCaptcha'} />
+            </span>
+          </If>
+
           <If condition={!redirecting && !loading}>
             <span className={'animate-out fade-out flex items-center'}>
               <Trans i18nKey={'auth:signInWithEmail'} />

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

@@ -29,6 +29,7 @@ export function EmailPasswordSignUpContainer({
   captchaSiteKey,
 }: EmailPasswordSignUpContainerProps) {
   const captcha = useCaptcha({ siteKey: captchaSiteKey });
+  const captchaLoading = !captcha.isReady;
 
   const {
     signUp: onSignupRequested,
@@ -57,6 +58,7 @@ export function EmailPasswordSignUpContainer({
             loading={loading}
             defaultValues={defaultValues}
             displayTermsCheckbox={displayTermsCheckbox}
+            captchaLoading={captchaLoading}
           />
 
           {captcha.field}

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

@@ -33,7 +33,9 @@ interface PasswordSignUpFormProps {
     password: string;
     repeatPassword: string;
   }) => unknown;
+
   loading: boolean;
+  captchaLoading: boolean;
 }
 
 export function PasswordSignUpForm({
@@ -41,6 +43,7 @@ export function PasswordSignUpForm({
   displayTermsCheckbox,
   onSubmit,
   loading,
+  captchaLoading,
 }: PasswordSignUpFormProps) {
   const form = useForm({
     resolver: zodResolver(PasswordSignUpSchema),
@@ -116,11 +119,17 @@ export function PasswordSignUpForm({
           data-test={'auth-submit-button'}
           className={'w-full'}
           type="submit"
-          disabled={loading}
+          disabled={loading || captchaLoading}
         >
-          <If
+          <If condition={captchaLoading}>
-            condition={loading}
+            <Trans i18nKey={'auth:verifyingCaptcha'} />
-            fallback={
+          </If>
+
+          <If condition={loading && !captchaLoading}>
+            <Trans i18nKey={'auth:signingUp'} />
+          </If>
+
+          <If condition={!loading && !captchaLoading}>
             <>
               <Trans i18nKey={'auth:signUpWithEmail'} />
 
@@ -130,9 +139,6 @@ export function PasswordSignUpForm({
                 }
               />
             </>
-            }
-          >
-            <Trans i18nKey={'auth:signingUp'} />
           </If>
         </Button>
       </form>

packages/features/auth/src/components/resend-auth-link-form.tsx

@@ -15,6 +15,7 @@ import {
   FormItem,
   FormMessage,
 } from '@kit/ui/form';
+import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
 import { useCaptcha } from '../captcha/client';
@@ -26,6 +27,7 @@ export function ResendAuthLinkForm(props: {
 }) {
   const captcha = useCaptcha({ siteKey: props.captchaSiteKey });
   const resendLink = useResendLink(captcha.token);
+  const captchaLoading = !captcha.isReady;
 
   const form = useForm({
     resolver: zodResolver(z.object({ email: z.string().email() })),
@@ -83,7 +85,15 @@ export function ResendAuthLinkForm(props: {
           }}
         />
 
-        <Button disabled={resendLink.isPending}>
+        <Button disabled={resendLink.isPending || captchaLoading}>
+          <If condition={captchaLoading}>
+            <Trans i18nKey={'auth:verifyingCaptcha'} />
+          </If>
+
+          <If condition={resendLink.isPending && !captchaLoading}>
+            <Trans i18nKey={'auth:resendingLink'} />
+          </If>
+
           <Trans i18nKey={'auth:resendLink'} defaults={'Resend Link'} />
         </Button>
       </form>