40 lines
1 KiB
TypeScript
40 lines
1 KiB
TypeScript
/**
|
|
* Protected Route Component
|
|
* Ensures only authenticated users can access protected content
|
|
*
|
|
* © 2025 Netwerk Digitaal Erfgoed & TextPast. All rights reserved.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { Navigate, useLocation } from 'react-router-dom';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { LoadingScreen } from './LoadingScreen';
|
|
|
|
interface ProtectedRouteProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
|
|
const { isAuthenticated, isLoading } = useAuth();
|
|
const location = useLocation();
|
|
|
|
// Show circular progress meter while checking auth status
|
|
if (isLoading) {
|
|
return (
|
|
<LoadingScreen
|
|
message="Verifying authentication..."
|
|
size="large"
|
|
fullscreen
|
|
/>
|
|
);
|
|
}
|
|
|
|
// Redirect to login if not authenticated
|
|
if (!isAuthenticated) {
|
|
return <Navigate to="/login" state={{ from: location }} replace />;
|
|
}
|
|
|
|
return <>{children}</>;
|
|
};
|
|
|
|
export default ProtectedRoute;
|