From 01c116045977e1e15748c8adbfd466fd49027996 Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Fri, 20 Feb 2026 09:40:46 -0600
Subject: [PATCH 01/13] added recaptcha v3

---
 .../register/_actions/register-customer.ts    | 10 +++-
 .../(default)/(auth)/register/page.tsx        |  7 +++
 core/app/[locale]/(default)/layout.tsx        |  8 ++-
 .../product/[slug]/_actions/submit-review.ts  | 10 +++-
 .../product/[slug]/_components/reviews.tsx    |  7 +++
 .../contact/_actions/submit-contact-form.ts   | 10 +++-
 .../(default)/webpages/[id]/contact/page.tsx  |  7 +++
 core/components/recaptcha-provider/index.tsx  | 42 ++++++++++++++++
 core/lib/recaptcha.ts                         | 50 +++++++++++++++++++
 core/package.json                             |  1 +
 core/vibes/soul/form/dynamic-form/index.tsx   | 45 +++++++++++++++--
 .../sections/dynamic-form-section/index.tsx   |  3 ++
 core/vibes/soul/sections/reviews/index.tsx    |  7 +++
 .../soul/sections/reviews/review-form.tsx     | 44 ++++++++++++++--
 14 files changed, 235 insertions(+), 16 deletions(-)
 create mode 100644 core/components/recaptcha-provider/index.tsx
 create mode 100644 core/lib/recaptcha.ts

diff --git a/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts b/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
index cd7259ab16..e0df4d6c6e 100644
--- a/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
+++ b/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
@@ -14,13 +14,14 @@ import { graphql, VariablesOf } from '~/client/graphql';
 import { FieldNameToFieldId } from '~/data-transformers/form-field-transformer/utils';
 import { redirect } from '~/i18n/routing';
 import { getCartId } from '~/lib/cart';
