Almost every web application require some form of authentication to prevent unauthorized users from having access to the inner workings of the appl...
For further actions, you may consider blocking this person and/or reporting abuse
Question, what keeps an attacker from going to my app, opening dev tools and creating "isAuthenticated" and setting it to true in localStorage? Wouldn't that person then be able to access the protected route without actually authenticating? Obviously they would need to know that the code looks for this particular key in local storage, but it does seem like a security vulnerability. I currently have this problem with my app and want to see if anyone has ideas for a solution!
No. Usually the reason protected routes are protected is because these routes communicate with the backend server in a way that requires authentication, and simply changing "isAuthenticated" wont make the backend server trust us, since our credentials that we pass in the requests are the same.
Thanks for the reply. I understand that an API call will have it's own authentication (Authorization Header Bearer token or similar). I'm not worried about that part. Say I have a static page (no server communication) that's behind a protected route using the method in this article. If I set "isAuthenticated" to true in the dev tools, I am able to access the content of that page, even without actually authenticating.
I faced the same issue. Setting a key in localstorage with localStorage.setItem("isAuthenticated", "true") allowed access to the protected route. However I added a new state variable to redux and updated it to be true in when loging API returns.
After that when checking for auth in protected route, i checked both localStorage keyvalue and the newly created state variable (which only gets TRUE when the login API call succeeeds)
Interesting approach. What happens to the Redux state variable when the app is refreshed in the browser? Wouldn't you lose that state and the user would have to reauthenticate?
You can use refresh tokens for this problem. You can create a router on the backend that generates new access tokens with the current token you have. Then on the front end, you can create a function with setTimeout, and basically, you can get a token in every specific second until the user logs out of your system. Thus you can keep the user's session on refresh as well.
i have the same issue how did u solve it?
Yes, you can use react-guards to check if user is logged in or not. Then implement the routing
Hello, you are right. This may be risky. How to get around this problem?
you can store it in cookie.
For more security you can you React Context hooks to tokens in memory and then validate it every few minutes... I tried implementing it from this blog.
I have the same problem , have u got your problem solved?
I think this would be resolved if you keep the "isAuthenticated" in redux store and implement redux-persist, on refresh redux-persist would simply rehydrate your store. Clearing the local storage would clear the persisted store as well (logout functionality)
You could add a token verification function in the route protection helper which would be true depending on the response from your API
Hey! I think the best way to do authentication in react is to create a context using react createContext with a custom hook for example useAuth, then wrap the App component which exist in the index.js with that context. this way is more safer.
What I have been struggling with for weeks got solved under 5minutes. Thank you very much for this. You just saved my life
Hello i have a very important question to make, I had no luck searching it online for the past few days.
Can we just wrap all the restricted routes under a protected route component? and just render them as { children } if a condition is met?
This is helpful, thanks 😊
very helpful , was stuck on this bug for a while and boom !!, i got your article
Nice one bruh..
Please do token expire sometimes
Okay, will look into that
What is the use of useDispatch method?
wow that is so detail and simple to understand the role of protected route
is this going to work for react-router-dom V6 ?