Protected Routes in ReactJS - React Router Dom

hey guys how's it going i'm back here with another video and today i decided to bring a video which was heavily requested by all of you which is basically talking about how to create protected routes using react router dom in a react application so a lot of you people kind of requested this because apparently there isn't a lot of resources on this online so i thought it would be a great idea to make a video about it and also you guys have been like supporting me a lot so i just thought it would be awesome to help you guys with this and before we got into the video if you guys could leave a like i would really appreciate it because it will help the channel grow and uh it will just be like it would just be awesome so yeah let's get started into the video so what is a protected route basically imagine you have an application right here and usually when you log into application the home page is just this url right here right but imagine you want to for example check your profile so you say profile slash profile and you go to a page well you only want to be able to see your profile information if you're logged in right and if you're authenticated most importantly so basically we're going to be teaching you guys how to create this distinction between someone who is authenticated and can access a route and someone who isn't authenticated and cannot access our out for example if you haven't logged in and you try to reach the profile page it will redirect you to the normal like the the home page right so that's the basic idea so how do we do this well i set up a simple application here you can see the only things we have is just the app.js the app.css this stuff that already comes with react and we also have a pages folder which we're going to be inserting all the different pages we want in this case since it's just i'm showing you guys an example i'm just going to create one page which will be the kind of like the page we want to restrict people from and then you can see as well i kind of like already set up a bit but this is just so standard i just imported use state because i know i'm going to use a state variable i also imported all this stuff from react router dom so i already installed regular dom you can see i have router i have link i have route and i have switch which are basically the the main ones when you're creating an application right so what do we need to do well you can see i already created a router uh component down here and here we can put all of our different routes right so for example we might want to route for with the path to the home page right so i'm gonna just pass the slash here and that will be the home page so let me do it like this and actually i don't want to create a different component for this i'll just do it like this i'll open and close and i'll write the component for the route inside of here so what do we want to have for the home page well let's have a button for now which we can log in and a button for the log out right log up for now let's just have this too also since we're making this our homepage let's make it exact because we're already rendering the component inside of here and we just want this compo this component to be rendered whenever we are in this path so now we have a login button and a login and a logout button over here and we should be starting to work with our protected route correct so basically you can see this is a normal route but how do we actually have for example something that is called like protected route and and only people who are assigned can enter there well it's a bit different because there isn't as full support from react router dom to do this uh like i'm not aware of any like any support in the api the only thing like the way we do this is basically by creating the component ourselves so what do i mean by that well we're going to come here and create a component called protected route for example in a different file and we're going to use that to be able to um authenticate like a check see if the user is authenticated and we're going to check to see if the user has logged in or not in the component itself so let's create the component well i'm going to come here to my folder and you can see the the pages here we might want to create the com the the route we want afterwards but for now let's just create a file called protected route so this will be the component for protected routes and inside of here is where all the magic happens so let me first just rfc because i want to import everything and let's also import some stuff like let's import from react router dom i maybe want a route obviously because we're gonna make it into a route and since we want to redirect let's use the redirect component from react router dom because it will allow us to basically if you're not authenticated it will redirect you to another page right so let's say react router dom and now that we have both of them we can work inside of it so what will be this component well it might sound sound a bit confusing but i'll try to explain it to the best of my ability basically we're gonna pass whenever we call this we gotta make it into a route correct so what do i mean by that well we can come here and say that this is a route and this is literally it the whole component will just return a route but inside of this route we will need to grab information from the component from the route as a prop correct so for example we might want to know if the user is authenticated right so we can say is off we might want to have a route called a prop called is off and we're going to just say like this so we now have access to a variable say like basically determining if the user is authenticated or not and that's what's going to basically determine if we can access the route or not we can also have a prop which will give us the component itself because remember we want to every route we need to render a component so if we're creating a component a component for the protected routes we need to be able to just whenever like if we want to have five different protected routes we we want to just be able to call the protected route component and just change the prop to whatever component we want to have right so let's create a a variable here called component and we're going to set it equal to for example component okay so now that you have that we at the end like basically when you finish working with both of this we also might want to grab any other props that we have so usually what we do is we just write three dots and rest so now we have we're calling all the props i'm going to close i'm going to close this and these are the props we might want we might want to use obviously we haven't passed those but for example is auth will be a state determining if we are authenticated or not a component will be the component we want to render so if i want to render my profile page i'll pass the profile component here if i want to render i don't know like if you have a bank like website and you want to render your checking account information then it should be a protected route correct so you would pass the component for the checking account so that's the idea right and inside of here in the route first of all we need to get the rest so if there's anything else we just say rest in the beginning so after we do that we might want to start working with the render function because every route has a render correct so what will this route render well it depends first of all we need to grab the props right because when you when you use the render function you you need props but what do i mean by it depends well it depends if you are authenticated or not so instead of this is where we put all of our logic regarding if the user is authenticated or not so we can just ask if is off so if the user is authenticated then well let's just return the component so remember that com the component we're passing here on the props is the component we want to render so when we just say this where basically this will be replaced by the the component that we want to render so let's just render the component and that's fine right so if the user is not if the user is not authenticated then we want to use the redirect i think we we imported from react right or done and we basically just want to redirect it to wherever we want so let's return this actually and let's redirect it to let me see to let's say path name equal to like you might want to change this for your website but if i if i like if i'm not authenticated i just want to go back to the home page right so this is the home page this slash right here and also when you're working with this you need to pass a state so what i mean by state is basically where you were before so how do we check that well it's very easy you just open up the curly braces you can say from and just pass props dot location it will basically get the location from where you called this route which in our case will be the just the home page right so this is the basic idea if we are authenticated we want to return the component and render the component if we aren't we want to redirect to our home page from wherever we called this re this protected route correct so this is the idea of how a protector route will work and this is basically it for the protected route we don't need anything else uh i think right we're gonna obviously keep going and if any errors that occur i'm going to try to check to see what happens so basically this is the idea now what we want to do is we actually want to create our route because for example if i come here and i say protected route um it didn't actually import it so let's import protected route import protected route from dot slash protected route you can see that our protected route file is right over here so we can just say dot slash protected route but i wouldn't recommend putting it over here i would create something like components a folder called components or i don't know a folder called routes i don't know so this is the idea right you can just put it whatever you want and you want to import it so remember that in our protected route we want to have certain variables right one of them is the the prop asking if we are actually authenticated or not and the other one is the component so first of all before we actually create the authenticated part let's just create the component right so here in pages let's say oh actually it's since we haven't passed anything it's kind of giving us errors let me come here and i'm going to create a file called um i don't know protected or no not not protected route let's just call it um um i don't know i'm gonna say profile this is just an example right let's imagine we wanna we have we have a component called profile and we only want to like access the profile if we are authenticated or not so what do we want to do with this well before anything if we want to work with react router and this isn't directly inside the router we want to use a hook and react with our dom called with router if you guys want i can make a more in-depth video about um the width router hook but basically it will just allow us to turn this into a component with access to the routes so you can just say here with router it's very simple you just say with router and the name of the component which is profile right yeah so what do we want to put into this this component well let's just put whatever let me say here if you entered if you see this it means you are authenticated this will basically be a pro a component which will represent all the things you want to be protected who you like you have to be authenticated to access this right currently if we go there actually nothing will happen because we actually haven't called this but let's try to now that we created our component let's go to our app.js and we can just come here and uncomment this and first of all we have to pass a path why do we have to pass a path well because this is um this is still a route correct when we created our protected route this is a route so we need to pass a path and this is where the rest comes from rest will basically grab whatever other things we add to it for example path is something that we're adding and we didn't define it as a prop so when we say rest over here here is where the path is going right here's where we're defining the path so let's say path and which path do we want to have well maybe we want just the slash profile right imagine we want to go to the profile path and what else we have to pass well we have to pass the component remember and what will be the component and this is where a lot of people get it wrong a lot of people just say uh like this profile and i'm gonna like this won't work why because you're not rendering the comp like you don't want to pass the component inside of here you want to pass the name of the component so what do i mean by that well you just want to pass profile and obviously we haven't imported profile yet so i'm going to import profile um what happened okay now it's fine i'm gonna import profile at the top here so import um profile from i guess it's dot slash pages slash profile yeah so now we are passing the component the profile component to this protected route and finally we have to pass something called is off what will be is off well usually if you're working with a real application you'll create like you'll work with either like your store local storage either your cookies are most importantly like state management using the context api or if you're using redux you might want to use whatever you read excuses because i don't work with redux but basically you want to pass a global variable right um a variable that will allow you to know if the user is authenticated or not but for this simplistic reasons we'll just like because this video isn't to do like it has nothing to do with uh state management i'll just uh create a state variable here called um is auth and it's gonna be set is off for the variable for the function and then we're gonna set it it's equal to use state and it's gonna start as false we can't be we can't access it when we start right so what we pass here now we pass is off and you'll see that now if we go to profile it redirects us back to whatever we are like it redirects the homepage however if this is true then we can access the profile let's see yeah it says if you see this it means you are authenticated but now let's finish it by basically just coming here and adding the functionality to turn to kind of like log in so it's literally as easy as saying unclick then we pass a function here which will basically set is off so if you want to log in we want to make this true and let's copy this and just change it to false if we want to log out so set auth is equal to false okay so now if we want to oh i forgot we actually need i don't want to keep like changing the route here let's actually just include a link inside of here um how do i do this i'll just come here and say link did we import link yeah so link and let's just pass it to over here we want to go to a profile so we can say slash profile what does a link do basically it just creates a link where if you click on it it will send you to the page right go to profile so now there's a link here if i want to go to profile i'll click here now it's true because we set it equal to true but let me set it go to false and let's click on this you can see never it doesn't send us because whenever we try to go there it redirects the home page but if i click on login and i click here again you can see we can go if i click on i can still go because it's still like like it's still working but if you click on log out now we can't go anymore as you can see and that's the basic idea right so we we were basically just created a protected route in our application and if you want to create several like this is basically the end right but if you wanted to like create something called bank i don't know checking account let's imagine you have a uh a component called checking account and you wanted to basically just create it you will do the same thing as you did to profile you would import the you the wreath router you will come here to the bottom and say with router you'll wrap this around it'll come here you'll say something like your credit is very bad something like that you know so information about oh i wrote checking out i meant checking account but it doesn't matter you know what i mean right it's a it's just a component right so we can come here and we can just import checking out checking out from dot slash pages slash checking out and now you can just render another protected route where you can just paste it here and just change this to checking and change this to checking out and you can pass again the is auth so basically let's come here let's create another link for to go to the checking out page let me say checking go to checking page so now we have two links as you can see here if we are logged in you can see it says your credit is very bad but if we log out you can't this is the idea right you just create a single component called protected route and you can implement how many pages in that route like you want to be able to be secret or not in your application by basically just calling the component how many times you want so this is the idea uh if you guys have any questions just leave a comment down below enter into my discord because i answer questions there as well so yeah hope you guys enjoyed it also i i've never mentioned this in the video before but i have a i just created a patreon because i i've been having like a lot of issues monetizing the channel because i'm still in brazil and for some reason i created my account with an american cell phone no a canadian cell phone and now it's like google isn't allowing me to to monetize my videos until i go back to canada so uh that's that's an issue so i created a patreon if you guys like wanted to support it there's no need to but like if you guys want to the link is in the description i would really appreciate it but yeah that's basically it and yeah hope you guys enjoyed this video please leave a like because i'm posting every single day subscribe if you want to see more and i see you guys next time [Music]

Channel: PedroTech

Views: 27,494

Rating: 4.9228425 out of 5

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, sequelize node js, sequelize, pedrotech, traversy media, traversymedia, clever programmer, programming with mosh, tech with tim, freecodecamp, protected routes, protected routes in react, protected routes react router, protected routes react, limit routes, protect route

Id: qnH5KNtRYEI

Length: 19min 3sec (1143 seconds)

Published: Mon Nov 16 2020