turnstile component

frontend/src/components/Register.js

@@ -77,7 +77,7 @@ const Register = () => {
         specialChar: false,
     });
     const [isPasswordFocused, setIsPasswordFocused] = useState(false); // Track if the password field is focused
-    const [turnstileToken, setTurnstileToken] = useState('');
+    const [turnstileToken, setTurnstileToken] = useState(null);
     const navigate = useNavigate();
 
     // Password validation function

frontend/src/components/Turnstile.js

@@ -2,25 +2,38 @@ import React, { useEffect } from 'react';
 
 const Turnstile = ({ siteKey, onVerify }) => {
     useEffect(() => {
-        // Load the Turnstile script only once
-        const script = document.createElement("script");
-        script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
-        script.async = true;
-        document.body.appendChild(script);
+        // Check if Turnstile script is already loaded
+        if (!document.querySelector("script[src='https://challenges.cloudflare.com/turnstile/v0/api.js']")) {
+            const script = document.createElement("script");
+            script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
+            script.async = true;
+            script.defer = true;
+            document.body.appendChild(script);
+        }
+
+        // Initialize Turnstile widget after script loads
+        const onLoad = () => {
+            if (window.turnstile) {
+                window.turnstile.render('#turnstile-widget', {
+                    sitekey: siteKey,
+                    callback: onVerify,
+                });
+            }
+        };
+
+        // Check if script has already loaded
+        if (window.turnstile) {
+            onLoad();
+        } else {
+            window.addEventListener("load", onLoad);
+        }
 
         return () => {
-            // Cleanup script when component unmounts
-            document.body.removeChild(script);
+            window.removeEventListener("load", onLoad);
         };
-    }, []);
+    }, [siteKey, onVerify]);
 
-    return (
-        <div
-            className="cf-turnstile"
-            data-sitekey={siteKey}
-            data-callback={onVerify}
-        ></div>
-    );
+    return <div id="turnstile-widget" className="cf-turnstile"></div>;
 };
 
 export default Turnstile;