From ec0af5fcf74dc1c77a377130eb59f9d7a214289d Mon Sep 17 00:00:00 2001
From: salvacybersec <salva@opsecti.local>
Date: Mon, 10 Nov 2025 19:03:55 +0300
Subject: [PATCH] fix: Blank page issue - improve auth loading state and error
 handling

- Fixed AuthContext to properly set user to null on auth check failure
- Added loading spinner in PrivateRoute instead of returning null
- Removed automatic redirect from API interceptor (let React Router handle it)
- Improved error handling in checkAuth to prevent stuck loading state
---
 frontend/src/App.jsx                 | 13 +++++++++++--
 frontend/src/context/AuthContext.jsx |  3 +++
 frontend/src/services/api.js         |  6 ++----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8328494..32da70f 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,5 +1,5 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
-import { ThemeProvider, createTheme, CssBaseline } from '@mui/material';
+import { ThemeProvider, createTheme, CssBaseline, Box, CircularProgress } from '@mui/material';
 import { AuthProvider, useAuth } from './context/AuthContext';
 import Layout from './components/Layout/Layout';
 import Login from './pages/Login';
@@ -30,7 +30,16 @@ function PrivateRoute({ children }) {
   const { user, loading } = useAuth();
 
   if (loading) {
-    return null;
+    return (
+      <Box
+        display="flex"
+        justifyContent="center"
+        alignItems="center"
+        minHeight="100vh"
+      >
+        <CircularProgress />
+      </Box>
+    );
   }
 
   return user ? children : <Navigate to="/login" />;
diff --git a/frontend/src/context/AuthContext.jsx b/frontend/src/context/AuthContext.jsx
index 882c894..5b8964b 100644
--- a/frontend/src/context/AuthContext.jsx
+++ b/frontend/src/context/AuthContext.jsx
@@ -16,9 +16,12 @@ export const AuthProvider = ({ children }) => {
       const response = await authService.checkAuth();
       if (response.authenticated) {
         setUser(response.user);
+      } else {
+        setUser(null);
       }
     } catch (error) {
       console.error('Auth check failed:', error);
+      setUser(null);
     } finally {
       setLoading(false);
     }
diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js
index 1a2b768..ab92622 100644
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@@ -14,10 +14,8 @@ const api = axios.create({
 api.interceptors.response.use(
   (response) => response,
   (error) => {
-    if (error.response?.status === 401) {
-      // Redirect to login if unauthorized
-      window.location.href = '/login';
-    }
+    // Don't redirect here - let React Router handle it
+    // 401 errors will be caught by components and Navigate will handle redirect
     return Promise.reject(error);
   }
 );