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
This commit is contained in:
@@ -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" />;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user