isAuthenticated is always null - reactjs

Question

isAuthenticated is always null
I am trying to compare token expired or not but isAuthenticated is always null
import React, {useEffect, useState} from 'react';
import {Navigate} from 'react-router-dom'
import jwtDecode from "jwt-decode";
interface IPrivateRoute {
children: React.ReactNode;
}
const PrivateRoute = ({children}: IPrivateRoute) => {
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)
useEffect(() => {
let token = localStorage.getItem('token')
if (token) {
let decodedToken:number = jwtDecode<any>(token).exp;
let date:number = new Date().getTime() / 1000;
console.log(decodedToken <= date)
if (decodedToken <= date) {
setIsAuthenticated(true)
} else {
setIsAuthenticated(false)
}
} else {
setIsAuthenticated(false)
}
})
return (
<>
{isAuthenticated ? children : <Navigate to='/login'/>}
</>
);
};
export default PrivateRoute;

Answer 1

I think the issue is that isAuthenticated IS null on the initial render, which is a falsey value, and the navigation to "/login" occurs, unmounting this PrivateRoute wrapper component. The useEffect never gets to update the state to anything meaningful while the component is still mounted.
You've likely a couple options:
Conditionally render nothing (or loading indicator, etc...) while the isAuthenticated state is settled then conditionally render children or Navigate.
const PrivateRoute = ({ children }: IPrivateRoute) => {
const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
useEffect(() => {
const token = JSON.parse(localStorage.getItem('token'));
if (token) {
const decodedToken: number = jwtDecode<any>(token).exp;
const date: number = new Date().getTime() / 1000;
setIsAuthenticated(decodedToken <= date);
} else {
setIsAuthenticated(false);
}
});
if (isAuthenticated === null) return null;
return isAuthenticated ? children : <Navigate to='/login' replace />;
};
Provide a state initializer function to provide the valid boolean true|false isAuthenticated value you are looking for on the initial render.
const initializeState = () => {
const token = JSON.parse(localStorage.getItem('token'));
if (token) {
const decodedToken: number = jwtDecode<any>(token).exp;
const date: number = new Date().getTime() / 1000;
return decodedToken <= date;
}
return false;
};
...
const PrivateRoute = ({ children }: IPrivateRoute) => {
const [isAuthenticated, setIsAuthenticated] = useState<boolean>(initializeState);
useEffect(() => {
const token = JSON.parse(localStorage.getItem('token'));
if (token) {
const decodedToken: number = jwtDecode<any>(token).exp;
const date: number = new Date().getTime() / 1000;
setIsAuthenticated(decodedToken <= date);
} else {
setIsAuthenticated(false);
}
});
return isAuthenticated ? children : <Navigate to='/login' replace />;
};