fix(Support): fix turnstile verification

client/index.html

@@ -27,7 +27,6 @@
     <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/manifest.json">
-    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-0P2RT3G484"></script>
     <script>

client/package.json

@@ -13,6 +13,7 @@
     "@ckeditor/ckeditor5-react": "^6.2.0",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@libretexts/insight-ckeditor5-build": "^1.0.0",
+    "@marsidev/react-turnstile": "^0.5.3",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-query-devtools": "^4.36.1",

client/src/components/support/CreateTicketFlow.tsx

@@ -19,8 +19,9 @@ import {
   SupportTicketPriorityOptions,
 } from "../../utils/supportHelpers";
 import { useTypedSelector } from "../../state/hooks";
-import { Link, useLocation, useParams } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import FileUploader from "../FileUploader";
+import TurnstileWidget from "../util/TurnstileWidget";
 
 interface CreateTicketFlowProps {
   isLoggedIn: boolean;
@@ -53,6 +54,7 @@ const CreateTicketFlow: React.FC<CreateTicketFlowProps> = ({ isLoggedIn }) => {
   const [autoCapturedURL, setAutoCapturedURL] = useState<boolean>(false);
   const [success, setSuccess] = useState(false);
   const [files, setFiles] = useState<File[]>([]);
+  const [turnstileToken, setTurnstileToken] = useState<string>("");
   const [challengePassed, setChallengePassed] = useState(false);
 
   useEffect(() => {
@@ -66,15 +68,9 @@ const CreateTicketFlow: React.FC<CreateTicketFlowProps> = ({ isLoggedIn }) => {
 
   useEffect(() => {
     if (isLoggedIn) return;
-    // @ts-ignore
-    turnstile.render("#turnstile-container", {
-      sitekey: "0x4AAAAAAAQ3wOi31ZpBiURp",
-      theme: "light",
-      callback: function (token: string) {
-        verifyTurnstile(token);
-      },
-    });
-  }, [isLoggedIn]);
+    if (!turnstileToken) return;
+    verifyTurnstile(turnstileToken);
+  }, [isLoggedIn, turnstileToken]);
 
   async function verifyTurnstile(token: string) {
     try {
@@ -448,7 +444,7 @@ const CreateTicketFlow: React.FC<CreateTicketFlowProps> = ({ isLoggedIn }) => {
           />
           {!isLoggedIn && (
             <div className="flex flex-row items-center justify-center mt-8">
-              <div className="cf-turnstile" id="turnstile-container"></div>
+              <TurnstileWidget onSuccess={(t) => setTurnstileToken(t)} />
             </div>
           )}
           <div className="flex flex-row justify-end mt-4">

client/src/components/util/TurnstileWidget.tsx

@@ -0,0 +1,13 @@
+import { Turnstile } from "@marsidev/react-turnstile";
+
+interface TurnstileWidgetProps {
+  onSuccess: (token: string) => void;
+}
+
+const TurnstileWidget = (props: TurnstileWidgetProps) => {
+  return (
+    <Turnstile siteKey="0x4AAAAAAAQ3wOi31ZpBiURp" onSuccess={props.onSuccess} />
+  );
+};
+
+export default TurnstileWidget;