Merge pull request #20 from atko-cic/feat/captcha-components

chore: added the captcha components

Author: tanejatanya63

package-lock.json

@@ -11,6 +11,6 @@ module.exports = {
     '^@/(.*)$': '<rootDir>/src/$1',
   },
   // Allow transforming ESM modules from node_modules.
-  transformIgnorePatterns: ['/node_modules/(?!@auth0/auth0-acul-js/)'],
+  transformIgnorePatterns: ['/node_modules/(?!(friendly-challenge|@auth0/auth0-acul-js)/)'],
   setupFilesAfterEnv: ['<rootDir>/src/test/setup.ts'],
 }; 

react-js/jest.config.cjs

@@ -17,12 +17,17 @@
   "dependencies": {
     "@auth0/auth0-acul-js": "0.1.0-beta.7",
     "@base-ui-components/react": "^1.0.0-beta.1",
+    "@hcaptcha/react-hcaptcha": "^1.12.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "friendly-challenge": "^0.9.19",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-google-recaptcha": "^3.1.0",
+    "react-google-recaptcha-enterprise": "^1.0.3",
     "react-hook-form": "^7.60.0",
+    "react-turnstile": "^1.1.4",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
@@ -39,6 +44,8 @@
     "@types/node": "^24.0.15",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@types/react-google-recaptcha": "^2.1.9",
+    "@types/react-google-recaptcha-enterprise": "^1.0.3",
     "@typescript-eslint/eslint-plugin": "8.37.0",
     "@typescript-eslint/parser": "8.37.0",
     "@vitejs/plugin-react": "^4.7.0",

react-js/package.json

@@ -0,0 +1,156 @@
+import React from "react";
+import { Control, FieldValues, Path, RegisterOptions } from "react-hook-form";
+
+import AuthChallengeWidget from "./providers/AuthChallengeWidget";
+import FriendlyCaptchaWidget from "./providers/FriendlyCaptchaWidget";
+import HCaptchaWidget from "./providers/HCaptchaWidget";
+import RecaptchaCombinedWidget from "./providers/ReCaptchaCombinedWidget";
+import SimpleCaptchaWidget from "./providers/SimpleCaptchaWidget";
+
+// ---
+// Interfaces
+// ---
+
+export interface CaptchaResponse {
+  provider: string;
+  token?: string;
+  answer?: string;
+  arkoseToken?: string;
+}
+
+export interface CaptchaWidgetProps<T extends FieldValues = FieldValues> {
+  config: {
+    provider: string;
+    siteKey?: string;
+    image?: string;
+    size?: string;
+    placeholder?: string;
+  };
+  control?: Control<T>;
+  rules?: RegisterOptions<T>;
+  name: Path<T>;
+  onCaptchaResponse: (response: CaptchaResponse | null) => void;
+  className?: string;
+  label?: string;
+  theme?: "light" | "dark" | "auto";
+  error?: string;
+}
+
+export interface ICaptcha {
+  provider?: string;
+  image?: string;
+  imageAltText?: string;
+  enabled?: boolean;
+  siteKey?: string;
+}
+
+export interface CaptchaProps<T extends FieldValues = FieldValues> {
+  captcha?: ICaptcha;
+  onValidationChange?: (
+    isValid: boolean,
+    value?: string,
+    error?: string
+  ) => void;
+  label?: string;
+  sdkError?: string;
+  theme?: "light" | "dark" | "auto";
+  className?: string;
+  control: Control<T>;
+  rules?: RegisterOptions<T>;
+  name: Path<T>;
+}
+
+// ---
+// Main Component
+// ---
+
+const Captcha = <T extends FieldValues = FieldValues>({
+  control,
+  rules,
+  name,
+  captcha,
+  onValidationChange,
+  label,
+  sdkError,
+  theme,
+  className,
+}: CaptchaProps<T>) => {
+  // ---
+  // Constants and Mappings
+  // ---
+
+  function getCaptchaWidgetMap<T extends FieldValues>() {
+    return {
+      recaptcha_v2: RecaptchaCombinedWidget as React.ComponentType<
+        CaptchaWidgetProps<T>
+      >,
+      recaptcha_enterprise: RecaptchaCombinedWidget as React.ComponentType<
+        CaptchaWidgetProps<T>
+      >,
+      hcaptcha: HCaptchaWidget as React.ComponentType<CaptchaWidgetProps<T>>,
+      auth0_v2: AuthChallengeWidget as React.ComponentType<
+        CaptchaWidgetProps<T>
+      >,
+      friendly_captcha: FriendlyCaptchaWidget as React.ComponentType<
+        CaptchaWidgetProps<T>
+      >,
+    };
+  }
+  const CAPTCHA_WIDGET_MAP = getCaptchaWidgetMap<T>();
+  const { provider, image, siteKey, enabled = true } = captcha || {}; // Default 'enabled' to true
+
+  // If captcha is not enabled or no provider is specified, render nothing.
+  if (!enabled || !provider) {
+    return null;
+  }
+
+  const handleResponse = (res: CaptchaResponse | null) => {
+    if (onValidationChange) {
+      if (res) {
+        const value =
+          res.provider === "auth0" ? res.answer : res.token || res.arkoseToken;
+        const isValid = !!value;
+        onValidationChange(isValid, value);
+      } else {
+        onValidationChange(false);
+      }
+    }
+  };
+
+  // Handle the special case for SimpleCaptchaWidget (Auth0 v1)
+  if (provider === "auth0") {
+    return image ? (
+      <SimpleCaptchaWidget
+        config={{ provider: "auth0", image }}
+        onCaptchaResponse={handleResponse}
+        control={control}
+        name={name}
+        rules={rules}
+        label={label}
+        error={sdkError}
+        className={className}
+      />
+    ) : null;
+  }
+
+  // Use the map for other providers
+  const SpecificCaptchaWidget =
+    CAPTCHA_WIDGET_MAP[provider as keyof typeof CAPTCHA_WIDGET_MAP];
+
+  if (SpecificCaptchaWidget && siteKey) {
+    return (
+      <SpecificCaptchaWidget
+        config={{ provider, siteKey }}
+        name={name}
+        onCaptchaResponse={handleResponse}
+        theme={theme}
+        label={label}
+        error={sdkError}
+        className={className}
+      />
+    );
+  }
+  return null;
+};
+
+export default Captcha;

react-js/src/components/Captcha/index.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from "react";
+import Turnstile from "react-turnstile";
+
+import { cn } from "@/lib/utils";
+
+import type { CaptchaResponse, CaptchaWidgetProps } from "../index";
+
+const MAX_RETRY_ATTEMPTS = 3; // Define a maximum number of retries
+
+const AuthChallengeWidget: React.FC<CaptchaWidgetProps> = ({
+  config,
+  onCaptchaResponse,
+  className = "",
+  theme,
+  error,
+}) => {
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(error); // Manage internal as well as error from backend
+  const retryCount = useRef(0); // Use a ref to persist retry count across renders
+
+  // Update internal error if external error prop changes
+  useEffect(() => {
+    setErrorMessage(error);
+  }, [error]);
+
+  if (config.provider !== "auth0_v2") {
+    return null;
+  }
+
+  const siteKey = config.siteKey;
+
+  if (!siteKey) {
+    return null;
+  }
+
+  const handleVerify = (token: string) => {
+    retryCount.current = 0; // Reset retry count on successful verification
+    setErrorMessage(undefined); // Clear any previous error
+
+    const response: CaptchaResponse = {
+      provider: "auth0_v2",
+      token: token,
+    };
+    onCaptchaResponse(response);
+  };
+
+  const handleError = (error: string) => {
+    onCaptchaResponse(null);
+
+    if (retryCount.current < MAX_RETRY_ATTEMPTS) {
+      retryCount.current += 1;
+      return;
+    } else {
+      setErrorMessage(`Verification failed after multiple attempts: ${error}`);
+    }
+  };
+
+  const handleExpire = () => {
+    onCaptchaResponse(null);
+    retryCount.current = 0; // Reset retry count on expiration
+  };
+
+  const auth0CaptchaWidgetStyle = {
+    transform: "scale(1.06)",
+    transformOrigin: "0 0",
+    overflow: "hidden",
+    display: "inline-block",
+    lineHeight: 0,
+    fontSize: 0,
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      <div
+        className={cn(
+          "rounded-sm inline-block",
+          errorMessage ? "border border-[#d93025]" : "none"
+        )}
+        style={auth0CaptchaWidgetStyle}
+      >
+        <Turnstile
+          sitekey={siteKey}
+          onVerify={handleVerify}
+          onError={handleError}
+          onExpire={handleExpire}
+          theme={theme}
+          size="normal"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AuthChallengeWidget;