update recaptcha package and make visible on forms

Author: jamesqquick

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

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}

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';
@@ -194,11 +193,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))}
@@ -208,7 +202,6 @@ export default async function ContactPage({ params, searchParams }: Props) {
         <DynamicForm
           action={submitContactForm}
           fields={await getContactFields(id)}
-          recaptchaEnabled={recaptchaEnabled}
           submitLabel={t('cta')}
         />
       </div>

core/components/recaptcha-provider/index.tsx

@@ -1,42 +1,33 @@
 '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);
 
 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 {
   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.
+ * 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>
   );
 }

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

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,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",

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

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>

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}