React protected routes in 4 minutes

hey what's going on everybody so today I'm going to show you the fastest way to create protected routes inside of a react application so what we're going to do here is go ahead and build on top of this minimalist application here where I have three routes that I'm using react router Dom to render and essentially what I want to do is make sure that the home and profile page are not rendered out until we do some kind of off check for a user and then if we do have a user then we can access these Pages if we don't we redirect the user back to the login page the method I'm going to use is going to be to wrap all the pages that want to be protected inside of a component called protected routes and then this will allow us to Nest these routes so we can run that off check before any one of those pages get rendered so let's go ahead and build this in and what I'm going to do here is create a component called protected routes and this will be in the utils folder and we'll just call that protected routes. jsx so here what we want to do is import a few things from react router Dom so we'll import outlet and then navigate and I'll explain what these do in a second but first let's go ahead and create the protected routes component so this will be an arrow function called protected routes and the first thing I want to do is go ahead and set the user and we're not actually going to pull a user from any authentication Service at this point we're just going to set this value to null to represent an unauthenticated user and then to represent an authenticated user this will be true so we get the user and then the next step is to actually render out the next condition here so what we want to do is check if we have a user if we have a user we're going to go ahead and call Outlet so essentially we're nesting our routes here and out Outlet allows us to wrap those routes and it basically says go ahead and continue on to the next step and then all those nested routes can be rendered out if not what we're going to do is go ahead and simply redirect a user with navigate and we're going to send them to the login page so if a user is not authenticated they go to the login page if they are then we just go ahead and continue on that process so we just want to go ahead and Export this we'll just do export default protected routes and now what I need to do is go ahead and bring this into app.jsx so we'll just import that protected routes and what I need to do from here is go ahead and create a new route that uses this protected routes component and then Nest any route that I want to protect inside of this component so let's go ahead and do that we're going to create some space here and I'm going to scroll down so it's more into frame and let's go ahead and create a route with the element and for this we're going to use protected routes here so that's a component that we're going to pass in and we can just go ahead and create some space between that closing tag here and what I'm going to do is go ahead and get these routes right here and Nest them into this new route so let's go ahead and bring them in we'll go ahead and create some indentation there we'll save this and let's take a look at what's happening so right now in this route we call protected routes and if we have a user what's going to happen is we're going to go ahead and call outlet and Outlet will allow this to continue on to those other routes so they're nested everything checks out and then we can render out one of those pages if for some reason this user is not there so right now it's null we're not authenticated we're going to go ahead and just redirect a user to the login page so that's how it works let's go ahead and actually test this now so this is my website right now I'm on the login page if I try to go to the homepage it's going to redirect me back to this login page if I try to go to profile this will not work these two are protected routes so what I could do is just go into protected routes and let's just say that this user is authenticated so we're just going to say true for Simplicity here and if I go to the homepage I can now see the homepage and if I try to go to the profile page everything checks out so it's all working okay that does it for this video but if you want to take this to the next step what I'm going to do in the following video is actually lift up this user State using the context API so we can actually reference this user inside of like the login page or anywhere else in our application and we're also going to add in basic signin and log out functionality using aight so make sure you subscribe to the channel if you want more content like this and I'll see you all in the next video

Channel: Appwrite

Views: 5,774

Keywords:

Id: pyfwQUc5Ssk

Length: 4min 2sec (242 seconds)

Published: Mon Mar 18 2024