React Auth Router v6

Question

I am trying to build a simple react app with authentication logic.. the repository can be found here

I am facing issues trying to get to /reports as the app keeps redirecting me to /login page even if the useEffect hook runs and authenticates the user..

What could be missing ?

Thanks

Answer 1

I think your return from PrivateRoute should be changed.
In the beginning isAuthenticated is false and loading is true

isAuthenticated && !loading === false

So your <Navigate replace to="/login" /> is returned.

Instead you can move loading state somewhere above to have it like this

function PrivateRoute({ children }) {
  /* ... */

  if (loading) {
    return <SomeSpinner />
  }

  return isAuthenticated
    ? children
    : <Navigate replace to="/login" />;
}

And you will not have the redirect immediately, but will wait for loading