add turnstile global script

cankurttekin · Nov 12, 2024 · 4cf7cde · 4cf7cde
1 parent df4a348
commit 4cf7cde
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -9,6 +9,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
   <title>ATSFS</title>
+  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
 </head>
 <body>
 <div id="root"></div>

diff --git a/frontend/src/components/Register.js b/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(null);
+    const [turnstileToken, setTurnstileToken] = useState('');
     const navigate = useNavigate();
 
     // Password validation function

diff --git a/frontend/src/components/Turnstile.js b/frontend/src/components/Turnstile.js
@@ -1,39 +1,45 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 const Turnstile = ({ siteKey, onVerify }) => {
+    const [captchaLoaded, setCaptchaLoaded] = useState(false);
+    const captchaRef = useRef(null);
+
     useEffect(() => {
-        // 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";
+        // Ensure the script is loaded and Turnstile is initialized
+        const handleLoad = () => {
+            setCaptchaLoaded(true);
+        };
+
+        if (window.turnstile && window.turnstile.render) {
+            handleLoad();
+        } else {
+            // Check if the script is loaded
+            const script = document.createElement('script');
+            script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
             script.async = true;
             script.defer = true;
+            script.onload = handleLoad;
             document.body.appendChild(script);
         }
 
-        // Initialize Turnstile widget after script loads
-        const onLoad = () => {
-            if (window.turnstile) {
-                window.turnstile.render('#turnstile-widget', {
+        return () => {
+            // Cleanup: we don't need to handle removal of the script as it's loaded only once globally
+        };
+    }, []);
+
+    useEffect(() => {
+        if (captchaLoaded && siteKey) {
+            // Render the Turnstile widget after the script has loaded
+            if (captchaRef.current) {
+                window.turnstile.render(captchaRef.current, {
                     sitekey: siteKey,
-                    callback: onVerify,
+                    callback: onVerify, // callback when captcha is successfully verified
                 });
             }
-        };
-
-        // Check if script has already loaded
-        if (window.turnstile) {
-            onLoad();
-        } else {
-            window.addEventListener("load", onLoad);
         }
+    }, [captchaLoaded, siteKey, onVerify]);
 
-        return () => {
-            window.removeEventListener("load", onLoad);
-        };
-    }, [siteKey, onVerify]);
-
-    return <div id="turnstile-widget" className="cf-turnstile"></div>;
+    return <div ref={captchaRef} />;
 };
 
 export default Turnstile;