chore: bump version to 2.20.2 in package.json and update captcha integration across auth components (#405)

- Incremented application version from 2.20.1 to 2.20.2 in package.json.
- Added captchaSiteKey prop to SignUpPage for enhanced security.
- Refactored captcha field rendering in various authentication components to ensure consistent placement and functionality.

apps/web/app/auth/sign-up/page.tsx

@@ -40,6 +40,7 @@ async function SignUpPage() {
         providers={authConfig.providers}
         displayTermsCheckbox={authConfig.displayTermsCheckbox}
         paths={paths}
+        captchaSiteKey={authConfig.captchaTokenSiteKey}
       />
 
       <div className={'flex justify-center'}>

package.json

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

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

@@ -209,8 +209,6 @@ function OtpEmailForm({
       >
         <AuthErrorAlert error={signInMutation.error} />
 
-        {captcha.field}
-
         <FormField
           name="email"
           render={({ field }) => (
@@ -239,6 +237,8 @@ function OtpEmailForm({
           )}
         </Button>
       </form>
+
+      {captcha.field}
     </Form>
   );
 }

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

@@ -79,8 +79,6 @@ export function PasswordResetRequestContainer(params: {
             <div className={'flex flex-col gap-y-4'}>
               <AuthErrorAlert error={error} />
 
-              {captcha.field}
-
               <FormField
                 name={'email'}
                 render={({ field }) => (
@@ -107,6 +105,7 @@ export function PasswordResetRequestContainer(params: {
                 <Trans i18nKey={'auth:passwordResetLabel'} />
               </Button>
             </div>
+            {captcha.field}
           </form>
         </Form>
       </If>

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

@@ -54,13 +54,15 @@ export function PasswordSignInContainer({
     <>
       <AuthErrorAlert error={signInMutation.error} />
 
-      {captcha.field}
+      <div>
+        <PasswordSignInForm
+          onSubmit={onSubmit}
+          loading={isLoading}
+          redirecting={isRedirecting}
+        />
 
-      <PasswordSignInForm
-        onSubmit={onSubmit}
-        loading={isLoading}
-        redirecting={isRedirecting}
-      />
+        {captcha.field}
+      </div>
     </>
   );
 }

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

@@ -51,14 +51,16 @@ export function EmailPasswordSignUpContainer({
       <If condition={!showVerifyEmailAlert}>
         <AuthErrorAlert error={error} />
 
-        {captcha.field}
+        <div>
+          <PasswordSignUpForm
+            onSubmit={onSignupRequested}
+            loading={loading}
+            defaultValues={defaultValues}
+            displayTermsCheckbox={displayTermsCheckbox}
+          />
 
-        <PasswordSignUpForm
-          onSubmit={onSignupRequested}
-          loading={loading}
-          defaultValues={defaultValues}
-          displayTermsCheckbox={displayTermsCheckbox}
-        />
+          {captcha.field}
+        </div>
       </If>
     </>
   );

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

@@ -68,8 +68,6 @@ export function ResendAuthLinkForm(props: {
           return promise;
         })}
       >
-        {captcha.field}
-
         <FormField
           name={'email'}
           render={({ field }) => {
@@ -89,6 +87,8 @@ export function ResendAuthLinkForm(props: {
           <Trans i18nKey={'auth:resendLink'} defaults={'Resend Link'} />
         </Button>
       </form>
+
+      {captcha.field}
     </Form>
   );
 }

packages/ui/src/makerkit/version-updater.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { useQuery } from '@tanstack/react-query';
 import { RocketIcon } from 'lucide-react';
@@ -38,11 +38,12 @@ export function VersionUpdater(props: { intervalTimeInSecond?: number }) {
   const [dismissed, setDismissed] = useState(false);
   const [showDialog, setShowDialog] = useState<boolean>(false);
 
-  if (!data?.didChange || dismissed) {
-    return null;
-  } else {
-    setShowDialog(data?.didChange ?? false);
-  }
+  useEffect(() => {
+    if (data?.didChange && !dismissed) {
+      // eslint-disable-next-line
+      setShowDialog(data?.didChange ?? false);
+    }
+  }, [data?.didChange, dismissed]);
 
   return (
     <AlertDialog open={showDialog} onOpenChange={setShowDialog}>