Initial commit: igny8 project

frontend/src/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,96 @@
+import { useEffect, ReactNode, useState } from "react";
+import { Navigate, useLocation } from "react-router";
+import { useAuthStore } from "../../store/authStore";
+import { useErrorHandler } from "../../hooks/useErrorHandler";
+import { trackLoading } from "../common/LoadingStateMonitor";
+
+interface ProtectedRouteProps {
+  children: ReactNode;
+}
+
+/**
+ * ProtectedRoute component - guards routes requiring authentication
+ * Redirects to /signin if user is not authenticated
+ */
+export default function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated, loading } = useAuthStore();
+  const location = useLocation();
+  const { addError } = useErrorHandler('ProtectedRoute');
+  const [showError, setShowError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  // Track loading state
+  useEffect(() => {
+    trackLoading('auth-loading', loading);
+  }, [loading]);
+
+  // Immediate check on mount: if loading is true, reset it immediately
+  useEffect(() => {
+    if (loading) {
+      console.warn('ProtectedRoute: Loading state is true on mount, resetting immediately');
+      useAuthStore.setState({ loading: false });
+    }
+  }, []);
+
+  // Safety timeout: if loading becomes true and stays stuck, show error
+  useEffect(() => {
+    if (loading) {
+      const timeout1 = setTimeout(() => {
+        setErrorMessage('Authentication check is taking longer than expected. This may indicate a network or server issue.');
+        setShowError(true);
+        addError(new Error('Auth loading stuck for 3 seconds'), 'ProtectedRoute');
+      }, 3000);
+
+      const timeout2 = setTimeout(() => {
+        console.error('ProtectedRoute: Loading state stuck for 5 seconds, forcing reset');
+        useAuthStore.setState({ loading: false });
+        setShowError(false);
+      }, 5000);
+
+      return () => {
+        clearTimeout(timeout1);
+        clearTimeout(timeout2);
+      };
+    } else {
+      setShowError(false);
+    }
+  }, [loading, addError]);
+
+  // Show loading state while checking authentication
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
+        <div className="text-center max-w-md px-4">
+          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500 mb-4"></div>
+          <p className="text-lg font-medium text-gray-800 dark:text-white mb-2">Loading...</p>
+          
+          {showError && (
+            <div className="mt-4 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
+              <p className="text-sm text-yellow-800 dark:text-yellow-200 mb-3">
+                {errorMessage}
+              </p>
+              <button
+                onClick={() => {
+                  useAuthStore.setState({ loading: false });
+                  setShowError(false);
+                  window.location.reload();
+                }}
+                className="px-4 py-2 text-sm bg-yellow-600 text-white rounded hover:bg-yellow-700"
+              >
+                Retry or Reload Page
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Redirect to signin if not authenticated
+  if (!isAuthenticated) {
+    return <Navigate to="/signin" state={{ from: location }} replace />;
+  }
+
+  return <>{children}</>;
+}
+