fix TurnstileBridge

Author: derensdima22

src/AppHelmet.tsx

@@ -30,7 +30,7 @@ export default function AppHelmet() {
         navigate('/login');
       }
     }
-  }, []);
+  }, [token, location.pathname, navigate]);
 
   useEffect(() => {
     if (

src/components/ErrorBoundary.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error?: Error;
+}
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div
+          style={{
+            minHeight: '100vh',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            padding: '20px',
+            backgroundColor: '#f5f5f5',
+          }}
+        >
+          <h2 style={{ color: '#e74c3c', marginBottom: '20px' }}>
+            Turnstile Error
+          </h2>
+          <p style={{ color: '#666', textAlign: 'center', maxWidth: '400px', marginBottom: '20px' }}>
+            Something went wrong with the Turnstile verification. Please try again.
+          </p>
+          <button
+            onClick={() => window.location.reload()}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#3498db',
+              color: 'white',
+              border: 'none',
+              borderRadius: '5px',
+              cursor: 'pointer',
+            }}
+          >
+            Reload page
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/pages/TurnstileBridge.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from 'react';
-import { useSearchParams } from 'react-router-dom';
 
 const DEFAULT_SITE_KEY = import.meta.env.VITE_TURNSTILE_SITE_KEY as string;
 
@@ -12,67 +11,105 @@ declare global {
 
 export default function TurnstileBridge() {
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const [searchParams] = useSearchParams();
-  
-  const siteKey = searchParams.get('sitekey') || DEFAULT_SITE_KEY;
+  const scriptLoadedRef = useRef(false);
 
   useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const siteKey = urlParams.get('sitekey') || DEFAULT_SITE_KEY;
+
+    if (!siteKey) {
+      console.error('No sitekey provided');
+      return;
+    }
+
+    if (scriptLoadedRef.current) {
+      return;
+    }
+
+    const existingScript = document.querySelector('script[src*="turnstile"]');
+    if (existingScript) {
+      scriptLoadedRef.current = true;
+      initializeTurnstile(siteKey);
+      return;
+    }
+
     const script = document.createElement('script');
     script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
     script.async = true;
     script.defer = true;
+    
     script.onload = () => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const ts = (window as any).turnstile as
-        | {
-            render: (
-              el: HTMLElement,
-              opts: {
-                sitekey: string;
-                callback?: (token: string) => void;
-                'error-callback'?: (error: string) => void;
-                action?: string;
-                theme?: 'light' | 'dark' | 'auto';
-              }
-            ) => void;
-          }
-        | undefined;
+      scriptLoadedRef.current = true;
+      initializeTurnstile(siteKey);
+    };
 
-      if (containerRef.current && ts) {
-        ts.render(containerRef.current, {
-          sitekey: siteKey,
-          callback: (token: string) => {
-            window.location.href =
-              'ethoraappreactnative://turnstile?token=' +
-              encodeURIComponent(token);
-          },
-          'error-callback': (error: string) => {
-            window.location.href =
-              'ethoraappreactnative://turnstile?error=' +
-              encodeURIComponent(String(error));
-          },
-          action: 'signup',
-          theme: 'light',
-        });
-      }
+    script.onerror = () => {
+      console.error('Failed to load Turnstile script');
     };
 
     document.head.appendChild(script);
+
     return () => {
-      document.head.removeChild(script);
     };
   }, []);
 
+  const initializeTurnstile = (siteKey: string) => {
+    if (!containerRef.current) {
+      console.error('Container not found');
+      return;
+    }
+
+    if (typeof (window as any).turnstile === 'undefined') {
+      console.error('Turnstile not available');
+      return;
+    }
+
+    try {
+      (window as any).turnstile.render(containerRef.current, {
+        sitekey: siteKey,
+        callback: (token: string) => {
+          try {
+            window.location.href = 
+              'ethoraappreactnative://turnstile?token=' + 
+              encodeURIComponent(token);
+          } catch (err) {
+            console.error('Error redirecting with token:', err);
+          }
+        },
+        'error-callback': (error: string) => {
+          try {
+            window.location.href = 
+              'ethoraappreactnative://turnstile?error=' + 
+              encodeURIComponent(String(error));
+          } catch (err) {
+            console.error('Error redirecting with error:', err);
+          }
+        },
+        action: 'signup',
+        theme: 'light',
+      });
+    } catch (err) {
+      console.error('Error initializing Turnstile:', err);
+    }
+  };
+
   return (
     <div
       style={{
         minHeight: '100vh',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        backgroundColor: '#f5f5f5',
       }}
     >
-      <div ref={containerRef} />
+      <div 
+        ref={containerRef}
+        style={{
+          minHeight: '65px',
+          minWidth: '300px',
+        }}
+      />
     </div>
   );
-}
+}

src/router.tsx

@@ -8,6 +8,7 @@ import LoginComponent from './pages/AuthPage/Login';
 import Register from './pages/AuthPage/Register';
 import Chat from './pages/Chat';
 import { Error404Page } from './pages/ErrorPage/Error404Page';
+import { ErrorBoundary } from './components/ErrorBoundary';
 const Admin = lazy(() => import('./pages/Admin'));
 const AdminApp = lazy(() => import('./pages/AdminApp'));
 const AdminApps = lazy(() => import('./pages/AdminApps'));
@@ -49,7 +50,11 @@ export const router = createBrowserRouter(
             },
             {
               path: '/turnstile',
-              Component: TurnstileBridge,
+              element: (
+                <ErrorBoundary>
+                  <TurnstileBridge />
+                </ErrorBoundary>
+              ),
             },
             {
               path: '/app',