Medium
Security Vulnerability: Using localStorage for JWT Authentication in React Router Private Routes
In this React Router authentication implementation, what security issue exists?
1function PrivateRoute({ children }) {2 const [authState, setAuthState] = useState({3 isAuthenticated: false,4 isLoading: true5 });6 const navigate = useNavigate();7 const location = useLocation();89 useEffect(() => {10 const token = localStorage.getItem('authToken');11 if (token) {12 fetch('/api/verify-token', {13 headers: {14 'Authorization': `Bearer ${token}`15 }16 })17 .then(res => res.json())18 .then(data => {19 setAuthState({20 isAuthenticated: data.isValid,21 isLoading: false22 });23 })24 .catch(() => {25 setAuthState({26 isAuthenticated: false,27 isLoading: false28 });29 navigate('/login', {30 state: { from: location.pathname }31 });32 });33 } else {34 setAuthState({35 isAuthenticated: false,36 isLoading: false37 });38 navigate('/login');39 }40 }, [location]);4142 if (authState.isLoading) {43 return <LoadingSpinner />;44 }4546 return authState.isAuthenticated ? children : null;47}