React Route protection with HOC PrivateRoute component with asynchronous jwt token validation - reactjs

Question

I am not very experienced with React yet and have been trying to approach the problem of securing specific routes from authentication.
For this purpose, I need to implement a HOC component, specifically a "PrivateRoute" component.
Some main generalities:
I'm developing with React 17.0.2 and then react-router-dom 6.2.1
I need to verify the presence of the token on a Redis server (in the cloud) and validate it.
The project is divided into two "modules," one in React for the frontend and one in node js/express, which exposes the server-side logic.
In the frontend module, the routes are implemented as follows:
return (<Router>
<div className="App">
<nav className="navbar navbar-expand-lg navbar-light fixed-top">
<div className="container">
<Link className="navbar-brand" to={"/"}>My Site</Link>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to={"/sign-in"}>Login</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to={"/sign-up"}>Sign up</Link>
</li>
</ul>
</div>
</div>
</nav>
<Routes>
<Route exact path='/' element={<PrivateRoute><Home /></PrivateRoute>} />
<Route path="/sign-in" element={<Login />} />
<Route path="/sign-up" element={<SignUp />} />
<Route path="*" Component={<Login/>} status={403}/>
</Routes>
</div></Router>
As you can see, for example, I want the Home component to be protected, and therefore I implement the PrivateRoute component with which I wrap the Home component.
The implementation of the PrivateRoute component must validate any jwt token present in localStorage, passing it to an HTTP validation service exposed by the node/express module. The token is sent to the http service by passing the Authorization Bearer header.
The logic of retrieving from the localStorage and sending to the validation service is implemented with a useEffect (() => {}, []). Inside it is defined async function, so you can make the axios call with await. The function is always called from the body of useEffect. However, I cannot understand why updating the state variable created with useState seems not to update correctly (synchronization problem?). This does not seem to trigger the rendering update if the Home component is validated correctly (in the ternary operator, home is represented by props.children), rather than redirecting to the login page.
Below I report the implementation of the PrivateRoute:
export const PrivateRoute = (props) => {
console.log('props',props);
const [tokenValid, setTokenValid] = useState('');
useEffect(() => {
const checkRedisToken = async () => {
console.log('Access localStorage');
const ni_token = localStorage.getItem('ni_token');
console.log('Returned localStorage');
const config = { headers: { 'Authorization': `Bearer ${ni_token}` } };
console.log('Call axios');
const response = await axios.get('http://localhost:5000/identity/verifytoken', config);
const data = response.data;
console.log('After axios ', data);
setTokenValid(response.data);
}
checkRedisToken();
console.log('tokenValid', tokenValid);
}, []);
return (
tokenValid !== '' ?
props.children :
<Navigate to="/sign-in" />
)
}
Thank you in advance for your help in understanding my mistakes.
Thank you so much

Answer 1

I try to describe the solution I have adopted. The solution is the result of the reading of similar posts previously published and of readings scattered on the web.
As noted by #tromgy the problem of my first implementation is caused by the asynchronous call to the endpoint / identity / verifytoken.
The flow of execution, after the call, continues (waiting for a result) and the tokenValid state variable, even if set, seems not to be immediately detected by React and a new rendering is not invoked.
The correct solution seems to be to add an additional "loadingComplete" state.
The "loadingComplete" state seems to handle the stages where the component is not or is mounted waiting for the authenticated state to be ready and set as well.
The declaration of the routes has remained unchanged and for the sake of simplicity I show the code fragment below:
function App() {
return (<Router>
<div className="App">
<nav className="navbar navbar-expand-lg navbar-light fixed-top">
<div className="container">
<Link className="navbar-brand" to={"/"}>My Site</Link>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to={"/sign-in"}>Login</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to={"/sign-up"}>Sign up</Link>
</li>
</ul>
</div>
</div>
</nav>
<Routes>
<Route exact path='/' element={<PrivateRoute><Home /></PrivateRoute>} />
<Route path="/sign-in" element={<Login />} />
<Route path="/sign-up" element={<SignUp />} />
<Route path="*" Component={<Login/>} status={403}/>
</Routes>
</div></Router>
);
}
export default App;
As mentioned, the changes made to the PrivateRoute component are quite substantial. Before giving a brief description below, I report the new implementation below:
export const PrivateRoute = (props) => {
console.log('props', props);
const [authenticated, setAuthenticated] = useState(null);
const [loadingComplete, setLoadingComplete] = useState(false);
useEffect(() => {
const ni_token = localStorage.getItem('ni_token');
const isLogin = async (ni_token) => {
console.log('isLogin');
try {
const config = { headers: { 'Authorization': `Bearer ${ni_token}` } };
const result = await axios.get('http://localhost:5000/identity/verifytoken', config);
setAuthenticated(result.data);
} catch (e) {
console.log(e);
}
setLoadingComplete(true);
}
isLogin(ni_token);
}, []);
if(loadingComplete){
console.log('Completed', authenticated);
return (authenticated === 'Verify Token Respone' ?
props.children :
<Navigate to="/sign-in" />)
}else {
console.log('Loading...');
return (<div> Loading...</div>)
}
}
As you can see the useEffect with empty dependency array, so that the passed function is only executed once.
On the first call to the web application root we observe the execution of console.log ('props', props).
Immediately thereafter, the console.log trace shows ('Loading ...').
Immediately after, the "isLogin" log appears, in fact useEffect calls isLogin (ni_token). At this moment the asynchronous http call is made to the endpoint "/ identity / verifytoken" in charge of validating the token. At the first access to the frontend (http: // localhost: 3000) there is no token and the endpoint returns an http 403 (Forbidden) status. The authenticated state variable is not changed and its value remains "null", but lodingComplete is set to "true" causing <Navigate to = "sign-in /> to be returned, ie the redirect to the login page.
As you can see, the change in state determines the rendering of the component, the "props" log and the "Completed null" log reappear.
Below you can find what is logged at first access:
props Object
Loading ...
Failed to load resource: the server responded with a status of 403 (Forbidden)
props Object
Completed null
Some thougths for further deepening about not so clear aspects: if I do not misinterpret, at the new rendering the stream passes again through console.log ('props', props) and obviously react does not re-execute the useStates? Otherwise loadingComplete would be false again and would render Loading while as expected it goes through redirection to the login component. Is my interpretation correct?
If I finally log in and a positive authentication happens, the flow highlighted with the logs executed with console.log is the following:
props {children: {…}}
Loading ...
isLogin
props {children: {…}}
Loading ...
props {children: {…}}
Completed Verify Token Respone
If I'm not wrong, the re-rendering is done twice in addition to the first one. But there is something I can't quite understand. The useEffect is performed (log isLogin) the asynchronous http call is performed and setAuthenticated will be performed later the flow of execution certainly goes through setLoadingComplete (true) at this point I expect a re-rendering but contrary to what I expect I still see the "Loading" log ... But on the other hand if this is not the case it should still redirect to the Login component. Eventually, the "Completed Verify Token Respone" log appears at the setAuthenticated setting.
I'm still a bit puzzled who helps me understand what I see and what is happening? I hope this post can be useful to learn more about the mechanisms and functioning of React and of this specific need.