React Protected Routes - How to Make React Router Protected Route

in this video you will learn how to protect your routes inside direct router in your react application [Music] and just from the start I must tell you that on the client side it is impossible to protect your routes anybody can access your JavaScript execute code and access your page this is where it is extremely important that you protect your data on the backend and you are not allowing person who is not locked in access your API with that being said let's look on our application as you can see here I already prepared for a small vague application with two pages I have here dashboard shroud and protect the drought this is URL slash protected and we really want talk set this protected route only when our user is locked in let's look what we have inside our application inside main.js we simply wrapped our app with browser router because we're using react router like a typical solution to implement shouting inside track secondly inside our app we have first of all the links to our dashboard and protect it and here our two routes with path slash and path protected and as you can see here inside our component we don't have anything at all this is just a text dashboard and text protected and the way Hubble will protect our routes doesn't have anything to do with react shelter the main idea is that inside our element we should not just throw the component but we want to wrap it in a parent component that will do all our checks and make sure that we can access this inner component so in a second we will create our parent component which is called out this is where here on the top I want to import our house and this is just react component so here the path will be out and now we just need to wrap our protected route or any route that we want to protect with house component so we're simply wrapping this element without and nothing more and it is not really direct router code because inside element we can write any markup that we want now let's create our hours component so here is our js6 and inside I want to Define that we have out and there's a props we have access to our children why do we need children and what is children this is a possibility to access our child component in our case we must use children because inside this component we must render our child component private and here on the bottom I want to export with default out so what we want to Define inside is the state for current user that we will fetch from the API so if you have just a synchronous check that you can do directly in the client then it is super simple we can simply check here for example a token inside our local storage so if local storage dot get item with a token is there then we want to return our children so here is simply written children in another case we want to navigate to our home page this is right here on the top I will import navigate component from react router Dom and if you don't know this is a possibility to redirect a user to another page so here I simply want to return navigate and inside I am providing to slash which actually means if we have this token then we're returning children if put down then we're navigating to our slash let's check this out we don't have any errors let's jump inside browser and try to access protected as you can see I am jumping inside and it is blinking but then we're redirected directly to our home page and we are not on slash protected but now let's try to open our application and here jump to local storage and here create this token property with any value now I will make it smaller and try to jump to protected page and as you can see I can directly accept this page and when now in slash protected this happens because inside our water we simply rendered out component with a child we checked here that we have this token and we rendered our inner component and if we don't have this token then we simply redirect the user to our home page but it becomes more difficult when we're talking about asynchronous code typically in the real application you won't have your current user on the client and you want to get it from the API and only after you got your user you want to redirect the user or allow accession to the page this is where here I won't do an API call but I will simulate it with set timeout and it will bring the same result in order to do that first of all I want to create a state for current user so here is our current user and Set current user and here I will write your state and by default I will write here undefine it and you might wonder why I have here undefined it and not now and actually we will have three different states here and Define it if we didn't fetch user yet then now if we are not logged in and object of current user if we are logged in after this let's create use effect and on initialize we want to fetch user ones this is why here let's provide an empty object and inside I will simulate with set timeout our learn API call this is where here I will write to seconds and now inside let's write logic of fulfilling our current user after we did an API call so here we can write exactly the same logic for example to check the local storage but in the real application you will get current user and set it inside your state but we can simply do iflocal storage dot get item token is there then we want to set our current user so here I will simply write an object with a D1 and name form which actually means we're locked in in other case we are not logged in and we want to set it to null now after this we can write our a markup first of all let's try it what we will do if our current user equals undefine it which means where in the state where we don't know if we need to redirect the user or not this is by here I will simply return now and it means that we are not doing anything in another case if we don't have our current user but we already don't have undefined it which means we have now we want to navigate the user so here I will return our navigate component to and here we have slash and the last case means that we have a user we will simply return here our children as you can see we don't have any errors and let's reload our page so here I am inside dashboard I am jumping to protect it and but don't have any content but we are on slash protected page which actually means our content is not being rendered until we got this data from current user which actually means we are waiting for our API call or in our case set timeout Until We Set current use them and now we're on the safe side but if I will try to remove this token from local storage then it won't work because I'm reloading the page I'm jumping to protect it and after two seconds I'm directly redirected to the home page because we got the user and now we know that we're not logged in and actually if you are interested to know how to implement pagination inside reject on your own make sure to check this video also

Channel: Monsterlessons Academy

Views: 6,326

Keywords: react protected routes, react router protected route

Id: IawI5xVhwwo

Length: 7min 43sec (463 seconds)

Published: Thu Feb 09 2023