import React from 'react';
import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { Box, CircularProgress } from '@mui/material';
import { useAuth } from '../context/AuthContext';
/**
* Protected Route component that checks if user is authenticated
*/
const ProtectedRoute = () => {
const { isAuthenticated, isLoading } = useAuth();
const location = useLocation();
// Show loading state while checking authentication
if (isLoading) {
return (
<Box
display="flex"
justifyContent="center"
alignItems="center"
minHeight="100vh"
>
<CircularProgress />
</Box>
);
}
// If not authenticated, redirect to login with return path
if (!isAuthenticated) {
return <Navigate to="/login" state={{ from: location }} replace />;
}
// If authenticated, render the child routes
return <Outlet />;
};
export default ProtectedRoute;