feat: add Recaptcha

Author: brobro10000

package-lock.json

@@ -56,6 +56,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-google-recaptcha-v3": "^1.11.0",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.54.2",
     "react-intl": "^6.8.9",

package.json

@@ -3,7 +3,7 @@ import { Stack } from '@openedx/paragon';
 import { Lock, Visibility, VisibilityOff } from '@openedx/paragon/icons';
 import { useState } from 'react';
 
-import { useCountryOptions } from '@/components/app/data';
+import { useCountryOptions, useRecaptchaSubmission } from '@/components/app/data';
 import { FieldContainer } from '@/components/FieldContainer';
 import Field from '@/components/FormFields/Field';
 
@@ -230,18 +230,24 @@ export const RegisterAccountCountry = ({
   );
 };
 
-const RegisterAccountFields = ({ form }: RegisterAccountFieldsProps) => (
-  <FieldContainer>
-    <RegisterAccountFieldsHeader />
-    <Stack gap={3}>
-      <RegisterAccountAdminEmail form={form} />
-      <RegisterAccountFullName form={form} />
-      <RegisterAccountUsername form={form} />
-      <RegisterAccountPassword form={form} />
-      <RegisterAccountConfirmPassword form={form} />
-      <RegisterAccountCountry form={form} />
-    </Stack>
-  </FieldContainer>
-);
+const RegisterAccountFields = ({ form }: RegisterAccountFieldsProps) => {
+  const { isLoading } = useRecaptchaSubmission('submit');
+  if (isLoading) {
+    return null;
+  }
+  return (
+    <FieldContainer>
+      <RegisterAccountFieldsHeader />
+      <Stack gap={3}>
+        <RegisterAccountAdminEmail form={form} />
+        <RegisterAccountFullName form={form} />
+        <RegisterAccountUsername form={form} />
+        <RegisterAccountPassword form={form} />
+        <RegisterAccountConfirmPassword form={form} />
+        <RegisterAccountCountry form={form} />
+      </Stack>
+    </FieldContainer>
+  );
+};
 
 export default RegisterAccountFields;

src/components/FormFields/RegisterAccountFields.tsx

@@ -1,8 +1,19 @@
+import { getConfig } from '@edx/frontend-platform/config';
+import { ReactNode } from 'react';
+import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
+
 import PlanDetailsPage from '@/components/plan-details-pages/PlanDetailsPage';
 
-// TODO: unnecessary layer of abstraction, just move component logic into this file.
-const PlanDetails: React.FC = () => (
-  <PlanDetailsPage />
-);
+const PlanDetails = (): ReactNode => {
+  const { RECAPTCHA_SITE_WEB_KEY } = getConfig();
+  return (
+    <GoogleReCaptchaProvider
+      reCaptchaKey={RECAPTCHA_SITE_WEB_KEY}
+      useEnterprise
+    >
+      <PlanDetailsPage />
+    </GoogleReCaptchaProvider>
+  );
+};
 
 export default PlanDetails;

src/components/Stepper/Steps/PlanDetails.tsx

@@ -13,3 +13,4 @@ export { default as useCreateCheckoutIntentMutation } from './useCreateCheckoutI
 export { default as useCheckoutSessionClientSecret } from './useCheckoutSessionClientSecret';
 export { default as useRegisterMutation } from './useRegisterMutation';
 export { default as useCountryOptions } from './useCountryOptions';
+export { default as useRecaptchaSubmission } from './useRecaptchaSubmission';

src/components/app/data/hooks/index.ts

@@ -0,0 +1,36 @@
+import { getConfig } from '@edx/frontend-platform';
+import { useCallback } from 'react';
+import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
+
+const useRecaptchaSubmission = (actionName = 'submit') => {
+  const { executeRecaptcha } = useGoogleReCaptcha();
+  const { RECAPTCHA_SITE_WEB_KEY } = getConfig();
+
+  const isLoading = !(executeRecaptcha || RECAPTCHA_SITE_WEB_KEY);
+  const isReady = !!executeRecaptcha && RECAPTCHA_SITE_WEB_KEY;
+
+  const executeWithFallback = useCallback(async () => {
+    if (isReady) {
+      const token = await executeRecaptcha(actionName);
+      if (!token) {
+        throw new Error("Oopsie! reCAPTCHA didn't return a token.");
+      }
+      return token;
+    }
+
+    // Fallback: no reCAPTCHA or not ready
+    if (RECAPTCHA_SITE_WEB_KEY) {
+      // eslint-disable-next-line no-console
+      console.warn(`reCAPTCHA not ready for action: ${actionName}. Proceeding without token.`);
+    }
+    return null;
+  }, [isReady, RECAPTCHA_SITE_WEB_KEY, executeRecaptcha, actionName]);
+
+  return {
+    executeWithFallback,
+    isReady,
+    isLoading,
+  };
+};
+
+export default useRecaptchaSubmission;

src/components/app/data/hooks/useRecaptchaSubmission.tsx

