added recaptcha v3

jamesqquick · jamesqquick · commit 2d9270dcac36 · 2026-02-20T09:40:46.000-06:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';
@@ -193,6 +194,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))}
@@ -202,6 +208,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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/core/vibes/soul/sections/reviews/index.tsx b/core/vibes/soul/sections/reviews/index.tsx
diff --git a/core/vibes/soul/sections/reviews/review-form.tsx b/core/vibes/soul/sections/reviews/review-form.tsx
