Protected Routes in React Router v6, using useState, but always returns false

Here is what I'm trying to do. I get a JWT from google, store it in sessionStorage for the time being, and send it through my API for server-side verification.

This is Protected Route which I'm using to wrap around my protected elements. Like so

 <Route element={<PrivateRouteClient />}>  
                <Route path="/CDashboard" element={<Client_dashboard /> }>
 </Route>




import axios from 'axios';
import React, {useEffect, useState} from 'react';
import {Navigate}  from 'react-router-dom';
import {Outlet}  from 'react-router-dom';

 function PrivateRouteClient() {
  const [isAuth, setIsAuth] = useState(false);
  
  axios.post('http://localhost:8080/something/something', {credential: sessionStorage.getItem("token")})
  .then(function (res){
    console.log(Boolean(res.data["UserAuth"]));
    setIsAuth(Boolean(res.data["UserAuth"]));
    console.log("hi");
    return isAuth;
  })
  console.log(isAuth)
  return isAuth ? <Outlet /> : <Navigate to="/login/Client" />;
}

  
export default PrivateRouteClient

And I cant make the route async cause it will return a promise, and that's not a valid React Component and it throws and error. Can't quite figure out where I'm doing wrong!

Thanks for reading and helping!

from Recent Questions - Stack Overflow https://ift.tt/3HRp0mt
https://ift.tt/eA8V8J