This repository has no description
1import React, { useEffect, useState } from 'react';
2import { Navigate, useLocation } from 'react-router-dom';
3import { useAuth } from '../contexts/AuthContext';
4import { isAccountAllowed } from '../config/allowlist';
5import Loading from './Loading/Loading';
6
7// Component to protect routes that require authentication
8const ProtectedRoute = ({ children }) => {
9 const { isAuthenticated, loading, session } = useAuth();
10 const location = useLocation();
11
12 // Show loading state while authentication context is initializing
13 if (loading) {
14 return <Loading message="Checking authentication..." />;
15 }
16
17 // If not authenticated after loading, redirect to login
18 if (!isAuthenticated) {
19 console.log("ProtectedRoute: Not authenticated, redirecting to login");
20 const returnUrl = encodeURIComponent(location.pathname + location.search); // Include search params
21 return <Navigate to={`/login?returnUrl=${returnUrl}`} replace />;
22 }
23
24 // Check if user is allowed
25 if (session && session.handle && !isAccountAllowed(session)) {
26 console.log("ProtectedRoute: User not in allowlist, redirecting to supporter page");
27 return <Navigate to="/supporter" replace />;
28 }
29
30 // Render children if authenticated and allowed
31 console.log("ProtectedRoute: Authentication successful, rendering protected content");
32 return children;
33};
34
35export default ProtectedRoute;