DEV Community

React Authentication - Protecting and Accessing Routes/Endpoints

NJOKU SAMSON EBERE on February 05, 2021

In the previous tutorial, we were able to successfully login our user. That was awesome. Jump To Creating the Routes Protecting Routes...
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Wow... that's a lot of questions.

For sure you can use local storage but you know that isn't a safe path to thread. Anyone can easily access the information

About the comparison, the protectedRoutes component just check if the token is defined or not. It does not compare it with the given token. However, even if you manage to bypass the protectedRoutes component to the component itself, it is still useless because it is at that point that the token is compared to the original token provided at the point of login. By the way, the token for each component is gotten directly from the cookie not from the parent component.

And YES!!! You can protect as many components as you desire in your project. The protectedRoutes component is like a Higher Order Component (HOC) which super charges other components that is passed through it.

Collapse
 
namansamra profile image
namansamra

we do not use localStorage for checking token instead of that we take the token from the local storage and make a request to backend to check for the verification of token (like is it associated with some user's id in database) but I have a doubt like if I copy my friend's token and store that in my localStorage then I will be able to access the protected route so this might be security issue. Please correct me if I am saying anything wrong and any other strategy to check that. I am confused that in that case how should we verify the token? Thankyou.

Thread Thread
 
masharsamue profile image
Samuel Mashar

Yes that would definitely be an issue. How is this solved, i recently saw JWT-decode am still trying to figure out how to retrive an objectid from mongo, to delete, or edit . How do you achieve that, because on postman you copy the id and paste it there.

Thread Thread
 
masharsamue profile image
Samuel Mashar

I think the flaw issue is now resolved by the refresh token

Thread Thread
 
ebereplenty profile image
NJOKU SAMSON EBERE

Hey Samuel, if you are still looking for how to decode the JWT, my article might be of help. Check thies out: dev.to/ebereplenty/decoding-jasonw...

Collapse
 
masharsamue profile image
Samuel Mashar

Great explanation. Thanks again. Am i've been stuck for a while trying to protect the routes and everytime i use react router and your tutorial the projects just keeps on loading never ending until i remove all the <switch and Route

Thread Thread
 
ebereplenty profile image
NJOKU SAMSON EBERE

I didn't really get you. Hope you have gotten a fix though?

Thread Thread
 
masharsamue profile image
Samuel Mashar

yes i did thanks again

Thread Thread
 
ebereplenty profile image
NJOKU SAMSON EBERE

Welcome

Collapse
 
kosm profile image
Kos-M

Nice post ,
i have a question ,
trying to serve a react website with express ,
build react and serve static files to / endpoint from express.
Can i set / get remove coockie from express codebase?
I m think to remove coockie if Jwt has expired , so to force user redirected to login route from react..