Use a different turnstile package

package.json

@@ -32,6 +32,7 @@
     "@formkit/auto-animate": "^0.8.2",
     "@headlessui/react": "^1.7.19",
     "@ladjs/country-language": "^1.0.3",
+    "@marsidev/react-turnstile": "^0.7.1",
     "@movie-web/providers": "github:sussy-code/providers",
     "@noble/hashes": "^1.4.0",
     "@plasmohq/messaging": "^0.6.2",

pnpm-lock.yaml

@@ -30,6 +30,9 @@ dependencies:
   '@ladjs/country-language':
     specifier: ^1.0.3
     version: 1.0.3
+  '@marsidev/react-turnstile':
+    specifier: ^0.7.1
+    version: 0.7.1(react-dom@18.3.1)(react@18.3.1)
   '@movie-web/providers':
     specifier: github:sussy-code/providers
     version: github.com/sussy-code/providers/b04c921b5533e6f53a58c3a0406d90ad2f076c05
@@ -1957,6 +1960,16 @@ packages:
     engines: {node: '>= 14'}
     dev: false
 
+  /@marsidev/react-turnstile@0.7.1(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-SGa0cweJ2mP1RRi9oJJrlPpZHvlklLqu8tlXDLEbsQ/WExM8Ng9cr9439lZcnu8+tfeVpQIe8qFB1UU5uE+KlQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@noble/hashes@1.4.0:
     resolution: {integrity: sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==}
     engines: {node: '>= 16'}
@@ -7434,7 +7447,6 @@ packages:
     resolution: {tarball: https://codeload.github.com/sussy-code/providers/tar.gz/b04c921b5533e6f53a58c3a0406d90ad2f076c05}
     name: '@movie-web/providers'
     version: 2.3.0
-    prepare: true
     requiresBuild: true
     dependencies:
       cheerio: 1.0.0-rc.12

src/stores/turnstile/index.tsx

@@ -1,6 +1,6 @@
+import { Turnstile } from "@marsidev/react-turnstile";
 import classNames from "classnames";
 import { useRef } from "react";
-import Turnstile, { BoundTurnstileObject } from "react-turnstile";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
@@ -10,16 +10,12 @@ import { conf } from "@/setup/config";
 export interface TurnstileStore {
   isInWidget: boolean;
   turnstiles: {
-    controls: BoundTurnstileObject;
+    controls: any;
     isInPopout: boolean;
     id: string;
   }[];
   cbs: ((token: string | null) => void)[];
-  setTurnstile(
-    id: string,
-    v: BoundTurnstileObject | null,
-    isInPopout: boolean,
-  ): void;
+  setTurnstile(id: string, v: any, isInPopout: boolean): void;
   getToken(): Promise<string>;
   processToken(token: string | null, widgetId: string): void;
 }
@@ -103,6 +99,7 @@ export function TurnstileProvider(props: {
   const setTurnstile = useTurnstileStore((s) => s.setTurnstile);
   const processToken = useTurnstileStore((s) => s.processToken);
   if (!siteKey) return null;
+  const widgetId = idRef.current || "sudo-turnstile";
   return (
     <div
       className={classNames({
@@ -110,19 +107,17 @@ export function TurnstileProvider(props: {
       })}
     >
       <Turnstile
-        sitekey={siteKey}
-        theme="light"
-        onLoad={(widgetId, bound) => {
-          idRef.current = widgetId;
-          setTurnstile(widgetId, bound, !!props.isInPopout);
+        siteKey={siteKey}
+        onLoadScript={() => {
+          setTurnstile(widgetId, "sudo", !!props.isInPopout);
         }}
         onError={() => {
-          const id = idRef.current;
+          const id = "sudo-turnstile";
           if (!id) return;
           processToken(null, id);
         }}
-        onVerify={(token) => {
-          const id = idRef.current;
+        onSuccess={(token) => {
+          const id = "sudo-turnstile";
           if (!id) return;
           processToken(token, id);
           props.onUpdateShow?.(false);
@@ -130,8 +125,6 @@ export function TurnstileProvider(props: {
         onBeforeInteractive={() => {
           props.onUpdateShow?.(true);
         }}
-        refreshExpired="never"
-        execution="render"
       />
     </div>
   );