+import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
 
 import { ADDRESS_FIELDS_NAME_PREFIX, CUSTOMER_FIELDS_NAME_PREFIX } from './prefixes';
 
 const RegisterCustomerMutation = graphql(`
-  mutation RegisterCustomerMutation($input: RegisterCustomerInput!) {
+  mutation RegisterCustomerMutation($input: RegisterCustomerInput!, $reCaptchaV2: ReCaptchaV2Input) {
     customer {
-      registerCustomer(input: $input) {
+      registerCustomer(input: $input, reCaptchaV2: $reCaptchaV2) {
         customer {
           firstName
           lastName
@@ -358,10 +359,15 @@ export async function registerCustomer<F extends Field>(
 
   try {
     const input = parseRegisterCustomerInput(submission.value, fields);
+    const recaptchaToken = formData.get(RECAPTCHA_TOKEN_FORM_KEY);
     const response = await client.fetch({
       document: RegisterCustomerMutation,
       variables: {
         input,
+        reCaptchaV2:
+          typeof recaptchaToken === 'string' && recaptchaToken
+            ? { token: recaptchaToken }
+            : undefined,
       },
       fetchOptions: { cache: 'no-store' },
     });
diff --git a/core/app/[locale]/(default)/(auth)/register/page.tsx b/core/app/[locale]/(default)/(auth)/register/page.tsx
index bf8ebf1357..4591c6a851 100644
--- a/core/app/[locale]/(default)/(auth)/register/page.tsx
+++ b/core/app/[locale]/(default)/(auth)/register/page.tsx
@@ -8,6 +8,7 @@ import {
   formFieldTransformer,
   injectCountryCodeOptions,
 } from '~/data-transformers/form-field-transformer';
+import { getReCaptchaSettings } from '~/lib/recaptcha';
 import {
   CUSTOMER_FIELDS_TO_EXCLUDE,
   REGISTER_CUSTOMER_FORM_LAYOUT,
@@ -63,6 +64,11 @@ export default async function Register({ params }: Props) {
   const { addressFields, customerFields, countries, passwordComplexitySettings } =
     registerCustomerData;
 
+  const reCaptchaSettings = await getReCaptchaSettings();
+  const recaptchaEnabled =
+    (reCaptchaSettings?.isEnabledOnStorefront === true && Boolean(reCaptchaSettings?.siteKey)) ??
+    false;
+
   const fields = transformFieldsToLayout(
     [
       ...addressFields.map((field) => {
@@ -109,6 +115,7 @@ export default async function Register({ params }: Props) {
   return (
     <DynamicFormSection
       action={registerCustomer}
+      recaptchaEnabled={recaptchaEnabled}
       errorTranslations={{
         firstName: {
           invalid_type: t('FieldErrors.firstNameRequired'),
diff --git a/core/app/[locale]/(default)/layout.tsx b/core/app/[locale]/(default)/layout.tsx
index 95522f608e..52f9fbcdc5 100644
--- a/core/app/[locale]/(default)/layout.tsx
+++ b/core/app/[locale]/(default)/layout.tsx
@@ -3,6 +3,8 @@ import { PropsWithChildren } from 'react';
 
 import { Footer } from '~/components/footer';
 import { Header } from '~/components/header';
+import { ReCaptchaProvider } from '~/components/recaptcha-provider';
+import { getReCaptchaSettings } from '~/lib/recaptcha';
 
 interface Props extends PropsWithChildren {
   params: Promise<{ locale: string }>;
@@ -13,13 +15,15 @@ export default async function DefaultLayout({ params, children }: Props) {
 
   setRequestLocale(locale);
 
+  const reCaptchaSettings = await getReCaptchaSettings();
+
   return (
-    <>
+    <ReCaptchaProvider settings={reCaptchaSettings}>
       <Header />
 
       <main>{children}</main>
 
       <Footer />
-    </>
+    </ReCaptchaProvider>
   );
 }
diff --git a/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts b/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
index e37c9aa5d9..8077317fdd 100644
--- a/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
+++ b/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
@@ -9,11 +9,12 @@ import { schema } from '@/vibes/soul/sections/reviews/schema';
 import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
+import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
 
 const AddProductReviewMutation = graphql(`
-  mutation AddProductReviewMutation($input: AddProductReviewInput!) {
+  mutation AddProductReviewMutation($input: AddProductReviewInput!, $reCaptchaV2: ReCaptchaV2Input) {
     catalog {
-      addProductReview(input: $input) {
+      addProductReview(input: $input, reCaptchaV2: $reCaptchaV2) {
         __typename
         errors {
           __typename
@@ -39,6 +40,7 @@ export async function submitReview(
   }
 
   const { productEntityId, ...input } = submission.value;
+  const recaptchaToken = payload.get(RECAPTCHA_TOKEN_FORM_KEY);
 
   try {
     const response = await client.fetch({
@@ -52,6 +54,10 @@ export async function submitReview(
           },
           productEntityId,
         },
+        reCaptchaV2:
+          typeof recaptchaToken === 'string' && recaptchaToken
+            ? { token: recaptchaToken }
+            : undefined,
       },
     });
 
diff --git a/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx b/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
index 6429de74be..e3396de8ac 100644
--- a/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
+++ b/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
@@ -11,6 +11,7 @@ import { PaginationFragment } from '~/client/fragments/pagination';
 import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
 import { defaultPageInfo, pageInfoTransformer } from '~/data-transformers/page-info-transformer';
+import { getReCaptchaSettings } from '~/lib/recaptcha';
 
 import { submitReview } from '../_actions/submit-review';
 import { getStreamableProduct } from '../page-data';
@@ -171,6 +172,11 @@ export const Reviews = async ({
     return product?.reviewSummary.numberOfReviews ?? 0;
   });
 
+  const reCaptchaSettings = await getReCaptchaSettings();
+  const recaptchaEnabled =
+    (reCaptchaSettings?.isEnabledOnStorefront === true && Boolean(reCaptchaSettings?.siteKey)) ??
+    false;
+
   return (
     <>
       <ReviewsSection
@@ -189,6 +195,7 @@ export const Reviews = async ({
         paginationInfo={streamablePaginationInfo}
         previousLabel={t('previous')}
         productId={productId}
+        recaptchaEnabled={recaptchaEnabled}
         reviews={streamableReviews}
         reviewsLabel={t('title')}
         streamableImages={streamableImages}
diff --git a/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts b/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts
index fb3bb80777..7a9ff51823 100644
--- a/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts
+++ b/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts
@@ -11,6 +11,7 @@ import { Field, schema } from '@/vibes/soul/form/dynamic-form/schema';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { redirect } from '~/i18n/routing';
+import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
 
 const inputSchema = z.object({
   data: z.object({
@@ -26,8 +27,8 @@ const inputSchema = z.object({
 });
 
 const SubmitContactUsMutation = graphql(`
-  mutation SubmitContactUsMutation($input: SubmitContactUsInput!) {
-    submitContactUs(input: $input) {
+  mutation SubmitContactUsMutation($input: SubmitContactUsInput!, $reCaptchaV2: ReCaptchaV2Input) {
+    submitContactUs(input: $input, reCaptchaV2: $reCaptchaV2) {
       __typename
       errors {
         __typename
@@ -76,10 +77,15 @@ export async function submitContactForm<F extends Field>(
 
   try {
     const input = parseContactFormInput(submission.value);
+    const recaptchaToken = formData.get(RECAPTCHA_TOKEN_FORM_KEY);
     const response = await client.fetch({
       document: SubmitContactUsMutation,
       variables: {
         input,
+        reCaptchaV2:
+          typeof recaptchaToken === 'string' && recaptchaToken
+            ? { token: recaptchaToken }
+            : undefined,
       },
       fetchOptions: { cache: 'no-store' },
     });
diff --git a/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx b/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx
index b8d1f2e759..bf9a80670a 100644
--- a/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx
+++ b/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx
@@ -12,6 +12,7 @@ import {
   breadcrumbsTransformer,
   truncateBreadcrumbs,
 } from '~/data-transformers/breadcrumbs-transformer';
+import { getReCaptchaSettings } from '~/lib/recaptcha';
 import { getMetadataAlternates } from '~/lib/seo/canonical';
 
 import { WebPage, WebPageContent } from '../_components/web-page';
@@ -195,6 +196,11 @@ export default async function ContactPage({ params, searchParams }: Props) {
     );
   }
 
+  const reCaptchaSettings = await getReCaptchaSettings();
+  const recaptchaEnabled =
+    (reCaptchaSettings?.isEnabledOnStorefront === true && Boolean(reCaptchaSettings?.siteKey)) ??
+    false;
+
   return (
     <WebPageContent
       breadcrumbs={Streamable.from(() => getWebPageBreadcrumbs(id))}
@@ -204,6 +210,7 @@ export default async function ContactPage({ params, searchParams }: Props) {
         <DynamicForm
           action={submitContactForm}
           fields={await getContactFields(id)}
+          recaptchaEnabled={recaptchaEnabled}
           submitLabel={t('cta')}
         />
       </div>
diff --git a/core/components/recaptcha-provider/index.tsx b/core/components/recaptcha-provider/index.tsx
new file mode 100644
index 0000000000..b10bd9d3a4
--- /dev/null
+++ b/core/components/recaptcha-provider/index.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
+import { createContext, useContext, type PropsWithChildren } from 'react';
+
+import type { ReCaptchaSettings } from '~/lib/recaptcha';
+
+const ReCaptchaContext = createContext<ReCaptchaSettings | null>(null);
+
+export function useReCaptchaSettings(): ReCaptchaSettings | null {
+  return useContext(ReCaptchaContext);
+}
+
+/** Whether reCAPTCHA is enabled on the storefront (signup, contact, reviews). */
+export function useReCaptchaEnabledOnStorefront(): boolean {
+  const settings = useReCaptchaSettings();
+  return settings?.isEnabledOnStorefront === true && Boolean(settings?.siteKey);
+}
+
+interface ReCaptchaProviderProps extends PropsWithChildren {
+  settings: ReCaptchaSettings | null;
+}
+
+/**
+ * Wraps children with reCAPTCHA v3 provider when a site key is configured,
+ * so useGoogleReCaptcha() is available. Token is only used when isEnabledOnStorefront is true.
+ */
+export function ReCaptchaProvider({ settings, children }: ReCaptchaProviderProps) {
+  const hasProvider = Boolean(settings?.siteKey);
+
+  return (
+    <ReCaptchaContext.Provider value={settings}>
+      {hasProvider ? (
+        <GoogleReCaptchaProvider reCaptchaKey={settings.siteKey}>
+          {children}
+        </GoogleReCaptchaProvider>
+      ) : (
+        children
+      )}
+    </ReCaptchaContext.Provider>
+  );
+}
diff --git a/core/lib/recaptcha.ts b/core/lib/recaptcha.ts
new file mode 100644
index 0000000000..a448fc9fb7
--- /dev/null
+++ b/core/lib/recaptcha.ts
@@ -0,0 +1,50 @@
+import { cache } from 'react';
+
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+import { revalidate } from '~/client/revalidate-target';
+
+export const ReCaptchaSettingsQuery = graphql(`
+  query ReCaptchaSettingsQuery {
+    site {
+      settings {
+        reCaptcha {
+          failedLoginLockoutDurationSeconds
+          isEnabledOnCheckout
+          isEnabledOnStorefront
+          siteKey
+        }
+      }
+    }
+  }
+`);
+
+export type ReCaptchaSettings = {
+  failedLoginLockoutDurationSeconds: number | null;
+  isEnabledOnCheckout: boolean;
+  isEnabledOnStorefront: boolean;
+  siteKey: string;
+};
+
+export const getReCaptchaSettings = cache(async (): Promise<ReCaptchaSettings | null> => {
+  const { data } = await client.fetch({
+    document: ReCaptchaSettingsQuery,
+    fetchOptions: { next: { revalidate } },
+  });
+
+  const reCaptcha = data.site.settings?.reCaptcha;
+
+  if (!reCaptcha?.siteKey) {
+    return null;
+  }
+
+  return {
+    failedLoginLockoutDurationSeconds: reCaptcha.failedLoginLockoutDurationSeconds ?? null,
+    isEnabledOnCheckout: reCaptcha.isEnabledOnCheckout,
+    isEnabledOnStorefront: reCaptcha.isEnabledOnStorefront,
+    siteKey: reCaptcha.siteKey,
+  };
+});
+
+/** FormData key used to pass the reCAPTCHA token from client to server actions */
+export const RECAPTCHA_TOKEN_FORM_KEY = 'recaptchaToken';
diff --git a/core/package.json b/core/package.json
index 30f5af80e5..a9ddf98a48 100644
--- a/core/package.json
+++ b/core/package.json
@@ -65,6 +65,7 @@
     "react": "19.1.5",
     "react-day-picker": "^9.7.0",
     "react-dom": "19.1.5",
+    "react-google-recaptcha-v3": "^1.10.1",
     "react-headroom": "^3.2.1",
     "schema-dts": "^1.1.5",
     "server-only": "^0.0.1",
diff --git a/core/vibes/soul/form/dynamic-form/index.tsx b/core/vibes/soul/form/dynamic-form/index.tsx
index 53c21b1d57..55d0e30928 100644
--- a/core/vibes/soul/form/dynamic-form/index.tsx
+++ b/core/vibes/soul/form/dynamic-form/index.tsx
@@ -21,8 +21,11 @@ import {
   useEffect,
 } from 'react';
 import { useFormStatus } from 'react-dom';
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
 import { z } from 'zod';
 
+import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
+
 import { ButtonRadioGroup } from '@/vibes/soul/form/button-radio-group';
 import { CardRadioGroup } from '@/vibes/soul/form/card-radio-group';
 import { Checkbox } from '@/vibes/soul/form/checkbox';
@@ -77,9 +80,31 @@ export interface DynamicFormProps<F extends Field> {
   onSuccess?: (lastResult: SubmissionResult, successMessage: ReactNode) => void;
   passwordComplexity?: PasswordComplexitySettings | null;
   errorTranslations?: FormErrorTranslationMap;
+  /** When true, a reCAPTCHA v3 token is obtained and sent with the form (requires ReCaptchaProvider with storefront enabled). */
+  recaptchaEnabled?: boolean;
+}
+
+export function DynamicForm<F extends Field>(props: DynamicFormProps<F>) {
+  const { recaptchaEnabled = false } = props;
+
+  if (recaptchaEnabled) {
+    return <DynamicFormWithRecaptcha {...props} />;
+  }
+
+  return <DynamicFormInner {...props} />;
 }
 
-export function DynamicForm<F extends Field>({
+function DynamicFormWithRecaptcha<F extends Field>(props: DynamicFormProps<F>) {
+  const { executeRecaptcha } = useGoogleReCaptcha();
+  return (
+    <DynamicFormInner
+      {...props}
+      recaptchaExecute={executeRecaptcha ?? undefined}
+    />
+  );
+}
+
+function DynamicFormInner<F extends Field>({
   action,
   fields,
   buttonSize = 'medium',
@@ -92,7 +117,8 @@ export function DynamicForm<F extends Field>({
   onSuccess,
   passwordComplexity,
   errorTranslations,
-}: DynamicFormProps<F>) {
+  recaptchaExecute,
+}: DynamicFormProps<F> & { recaptchaExecute?: (action: string) => Promise<string> }) {
   const t = useTranslations('Form');
   // Remove options from fields before passing to action to reduce payload size
   // Options are only needed for rendering, not for processing form submissions
@@ -145,11 +171,22 @@ export function DynamicForm<F extends Field>({
     defaultValue,
     shouldValidate: 'onSubmit',
     shouldRevalidate: 'onInput',
-    onSubmit(event, { formData }) {
+    async onSubmit(event, { formData }) {
       event.preventDefault();
 
+      let payload: FormData = formData;
+      if (recaptchaExecute) {
+        try {
+          const token = await recaptchaExecute('submit');
+          payload = new FormData(event.currentTarget);
+          payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
+        } catch {
+          // Proceed without token
+        }
+      }
+
       startTransition(() => {
-        formAction(formData);
+        formAction(payload);
       });
     },
   });
diff --git a/core/vibes/soul/sections/dynamic-form-section/index.tsx b/core/vibes/soul/sections/dynamic-form-section/index.tsx
index 3de3df6b35..775de246b9 100644
--- a/core/vibes/soul/sections/dynamic-form-section/index.tsx
+++ b/core/vibes/soul/sections/dynamic-form-section/index.tsx
@@ -18,6 +18,7 @@ interface Props<F extends Field> {
   className?: string;
   passwordComplexity?: PasswordComplexitySettings | null;
   errorTranslations?: FormErrorTranslationMap;
+  recaptchaEnabled?: boolean;
 }
 
 export function DynamicFormSection<F extends Field>({
@@ -29,6 +30,7 @@ export function DynamicFormSection<F extends Field>({
   action,
   passwordComplexity,
   errorTranslations,
+  recaptchaEnabled = false,
 }: Props<F>) {
   return (
     <SectionLayout className={clsx('mx-auto w-full max-w-4xl', className)} containerSize="lg">
@@ -47,6 +49,7 @@ export function DynamicFormSection<F extends Field>({
         errorTranslations={errorTranslations}
         fields={fields}
         passwordComplexity={passwordComplexity}
+        recaptchaEnabled={recaptchaEnabled}
         submitLabel={submitLabel}
       />
     </SectionLayout>
diff --git a/core/vibes/soul/sections/reviews/index.tsx b/core/vibes/soul/sections/reviews/index.tsx
index b27c75f97d..ba95df9856 100644
--- a/core/vibes/soul/sections/reviews/index.tsx
+++ b/core/vibes/soul/sections/reviews/index.tsx
@@ -40,6 +40,7 @@ interface Props {
   }>;
   streamableProduct: Streamable<{ name: string }>;
   streamableUser: Streamable<{ email: string; name: string }>;
+  recaptchaEnabled?: boolean;
 }
 
 export function Reviews({
@@ -65,6 +66,7 @@ export function Reviews({
   streamableProduct,
   streamableImages,
   streamableUser,
+  recaptchaEnabled = false,
 }: Readonly<Props>) {
   return (
     <Stream fallback={<ReviewsSkeleton reviewsLabel={reviewsLabel} />} value={streamableReviews}>
@@ -84,6 +86,7 @@ export function Reviews({
               formTitleLabel={formTitleLabel}
               message={emptyStateMessage}
               productId={productId}
+              recaptchaEnabled={recaptchaEnabled}
               reviewsLabel={reviewsLabel}
               streamableImages={streamableImages}
               streamableProduct={streamableProduct}
@@ -137,6 +140,7 @@ export function Reviews({
                   formRatingLabel={formRatingLabel}
                   formReviewLabel={formReviewLabel}
                   formSubmitLabel={formSubmitLabel}
+                  recaptchaEnabled={recaptchaEnabled}
                   formTitleLabel={formTitleLabel}
                   productId={productId}
                   streamableImages={streamableImages}
@@ -201,6 +205,7 @@ export function ReviewsEmptyState({
   streamableProduct,
   streamableImages,
   streamableUser,
+  recaptchaEnabled = false,
 }: {
   message?: string;
   reviewsLabel?: string;
@@ -221,6 +226,7 @@ export function ReviewsEmptyState({
   }>;
   streamableProduct: Streamable<{ name: string }>;
   streamableUser: Streamable<{ email: string; name: string }>;
+  recaptchaEnabled?: boolean;
 }) {
   return (
     <StickySidebarLayout
@@ -250,6 +256,7 @@ export function ReviewsEmptyState({
           formSubmitLabel={formSubmitLabel}
           formTitleLabel={formTitleLabel}
           productId={productId}
+          recaptchaEnabled={recaptchaEnabled}
           streamableImages={streamableImages}
           streamableProduct={streamableProduct}
           streamableUser={streamableUser}
diff --git a/core/vibes/soul/sections/reviews/review-form.tsx b/core/vibes/soul/sections/reviews/review-form.tsx
index 49e263c845..4442034d1b 100644
--- a/core/vibes/soul/sections/reviews/review-form.tsx
+++ b/core/vibes/soul/sections/reviews/review-form.tsx
@@ -5,6 +5,7 @@ import { getZodConstraint } from '@conform-to/zod';
 import { useTranslations } from 'next-intl';
 import { startTransition, useActionState, useEffect, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
 
 import { FormStatus } from '@/vibes/soul/form/form-status';
 import { Input } from '@/vibes/soul/form/input';
@@ -16,6 +17,7 @@ import { Modal } from '@/vibes/soul/primitives/modal';
 import { toast } from '@/vibes/soul/primitives/toaster';
 import { Image } from '~/components/image';
 import { parseWithZodTranslatedErrors } from '~/i18n/utils';
+import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
 
 import { reviewFormErrorTranslations, schema } from './schema';
 
@@ -44,9 +46,31 @@ interface Props {
   }>;
   streamableProduct: Streamable<{ name: string }>;
   streamableUser: Streamable<{ email: string; name: string }>;
+  /** When true, a reCAPTCHA v3 token is obtained and sent with the form. */
+  recaptchaEnabled?: boolean;
 }
 
-export const ReviewForm = ({
+export const ReviewForm = (props: Props) => {
+  const { recaptchaEnabled = false } = props;
+
+  if (recaptchaEnabled) {
+    return <ReviewFormWithRecaptcha {...props} />;
+  }
+
+  return <ReviewFormContent {...props} />;
+};
+
+function ReviewFormWithRecaptcha(props: Props) {
+  const { executeRecaptcha } = useGoogleReCaptcha();
+  return (
+    <ReviewFormContent
+      {...props}
+      recaptchaExecute={executeRecaptcha ?? undefined}
+    />
+  );
+}
+
+function ReviewFormContent({
   productId,
   action,
   trigger,
@@ -61,7 +85,8 @@ export const ReviewForm = ({
   streamableProduct,
   streamableImages,
   streamableUser,
-}: Props) => {
+  recaptchaExecute,
+}: Props & { recaptchaExecute?: (action: string) => Promise<string> }) {
   const t = useTranslations('Product.Reviews.Form');
   const errorTranslations = reviewFormErrorTranslations(t);
   const [isOpen, setIsOpen] = useState(false);
@@ -84,11 +109,22 @@ export const ReviewForm = ({
     onValidate({ formData }) {
       return parseWithZodTranslatedErrors(formData, { schema, errorTranslations });
     },
-    onSubmit(event, { formData }) {
+    async onSubmit(event, { formData }) {
       event.preventDefault();
 
+      let payload: FormData = formData;
+      if (recaptchaExecute) {
+        try {
+          const token = await recaptchaExecute('submit');
+          payload = new FormData(event.currentTarget);
+          payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
+        } catch {
+          // Proceed without token
+        }
+      }
+
       startTransition(() => {
-        formAction(formData);
+        formAction(payload);
       });
     },
   });

From fe3452950a2980e65dfa60993c748740aeb4fa7b Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Fri, 20 Feb 2026 13:01:18 -0600
Subject: [PATCH 02/13] update recaptcha package and make visible on forms

---
 .../(default)/(auth)/register/page.tsx        |  7 ---
 .../product/[slug]/_components/reviews.tsx    |  7 ---
 .../(default)/webpages/[id]/contact/page.tsx  |  7 ---
 core/components/recaptcha-provider/index.tsx  | 27 +++------
 core/lib/recaptcha.ts                         | 16 ++----
 core/lib/recaptcha/constants.ts               |  9 +++
 core/package.json                             |  2 +-
 core/vibes/soul/form/dynamic-form/index.tsx   | 42 ++++++--------
 .../sections/dynamic-form-section/index.tsx   |  3 -
 core/vibes/soul/sections/reviews/index.tsx    |  7 ---
 .../soul/sections/reviews/review-form.tsx     | 54 +++++++-----------
 pnpm-lock.yaml                                | 55 ++++++++++++++-----
 12 files changed, 103 insertions(+), 133 deletions(-)
 create mode 100644 core/lib/recaptcha/constants.ts

diff --git a/core/app/[locale]/(default)/(auth)/register/page.tsx b/core/app/[locale]/(default)/(auth)/register/page.tsx
index 4591c6a851..bf8ebf1357 100644
--- a/core/app/[locale]/(default)/(auth)/register/page.tsx
+++ b/core/app/[locale]/(default)/(auth)/register/page.tsx
@@ -8,7 +8,6 @@ import {
   formFieldTransformer,
   injectCountryCodeOptions,
 } from '~/data-transformers/form-field-transformer';
-import { getReCaptchaSettings } from '~/lib/recaptcha';
 import {
   CUSTOMER_FIELDS_TO_EXCLUDE,
   REGISTER_CUSTOMER_FORM_LAYOUT,
@@ -64,11 +63,6 @@ export default async function Register({ params }: Props) {
   const { addressFields, customerFields, countries, passwordComplexitySettings } =
     registerCustomerData;
 
-  const reCaptchaSettings = await getReCaptchaSettings();
-  const recaptchaEnabled =
-    (reCaptchaSettings?.isEnabledOnStorefront === true && Boolean(reCaptchaSettings?.siteKey)) ??
-    false;
-
   const fields = transformFieldsToLayout(
     [
       ...addressFields.map((field) => {
@@ -115,7 +109,6 @@ export default async function Register({ params }: Props) {
   return (
     <DynamicFormSection
       action={registerCustomer}
-      recaptchaEnabled={recaptchaEnabled}
       errorTranslations={{
         firstName: {
           invalid_type: t('FieldErrors.firstNameRequired'),
diff --git a/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx b/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
index e3396de8ac..6429de74be 100644
--- a/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
+++ b/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
@@ -11,7 +11,6 @@ import { PaginationFragment } from '~/client/fragments/pagination';
 import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
 import { defaultPageInfo, pageInfoTransformer } from '~/data-transformers/page-info-transformer';
-import { getReCaptchaSettings } from '~/lib/recaptcha';
 
 import { submitReview } from '../_actions/submit-review';
 import { getStreamableProduct } from '../page-data';
@@ -172,11 +171,6 @@ export const Reviews = async ({
     return product?.reviewSummary.numberOfReviews ?? 0;
   });
 
-  const reCaptchaSettings = await getReCaptchaSettings();
-  const recaptchaEnabled =
-    (reCaptchaSettings?.isEnabledOnStorefront === true && Boolean(reCaptchaSettings?.siteKey)) ??
-    false;
-
   return (
     <>
       <ReviewsSection
@@ -195,7 +189,6 @@ export const Reviews = async ({
         paginationInfo={streamablePaginationInfo}
         previousLabel={t('previous')}
         productId={productId}
-        recaptchaEnabled={recaptchaEnabled}
         reviews={streamableReviews}
         reviewsLabel={t('title')}
         streamableImages={streamableImages}
diff --git a/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx b/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx
index bf9a80670a..b8d1f2e759 100644
--- a/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx
+++ b/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx
@@ -12,7 +12,6 @@ import {
   breadcrumbsTransformer,
   truncateBreadcrumbs,
 } from '~/data-transformers/breadcrumbs-transformer';
-import { getReCaptchaSettings } from '~/lib/recaptcha';
 import { getMetadataAlternates } from '~/lib/seo/canonical';
 
 import { WebPage, WebPageContent } from '../_components/web-page';
@@ -196,11 +195,6 @@ export default async function ContactPage({ params, searchParams }: Props) {
     );
   }
 
-  const reCaptchaSettings = await getReCaptchaSettings();
-  const recaptchaEnabled =
-    (reCaptchaSettings?.isEnabledOnStorefront === true && Boolean(reCaptchaSettings?.siteKey)) ??
-    false;
-
   return (
     <WebPageContent
       breadcrumbs={Streamable.from(() => getWebPageBreadcrumbs(id))}
@@ -210,7 +204,6 @@ export default async function ContactPage({ params, searchParams }: Props) {
         <DynamicForm
           action={submitContactForm}
           fields={await getContactFields(id)}
-          recaptchaEnabled={recaptchaEnabled}
           submitLabel={t('cta')}
         />
       </div>
diff --git a/core/components/recaptcha-provider/index.tsx b/core/components/recaptcha-provider/index.tsx
index b10bd9d3a4..0b85396491 100644
--- a/core/components/recaptcha-provider/index.tsx
+++ b/core/components/recaptcha-provider/index.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
 import { createContext, useContext, type PropsWithChildren } from 'react';
 
-import type { ReCaptchaSettings } from '~/lib/recaptcha';
+import type { ReCaptchaSettings } from '~/lib/recaptcha/constants';
 
 const ReCaptchaContext = createContext<ReCaptchaSettings | null>(null);
 
@@ -11,10 +10,12 @@ export function useReCaptchaSettings(): ReCaptchaSettings | null {
   return useContext(ReCaptchaContext);
 }
 
-/** Whether reCAPTCHA is enabled on the storefront (signup, contact, reviews). */
-export function useReCaptchaEnabledOnStorefront(): boolean {
+/** Site key when reCAPTCHA is enabled on the storefront; undefined otherwise. */
+export function useReCaptchaSiteKey(): string | undefined {
   const settings = useReCaptchaSettings();
-  return settings?.isEnabledOnStorefront === true && Boolean(settings?.siteKey);
+  return settings?.isEnabledOnStorefront === true && settings?.siteKey
+    ? settings.siteKey
+    : undefined;
 }
 
 interface ReCaptchaProviderProps extends PropsWithChildren {
@@ -22,21 +23,11 @@ interface ReCaptchaProviderProps extends PropsWithChildren {
 }
 
 /**
- * Wraps children with reCAPTCHA v3 provider when a site key is configured,
- * so useGoogleReCaptcha() is available. Token is only used when isEnabledOnStorefront is true.
+ * Provides reCAPTCHA settings (e.g. siteKey) via context.
+ * Forms use react-google-recaptcha (v2) and receive siteKey via props from server.
  */
 export function ReCaptchaProvider({ settings, children }: ReCaptchaProviderProps) {
-  const hasProvider = Boolean(settings?.siteKey);
-
   return (
-    <ReCaptchaContext.Provider value={settings}>
-      {hasProvider ? (
-        <GoogleReCaptchaProvider reCaptchaKey={settings.siteKey}>
-          {children}
-        </GoogleReCaptchaProvider>
-      ) : (
-        children
-      )}
-    </ReCaptchaContext.Provider>
+    <ReCaptchaContext.Provider value={settings}>{children}</ReCaptchaContext.Provider>
   );
 }
diff --git a/core/lib/recaptcha.ts b/core/lib/recaptcha.ts
index a448fc9fb7..32e19c2762 100644
--- a/core/lib/recaptcha.ts
+++ b/core/lib/recaptcha.ts
@@ -1,8 +1,14 @@
+import 'server-only';
+
 import { cache } from 'react';
 
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
+import type { ReCaptchaSettings } from './recaptcha/constants';
+
+export { RECAPTCHA_TOKEN_FORM_KEY } from './recaptcha/constants';
+export type { ReCaptchaSettings } from './recaptcha/constants';
 
 export const ReCaptchaSettingsQuery = graphql(`
   query ReCaptchaSettingsQuery {
@@ -19,13 +25,6 @@ export const ReCaptchaSettingsQuery = graphql(`
   }
 `);
 
-export type ReCaptchaSettings = {
-  failedLoginLockoutDurationSeconds: number | null;
-  isEnabledOnCheckout: boolean;
-  isEnabledOnStorefront: boolean;
-  siteKey: string;
-};
-
 export const getReCaptchaSettings = cache(async (): Promise<ReCaptchaSettings | null> => {
   const { data } = await client.fetch({
     document: ReCaptchaSettingsQuery,
@@ -45,6 +44,3 @@ export const getReCaptchaSettings = cache(async (): Promise<ReCaptchaSettings |
     siteKey: reCaptcha.siteKey,
   };
 });
-
-/** FormData key used to pass the reCAPTCHA token from client to server actions */
-export const RECAPTCHA_TOKEN_FORM_KEY = 'recaptchaToken';
diff --git a/core/lib/recaptcha/constants.ts b/core/lib/recaptcha/constants.ts
new file mode 100644
index 0000000000..daf222f3e9
--- /dev/null
+++ b/core/lib/recaptcha/constants.ts
@@ -0,0 +1,9 @@
+export type ReCaptchaSettings = {
+  failedLoginLockoutDurationSeconds: number | null;
+  isEnabledOnCheckout: boolean;
+  isEnabledOnStorefront: boolean;
+  siteKey: string;
+};
+
+/** FormData key used to pass the reCAPTCHA token from client to server actions */
+export const RECAPTCHA_TOKEN_FORM_KEY = 'recaptchaToken';
diff --git a/core/package.json b/core/package.json
index a9ddf98a48..dbb0f61c69 100644
--- a/core/package.json
+++ b/core/package.json
@@ -65,7 +65,7 @@
     "react": "19.1.5",
     "react-day-picker": "^9.7.0",
     "react-dom": "19.1.5",
-    "react-google-recaptcha-v3": "^1.10.1",
+    "react-google-recaptcha": "^3.1.0",
     "react-headroom": "^3.2.1",
     "schema-dts": "^1.1.5",
     "server-only": "^0.0.1",
diff --git a/core/vibes/soul/form/dynamic-form/index.tsx b/core/vibes/soul/form/dynamic-form/index.tsx
index 55d0e30928..7f04332ddc 100644
--- a/core/vibes/soul/form/dynamic-form/index.tsx
+++ b/core/vibes/soul/form/dynamic-form/index.tsx
@@ -20,11 +20,13 @@ import {
   useActionState,
   useEffect,
 } from 'react';
+import { useRef } from 'react';
 import { useFormStatus } from 'react-dom';
-import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
+import ReCAPTCHA from 'react-google-recaptcha';
 import { z } from 'zod';
 
-import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
+import { useReCaptchaSiteKey } from '~/components/recaptcha-provider';
+import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha/constants';
 
 import { ButtonRadioGroup } from '@/vibes/soul/form/button-radio-group';
 import { CardRadioGroup } from '@/vibes/soul/form/card-radio-group';
@@ -80,30 +82,12 @@ export interface DynamicFormProps<F extends Field> {
   onSuccess?: (lastResult: SubmissionResult, successMessage: ReactNode) => void;
   passwordComplexity?: PasswordComplexitySettings | null;
   errorTranslations?: FormErrorTranslationMap;
-  /** When true, a reCAPTCHA v3 token is obtained and sent with the form (requires ReCaptchaProvider with storefront enabled). */
-  recaptchaEnabled?: boolean;
 }
 
 export function DynamicForm<F extends Field>(props: DynamicFormProps<F>) {
-  const { recaptchaEnabled = false } = props;
-
-  if (recaptchaEnabled) {
-    return <DynamicFormWithRecaptcha {...props} />;
-  }
-
   return <DynamicFormInner {...props} />;
 }
 
-function DynamicFormWithRecaptcha<F extends Field>(props: DynamicFormProps<F>) {
-  const { executeRecaptcha } = useGoogleReCaptcha();
-  return (
-    <DynamicFormInner
-      {...props}
-      recaptchaExecute={executeRecaptcha ?? undefined}
-    />
-  );
-}
-
 function DynamicFormInner<F extends Field>({
   action,
   fields,
@@ -117,9 +101,9 @@ function DynamicFormInner<F extends Field>({
   onSuccess,
   passwordComplexity,
   errorTranslations,
-  recaptchaExecute,
-}: DynamicFormProps<F> & { recaptchaExecute?: (action: string) => Promise<string> }) {
+}: DynamicFormProps<F>) {
   const t = useTranslations('Form');
+  const recaptchaSiteKey = useReCaptchaSiteKey();
   // Remove options from fields before passing to action to reduce payload size
   // Options are only needed for rendering, not for processing form submissions
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -130,6 +114,8 @@ function DynamicFormInner<F extends Field>({
     lastResult: null,
   });
 
+  const recaptchaRef = useRef<ReCAPTCHA | null>(null);
+
   const dynamicSchema = schema(fields, passwordComplexity, errorTranslations);
   const defaultValue = fields
     .flatMap((f) => (Array.isArray(f) ? f : [f]))
@@ -175,11 +161,14 @@ function DynamicFormInner<F extends Field>({
       event.preventDefault();
 
       let payload: FormData = formData;
-      if (recaptchaExecute) {
+      if (recaptchaSiteKey && recaptchaRef.current) {
         try {
-          const token = await recaptchaExecute('submit');
-          payload = new FormData(event.currentTarget);
-          payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
+          const token = await recaptchaRef.current.executeAsync();
+          if (token) {
+            payload = new FormData(event.currentTarget);
+            payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
+          }
+          recaptchaRef.current.reset();
         } catch {
           // Proceed without token
         }
@@ -228,6 +217,7 @@ function DynamicFormInner<F extends Field>({
 
             return <DynamicFormField field={field} formField={formField} key={formField.id} />;
           })}
+          {recaptchaSiteKey && <ReCAPTCHA ref={recaptchaRef} sitekey={recaptchaSiteKey} />}
           <div className="flex gap-1 pt-3">
             {onCancel && (
               <Button
diff --git a/core/vibes/soul/sections/dynamic-form-section/index.tsx b/core/vibes/soul/sections/dynamic-form-section/index.tsx
index 775de246b9..3de3df6b35 100644
--- a/core/vibes/soul/sections/dynamic-form-section/index.tsx
+++ b/core/vibes/soul/sections/dynamic-form-section/index.tsx
@@ -18,7 +18,6 @@ interface Props<F extends Field> {
   className?: string;
   passwordComplexity?: PasswordComplexitySettings | null;
   errorTranslations?: FormErrorTranslationMap;
-  recaptchaEnabled?: boolean;
 }
 
 export function DynamicFormSection<F extends Field>({
@@ -30,7 +29,6 @@ export function DynamicFormSection<F extends Field>({
   action,
   passwordComplexity,
   errorTranslations,
-  recaptchaEnabled = false,
 }: Props<F>) {
   return (
     <SectionLayout className={clsx('mx-auto w-full max-w-4xl', className)} containerSize="lg">
@@ -49,7 +47,6 @@ export function DynamicFormSection<F extends Field>({
         errorTranslations={errorTranslations}
         fields={fields}
         passwordComplexity={passwordComplexity}
-        recaptchaEnabled={recaptchaEnabled}
         submitLabel={submitLabel}
       />
     </SectionLayout>
diff --git a/core/vibes/soul/sections/reviews/index.tsx b/core/vibes/soul/sections/reviews/index.tsx
index ba95df9856..b27c75f97d 100644
--- a/core/vibes/soul/sections/reviews/index.tsx
+++ b/core/vibes/soul/sections/reviews/index.tsx
@@ -40,7 +40,6 @@ interface Props {
   }>;
   streamableProduct: Streamable<{ name: string }>;
   streamableUser: Streamable<{ email: string; name: string }>;
-  recaptchaEnabled?: boolean;
 }
 
 export function Reviews({
@@ -66,7 +65,6 @@ export function Reviews({
   streamableProduct,
   streamableImages,
   streamableUser,
-  recaptchaEnabled = false,
 }: Readonly<Props>) {
   return (
     <Stream fallback={<ReviewsSkeleton reviewsLabel={reviewsLabel} />} value={streamableReviews}>
@@ -86,7 +84,6 @@ export function Reviews({
               formTitleLabel={formTitleLabel}
               message={emptyStateMessage}
               productId={productId}
-              recaptchaEnabled={recaptchaEnabled}
               reviewsLabel={reviewsLabel}
               streamableImages={streamableImages}
               streamableProduct={streamableProduct}
@@ -140,7 +137,6 @@ export function Reviews({
                   formRatingLabel={formRatingLabel}
                   formReviewLabel={formReviewLabel}
                   formSubmitLabel={formSubmitLabel}
-                  recaptchaEnabled={recaptchaEnabled}
                   formTitleLabel={formTitleLabel}
                   productId={productId}
                   streamableImages={streamableImages}
@@ -205,7 +201,6 @@ export function ReviewsEmptyState({
   streamableProduct,
   streamableImages,
   streamableUser,
-  recaptchaEnabled = false,
 }: {
   message?: string;
   reviewsLabel?: string;
@@ -226,7 +221,6 @@ export function ReviewsEmptyState({
   }>;
   streamableProduct: Streamable<{ name: string }>;
   streamableUser: Streamable<{ email: string; name: string }>;
-  recaptchaEnabled?: boolean;
 }) {
   return (
     <StickySidebarLayout
@@ -256,7 +250,6 @@ export function ReviewsEmptyState({
           formSubmitLabel={formSubmitLabel}
           formTitleLabel={formTitleLabel}
           productId={productId}
-          recaptchaEnabled={recaptchaEnabled}
           streamableImages={streamableImages}
           streamableProduct={streamableProduct}
           streamableUser={streamableUser}
diff --git a/core/vibes/soul/sections/reviews/review-form.tsx b/core/vibes/soul/sections/reviews/review-form.tsx
index 4442034d1b..af3aa21ae6 100644
--- a/core/vibes/soul/sections/reviews/review-form.tsx
+++ b/core/vibes/soul/sections/reviews/review-form.tsx
@@ -5,7 +5,7 @@ import { getZodConstraint } from '@conform-to/zod';
 import { useTranslations } from 'next-intl';
 import { startTransition, useActionState, useEffect, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
-import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
+import ReCAPTCHA from 'react-google-recaptcha';
 
 import { FormStatus } from '@/vibes/soul/form/form-status';
 import { Input } from '@/vibes/soul/form/input';
@@ -16,8 +16,9 @@ import { Button } from '@/vibes/soul/primitives/button';
 import { Modal } from '@/vibes/soul/primitives/modal';
 import { toast } from '@/vibes/soul/primitives/toaster';
 import { Image } from '~/components/image';
+import { useReCaptchaSiteKey } from '~/components/recaptcha-provider';
 import { parseWithZodTranslatedErrors } from '~/i18n/utils';
-import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
+import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha/constants';
 
 import { reviewFormErrorTranslations, schema } from './schema';
 
@@ -46,31 +47,9 @@ interface Props {
   }>;
   streamableProduct: Streamable<{ name: string }>;
   streamableUser: Streamable<{ email: string; name: string }>;
-  /** When true, a reCAPTCHA v3 token is obtained and sent with the form. */
-  recaptchaEnabled?: boolean;
 }
 
-export const ReviewForm = (props: Props) => {
-  const { recaptchaEnabled = false } = props;
-
-  if (recaptchaEnabled) {
-    return <ReviewFormWithRecaptcha {...props} />;
-  }
-
-  return <ReviewFormContent {...props} />;
-};
-
-function ReviewFormWithRecaptcha(props: Props) {
-  const { executeRecaptcha } = useGoogleReCaptcha();
-  return (
-    <ReviewFormContent
-      {...props}
-      recaptchaExecute={executeRecaptcha ?? undefined}
-    />
-  );
-}
-
-function ReviewFormContent({
+export const ReviewForm = ({
   productId,
   action,
   trigger,
@@ -85,15 +64,16 @@ function ReviewFormContent({
   streamableProduct,
   streamableImages,
   streamableUser,
-  recaptchaExecute,
-}: Props & { recaptchaExecute?: (action: string) => Promise<string> }) {
+}: Props) => {
   const t = useTranslations('Product.Reviews.Form');
+  const recaptchaSiteKey = useReCaptchaSiteKey();
   const errorTranslations = reviewFormErrorTranslations(t);
   const [isOpen, setIsOpen] = useState(false);
   const [{ lastResult, successMessage }, formAction] = useActionState(action, {
     lastResult: null,
   });
   const formRef = useRef<HTMLFormElement>(null);
+  const recaptchaRef = useRef<ReCAPTCHA | null>(null);
 
   const user = useStreamable(streamableUser);
 
@@ -113,14 +93,15 @@ function ReviewFormContent({
       event.preventDefault();
 
       let payload: FormData = formData;
-      if (recaptchaExecute) {
+      if (recaptchaSiteKey && recaptchaRef.current) {
         try {
-          const token = await recaptchaExecute('submit');
-          payload = new FormData(event.currentTarget);
-          payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
-        } catch {
-          // Proceed without token
-        }
+          const token = await recaptchaRef.current.execute();
+          if (token) {
+            payload = new FormData(event.currentTarget);
+            payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
+          }
+          recaptchaRef.current.reset();
+        } catch {}
       }
 
       startTransition(() => {
@@ -256,6 +237,11 @@ function ReviewFormContent({
                 {error}
               </FormStatus>
             ))}
+            {recaptchaSiteKey && (
+              <div>
+                <ReCAPTCHA ref={recaptchaRef} sitekey={recaptchaSiteKey} />
+              </div>
+            )}
             <div className="mt-auto flex justify-end gap-3">
               <Button onClick={() => setIsOpen(false)} size="small" type="button" variant="ghost">
                 {formCancelLabel}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f7dd24ad67..dca878afd0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,6 +191,9 @@ importers:
       react-dom:
         specifier: 19.1.5
         version: 19.1.5(react@19.1.5)
+      react-google-recaptcha:
+        specifier: ^3.1.0
+        version: 3.1.0(react@19.1.5)
       react-headroom:
         specifier: ^3.2.1
         version: 3.2.1(react@19.1.5)
@@ -6707,23 +6710,20 @@ packages:
 
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@11.0.3:
     resolution: {integrity: sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==}
     engines: {node: 20 || >=22}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@9.3.5:
     resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
     engines: {node: '>=16 || 14 >=14.17'}
-    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -6806,6 +6806,9 @@ packages:
   headers-polyfill@4.0.3:
     resolution: {integrity: sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==}
 
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -8707,6 +8710,7 @@ packages:
   puppeteer@24.10.0:
     resolution: {integrity: sha512-Oua9VkGpj0S2psYu5e6mCer6W9AU9POEQh22wRgSXnLXASGH+MwLUVWgLCLeP9QPHHcJ7tySUlg4Sa9OJmaLpw==}
     engines: {node: '>=18'}
+    deprecated: < 24.10.2 is no longer supported
     hasBin: true
 
   pure-rand@6.1.0:
@@ -8754,6 +8758,11 @@ packages:
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
+  react-async-script@1.2.0:
+    resolution: {integrity: sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==}
+    peerDependencies:
+      react: '>=16.4.1'
+
   react-day-picker@9.7.0:
     resolution: {integrity: sha512-urlK4C9XJZVpQ81tmVgd2O7lZ0VQldZeHzNejbwLWZSkzHH498KnArT0EHNfKBOWwKc935iMLGZdxXPRISzUxQ==}
     engines: {node: '>=18'}
@@ -8765,6 +8774,11 @@ packages:
     peerDependencies:
       react: ^19.1.5
 
+  react-google-recaptcha@3.1.0:
+    resolution: {integrity: sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==}
+    peerDependencies:
+      react: '>=16.4.1'
+
   react-headroom@3.2.1:
     resolution: {integrity: sha512-C+7bmTwmHWIOjU1r5aSLm4tAQKjmqW4PB65tHllE/D6h+If1+V3gy83BOvp46OCo25LtJJlLa/HDs7Eq5OPFgA==}
     peerDependencies:
@@ -9989,7 +10003,6 @@ packages:
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
-    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
   whatwg-fetch@3.6.20:
     resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}
@@ -11482,9 +11495,9 @@ snapshots:
       '@typescript-eslint/parser': 8.28.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
       eslint-config-prettier: 9.1.0(eslint@8.57.1)
-      eslint-import-resolver-typescript: 3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.9.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-gettext: 1.2.0
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jest: 28.11.0(@typescript-eslint/eslint-plugin@8.28.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(jest@29.7.0(@types/node@22.15.30)(ts-node@10.9.2(@swc/core@1.11.31)(@types/node@22.15.30)(typescript@5.8.3)))(typescript@5.8.3)
       eslint-plugin-jest-dom: 5.5.0(eslint@8.57.1)
       eslint-plugin-jest-formatting: 3.1.0(eslint@8.57.1)
@@ -17375,8 +17388,8 @@ snapshots:
       '@typescript-eslint/parser': 8.28.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.9.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1))(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.4(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.2.0(eslint@8.57.1)
@@ -17403,7 +17416,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.1
@@ -17414,7 +17427,7 @@ snapshots:
       stable-hash: 0.0.5
       tinyglobby: 0.2.14
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -17425,7 +17438,7 @@ snapshots:
       '@typescript-eslint/parser': 8.28.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.9.1(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.9.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -17439,7 +17452,7 @@ snapshots:
     dependencies:
       gettext-parser: 4.2.0
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.9.1)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.9.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.28.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -18236,6 +18249,10 @@ snapshots:
 
   headers-polyfill@4.0.3: {}
 
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
   hookable@5.5.3: {}
 
   html-encoding-sniffer@4.0.0:
@@ -20390,6 +20407,12 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.5
 
+  react-async-script@1.2.0(react@19.1.5):
+    dependencies:
+      hoist-non-react-statics: 3.3.2
+      prop-types: 15.8.1
+      react: 19.1.5
+
   react-day-picker@9.7.0(react@19.1.5):
     dependencies:
       '@date-fns/tz': 1.2.0
@@ -20402,6 +20425,12 @@ snapshots:
       react: 19.1.5
       scheduler: 0.26.0
 
+  react-google-recaptcha@3.1.0(react@19.1.5):
+    dependencies:
+      prop-types: 15.8.1
+      react: 19.1.5
+      react-async-script: 1.2.0(react@19.1.5)
+
   react-headroom@3.2.1(react@19.1.5):
     dependencies:
       prop-types: 15.8.1

From dc1d64af5cda09984d8e5bfb1462bfd2885884bd Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Mon, 23 Feb 2026 11:44:12 -0600
Subject: [PATCH 03/13] linting

---
 .../(auth)/register/_actions/register-customer.ts      |  5 ++++-
 .../(default)/product/[slug]/_actions/submit-review.ts |  5 ++++-
 core/components/recaptcha-provider/index.tsx           |  9 ++++-----
 core/lib/recaptcha.ts                                  |  1 +
 core/lib/recaptcha/constants.ts                        |  4 ++--
 core/vibes/soul/form/dynamic-form/index.tsx            | 10 ++++++----
 core/vibes/soul/sections/reviews/review-form.tsx       |  3 +++
 7 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts b/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
index e0df4d6c6e..b48fbf63b1 100644
--- a/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
+++ b/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
@@ -19,7 +19,10 @@ import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
 import { ADDRESS_FIELDS_NAME_PREFIX, CUSTOMER_FIELDS_NAME_PREFIX } from './prefixes';
 
 const RegisterCustomerMutation = graphql(`
-  mutation RegisterCustomerMutation($input: RegisterCustomerInput!, $reCaptchaV2: ReCaptchaV2Input) {
+  mutation RegisterCustomerMutation(
+    $input: RegisterCustomerInput!
+    $reCaptchaV2: ReCaptchaV2Input
+  ) {
     customer {
       registerCustomer(input: $input, reCaptchaV2: $reCaptchaV2) {
         customer {
diff --git a/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts b/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
index 8077317fdd..02c6858af6 100644
--- a/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
+++ b/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
@@ -12,7 +12,10 @@ import { graphql } from '~/client/graphql';
 import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
 
 const AddProductReviewMutation = graphql(`
-  mutation AddProductReviewMutation($input: AddProductReviewInput!, $reCaptchaV2: ReCaptchaV2Input) {
+  mutation AddProductReviewMutation(
+    $input: AddProductReviewInput!
+    $reCaptchaV2: ReCaptchaV2Input
+  ) {
     catalog {
       addProductReview(input: $input, reCaptchaV2: $reCaptchaV2) {
         __typename
diff --git a/core/components/recaptcha-provider/index.tsx b/core/components/recaptcha-provider/index.tsx
index 0b85396491..17589a5b63 100644
--- a/core/components/recaptcha-provider/index.tsx
+++ b/core/components/recaptcha-provider/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, type PropsWithChildren } from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
 
 import type { ReCaptchaSettings } from '~/lib/recaptcha/constants';
 
@@ -13,7 +13,8 @@ export function useReCaptchaSettings(): ReCaptchaSettings | null {
 /** Site key when reCAPTCHA is enabled on the storefront; undefined otherwise. */
 export function useReCaptchaSiteKey(): string | undefined {
   const settings = useReCaptchaSettings();
-  return settings?.isEnabledOnStorefront === true && settings?.siteKey
+
+  return settings?.isEnabledOnStorefront === true && settings.siteKey
     ? settings.siteKey
     : undefined;
 }
@@ -27,7 +28,5 @@ interface ReCaptchaProviderProps extends PropsWithChildren {
  * Forms use react-google-recaptcha (v2) and receive siteKey via props from server.
  */
 export function ReCaptchaProvider({ settings, children }: ReCaptchaProviderProps) {
-  return (
-    <ReCaptchaContext.Provider value={settings}>{children}</ReCaptchaContext.Provider>
-  );
+  return <ReCaptchaContext.Provider value={settings}>{children}</ReCaptchaContext.Provider>;
 }
diff --git a/core/lib/recaptcha.ts b/core/lib/recaptcha.ts
index 32e19c2762..98a6884b5a 100644
--- a/core/lib/recaptcha.ts
+++ b/core/lib/recaptcha.ts
@@ -5,6 +5,7 @@ import { cache } from 'react';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
+
 import type { ReCaptchaSettings } from './recaptcha/constants';
 
 export { RECAPTCHA_TOKEN_FORM_KEY } from './recaptcha/constants';
diff --git a/core/lib/recaptcha/constants.ts b/core/lib/recaptcha/constants.ts
index daf222f3e9..8fc1d7ec4e 100644
--- a/core/lib/recaptcha/constants.ts
+++ b/core/lib/recaptcha/constants.ts
@@ -1,9 +1,9 @@
-export type ReCaptchaSettings = {
+export interface ReCaptchaSettings {
   failedLoginLockoutDurationSeconds: number | null;
   isEnabledOnCheckout: boolean;
   isEnabledOnStorefront: boolean;
   siteKey: string;
-};
+}
 
 /** FormData key used to pass the reCAPTCHA token from client to server actions */
 export const RECAPTCHA_TOKEN_FORM_KEY = 'recaptchaToken';
diff --git a/core/vibes/soul/form/dynamic-form/index.tsx b/core/vibes/soul/form/dynamic-form/index.tsx
index 7f04332ddc..53610db979 100644
--- a/core/vibes/soul/form/dynamic-form/index.tsx
+++ b/core/vibes/soul/form/dynamic-form/index.tsx
@@ -19,15 +19,12 @@ import {
   startTransition,
   useActionState,
   useEffect,
+  useRef,
 } from 'react';
-import { useRef } from 'react';
 import { useFormStatus } from 'react-dom';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { z } from 'zod';
 
-import { useReCaptchaSiteKey } from '~/components/recaptcha-provider';
-import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha/constants';
-
 import { ButtonRadioGroup } from '@/vibes/soul/form/button-radio-group';
 import { CardRadioGroup } from '@/vibes/soul/form/card-radio-group';
 import { Checkbox } from '@/vibes/soul/form/checkbox';
@@ -41,6 +38,8 @@ import { Select } from '@/vibes/soul/form/select';
 import { SwatchRadioGroup } from '@/vibes/soul/form/swatch-radio-group';
 import { Textarea } from '@/vibes/soul/form/textarea';
 import { Button, ButtonProps } from '@/vibes/soul/primitives/button';
+import { useReCaptchaSiteKey } from '~/components/recaptcha-provider';
+import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha/constants';
 
 import {
   Field,
@@ -161,13 +160,16 @@ function DynamicFormInner<F extends Field>({
       event.preventDefault();
 
       let payload: FormData = formData;
+
       if (recaptchaSiteKey && recaptchaRef.current) {
         try {
           const token = await recaptchaRef.current.executeAsync();
+
           if (token) {
             payload = new FormData(event.currentTarget);
             payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
           }
+
           recaptchaRef.current.reset();
         } catch {
           // Proceed without token
diff --git a/core/vibes/soul/sections/reviews/review-form.tsx b/core/vibes/soul/sections/reviews/review-form.tsx
index af3aa21ae6..611f26a71f 100644
--- a/core/vibes/soul/sections/reviews/review-form.tsx
+++ b/core/vibes/soul/sections/reviews/review-form.tsx
@@ -93,13 +93,16 @@ export const ReviewForm = ({
       event.preventDefault();
 
       let payload: FormData = formData;
+
       if (recaptchaSiteKey && recaptchaRef.current) {
         try {
           const token = await recaptchaRef.current.execute();
+
           if (token) {
             payload = new FormData(event.currentTarget);
             payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
           }
+
           recaptchaRef.current.reset();
         } catch {}
       }

From 34554b455ee7228bead8f5c598d2460071cc6a79 Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Mon, 23 Feb 2026 11:56:49 -0600
Subject: [PATCH 04/13] make recaptcha optional for dynamic-form

---
 core/app/[locale]/(default)/(auth)/register/page.tsx       | 4 ++++
 core/app/[locale]/(default)/webpages/[id]/contact/page.tsx | 4 ++++
 core/lib/recaptcha.ts                                      | 7 +++++++
 core/vibes/soul/form/dynamic-form/index.tsx                | 4 ++--
 core/vibes/soul/sections/dynamic-form-section/index.tsx    | 3 +++
 core/vibes/soul/sections/reviews/review-form.tsx           | 4 ++--
 6 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/core/app/[locale]/(default)/(auth)/register/page.tsx b/core/app/[locale]/(default)/(auth)/register/page.tsx
index bf8ebf1357..065ed15bce 100644
--- a/core/app/[locale]/(default)/(auth)/register/page.tsx
+++ b/core/app/[locale]/(default)/(auth)/register/page.tsx
@@ -14,6 +14,7 @@ import {
   transformFieldsToLayout,
 } from '~/data-transformers/form-field-transformer/utils';
 import { exists } from '~/lib/utils';
+import { getRecaptchaSiteKey } from '~/lib/recaptcha';
 
 import { ADDRESS_FIELDS_NAME_PREFIX, CUSTOMER_FIELDS_NAME_PREFIX } from './_actions/prefixes';
 import { registerCustomer } from './_actions/register-customer';
@@ -63,6 +64,8 @@ export default async function Register({ params }: Props) {
   const { addressFields, customerFields, countries, passwordComplexitySettings } =
     registerCustomerData;
 
+  const recaptchaSiteKey = await getRecaptchaSiteKey();
+
   const fields = transformFieldsToLayout(
     [
       ...addressFields.map((field) => {
@@ -109,6 +112,7 @@ export default async function Register({ params }: Props) {
   return (
     <DynamicFormSection
       action={registerCustomer}
+      recaptchaSiteKey={recaptchaSiteKey}
       errorTranslations={{
         firstName: {
           invalid_type: t('FieldErrors.firstNameRequired'),
diff --git a/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx b/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx
index b8d1f2e759..2c8896c405 100644
--- a/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx
+++ b/core/app/[locale]/(default)/webpages/[id]/contact/page.tsx
@@ -12,6 +12,7 @@ import {
   breadcrumbsTransformer,
   truncateBreadcrumbs,
 } from '~/data-transformers/breadcrumbs-transformer';
+import { getRecaptchaSiteKey } from '~/lib/recaptcha';
 import { getMetadataAlternates } from '~/lib/seo/canonical';
 
 import { WebPage, WebPageContent } from '../_components/web-page';
@@ -195,6 +196,8 @@ export default async function ContactPage({ params, searchParams }: Props) {
     );
   }
 
+  const recaptchaSiteKey = await getRecaptchaSiteKey();
+
   return (
     <WebPageContent
       breadcrumbs={Streamable.from(() => getWebPageBreadcrumbs(id))}
@@ -204,6 +207,7 @@ export default async function ContactPage({ params, searchParams }: Props) {
         <DynamicForm
           action={submitContactForm}
           fields={await getContactFields(id)}
+          recaptchaSiteKey={recaptchaSiteKey}
           submitLabel={t('cta')}
         />
       </div>
diff --git a/core/lib/recaptcha.ts b/core/lib/recaptcha.ts
index 98a6884b5a..b2198c4d8b 100644
--- a/core/lib/recaptcha.ts
+++ b/core/lib/recaptcha.ts
@@ -45,3 +45,10 @@ export const getReCaptchaSettings = cache(async (): Promise<ReCaptchaSettings |
     siteKey: reCaptcha.siteKey,
   };
 });
+
+export const getRecaptchaSiteKey = cache(async (): Promise<string | undefined> => {
+  const settings = await getReCaptchaSettings();
+  return settings?.isEnabledOnStorefront === true && settings?.siteKey
+    ? settings.siteKey
+    : undefined;
+});
diff --git a/core/vibes/soul/form/dynamic-form/index.tsx b/core/vibes/soul/form/dynamic-form/index.tsx
index 53610db979..a3853f4cb5 100644
--- a/core/vibes/soul/form/dynamic-form/index.tsx
+++ b/core/vibes/soul/form/dynamic-form/index.tsx
@@ -38,7 +38,6 @@ import { Select } from '@/vibes/soul/form/select';
 import { SwatchRadioGroup } from '@/vibes/soul/form/swatch-radio-group';
 import { Textarea } from '@/vibes/soul/form/textarea';
 import { Button, ButtonProps } from '@/vibes/soul/primitives/button';
-import { useReCaptchaSiteKey } from '~/components/recaptcha-provider';
 import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha/constants';
 
 import {
@@ -81,6 +80,7 @@ export interface DynamicFormProps<F extends Field> {
   onSuccess?: (lastResult: SubmissionResult, successMessage: ReactNode) => void;
   passwordComplexity?: PasswordComplexitySettings | null;
   errorTranslations?: FormErrorTranslationMap;
+  recaptchaSiteKey?: string;
 }
 
 export function DynamicForm<F extends Field>(props: DynamicFormProps<F>) {
@@ -100,9 +100,9 @@ function DynamicFormInner<F extends Field>({
   onSuccess,
   passwordComplexity,
   errorTranslations,
+  recaptchaSiteKey,
 }: DynamicFormProps<F>) {
   const t = useTranslations('Form');
-  const recaptchaSiteKey = useReCaptchaSiteKey();
   // Remove options from fields before passing to action to reduce payload size
   // Options are only needed for rendering, not for processing form submissions
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
diff --git a/core/vibes/soul/sections/dynamic-form-section/index.tsx b/core/vibes/soul/sections/dynamic-form-section/index.tsx
index 3de3df6b35..739af77eda 100644
--- a/core/vibes/soul/sections/dynamic-form-section/index.tsx
+++ b/core/vibes/soul/sections/dynamic-form-section/index.tsx
@@ -18,6 +18,7 @@ interface Props<F extends Field> {
   className?: string;
   passwordComplexity?: PasswordComplexitySettings | null;
   errorTranslations?: FormErrorTranslationMap;
+  recaptchaSiteKey?: string;
 }
 
 export function DynamicFormSection<F extends Field>({
@@ -29,6 +30,7 @@ export function DynamicFormSection<F extends Field>({
   action,
   passwordComplexity,
   errorTranslations,
+  recaptchaSiteKey,
 }: Props<F>) {
   return (
     <SectionLayout className={clsx('mx-auto w-full max-w-4xl', className)} containerSize="lg">
@@ -47,6 +49,7 @@ export function DynamicFormSection<F extends Field>({
         errorTranslations={errorTranslations}
         fields={fields}
         passwordComplexity={passwordComplexity}
+        recaptchaSiteKey={recaptchaSiteKey}
         submitLabel={submitLabel}
       />
     </SectionLayout>
diff --git a/core/vibes/soul/sections/reviews/review-form.tsx b/core/vibes/soul/sections/reviews/review-form.tsx
index 611f26a71f..57639c1149 100644
--- a/core/vibes/soul/sections/reviews/review-form.tsx
+++ b/core/vibes/soul/sections/reviews/review-form.tsx
@@ -16,7 +16,6 @@ import { Button } from '@/vibes/soul/primitives/button';
 import { Modal } from '@/vibes/soul/primitives/modal';
 import { toast } from '@/vibes/soul/primitives/toaster';
 import { Image } from '~/components/image';
-import { useReCaptchaSiteKey } from '~/components/recaptcha-provider';
 import { parseWithZodTranslatedErrors } from '~/i18n/utils';
 import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha/constants';
 
@@ -47,6 +46,7 @@ interface Props {
   }>;
   streamableProduct: Streamable<{ name: string }>;
   streamableUser: Streamable<{ email: string; name: string }>;
+  recaptchaSiteKey?: string;
 }
 
 export const ReviewForm = ({
@@ -64,9 +64,9 @@ export const ReviewForm = ({
   streamableProduct,
   streamableImages,
   streamableUser,
+  recaptchaSiteKey,
 }: Props) => {
   const t = useTranslations('Product.Reviews.Form');
-  const recaptchaSiteKey = useReCaptchaSiteKey();
   const errorTranslations = reviewFormErrorTranslations(t);
   const [isOpen, setIsOpen] = useState(false);
   const [{ lastResult, successMessage }, formAction] = useActionState(action, {

From 6589178defa7215e5c08e3f808b8016070c89bf6 Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Mon, 23 Feb 2026 11:58:10 -0600
Subject: [PATCH 05/13] remove comments

---
 core/components/recaptcha-provider/index.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/core/components/recaptcha-provider/index.tsx b/core/components/recaptcha-provider/index.tsx
index 17589a5b63..8ca8ffba57 100644
--- a/core/components/recaptcha-provider/index.tsx
+++ b/core/components/recaptcha-provider/index.tsx
@@ -10,7 +10,6 @@ export function useReCaptchaSettings(): ReCaptchaSettings | null {
   return useContext(ReCaptchaContext);
 }
 
-/** Site key when reCAPTCHA is enabled on the storefront; undefined otherwise. */
 export function useReCaptchaSiteKey(): string | undefined {
   const settings = useReCaptchaSettings();
 
@@ -23,10 +22,6 @@ interface ReCaptchaProviderProps extends PropsWithChildren {
   settings: ReCaptchaSettings | null;
 }
 
-/**
- * Provides reCAPTCHA settings (e.g. siteKey) via context.
- * Forms use react-google-recaptcha (v2) and receive siteKey via props from server.
- */
 export function ReCaptchaProvider({ settings, children }: ReCaptchaProviderProps) {
   return <ReCaptchaContext.Provider value={settings}>{children}</ReCaptchaContext.Provider>;
 }

From 0ffe86bb9e92b75582fef51479a1953646358a51 Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Mon, 23 Feb 2026 11:58:19 -0600
Subject: [PATCH 06/13] remove comments

---
 core/lib/recaptcha/constants.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/lib/recaptcha/constants.ts b/core/lib/recaptcha/constants.ts
index 8fc1d7ec4e..7af1f4e999 100644
--- a/core/lib/recaptcha/constants.ts
+++ b/core/lib/recaptcha/constants.ts
@@ -5,5 +5,4 @@ export interface ReCaptchaSettings {
   siteKey: string;
 }
 
-/** FormData key used to pass the reCAPTCHA token from client to server actions */
 export const RECAPTCHA_TOKEN_FORM_KEY = 'recaptchaToken';

From 03f7f1505f5053a46b27c9b856de8b08e2ea2e0c Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Fri, 27 Feb 2026 15:31:46 -0600
Subject: [PATCH 07/13] remove recaptcha provider since it wasn't used

---
 core/app/[locale]/(default)/layout.tsx       |  8 ++----
 core/components/recaptcha-provider/index.tsx | 27 --------------------
 2 files changed, 2 insertions(+), 33 deletions(-)
 delete mode 100644 core/components/recaptcha-provider/index.tsx

diff --git a/core/app/[locale]/(default)/layout.tsx b/core/app/[locale]/(default)/layout.tsx
index 52f9fbcdc5..95522f608e 100644
--- a/core/app/[locale]/(default)/layout.tsx
+++ b/core/app/[locale]/(default)/layout.tsx
@@ -3,8 +3,6 @@ import { PropsWithChildren } from 'react';
 
 import { Footer } from '~/components/footer';
 import { Header } from '~/components/header';
-import { ReCaptchaProvider } from '~/components/recaptcha-provider';
-import { getReCaptchaSettings } from '~/lib/recaptcha';
 
 interface Props extends PropsWithChildren {
   params: Promise<{ locale: string }>;
@@ -15,15 +13,13 @@ export default async function DefaultLayout({ params, children }: Props) {
 
   setRequestLocale(locale);
 
-  const reCaptchaSettings = await getReCaptchaSettings();
-
   return (
-    <ReCaptchaProvider settings={reCaptchaSettings}>
+    <>
       <Header />
 
       <main>{children}</main>
 
       <Footer />
-    </ReCaptchaProvider>
+    </>
   );
 }
diff --git a/core/components/recaptcha-provider/index.tsx b/core/components/recaptcha-provider/index.tsx
deleted file mode 100644
index 8ca8ffba57..0000000000
--- a/core/components/recaptcha-provider/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-
-import { createContext, type PropsWithChildren, useContext } from 'react';
-
-import type { ReCaptchaSettings } from '~/lib/recaptcha/constants';
-
-const ReCaptchaContext = createContext<ReCaptchaSettings | null>(null);
-
-export function useReCaptchaSettings(): ReCaptchaSettings | null {
-  return useContext(ReCaptchaContext);
-}
-
-export function useReCaptchaSiteKey(): string | undefined {
-  const settings = useReCaptchaSettings();
-
-  return settings?.isEnabledOnStorefront === true && settings.siteKey
-    ? settings.siteKey
-    : undefined;
-}
-
-interface ReCaptchaProviderProps extends PropsWithChildren {
-  settings: ReCaptchaSettings | null;
-}
-
-export function ReCaptchaProvider({ settings, children }: ReCaptchaProviderProps) {
-  return <ReCaptchaContext.Provider value={settings}>{children}</ReCaptchaContext.Provider>;
-}

From 363f14271448ff5c8360e9cb78f67b6ae0551f5d Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Mon, 2 Mar 2026 11:05:18 -0600
Subject: [PATCH 08/13] make recaptcha required if enabled and use getValue to
 retrieve token

---
 .../register/_actions/register-customer.ts    | 12 ++++++-
 .../product/[slug]/_actions/submit-review.ts  | 14 +++++++-
 .../product/[slug]/_components/reviews.tsx    |  3 ++
 .../(default)/product/[slug]/page.tsx         |  8 ++++-
 .../contact/_actions/submit-contact-form.ts   | 12 ++++++-
 core/messages/en.json                         |  6 +++-
 core/vibes/soul/form/dynamic-form/index.tsx   | 25 +++++++------
 .../soul/sections/product-detail/index.tsx    |  3 ++
 core/vibes/soul/sections/reviews/index.tsx    | 35 +++++++++++--------
 .../soul/sections/reviews/review-form.tsx     | 24 ++++++++-----
 10 files changed, 103 insertions(+), 39 deletions(-)

diff --git a/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts b/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
index b48fbf63b1..dc4eb9cfa5 100644
--- a/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
+++ b/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
@@ -14,7 +14,7 @@ import { graphql, VariablesOf } from '~/client/graphql';
 import { FieldNameToFieldId } from '~/data-transformers/form-field-transformer/utils';
 import { redirect } from '~/i18n/routing';
 import { getCartId } from '~/lib/cart';
-import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
+import { getRecaptchaSiteKey, RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
 
 import { ADDRESS_FIELDS_NAME_PREFIX, CUSTOMER_FIELDS_NAME_PREFIX } from './prefixes';
 
@@ -360,6 +360,16 @@ export async function registerCustomer<F extends Field>(
     };
   }
 
+  const recaptchaSiteKey = await getRecaptchaSiteKey();
+  if (recaptchaSiteKey) {
+    const recaptchaToken = formData.get(RECAPTCHA_TOKEN_FORM_KEY);
+    if (typeof recaptchaToken !== 'string' || !recaptchaToken.trim()) {
+      return {
+        lastResult: submission.reply({ formErrors: [t('recaptchaRequired')] }),
+      };
+    }
+  }
+
   try {
     const input = parseRegisterCustomerInput(submission.value, fields);
     const recaptchaToken = formData.get(RECAPTCHA_TOKEN_FORM_KEY);
diff --git a/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts b/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
index 02c6858af6..a22445440d 100644
--- a/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
+++ b/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
@@ -9,7 +9,7 @@ import { schema } from '@/vibes/soul/sections/reviews/schema';
 import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
-import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
+import { getRecaptchaSiteKey, RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
 
 const AddProductReviewMutation = graphql(`
   mutation AddProductReviewMutation(
@@ -42,6 +42,18 @@ export async function submitReview(
     return { ...prevState, lastResult: submission.reply() };
   }
 
+  const recaptchaSiteKey = await getRecaptchaSiteKey();
+  if (recaptchaSiteKey) {
+    const token = payload.get(RECAPTCHA_TOKEN_FORM_KEY);
+    const tokenValue = typeof token === 'string' ? token.trim() : '';
+    if (!tokenValue) {
+      return {
+        ...prevState,
+        lastResult: submission.reply({ formErrors: [t('recaptchaRequired')] }),
+      };
+    }
+  }
+
   const { productEntityId, ...input } = submission.value;
   const recaptchaToken = payload.get(RECAPTCHA_TOKEN_FORM_KEY);
 
diff --git a/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx b/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
index 6429de74be..47a533d5c9 100644
--- a/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
+++ b/core/app/[locale]/(default)/product/[slug]/_components/reviews.tsx
@@ -82,6 +82,7 @@ interface Props {
     pageInfo?: { hasNextPage: boolean; endCursor: string | null };
   }>;
   streamableProduct: Streamable<Awaited<ReturnType<typeof getStreamableProduct>>>;
+  recaptchaSiteKey?: string;
 }
 
 export const Reviews = async ({
@@ -89,6 +90,7 @@ export const Reviews = async ({
   searchParams,
   streamableProduct,
   streamableImages,
+  recaptchaSiteKey,
 }: Props) => {
   const t = await getTranslations('Product.Reviews');
 
@@ -189,6 +191,7 @@ export const Reviews = async ({
         paginationInfo={streamablePaginationInfo}
         previousLabel={t('previous')}
         productId={productId}
+        recaptchaSiteKey={recaptchaSiteKey}
         reviews={streamableReviews}
         reviewsLabel={t('title')}
         streamableImages={streamableImages}
diff --git a/core/app/[locale]/(default)/product/[slug]/page.tsx b/core/app/[locale]/(default)/product/[slug]/page.tsx
index c1e8a96bf7..8d2001ee8c 100644
--- a/core/app/[locale]/(default)/product/[slug]/page.tsx
+++ b/core/app/[locale]/(default)/product/[slug]/page.tsx
@@ -12,6 +12,7 @@ import { pricesTransformer } from '~/data-transformers/prices-transformer';
 import { productCardTransformer } from '~/data-transformers/product-card-transformer';
 import { productOptionsTransformer } from '~/data-transformers/product-options-transformer';
 import { getPreferredCurrencyCode } from '~/lib/currency';
+import { getRecaptchaSiteKey } from '~/lib/recaptcha';
 import { getMetadataAlternates } from '~/lib/seo/canonical';
 
 import { addToCart } from './_actions/add-to-cart';
@@ -76,7 +77,10 @@ export default async function Product({ params, searchParams }: Props) {
 
   const productId = Number(slug);
 
-  const { product: baseProduct, settings } = await getProduct(productId, customerAccessToken);
+  const [{ product: baseProduct, settings }, recaptchaSiteKey] = await Promise.all([
+    getProduct(productId, customerAccessToken),
+    getRecaptchaSiteKey(),
+  ]);
 
   const reviewsEnabled = Boolean(settings?.reviews.enabled && !settings.display.showProductRating);
   const showRating = Boolean(settings?.reviews.enabled && settings.display.showProductRating);
@@ -581,6 +585,7 @@ export default async function Product({ params, searchParams }: Props) {
             backorderDisplayData: streamableBackorderDisplayData,
           }}
           quantityLabel={t('ProductDetails.quantity')}
+          recaptchaSiteKey={recaptchaSiteKey}
           reviewFormAction={submitReview}
           thumbnailLabel={t('ProductDetails.thumbnail')}
           user={streamableUser}
@@ -602,6 +607,7 @@ export default async function Product({ params, searchParams }: Props) {
         <div id="reviews">
           <Reviews
             productId={productId}
+            recaptchaSiteKey={recaptchaSiteKey}
             searchParams={searchParams}
             streamableImages={streamableImages}
             streamableProduct={streamableProduct}
diff --git a/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts b/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts
index 7a9ff51823..909393f27d 100644
--- a/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts
+++ b/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts
@@ -11,7 +11,7 @@ import { Field, schema } from '@/vibes/soul/form/dynamic-form/schema';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { redirect } from '~/i18n/routing';
-import { RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
+import { getRecaptchaSiteKey, RECAPTCHA_TOKEN_FORM_KEY } from '~/lib/recaptcha';
 
 const inputSchema = z.object({
   data: z.object({
@@ -75,6 +75,16 @@ export async function submitContactForm<F extends Field>(
     };
   }
 
+  const recaptchaSiteKey = await getRecaptchaSiteKey();
+  if (recaptchaSiteKey) {
+    const recaptchaToken = formData.get(RECAPTCHA_TOKEN_FORM_KEY);
+    if (typeof recaptchaToken !== 'string' || !recaptchaToken.trim()) {
+      return {
+        lastResult: submission.reply({ formErrors: [t('recaptchaRequired')] }),
+      };
+    }
+  }
+
   try {
     const input = parseContactFormInput(submission.value);
     const recaptchaToken = formData.get(RECAPTCHA_TOKEN_FORM_KEY);
diff --git a/core/messages/en.json b/core/messages/en.json
index 1f09a50589..7fa3590394 100644
--- a/core/messages/en.json
+++ b/core/messages/en.json
@@ -98,6 +98,7 @@
       "heading": "New account",
       "cta": "Create account",
       "somethingWentWrong": "Something went wrong. Please try again later.",
+      "recaptchaRequired": "Please complete the reCAPTCHA verification.",
       "FieldErrors": {
         "firstNameRequired": "First name is required",
         "lastNameRequired": "Last name is required",
@@ -505,6 +506,7 @@
         "emailLabel": "Email",
         "successMessage": "Your review has been submitted successfully!",
         "somethingWentWrong": "Something went wrong. Please try again later.",
+        "recaptchaRequired": "Please complete the reCAPTCHA verification.",
         "FieldErrors": {
           "titleRequired": "Title is required",
           "authorRequired": "Name is required",
@@ -535,7 +537,8 @@
         "email": "Email",
         "comments": "Comments/questions",
         "cta": "Submit form",
-        "somethingWentWrong": "Something went wrong. Please try again later."
+        "somethingWentWrong": "Something went wrong. Please try again later.",
+        "recaptchaRequired": "Please complete the reCAPTCHA verification."
       }
     }
   },
@@ -705,6 +708,7 @@
   },
   "Form": {
     "optional": "optional",
+    "recaptchaRequired": "Please complete the reCAPTCHA verification.",
     "Errors": {
       "invalidInput": "Please check your input and try again",
       "invalidFormat": "The value entered does not match the required format"
diff --git a/core/vibes/soul/form/dynamic-form/index.tsx b/core/vibes/soul/form/dynamic-form/index.tsx
index a3853f4cb5..6cede84ff2 100644
--- a/core/vibes/soul/form/dynamic-form/index.tsx
+++ b/core/vibes/soul/form/dynamic-form/index.tsx
@@ -20,6 +20,7 @@ import {
   useActionState,
   useEffect,
   useRef,
+  useState,
 } from 'react';
 import { useFormStatus } from 'react-dom';
 import ReCAPTCHA from 'react-google-recaptcha';
@@ -114,6 +115,7 @@ function DynamicFormInner<F extends Field>({
   });
 
   const recaptchaRef = useRef<ReCAPTCHA | null>(null);
+  const [recaptchaError, setRecaptchaError] = useState<string | null>(null);
 
   const dynamicSchema = schema(fields, passwordComplexity, errorTranslations);
   const defaultValue = fields
@@ -156,24 +158,24 @@ function DynamicFormInner<F extends Field>({
     defaultValue,
     shouldValidate: 'onSubmit',
     shouldRevalidate: 'onInput',
-    async onSubmit(event, { formData }) {
+    onSubmit(event, { formData }) {
       event.preventDefault();
 
+      setRecaptchaError(null);
+
       let payload: FormData = formData;
 
       if (recaptchaSiteKey && recaptchaRef.current) {
-        try {
-          const token = await recaptchaRef.current.executeAsync();
-
-          if (token) {
-            payload = new FormData(event.currentTarget);
-            payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
-          }
+        const token = recaptchaRef.current.getValue();
 
-          recaptchaRef.current.reset();
-        } catch {
-          // Proceed without token
+        if (!token || typeof token !== 'string') {
+          setRecaptchaError(t('recaptchaRequired'));
+          return;
         }
+
+        payload = new FormData(event.currentTarget);
+        payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
+        recaptchaRef.current.reset();
       }
 
       startTransition(() => {
@@ -235,6 +237,7 @@ function DynamicFormInner<F extends Field>({
               {submitLabel}
             </SubmitButton>
           </div>
+          {recaptchaError && <FormStatus type="error">{recaptchaError}</FormStatus>}
           {form.errors?.map((error, index) => (
             <FormStatus key={index} type="error">
               {error}
diff --git a/core/vibes/soul/sections/product-detail/index.tsx b/core/vibes/soul/sections/product-detail/index.tsx
index fe08e3e78e..de0afc1c6d 100644
--- a/core/vibes/soul/sections/product-detail/index.tsx
+++ b/core/vibes/soul/sections/product-detail/index.tsx
@@ -75,6 +75,7 @@ export interface ProductDetailProps<F extends Field> {
   reviewFormAction: SubmitReviewAction;
   user: Streamable<{ email: string; name: string }>;
   loadMoreImagesAction?: ProductGalleryLoadMoreAction;
+  recaptchaSiteKey?: string;
 }
 
 // eslint-disable-next-line valid-jsdoc
@@ -117,6 +118,7 @@ export function ProductDetail<F extends Field>({
   reviewFormAction,
   user,
   loadMoreImagesAction,
+  recaptchaSiteKey,
 }: ProductDetailProps<F>) {
   return (
     <section className="@container">
@@ -164,6 +166,7 @@ export function ProductDetail<F extends Field>({
                         formSubmitLabel={reviewFormSubmitLabel}
                         formTitleLabel={reviewFormTitleLabel}
                         productId={Number(product.id)}
+                        recaptchaSiteKey={recaptchaSiteKey}
                         streamableImages={product.images}
                         streamableProduct={{ name: product.title }}
                         streamableUser={user}
diff --git a/core/vibes/soul/sections/reviews/index.tsx b/core/vibes/soul/sections/reviews/index.tsx
index b27c75f97d..034a87f293 100644
--- a/core/vibes/soul/sections/reviews/index.tsx
+++ b/core/vibes/soul/sections/reviews/index.tsx
@@ -40,6 +40,7 @@ interface Props {
   }>;
   streamableProduct: Streamable<{ name: string }>;
   streamableUser: Streamable<{ email: string; name: string }>;
+  recaptchaSiteKey?: string;
 }
 
 export function Reviews({
@@ -65,6 +66,7 @@ export function Reviews({
   streamableProduct,
   streamableImages,
   streamableUser,
+  recaptchaSiteKey,
 }: Readonly<Props>) {
   return (
     <Stream fallback={<ReviewsSkeleton reviewsLabel={reviewsLabel} />} value={streamableReviews}>
@@ -78,6 +80,7 @@ export function Reviews({
               formEmailLabel={formEmailLabel}
               formModalTitle={formModalTitle}
               formNameLabel={formNameLabel}
+              recaptchaSiteKey={recaptchaSiteKey}
               formRatingLabel={formRatingLabel}
               formReviewLabel={formReviewLabel}
               formSubmitLabel={formSubmitLabel}
@@ -137,20 +140,21 @@ export function Reviews({
                   formRatingLabel={formRatingLabel}
                   formReviewLabel={formReviewLabel}
                   formSubmitLabel={formSubmitLabel}
-                  formTitleLabel={formTitleLabel}
-                  productId={productId}
-                  streamableImages={streamableImages}
-                  streamableProduct={streamableProduct}
-                  streamableUser={streamableUser}
-                  trigger={
-                    <Button className="mx-auto mt-8" size="small" variant="tertiary">
-                      {formButtonLabel}
-                    </Button>
-                  }
-                />
-              </>
-            }
-            sidebarSize="medium"
+              formTitleLabel={formTitleLabel}
+              productId={productId}
+              recaptchaSiteKey={recaptchaSiteKey}
+              streamableImages={streamableImages}
+              streamableProduct={streamableProduct}
+              streamableUser={streamableUser}
+              trigger={
+                <Button className="mx-auto mt-8" size="small" variant="tertiary">
+                  {formButtonLabel}
+                </Button>
+              }
+            />
+          </>
+        }
+        sidebarSize="medium"
           >
             <div className="flex-1 border-t border-contrast-100">
               {reviews.map(({ id, rating, review, name, date }) => {
@@ -201,6 +205,7 @@ export function ReviewsEmptyState({
   streamableProduct,
   streamableImages,
   streamableUser,
+  recaptchaSiteKey,
 }: {
   message?: string;
   reviewsLabel?: string;
@@ -221,6 +226,7 @@ export function ReviewsEmptyState({
   }>;
   streamableProduct: Streamable<{ name: string }>;
   streamableUser: Streamable<{ email: string; name: string }>;
+  recaptchaSiteKey?: string;
 }) {
   return (
     <StickySidebarLayout
@@ -250,6 +256,7 @@ export function ReviewsEmptyState({
           formSubmitLabel={formSubmitLabel}
           formTitleLabel={formTitleLabel}
           productId={productId}
+          recaptchaSiteKey={recaptchaSiteKey}
           streamableImages={streamableImages}
           streamableProduct={streamableProduct}
           streamableUser={streamableUser}
diff --git a/core/vibes/soul/sections/reviews/review-form.tsx b/core/vibes/soul/sections/reviews/review-form.tsx
index 57639c1149..7f0479c3c9 100644
--- a/core/vibes/soul/sections/reviews/review-form.tsx
+++ b/core/vibes/soul/sections/reviews/review-form.tsx
@@ -74,6 +74,7 @@ export const ReviewForm = ({
   });
   const formRef = useRef<HTMLFormElement>(null);
   const recaptchaRef = useRef<ReCAPTCHA | null>(null);
+  const [recaptchaError, setRecaptchaError] = useState<string | null>(null);
 
   const user = useStreamable(streamableUser);
 
@@ -89,22 +90,24 @@ export const ReviewForm = ({
     onValidate({ formData }) {
       return parseWithZodTranslatedErrors(formData, { schema, errorTranslations });
     },
-    async onSubmit(event, { formData }) {
+    onSubmit(event, { formData }) {
       event.preventDefault();
 
+      setRecaptchaError(null);
+
       let payload: FormData = formData;
 
       if (recaptchaSiteKey && recaptchaRef.current) {
-        try {
-          const token = await recaptchaRef.current.execute();
+        const token = recaptchaRef.current.getValue();
 
-          if (token) {
-            payload = new FormData(event.currentTarget);
-            payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
-          }
+        if (!token || typeof token !== 'string') {
+          setRecaptchaError(t('recaptchaRequired'));
+          return;
+        }
 
-          recaptchaRef.current.reset();
-        } catch {}
+        payload = new FormData(event.currentTarget);
+        payload.set(RECAPTCHA_TOKEN_FORM_KEY, token);
+        recaptchaRef.current.reset();
       }
 
       startTransition(() => {
@@ -235,6 +238,9 @@ export const ReviewForm = ({
               type="email"
               value={typeof emailControl.value === 'string' ? emailControl.value : ''}
             />
+            {recaptchaError && (
+              <FormStatus type="error">{recaptchaError}</FormStatus>
+            )}
             {form.errors?.map((error, index) => (
               <FormStatus key={index} type="error">
                 {error}

From ba6ccac917166e05b2b1c85b5bbfd6fa9fdcafde Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Tue, 3 Mar 2026 14:51:51 -0600
Subject: [PATCH 09/13] add types for react-google-recaptcha

---
 core/package.json |  1 +
 pnpm-lock.yaml    | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/core/package.json b/core/package.json
index dbb0f61c69..3862a6eb8d 100644
--- a/core/package.json
+++ b/core/package.json
@@ -89,6 +89,7 @@
     "@types/node": "^22.15.30",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
+    "@types/react-google-recaptcha": "^2.1.9",
     "@types/react-headroom": "^3.2.3",
     "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dca878afd0..bcbe36b4c8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -258,6 +258,9 @@ importers:
       '@types/react-dom':
         specifier: ^19.1.6
         version: 19.2.3(@types/react@19.2.7)
+      '@types/react-google-recaptcha':
+        specifier: ^2.1.9
+        version: 2.1.9
       '@types/react-headroom':
         specifier: ^3.2.3
         version: 3.2.3
@@ -4569,6 +4572,9 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.0
 
+  '@types/react-google-recaptcha@2.1.9':
+    resolution: {integrity: sha512-nT31LrBDuoSZJN4QuwtQSF3O89FVHC4jLhM+NtKEmVF5R1e8OY0Jo4//x2Yapn2aNHguwgX5doAq8Zo+Ehd0ug==}
+
   '@types/react-headroom@3.2.3':
     resolution: {integrity: sha512-rdgcMfoxN6wnGm8mSlwA7vuuK8ojXUI/tWHX1qJSAS7DNuvt7zv3zUtYs15UETEtE0Wc2YJCq0PZlHhZ+lRP4Q==}
 
@@ -15599,6 +15605,10 @@ snapshots:
     dependencies:
       '@types/react': 19.2.7
 
+  '@types/react-google-recaptcha@2.1.9':
+    dependencies:
+      '@types/react': 19.2.7
+
   '@types/react-headroom@3.2.3':
     dependencies:
       '@types/react': 19.2.7

From adbc9c82eed0a43f266579a47e1045e3b59d9d2a Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Tue, 3 Mar 2026 15:15:49 -0600
Subject: [PATCH 10/13] fix linting

---
 .../register/_actions/register-customer.ts    |  2 ++
 .../(default)/(auth)/register/page.tsx        |  4 +--
 .../product/[slug]/_actions/submit-review.ts  |  2 ++
 .../contact/_actions/submit-contact-form.ts   |  2 ++
 core/lib/recaptcha.ts                         |  3 +-
 core/vibes/soul/form/dynamic-form/index.tsx   |  1 +
 core/vibes/soul/sections/reviews/index.tsx    | 32 +++++++++----------
 .../soul/sections/reviews/review-form.tsx     |  5 ++-
 8 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts b/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
index dc4eb9cfa5..4fe4e7d550 100644
--- a/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
+++ b/core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts
@@ -361,8 +361,10 @@ export async function registerCustomer<F extends Field>(
   }
 
   const recaptchaSiteKey = await getRecaptchaSiteKey();
+
   if (recaptchaSiteKey) {
     const recaptchaToken = formData.get(RECAPTCHA_TOKEN_FORM_KEY);
+
     if (typeof recaptchaToken !== 'string' || !recaptchaToken.trim()) {
       return {
         lastResult: submission.reply({ formErrors: [t('recaptchaRequired')] }),
diff --git a/core/app/[locale]/(default)/(auth)/register/page.tsx b/core/app/[locale]/(default)/(auth)/register/page.tsx
index 065ed15bce..23004a7b8f 100644
--- a/core/app/[locale]/(default)/(auth)/register/page.tsx
+++ b/core/app/[locale]/(default)/(auth)/register/page.tsx
@@ -13,8 +13,8 @@ import {
   REGISTER_CUSTOMER_FORM_LAYOUT,
   transformFieldsToLayout,
 } from '~/data-transformers/form-field-transformer/utils';
-import { exists } from '~/lib/utils';
 import { getRecaptchaSiteKey } from '~/lib/recaptcha';
+import { exists } from '~/lib/utils';
 
 import { ADDRESS_FIELDS_NAME_PREFIX, CUSTOMER_FIELDS_NAME_PREFIX } from './_actions/prefixes';
 import { registerCustomer } from './_actions/register-customer';
@@ -112,7 +112,6 @@ export default async function Register({ params }: Props) {
   return (
     <DynamicFormSection
       action={registerCustomer}
-      recaptchaSiteKey={recaptchaSiteKey}
       errorTranslations={{
         firstName: {
           invalid_type: t('FieldErrors.firstNameRequired'),
@@ -158,6 +157,7 @@ export default async function Register({ params }: Props) {
       }}
       fields={fields}
       passwordComplexity={passwordComplexitySettings}
+      recaptchaSiteKey={recaptchaSiteKey}
       submitLabel={t('cta')}
       title={t('heading')}
     />
diff --git a/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts b/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
index a22445440d..27a707ac84 100644
--- a/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
+++ b/core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts
@@ -43,9 +43,11 @@ export async function submitReview(
   }
 
   const recaptchaSiteKey = await getRecaptchaSiteKey();
+
   if (recaptchaSiteKey) {
     const token = payload.get(RECAPTCHA_TOKEN_FORM_KEY);
     const tokenValue = typeof token === 'string' ? token.trim() : '';
+
     if (!tokenValue) {
       return {
         ...prevState,
diff --git a/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts b/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts
index 909393f27d..7a987e00d8 100644
--- a/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts
+++ b/core/app/[locale]/(default)/webpages/[id]/contact/_actions/submit-contact-form.ts
@@ -76,8 +76,10 @@ export async function submitContactForm<F extends Field>(
   }
 
   const recaptchaSiteKey = await getRecaptchaSiteKey();
+
   if (recaptchaSiteKey) {
     const recaptchaToken = formData.get(RECAPTCHA_TOKEN_FORM_KEY);
+
     if (typeof recaptchaToken !== 'string' || !recaptchaToken.trim()) {
       return {
         lastResult: submission.reply({ formErrors: [t('recaptchaRequired')] }),
diff --git a/core/lib/recaptcha.ts b/core/lib/recaptcha.ts
index b2198c4d8b..73cca8263b 100644
--- a/core/lib/recaptcha.ts
+++ b/core/lib/recaptcha.ts
@@ -48,7 +48,8 @@ export const getReCaptchaSettings = cache(async (): Promise<ReCaptchaSettings |
 
 export const getRecaptchaSiteKey = cache(async (): Promise<string | undefined> => {
   const settings = await getReCaptchaSettings();
-  return settings?.isEnabledOnStorefront === true && settings?.siteKey
+
+  return settings?.isEnabledOnStorefront === true && settings.siteKey
     ? settings.siteKey
     : undefined;
 });
diff --git a/core/vibes/soul/form/dynamic-form/index.tsx b/core/vibes/soul/form/dynamic-form/index.tsx
index 6cede84ff2..b5a841a13a 100644
--- a/core/vibes/soul/form/dynamic-form/index.tsx
+++ b/core/vibes/soul/form/dynamic-form/index.tsx
@@ -170,6 +170,7 @@ function DynamicFormInner<F extends Field>({
 
         if (!token || typeof token !== 'string') {
           setRecaptchaError(t('recaptchaRequired'));
+
           return;
         }
 
diff --git a/core/vibes/soul/sections/reviews/index.tsx b/core/vibes/soul/sections/reviews/index.tsx
index 034a87f293..831fe8021b 100644
--- a/core/vibes/soul/sections/reviews/index.tsx
+++ b/core/vibes/soul/sections/reviews/index.tsx
@@ -80,13 +80,13 @@ export function Reviews({
               formEmailLabel={formEmailLabel}
               formModalTitle={formModalTitle}
               formNameLabel={formNameLabel}
-              recaptchaSiteKey={recaptchaSiteKey}
               formRatingLabel={formRatingLabel}
               formReviewLabel={formReviewLabel}
               formSubmitLabel={formSubmitLabel}
               formTitleLabel={formTitleLabel}
               message={emptyStateMessage}
               productId={productId}
+              recaptchaSiteKey={recaptchaSiteKey}
               reviewsLabel={reviewsLabel}
               streamableImages={streamableImages}
               streamableProduct={streamableProduct}
@@ -140,21 +140,21 @@ export function Reviews({
                   formRatingLabel={formRatingLabel}
                   formReviewLabel={formReviewLabel}
                   formSubmitLabel={formSubmitLabel}
-              formTitleLabel={formTitleLabel}
-              productId={productId}
-              recaptchaSiteKey={recaptchaSiteKey}
-              streamableImages={streamableImages}
-              streamableProduct={streamableProduct}
-              streamableUser={streamableUser}
-              trigger={
-                <Button className="mx-auto mt-8" size="small" variant="tertiary">
-                  {formButtonLabel}
-                </Button>
-              }
-            />
-          </>
-        }
-        sidebarSize="medium"
+                  formTitleLabel={formTitleLabel}
+                  productId={productId}
+                  recaptchaSiteKey={recaptchaSiteKey}
+                  streamableImages={streamableImages}
+                  streamableProduct={streamableProduct}
+                  streamableUser={streamableUser}
+                  trigger={
+                    <Button className="mx-auto mt-8" size="small" variant="tertiary">
+                      {formButtonLabel}
+                    </Button>
+                  }
+                />
+              </>
+            }
+            sidebarSize="medium"
           >
             <div className="flex-1 border-t border-contrast-100">
               {reviews.map(({ id, rating, review, name, date }) => {
diff --git a/core/vibes/soul/sections/reviews/review-form.tsx b/core/vibes/soul/sections/reviews/review-form.tsx
index 7f0479c3c9..ff3f54d0c6 100644
--- a/core/vibes/soul/sections/reviews/review-form.tsx
+++ b/core/vibes/soul/sections/reviews/review-form.tsx
@@ -102,6 +102,7 @@ export const ReviewForm = ({
 
         if (!token || typeof token !== 'string') {
           setRecaptchaError(t('recaptchaRequired'));
+
           return;
         }
 
@@ -238,9 +239,7 @@ export const ReviewForm = ({
               type="email"
               value={typeof emailControl.value === 'string' ? emailControl.value : ''}
             />
-            {recaptchaError && (
-              <FormStatus type="error">{recaptchaError}</FormStatus>
-            )}
+            {recaptchaError && <FormStatus type="error">{recaptchaError}</FormStatus>}
             {form.errors?.map((error, index) => (
               <FormStatus key={index} type="error">
                 {error}

From a43e8abc735ffd689ee07f164191d84295e5bcde Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Tue, 3 Mar 2026 15:26:10 -0600
Subject: [PATCH 11/13] fix linting

---
 core/vibes/soul/form/dynamic-form/index.tsx   |  4 ++--
 .../soul/sections/reviews/review-form.tsx     | 21 ++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/core/vibes/soul/form/dynamic-form/index.tsx b/core/vibes/soul/form/dynamic-form/index.tsx
index b5a841a13a..cfe20e5661 100644
--- a/core/vibes/soul/form/dynamic-form/index.tsx
+++ b/core/vibes/soul/form/dynamic-form/index.tsx
@@ -222,7 +222,7 @@ function DynamicFormInner<F extends Field>({
 
             return <DynamicFormField field={field} formField={formField} key={formField.id} />;
           })}
-          {recaptchaSiteKey && <ReCAPTCHA ref={recaptchaRef} sitekey={recaptchaSiteKey} />}
+          {recaptchaSiteKey ? <ReCAPTCHA ref={recaptchaRef} sitekey={recaptchaSiteKey} /> : null}
           <div className="flex gap-1 pt-3">
             {onCancel && (
               <Button
@@ -238,7 +238,7 @@ function DynamicFormInner<F extends Field>({
               {submitLabel}
             </SubmitButton>
           </div>
-          {recaptchaError && <FormStatus type="error">{recaptchaError}</FormStatus>}
+          {recaptchaError ? <FormStatus type="error">{recaptchaError}</FormStatus> : null}
           {form.errors?.map((error, index) => (
             <FormStatus key={index} type="error">
               {error}
diff --git a/core/vibes/soul/sections/reviews/review-form.tsx b/core/vibes/soul/sections/reviews/review-form.tsx
index ff3f54d0c6..00ae51599b 100644
--- a/core/vibes/soul/sections/reviews/review-form.tsx
+++ b/core/vibes/soul/sections/reviews/review-form.tsx
@@ -3,9 +3,16 @@
 import { getFormProps, SubmissionResult, useForm, useInputControl } from '@conform-to/react';
 import { getZodConstraint } from '@conform-to/zod';
 import { useTranslations } from 'next-intl';
-import { startTransition, useActionState, useEffect, useRef, useState } from 'react';
+import {
+  type ComponentRef,
+  startTransition,
+  useActionState,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useFormStatus } from 'react-dom';
-import ReCAPTCHA from 'react-google-recaptcha';
+import RecaptchaWidget from 'react-google-recaptcha';
 
 import { FormStatus } from '@/vibes/soul/form/form-status';
 import { Input } from '@/vibes/soul/form/input';
@@ -73,7 +80,7 @@ export const ReviewForm = ({
     lastResult: null,
   });
   const formRef = useRef<HTMLFormElement>(null);
-  const recaptchaRef = useRef<ReCAPTCHA | null>(null);
+  const recaptchaRef = useRef<ComponentRef<typeof RecaptchaWidget> | null>(null);
   const [recaptchaError, setRecaptchaError] = useState<string | null>(null);
 
   const user = useStreamable(streamableUser);
@@ -239,17 +246,17 @@ export const ReviewForm = ({
               type="email"
               value={typeof emailControl.value === 'string' ? emailControl.value : ''}
             />
-            {recaptchaError && <FormStatus type="error">{recaptchaError}</FormStatus>}
+            {recaptchaError ? <FormStatus type="error">{recaptchaError}</FormStatus> : null}
             {form.errors?.map((error, index) => (
               <FormStatus key={index} type="error">
                 {error}
               </FormStatus>
             ))}
-            {recaptchaSiteKey && (
+            {recaptchaSiteKey ? (
               <div>
-                <ReCAPTCHA ref={recaptchaRef} sitekey={recaptchaSiteKey} />
+                <RecaptchaWidget ref={recaptchaRef} sitekey={recaptchaSiteKey} />
               </div>
-            )}
+            ) : null}
             <div className="mt-auto flex justify-end gap-3">
               <Button onClick={() => setIsOpen(false)} size="small" type="button" variant="ghost">
                 {formCancelLabel}

From 238c976a554d723646be25172d350f6b8359a142 Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Tue, 3 Mar 2026 15:43:50 -0600
Subject: [PATCH 12/13] fix linting

---
 core/vibes/soul/form/dynamic-form/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/core/vibes/soul/form/dynamic-form/index.tsx b/core/vibes/soul/form/dynamic-form/index.tsx
index cfe20e5661..6322154004 100644
--- a/core/vibes/soul/form/dynamic-form/index.tsx
+++ b/core/vibes/soul/form/dynamic-form/index.tsx
@@ -12,6 +12,7 @@ import {
 } from '@conform-to/react';
 import { getZodConstraint, parseWithZod } from '@conform-to/zod';
 import { useTranslations } from 'next-intl';
+import type { ComponentRef } from 'react';
 import {
   FormEvent,
   MouseEvent,
@@ -23,7 +24,7 @@ import {
   useState,
 } from 'react';
 import { useFormStatus } from 'react-dom';
-import ReCAPTCHA from 'react-google-recaptcha';
+import RecaptchaWidget from 'react-google-recaptcha';
 import { z } from 'zod';
 
 import { ButtonRadioGroup } from '@/vibes/soul/form/button-radio-group';
@@ -114,7 +115,7 @@ function DynamicFormInner<F extends Field>({
     lastResult: null,
   });
 
-  const recaptchaRef = useRef<ReCAPTCHA | null>(null);
+  const recaptchaRef = useRef<ComponentRef<typeof RecaptchaWidget> | null>(null);
   const [recaptchaError, setRecaptchaError] = useState<string | null>(null);
 
   const dynamicSchema = schema(fields, passwordComplexity, errorTranslations);
@@ -222,7 +223,7 @@ function DynamicFormInner<F extends Field>({
 
             return <DynamicFormField field={field} formField={formField} key={formField.id} />;
           })}
-          {recaptchaSiteKey ? <ReCAPTCHA ref={recaptchaRef} sitekey={recaptchaSiteKey} /> : null}
+          {recaptchaSiteKey ? <RecaptchaWidget ref={recaptchaRef} sitekey={recaptchaSiteKey} /> : null}
           <div className="flex gap-1 pt-3">
             {onCancel && (
               <Button

From 37e4938a125bd97e275704290ddcd17443a2c3fe Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Tue, 3 Mar 2026 19:23:52 -0600
Subject: [PATCH 13/13] fix linting

---
 core/vibes/soul/form/dynamic-form/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/core/vibes/soul/form/dynamic-form/index.tsx b/core/vibes/soul/form/dynamic-form/index.tsx
index 6322154004..638e22014d 100644
--- a/core/vibes/soul/form/dynamic-form/index.tsx
+++ b/core/vibes/soul/form/dynamic-form/index.tsx
@@ -12,8 +12,8 @@ import {
 } from '@conform-to/react';
 import { getZodConstraint, parseWithZod } from '@conform-to/zod';
 import { useTranslations } from 'next-intl';
-import type { ComponentRef } from 'react';
 import {
+  type ComponentRef,
   FormEvent,
   MouseEvent,
   ReactNode,
@@ -223,7 +223,9 @@ function DynamicFormInner<F extends Field>({
 
             return <DynamicFormField field={field} formField={formField} key={formField.id} />;
           })}
-          {recaptchaSiteKey ? <RecaptchaWidget ref={recaptchaRef} sitekey={recaptchaSiteKey} /> : null}
+          {recaptchaSiteKey ? (
+            <RecaptchaWidget ref={recaptchaRef} sitekey={recaptchaSiteKey} />
+          ) : null}
           <div className="flex gap-1 pt-3">
             {onCancel && (
               <Button