feat: implement Cloudflare Turnstile integration and add verification details form to registration page

Author: TusharSaini999

Backend/.env.sample

@@ -41,6 +41,8 @@ ADMIN_PASSWORD=admin123
 # [REQUIRED] Used to generate certificate verification links
 FRONTEND_URL=http://localhost:5173
 
-# Bot Protection
-# [REQUIRED] Cloudflare Turnstile Secret
-TURNSTILE_SECRET=
+# Bot Protection (Cloudflare Turnstile)
+# [REQUIRED] Cloudflare Turnstile Secret Key (Server-side only)
+TURNSTILE_SECRET_KEY=0x4AAAAAA...
+# [OPTIONAL] Allowed hostnames (comma-separated whitelist)
+TURNSTILE_HOSTNAMES=qucodex.com,www.qucodex.com,localhost,127.0.0.1

Frontend/.env.example

@@ -1,2 +1,3 @@
-VITE_TURNSTILE_SITE_KEY=your_cloudflare_turnstile_site_key_here
-VITE_API_BASE_URL=http://localhost:5000/api/v1  # Use in production (e.g., https://api.myproduction.com/api/v1)
+# Cloudflare Turnstile Public Site Key (DO NOT place Secret Key here)
+VITE_TURNSTILE_SITE_KEY=0x4AAAAAA...
+VITE_API_BASE_URL=http://localhost:5000/api/v1  # Use in production (e.g., https://api.qucodex.com/api/v1)

Frontend/package-lock.json

@@ -11,7 +11,7 @@
     "postinstall": "node -e \"require('fs').cpSync('node_modules/tinymce', 'public/tinymce', {recursive: true, force: true})\""
   },
   "dependencies": {
-    "@marsidev/react-turnstile": "^1.5.3",
+    "@marsidev/react-turnstile": "^1.6.0",
     "@reduxjs/toolkit": "^2.12.0",
     "@tinymce/tinymce-react": "^6.3.0",
     "axios": "^1.18.1",

Frontend/package.json

@@ -0,0 +1,4 @@
+import TurnstileWidget from "./TurnstileWidget";
+
+export default TurnstileWidget;
+export { TurnstileWidget as CloudflareTurnstile };

Frontend/src/components/common/CloudflareTurnstile.jsx

@@ -0,0 +1,94 @@
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { Turnstile } from "@marsidev/react-turnstile";
+
+/**
+ * Production-ready Cloudflare Turnstile Component.
+ * Powered by @marsidev/react-turnstile for React 19 / StrictMode / SPA lifecycle safety.
+ *
+ * - Zero custom postMessage or manual iframe manipulation.
+ * - Handles script loading, execution, and cleanup automatically.
+ * - Forwards reset(), remove(), and getResponse() methods via ref.
+ * - Safe against duplicate rendering and StrictMode remounts.
+ */
+const TurnstileWidget = forwardRef(
+  (
+    {
+      siteKey = import.meta.env.VITE_TURNSTILE_SITE_KEY,
+      action = "default",
+      theme = "auto",
+      size = "invisible",
+      onSuccess,
+      onError,
+      onExpire,
+      className = "",
+      id,
+    },
+    ref
+  ) => {
+    const innerRef = useRef(null);
+
+    useImperativeHandle(ref, () => ({
+      reset: () => {
+        try {
+          innerRef.current?.reset();
+        } catch (err) {
+          console.warn("[Turnstile] Reset failed:", err);
+        }
+      },
+      remove: () => {
+        try {
+          innerRef.current?.remove();
+        } catch (err) {
+          console.warn("[Turnstile] Remove failed:", err);
+        }
+      },
+      render: () => {
+        try {
+          innerRef.current?.render();
+        } catch (err) {
+          console.warn("[Turnstile] Render failed:", err);
+        }
+      },
+      getResponse: () => {
+        return innerRef.current?.getResponse();
+      },
+    }));
+
+    if (!siteKey) {
+      if (import.meta.env.DEV) {
+        console.warn("[Turnstile] VITE_TURNSTILE_SITE_KEY is not configured.");
+      }
+      return null;
+    }
+
+    return (
+      <div id={id} className={`turnstile-wrapper ${className}`.trim()}>
+        <Turnstile
+          ref={innerRef}
+          siteKey={siteKey}
+          options={{
+            action,
+            theme,
+            size,
+            retry: "auto",
+            refreshExpired: "auto",
+          }}
+          onSuccess={(token) => {
+            onSuccess?.(token);
+          }}
+          onError={(err) => {
+            onError?.(err);
+          }}
+          onExpire={() => {
+            onExpire?.();
+          }}
+        />
+      </div>
+    );
+  }
+);
+
+TurnstileWidget.displayName = "TurnstileWidget";
+
+export default TurnstileWidget;
+export { TurnstileWidget as CloudflareTurnstile };

Frontend/src/components/common/TurnstileWidget.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { ShieldCheck, Loader2, ZoomIn, X, QrCode } from "lucide-react";
-import { Turnstile } from "@marsidev/react-turnstile";
+import TurnstileWidget from "../common/TurnstileWidget";
 
 export default function VerificationDetailsForm({
   register,
@@ -116,17 +116,18 @@ export default function VerificationDetailsForm({
       </div>
 
       {/* Security Protection (Invisible Turnstile) */}
-      <Turnstile
+      <TurnstileWidget
         ref={turnstileRef}
         id="turnstile-register"
         siteKey={import.meta.env.VITE_TURNSTILE_SITE_KEY}
+        action="register"
+        size="invisible"
         onSuccess={(token) => setTurnstileToken(token)}
         onError={(err) => {
-          console.warn("Turnstile verification widget warning:", err);
+          console.warn("[Turnstile] Register widget error:", err);
           setTurnstileToken(null);
         }}
         onExpire={() => setTurnstileToken(null)}
-        options={{ theme: "auto", action: "register", size: "invisible" }}
       />
       <div className="mb-6 flex items-center justify-center gap-1.5 text-[11px] font-mono text-text-muted/60">
         <ShieldCheck className="w-3.5 h-3.5 text-accent" /> Protected by Cloudflare Turnstile

Frontend/src/components/register/VerificationDetailsForm.jsx

@@ -2,7 +2,7 @@ import React, { useState, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { useDispatch } from "react-redux";
 import { setError } from "../../../context/messageSlice";
-import { Turnstile } from "@marsidev/react-turnstile";
+import TurnstileWidget from "../../../components/common/TurnstileWidget";
 import axiosInstance from "../../../services/axiosInstance";
 import contentData from "../../../data/content.json";
 import {
@@ -227,17 +227,18 @@ const ContactSection = () => {
 
                   <div className="pt-4 flex flex-col sm:flex-row items-center justify-between gap-6 border-t border-border-soft">
                     <div className="w-full sm:w-auto flex items-center justify-center gap-1.5 text-[11px] font-mono text-text-muted/60">
-                      <Turnstile
+                      <TurnstileWidget
                         ref={turnstileRef}
                         id="turnstile-contact"
                         siteKey={import.meta.env.VITE_TURNSTILE_SITE_KEY}
+                        action="contact"
+                        size="invisible"
                         onSuccess={(token) => setTurnstileToken(token)}
                         onError={(err) => {
-                          console.warn("Turnstile widget error:", err);
+                          console.warn("[Turnstile] Contact widget error:", err);
                           setTurnstileToken(null);
                         }}
                         onExpire={() => setTurnstileToken(null)}
-                        options={{ theme: "auto", action: "contact", size: "invisible" }}
                       />
                       <span>Protected by Cloudflare Turnstile</span>
                     </div>