React Routing And Private Routes

I'm trying to block access to private paths by checking with my express server if a user has logged in prior to allowing access to it, otherwise redirect to login. I created a priv

Solution 1:

You should not be authenticating through the server every time the user visits the site.

react-router's conditional routing only works if the condition can be checked synchronously.

When the user successfully authenticated for the first time, you store a variable indicating the authentication status (with an expiry date if desired) to localStorage.

When the user visits the website again, you will be able to redirect by getting the auth status from localStorage (which is a synchronous operation).

Solution 2:

Letting the user access private routes seems so weird to me. Even if it is just the view. I get they wont have access to any actions when it comes to the database, but it still seems like a flaw. I was also trying to check with the server on every request on my protected route and ended up at this same exact issue. The only way to get around this is to have the actual screen/page make the call and validate the JWT token. I think in my case this will be enough.