[CA-4854] Catchafox support (#294)

Author: rchapel

CHANGELOG.md

@@ -7,6 +7,8 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+- Add CaptchaFox support
+
 ## [1.35.0] - 2025-05-13
 
 ### Changed

package-lock.json

@@ -33,7 +33,8 @@
         "format:check": "prettier --check ."
     },
     "dependencies": {
-        "@reachfive/identity-core": "^1.36.0",
+        "@captchafox/react": "^1.9.0",
+        "@reachfive/identity-core": "^1.37.0",
         "buffer": "^6.0.3",
         "char-info": "0.3.2",
         "class-variance-authority": "^0.7.1",

package.json

@@ -0,0 +1,83 @@
+import { CaptchaFoxInstance, CaptchaFox as CaptchaFoxWidget } from '@captchafox/react';
+import React, { ComponentType, useRef } from 'react';
+
+import styled from 'styled-components';
+import CaptchaFox, { CaptchaFoxConf } from './captchaFox';
+import ReCaptcha, { RecaptchaAction, ReCaptchaConf } from './reCaptcha';
+
+const StyledCaptchaFoxWidget = styled(CaptchaFoxWidget)`
+    margin-bottom: ${props => props.theme.spacing}px;
+`;
+
+export type WithCaptchaProps<T> = T & Partial<ReCaptchaConf & CaptchaFoxConf>;
+
+export type WithCaptchaToken<T> = T & { captchaToken?: string };
+
+export type CaptchaValues = {
+    handler: <T, R>(data: T, callback: (data: T) => Promise<R>) => Promise<R>;
+    Captcha?: ComponentType;
+};
+
+const defaultHandler = <T, R>(data: T, callback: (data: T) => Promise<R>) => callback(data);
+
+export const CaptchaContext = React.createContext<CaptchaValues>({
+    handler: defaultHandler,
+});
+
+export const useCaptcha = () => {
+    return React.useContext(CaptchaContext);
+};
+
+export type CaptchaProviderProps = WithCaptchaProps<{
+    children: React.ReactNode;
+    action: RecaptchaAction;
+}>;
+
+export const CaptchaProvider = ({ children, action, ...options }: CaptchaProviderProps) => {
+    const captchaFoxInstanceRef = useRef<CaptchaFoxInstance>(null);
+
+    if (options.recaptcha_enabled && options.recaptcha_site_key) {
+        const handler = <T, R>(data: T, callback: (data: T) => Promise<R>) =>
+            ReCaptcha.handle(
+                data,
+                { recaptcha_enabled: true, recaptcha_site_key: options.recaptcha_site_key! },
+                callback,
+                action
+            );
+
+        return <CaptchaContext.Provider value={{ handler }}>{children}</CaptchaContext.Provider>;
+    }
+
+    if (options.captchaFoxEnabled && options.captchaFoxSiteKey) {
+        const handler = async <T, R>(data: T, callback: (data: T) => Promise<R>) =>
+            CaptchaFox.handle(data, captchaFoxInstanceRef.current, callback);
+
+        return (
+            <CaptchaContext.Provider
+                value={{
+                    handler,
+                    Captcha: () => (
+                        <StyledCaptchaFoxWidget
+                            ref={captchaFoxInstanceRef}
+                            sitekey={options.captchaFoxSiteKey!}
+                            mode={options.captchaFoxMode ?? 'hidden'}
+                            className="[&_.cf-button]:!max-w-full"
+                        />
+                    ),
+                }}
+            >
+                {children}
+            </CaptchaContext.Provider>
+        );
+    }
+
+    return (
+        <CaptchaContext.Provider
+            value={{
+                handler: defaultHandler,
+            }}
+        >
+            {children}
+        </CaptchaContext.Provider>
+    );
+};

src/components/captcha.tsx

@@ -0,0 +1,40 @@
+import { AppError } from '@/helpers/errors';
+import { CaptchaFoxInstance } from '@captchafox/react';
+import type { WidgetDisplayMode } from '@captchafox/types';
+import { WithCaptchaToken } from './captcha';
+
+export interface CaptchaFoxConf {
+    /**
+     * Boolean that specifies whether CaptchaFox is enabled or not.
+     */
+    captchaFoxEnabled: boolean;
+    /**
+     * The SITE key that comes from your [CaptchaFox](https://docs.captchafox.com/getting-started#get-your-captchafox-keys) setup.
+     * This must be paired with the appropriate secret key that you received when setting up CaptchaFox.
+     */
+    captchaFoxSiteKey: string;
+    /**
+     * Define how CaptchaFox is displayed (hidden|inline|popup)/ Default to hidden.
+     */
+    captchaFoxMode?: WidgetDisplayMode;
+}
+
+export default class CaptchaFox {
+    static handle = async <T, R = {}>(
+        data: T,
+        instance: CaptchaFoxInstance | null,
+        callback: (data: WithCaptchaToken<T>) => Promise<R>
+    ) => {
+        try {
+            const captchaToken = await instance?.execute();
+            return callback({ ...data, captchaToken, captchaProvider: 'captchafox' });
+        } catch (_error) {
+            return Promise.reject({
+                errorId: '',
+                error: 'CaptchaFox error',
+                errorDescription: 'CaptchaFox Error',
+                errorMessageKey: 'captchaFox.error',
+            } satisfies AppError);
+        }
+    };
+}

src/components/captchaFox.tsx

@@ -10,6 +10,7 @@ import { isAppError } from '../../helpers/errors';
 import { logError } from '../../helpers/logger';
 import { useDebounceCallback } from '../../helpers/useDebounceCallback';
 import { type Config } from '../../types';
+import { useCaptcha } from '../captcha';
 import { ErrorText, MutedText } from '../miscComponent';
 import { PrimaryButton } from './buttonComponent';
 import type { Field, FieldCreator, FieldValue } from './fieldCreator';
@@ -118,6 +119,7 @@ export function createForm<Model extends Record<PropertyKey, unknown> = {}, P =
         const config = useConfig();
         const i18n = useI18n();
         const client = useReachfive();
+        const { Captcha, handler: captchaHandler } = useCaptcha();
 
         const {
             beforeSubmit,
@@ -346,7 +348,7 @@ export function createForm<Model extends Record<PropertyKey, unknown> = {}, P =
             event.preventDefault();
 
             await processData(processedData => {
-                handler(processedData)
+                captchaHandler(processedData, handler)
                     .then(handleSuccess)
                     .catch((err: unknown) => {
                         (typeof skipError === 'function' ? skipError(err) : skipError === true)
@@ -371,6 +373,7 @@ export function createForm<Model extends Record<PropertyKey, unknown> = {}, P =
                           })
                         : field.staticContent
                 )}
+                {Captcha && <Captcha />}
                 {SubmitComponent ? (
                     <SubmitComponent
                         disabled={isLoading}

src/components/form/formComponent.tsx

@@ -7,14 +7,11 @@ import { createForm } from './formComponent';
 import { UserAgreementStyle } from './formControlsComponent';
 import { buildFormFields, type Field } from './formFieldFactory';
 
+import { CaptchaProvider, WithCaptchaProps, type WithCaptchaToken } from '../../components/captcha';
 import { snakeCaseProperties } from '../../helpers/transformObjectProperties';
 import { isValued } from '../../helpers/utils';
 import { MarkdownContent } from '../miscComponent';
-import ReCaptcha, {
-    extractCaptchaTokenFromData,
-    importGoogleRecaptchaScript,
-    type WithCaptchaToken,
-} from '../reCaptcha';
+import { extractCaptchaTokenFromData, importGoogleRecaptchaScript } from '../reCaptcha';
 
 import { useConfig } from '../../contexts/config';
 import { useReachfive } from '../../contexts/reachfive';
@@ -33,8 +30,6 @@ export interface PasswordSignupFormProps {
     beforeSignup?: <T>(param: T) => T;
     canShowPassword?: boolean;
     phoneNumberOptions?: PhoneNumberOptions;
-    recaptcha_enabled?: boolean;
-    recaptcha_site_key?: string;
     redirectUrl?: string;
     returnToAfterEmailConfirmation?: string;
     showLabels?: boolean;
@@ -57,14 +52,17 @@ export const PasswordSignupForm = ({
     phoneNumberOptions,
     recaptcha_enabled = false,
     recaptcha_site_key,
+    captchaFoxEnabled = false,
+    captchaFoxSiteKey,
+    captchaFoxMode = 'hidden',
     redirectUrl,
     returnToAfterEmailConfirmation,
     showLabels,
     signupFields = ['given_name', 'family_name', 'email', 'password', 'password_confirmation'],
     userAgreement,
     onError = (() => {}) as OnError,
     onSuccess = (() => {}) satisfies OnSuccess,
-}: PasswordSignupFormProps) => {
+}: WithCaptchaProps<PasswordSignupFormProps>) => {
     const coreClient = useReachfive();
     const config = useConfig();
     const [blacklist, setBlacklist] = useState<string[]>([]);
@@ -128,28 +126,30 @@ export const PasswordSignupForm = ({
         : fields;
 
     return (
-        <SignupForm
-            fields={allFields}
-            showLabels={showLabels}
-            beforeSubmit={beforeSignup}
-            onFieldChange={refreshBlacklist}
-            sharedProps={{
-                blacklist,
-                ...phoneNumberOptions,
-            }}
-            handler={(data: SignupParams['data']) =>
-                ReCaptcha.handle(
-                    data,
-                    { recaptcha_enabled, recaptcha_site_key },
-                    callback,
-                    'signup'
-                )
-            }
-            onSuccess={authResult => {
-                onSuccess({ name: 'signup', authResult });
-            }}
-            onError={onError}
-        />
+        <CaptchaProvider
+            recaptcha_enabled={recaptcha_enabled}
+            recaptcha_site_key={recaptcha_site_key}
+            captchaFoxEnabled={captchaFoxEnabled}
+            captchaFoxSiteKey={captchaFoxSiteKey}
+            captchaFoxMode={captchaFoxMode}
+            action="signup"
+        >
+            <SignupForm
+                fields={allFields}
+                showLabels={showLabels}
+                beforeSubmit={beforeSignup}
+                onFieldChange={refreshBlacklist}
+                sharedProps={{
+                    blacklist,
+                    ...phoneNumberOptions,
+                }}
+                handler={callback}
+                onSuccess={authResult => {
+                    onSuccess({ name: 'signup', authResult });
+                }}
+                onError={onError}
+            />
+        </CaptchaProvider>
     );
 };