Recaptcha

core/app/[locale]/(default)/(auth)/register/_actions/register-customer.ts

@@ -14,13 +14,14 @@
 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 @@
 
   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' },
     });

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>
   );
 }

core/app/[locale]/(default)/product/[slug]/_actions/submit-review.ts

@@ -9,11 +9,12 @@
 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 @@
   }
 
   const { productEntityId, ...input } = submission.value;
+  const recaptchaToken = payload.get(RECAPTCHA_TOKEN_FORM_KEY);
 
   try {
     const response = await client.fetch({
@@ -52,6 +54,10 @@
           },
           productEntityId,
         },
+        reCaptchaV2:
+          typeof recaptchaToken === 'string' && recaptchaToken
+            ? { token: recaptchaToken }
+            : undefined,
       },
     });
 

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' },
     });

core/components/recaptcha-provider/index.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { createContext, useContext, type PropsWithChildren } from 'react';
+
+import type { ReCaptchaSettings } from '~/lib/recaptcha/constants';
+
+const ReCaptchaContext = createContext<ReCaptchaSettings | null>(null);
+
+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();
+  return settings?.isEnabledOnStorefront === true && settings?.siteKey
+    ? settings.siteKey
+    : undefined;
+}
+
+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>
+  );
+}

core/lib/recaptcha.ts

@@ -0,0 +1,46 @@
+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 {
+    site {
+      settings {
+        reCaptcha {
+          failedLoginLockoutDurationSeconds
+          isEnabledOnCheckout
+          isEnabledOnStorefront
+          siteKey
+        }
+      }
+    }
+  }
+`);
+
+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,
+  };
+});

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';

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": "^3.1.0",
     "react-headroom": "^3.2.1",
     "schema-dts": "^1.1.5",
     "server-only": "^0.0.1",

core/vibes/soul/form/dynamic-form/index.tsx

@@ -19,10 +19,15 @@
   startTransition,
   useActionState,
   useEffect,
 } 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';
@@ -79,7 +84,11 @@
   errorTranslations?: FormErrorTranslationMap;
 }
 
-export function DynamicForm<F extends Field>({
+export function DynamicForm<F extends Field>(props: DynamicFormProps<F>) {
+  return <DynamicFormInner {...props} />;
+}
+
+function DynamicFormInner<F extends Field>({
   action,
   fields,
   buttonSize = 'medium',
@@ -94,6 +103,7 @@
   errorTranslations,
 }: 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
@@ -104,6 +114,8 @@
     lastResult: null,
   });
 
+  const recaptchaRef = useRef<ReCAPTCHA | null>(null);
+
   const dynamicSchema = schema(fields, passwordComplexity, errorTranslations);
   const defaultValue = fields
     .flatMap((f) => (Array.isArray(f) ? f : [f]))
@@ -145,11 +157,25 @@
     defaultValue,
     shouldValidate: 'onSubmit',
     shouldRevalidate: 'onInput',
-    onSubmit(event, { formData }) {
+    async onSubmit(event, { formData }) {
       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
+        }
+      }
+
       startTransition(() => {
-        formAction(formData);
+        formAction(payload);
       });
     },
   });
@@ -191,6 +217,7 @@
 
             return <DynamicFormField field={field} formField={formField} key={formField.id} />;
           })}
+          {recaptchaSiteKey && <ReCAPTCHA ref={recaptchaRef} sitekey={recaptchaSiteKey} />}
           <div className="flex gap-1 pt-3">
             {onCancel && (
               <Button

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 ReCAPTCHA from 'react-google-recaptcha';
 
 import { FormStatus } from '@/vibes/soul/form/form-status';
 import { Input } from '@/vibes/soul/form/input';
@@ -15,7 +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/constants';
 
 import { reviewFormErrorTranslations, schema } from './schema';
 
@@ -63,12 +66,14 @@ export const ReviewForm = ({
   streamableUser,
 }: 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);
 
@@ -84,11 +89,23 @@ export const ReviewForm = ({
     onValidate({ formData }) {
       return parseWithZodTranslatedErrors(formData, { schema, errorTranslations });
     },
-    onSubmit(event, { formData }) {
+    async onSubmit(event, { formData }) {
       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 {}
+      }
+
       startTransition(() => {
-        formAction(formData);
+        formAction(payload);
       });
     },
   });
@@ -220,6 +237,11 @@ export const ReviewForm = ({
                 {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}