@@ -22,7 +22,7 @@ export default function useRegisterMutation({
   return useMutation<
   AxiosResponse<RegistrationCreateSuccessResponseSchema>,
   AxiosError<RegistrationErrorResponseSchema>,
-  RegistrationCreateRequestSchema
+  Partial<RegistrationCreateRequestSchema>
   >({
     mutationFn: (requestData) => registerRequest(requestData),
     onSuccess: (axiosResponse) => onSuccess(axiosResponse.data),

src/components/app/data/hooks/useRegisterMutation.ts

@@ -62,13 +62,22 @@ declare global {
   /**
    * Account creation (register) request/response schemas.
    */
-  interface RegistrationCreateRequestSchema {
+  interface BaseRegistrationCreateRequestSchema {
     name: string;
     username: string;
     password: string;
     email: string;
     country: string;
-    honorCode?: boolean;
+  }
+
+  interface RegistrationCreateRecaptchaRequestSchema extends BaseRegistrationCreateRequestSchema {
+    recaptchaToken: string;
+  }
+
+  interface RegistrationCreateRequestSchema extends
+    BaseRegistrationCreateRequestSchema,
+    RegistrationCreateRecaptchaRequestSchema {
+    honorCode: boolean;
   }
 
   interface RegistrationCreateSuccessResponseSchema {
@@ -387,7 +396,6 @@ export async function registerRequest(
   Object.entries(requestPayload as Record<string, unknown>).forEach(([key, value]) => {
     formParams.append(key, String(value));
   });
-
   const response: AxiosResponse<RegistrationCreateSuccessResponseSchema> = (
     await getAuthenticatedHttpClient().post<RegistrationCreateSuccessResponsePayload>(
       `${getConfig().LMS_BASE_URL}/api/user/v2/account/registration/`,

src/components/app/data/services/registration.ts

@@ -1,4 +1,5 @@
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { logError } from '@edx/frontend-platform/logging';
 import { AppContext } from '@edx/frontend-platform/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
@@ -14,7 +15,7 @@ import { useForm } from 'react-hook-form';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { z } from 'zod';
 
-import { useFormValidationConstraints } from '@/components/app/data';
+import { useFormValidationConstraints, useRecaptchaSubmission } from '@/components/app/data';
 import {
   useCreateCheckoutIntentMutation,
   useLoginMutation,
@@ -42,6 +43,7 @@ import '../Stepper/Steps/css/PriceAlert.css';
 const PlanDetailsPage = () => {
   const location = useLocation();
   const queryClient = useQueryClient();
+
   const { data: formValidationConstraints } = useFormValidationConstraints();
   const planDetailsFormData = useCheckoutFormStore((state) => state.formData[DataStoreKey.PlanDetails]);
   const setFormData = useCheckoutFormStore((state) => state.setFormData);
@@ -52,7 +54,7 @@ const PlanDetailsPage = () => {
     buttonMessage: stepperActionButtonMessage,
     formSchema,
   } = useCurrentPageDetails();
-
+  const { executeWithFallback } = useRecaptchaSubmission('submit');
   const planDetailsSchema = useMemo(() => (
     formSchema(formValidationConstraints, planDetailsFormData.stripePriceId)
   ), [formSchema, formValidationConstraints, planDetailsFormData.stripePriceId]);
@@ -169,14 +171,29 @@ const PlanDetailsPage = () => {
         password: data.password,
       });
     },
-    [SubmitCallbacks.PlanDetailsRegister]: (data: PlanDetailsRegisterPageData) => {
-      registerMutation.mutate({
+    [SubmitCallbacks.PlanDetailsRegister]: async (data: PlanDetailsRegisterPageData) => {
+      let recaptchaToken: string | null = null;
+      try {
+        recaptchaToken = await executeWithFallback();
+      } catch (err: any) {
+        logError(err.message);
+      }
+
+      let registerMutationPayload: BaseRegistrationCreateRequestSchema = {
         name: data.fullName,
         email: data.adminEmail,
         username: data.username,
         password: data.password,
         country: data.country,
-      });
+      };
+
+      if (recaptchaToken) {
+        registerMutationPayload = {
+          ...registerMutationPayload,
+          captchaToken: recaptchaToken,
+        } as RegistrationCreateRecaptchaRequestSchema;
+      }
+      registerMutation.mutate(registerMutationPayload);
     },
   };
 

src/components/plan-details-pages/PlanDetailsPage.tsx

@@ -49,6 +49,7 @@ initialize({
         ENTERPRISE_SALES_TERMS_AND_CONDITIONS_URL: process.env.ENTERPRISE_SALES_TERMS_AND_CONDITIONS_URL || null,
         COMPARE_ENTERPRISE_PLANS_URL: process.env.COMPARE_ENTERPRISE_PLANS_URL || null,
         CONTACT_SUPPORT_URL: process.env.CONTACT_SUPPORT_URL || null,
+        RECAPTCHA_SITE_WEB_KEY: process.env.RECAPTCHA_SITE_WEB_KEY || null,
       });
     },
   },