feat: add reCAPTCHA

[brobro10000]

This pull request introduces Google reCAPTCHA v3 integration into the registration flow to help prevent automated account creation. The changes include adding the reCAPTCHA provider, handling token acquisition, updating registration payloads and types, and ensuring robust test coverage for both token-present and token-absent scenarios.

reCAPTCHA Integration:

• Added react-google-recaptcha-v3 to dependencies and wrapped the PlanDetailsPage with GoogleReCaptchaProvider using the site key from config (package.json, PlanDetails.tsx). [1] [2]
• Implemented a new useRecaptchaToken hook to acquire reCAPTCHA tokens, exposing getToken, isReady, and isLoading states (useRecaptchaToken.tsx, index.ts). [1] [2]
• Updated the registration form to block rendering until reCAPTCHA is ready (RegisterAccountFields.tsx). [1] [2] [3]

Registration Flow and Types:

• Extended registration request types to include a possible recaptchaToken and refactored mutation/request logic to support partial payloads, only including the token if available (registration.ts, useRegisterMutation.ts, PlanDetailsPage.tsx). [1] [2] [3] [4] [5] [6]

Testing and Configuration:

• Enhanced tests to mock and verify reCAPTCHA behavior, including scenarios where the token is missing, and ensured the site key is present in the test config (PlanDetailsPage.test.tsx). [1] [2] [3] [4]
• Added RECAPTCHA_SITE_WEB_KEY to the application config initialization (index.tsx).

Other Refactoring:

• Minor refactoring to use ReactNode return types in stepper components for consistency (CheckoutStepperContainer.tsx). [1] [2]

These changes collectively ensure that registration requests are protected by reCAPTCHA when available, with graceful fallback and robust type safety and test coverage.

[brobro10000]

Part of the original implementation from in the authn MFE.

[Copilot]

Pull Request Overview

This PR integrates Google reCAPTCHA v3 into the registration flow to prevent automated account creation. The implementation includes a new hook for token acquisition, updates to registration types and payloads to optionally include the token, and comprehensive test coverage for both token-present and token-absent scenarios.

Key changes:

• Added react-google-recaptcha-v3 dependency and wrapped the registration flow with GoogleReCaptchaProvider
• Created useRecaptchaToken hook to acquire tokens with graceful fallback when unavailable
• Updated registration types to support optional recaptchaToken field with proper type safety

Reviewed Changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
package.json	Added react-google-recaptcha-v3 dependency
src/index.tsx	Added RECAPTCHA_SITE_KEY_WEB to config initialization
src/components/Stepper/Steps/PlanDetails.tsx	Wrapped PlanDetailsPage with GoogleReCaptchaProvider
src/components/app/data/hooks/useRecaptchaToken.tsx	New hook for acquiring reCAPTCHA tokens with fallback handling
src/components/app/data/hooks/index.ts	Exported useRecaptchaToken hook
src/components/FormFields/RegisterAccountFields.tsx	Blocks rendering until reCAPTCHA is ready
src/components/plan-details-pages/PlanDetailsPage.tsx	Acquires and conditionally includes reCAPTCHA token in registration
src/components/app/data/services/registration.ts	Updated registration types to support optional recaptchaToken
src/components/app/data/hooks/useRegisterMutation.ts	Changed mutation to accept Partial registration payload
src/components/app/data/hooks/tests/useRegisterMutation.test.tsx	Updated test helper to use Partial type
src/components/Stepper/CheckoutStepperContainer.tsx	Changed return type to ReactElement for consistency
src/components/plan-details-pages/tests/PlanDetailsPage.test.tsx	Added comprehensive reCAPTCHA mocking and null token test case
.env* files	Added RECAPTCHA_SITE_KEY_WEB configuration to all environments

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The error message 'Oopsie!' is unprofessional and unclear. Replace with a more descriptive message such as 'reCAPTCHA failed to generate a token'.

Suggested change

	throw new Error("Oopsie! reCAPTCHA didn't return a token.");
	throw new Error("reCAPTCHA failed to generate a token.");

[Copilot]

The type hierarchy is incorrect. RegistrationCreateRequestSchema extends RegistrationCreateRecaptchaRequestSchema, which makes recaptchaToken required. This contradicts the intent to make it optional. Consider making RegistrationCreateRequestSchema extend only BaseRegistrationCreateRequestSchema and add recaptchaToken as an optional field.

Suggested change

	interface RegistrationCreateRequestSchema extends
	BaseRegistrationCreateRequestSchema,
	RegistrationCreateRecaptchaRequestSchema {
	honorCode: boolean;
	interface RegistrationCreateRequestSchema extends BaseRegistrationCreateRequestSchema {
	honorCode: boolean;
	recaptchaToken?: string;

[Copilot]

The type casting to RegistrationCreateRecaptchaRequestSchema is unnecessary and creates confusion. Since registerMutationPayload is already typed as Partial, you can simply add the recaptchaToken property without the type assertion. Consider: registerMutationPayload.recaptchaToken = recaptchaToken; or use a spread without the type cast.

Suggested change

	} as RegistrationCreateRecaptchaRequestSchema;
	};