Private and Protected Routes in React (using React Router v6)

hello everyone and welcome back to sty right in the last video of the season 2 of the reactjs series I talked about app right IO and how you can set up your own authentication system in just 15 minutes if you have not checked that video out please do check that video out and do let me know if you like it so I'll create more videos using aight platform in this video I'll talk about how you can have protected or private components in your applications generally that involves login where you want to make some components accessible to only the users who have logged into your application so we'll see how you can do that that and we will also take one step further where we will have role based authorization yes so we will also talk about how you can make different components accessible or inaccessible to different users with different roles hence a lot of interesting stuff that we will cover in this video so let's get started as you can see on the screen I have a basic setup and I think if you have followed my reactjs series earlier this user interface should look familiar I have a very simple setup where I have a basic setup which is a little distributed so all the routes that I have I am using react router doome I used create browser router to specify all the routes because that is what the latest version of react router doome suggests and also react router doome encourages all the users to start using create browser router right so we have objectoriented style of routing where we have this setup and in the app.js we are using router provider to specify the router then in the rot.js so what routes we have over here we have one root element which has all the components which is the logo and this section the complete navigation and then in this section we are loading up home which is this part and then there is products in products we have proper filtering setup so there's a separate video for this filtering also how you can use params in a reactjs application I've talked about that so do check that video out then we have profile and edit profile also in the rot.js we are using outlet and we are also supplying in context and in the child components we are using use Outlet context so there's another video for use Outlet context as well where I've mentioned how you can use context along with react out router Dome using the used Outlet context it makes it super easy you don't have to use the core context provider of react if you're using react router Dome you can make it very simple just by you know supplying in the context using the outlet component over here like I have done over here and then using the use Outlet context hook wherever you want to access the context okay so this is the basic setup in the products. JS I've have done a couple of more things like you know the basic filtering is there and I've also used uh I've created a dummy API on Amazon using Lambda and API Gateway to supply in some default data because I wanted to have some data over here not images but yeah simple data so if you'll see there is some data also that is getting loaded over here it's a basic data on the home section you don't see anything then there is this username this is something that I'm setting by default in the rot.js what I'm having over here is I'm having a state variable user in which I'm setting a value by default right so this is the value that I'm setting by default and I'm also supplying in the user and set user uh the state variable and the setter function in the context so that profile and edit profile can get access to this so on profile you see the username over here because it is being supplied by context and in profile we're accessing that using use Outlet context over here and same in edit profile uh if you want to update the username you can do so got updated if I go to profile you see the updated name why because in edit profile also I'm getting access to the context values of user and set user Setter function using us that context and I'm updating it so basic setup right after this long introduction of the basic setup let's come to what we want to do what we want to do is we want to make profile and edit profile inaccessible to the users who are not logged in but by default right now what we have is we are setting the user as default State and we are setting it in the rot.js we have set username object in the user so what we will do is we'll have a button over here login and log out which will set and unset this to the state so that will sort of you know act as the login and log out mechanism for us okay so we'll have that and profile and edit profile will not be accessible directly if the user is not logged in or if this user State variable is not set then once this is done then we will see how we can add roles to this particular object and set up role based authorization as well so the first thing that I will do is I will just remove this object from State and I will just add null over here this will break things which is fine why because we're using user. username over here so let's make this conditional that if the user is set then only we see this name otherwise we don't see so this is disappeared now now what we want to have is we want to have a login button over here which when clicked sets this user and a log out button somewhere which when click sets unsets this particular user so let's first create some functions over here login user what we want to do is we want to just simply set the user and the user would be let's say users let's say some ID is there one usern name is there abishek okay so this is what we want to set and similarly for log out what we want to do is we want to unset this particular thing okay so what we will do is set user and we will say null so we have two methods ready for login and log out now in root in the current setup and this is something that you should also follow I don't have anything apart from the nav ation this is the section that is loaded by different component so either I can have the login button over here or somewhere over here I don't want to do that I just want to keep this login part over here in the rot.js and in the home section I want to have the login button now in order to have the login button in the home section I will have to supply this login user function to the home right so that I can use the login user method when the login button is clicked so in the context that I'm supplying L to all the other child components I will have to add this login user function also okay so this is added so let's head to home.js uh home.js here we have a simple message welcome to site my shop right over here what I want to have is I want to have a button on click of which I will call some function and uh add some class name I will do this later button and this is login now this login will obviously use the function that I just added to the context which is login user so I will have to get access to the context and that I can do like this using the use Outlet context hook available in react router doome once I have the context I can use it to get access to the login user function okay and in the class I can provide BTN and pink yep so this looks fine now if this login is clicked this is working fine wow when I clicked on login this appeared because the username was set and we had a condition over here if the user is set then we show this link to the profile okay so this is done now also what I want to do is when the login is done when the username is set I don't want to show this particular button rather I want to show some log out button now where do we put the log out button we don't have enough space over here I don't want want to get into the creating a drop down over here so let's uh create a log out button over here at the bottom okay so in the root. JS after this Outlet what I can do is I can have this so this will give me a margin and I will have a button over here for log out and let me add some simple class name to this I have a button okay so these are some classes that I've already created yeah so we got this log out button now what we have to do is we want to show this log out button when the user is set and the opposite for login we want to hide the login button when the user is set right so these should be complimenting each other that login is shown and then when you login this and log out appears and when you log out this username and this log out hides and login appears right so how do we do that over here what I want is if the user is set then I want to show this button right so this is simple if the user is set then I want to show the log out button so this is done and on the other hand for login I what I want to do is I want to hide this when the user is set so when not of user oops user is not defined okay so we will get user by using context object right so this works so in the context we are getting access to user set user and the login user method so like we are accessing it over here so what we have done up until now is in the home section I've added a login button uh like this basic login button on click of which I am triggering the login user function which I've defined in root and I'm supplying it to uh through the context also one thing we missed out is that on click of this log out button what we want to do is we want to trigger the log out function okay so this is also done we have a logout button we have set up a condition over here whether to show this profile name or not and we have login and logout user method set and over here we have set in the home whether to show the login button or not show let's see if I log out login button is appearing if I'm using login then the login button is is disappearing and this and this is appearing if I click on this profile is opening which I don't want to be opened up if the user is not logged in in this case I want to open a profile but when the user is logged out cannot read properties of null username where are we accessing username on profile okay so in case of log out what's happening is uh profile page is opening up and in profile page I'm trying to access user name okay anyway so let's just ignore this error what we want to do now is get into the main actual stuff we want to protect this profile page if the user is not set so how do we do that now in this context we are getting access to this user so it's very easy what I do over here is I check if the user is available in the context if not I navigate the user to the homepage right that's what I want to do and I can easily use the navigate component to navigate to the homepage in that's available in react outter do so what will I do is I will check over here if context. user if not context. user then I navigate to home and I use the replace property because that ways I can also manage the history okay so now what happened is some error occurred which is fine but I'm navigating from over here okay so I'll have to return it sorry and we are coming to homepage now if I try to access profile and we are not logged in yet if I try to access profile we will be returned back to the home page so the basic redirection is set the basic protection is set right but this is not a very good way because if I have to use this so this is a valid code if you want to protect any component from unauthenticated access but if you have to let's say you have 10 pages or 50 pages and if you have to use this on all the pages it is not a very good way so what we will do is we will rather create a protected route component and enclose this particular component or any other component that we want to protect in that component as a children component and that component will be used in routing to sort of you know uh encapsulate other components whatever component we want to protect we will sort of make that component as children of that particular comp component so what I mean to say is let's just comment this out and let's create a new let's say um folder over here utils inside this utils let's create a file protected route. JS and it will be a component so this is the component and in this what we will do is first of all we will access the context because from Context we get the information whether the user is available or not or set or not so we will use the context and if not context. user the same condition that we were having over there what we will do is we will simply return to the homepage like we were doing earlier okay so this is what we will do the same thing that we were having on the profile page we have moved it to a separate component and we will make some changes to the basic routing mechanism and we will use this as a parent to this profile so that first this is loaded and we will supply it our main children component and from here we will return the children so that if everything is fine if we don't have to redirect if the user is set then we return the children component which is the profile or edit profile so let's make changes to the routing and see how we can use this so in the router.js what I will do is for this profile I will have a protected route like this let's see if this is working for us this basic application is getting loaded uh let me just change the url to profile 404 nothing er sorry so yeah this is also working for us profile if you're going to profile you are still getting this and if I log in and then I go to profile profile is opening up so this is working fine for us if I log out now if I try to go to profile I'm still getting back to the homepage so this is working for us now what we can do is we can have the same thing set for edit profile as well and it would be easy right so all we have to do is do this and this protected route will protect edit profile also so if I try to open up let's say edit profile I still get back to the homepage and if I'm logged in then I go to edit profile I'm able to access it I log out I go back to edit profile can't open it no can't open it so everything is working fine but is there an even better way of doing it yes well how is that so in react router do 6.x version a lot of things have been changed and a lot of standard practices have been introduced and that's where you know this sort of design is a little discouraged on cont what you can do is you can have a route for protected component and have profile and edit profile as a children of protected route and when you make those changes then this will not work instead of this returning the component directly you will have to return an outlet because this will act as a parent component in which the children will be loaded so you will have to have an outlet over here and you don't even have to pass this children component as a prop to protected route so it's better what I'm trying to say is let me just make those changes so so what I want to do over here is instead of doing this let's just get back to simple profile and edit profile pick this up have a section over here which says element protected route okay and with this I will have some children and these will be the children's so this is what I meant but now in this case let's check if things are working you will see you didn't have the profile component loaded why because like I said if you go with this style because you're specifying this children like this over here you don't have to require this because there is the children's style the parent children the nested style is not there so instead what we will have to do is we will return the outlet from here and now you can see oops profile is getting ER okay so we'll have to supply in the context as well so once we receive the context in protected route we Supply it forward to the other children components of protected route which is profile and edit profile and it should be working now it is working perfectly fine and what changes we did was we are using a more you know distributed approach which is a very good approach we have proper setup for create browser router we have a protected route setup we have children's for protected route setup in object style where we use the children key and pass on an array of children paths in the protected route what we are doing is we are using outlet and we're supplying in the context to the children as well and we don't need any props like we used to have in case of nested style okay so this is all set and the basic protection of the component is set when the user is logged in then only the user can access profile and edit profile if the user is not logged in they cannot access profile and edit profile so this is something which you require whenever you are creating a application using reactjs where you have an authentication system and login so you can protect all the components like this now let's see how we can upgrade this to have a role based authorization so what we will do is let's say you know there's a basic user role that is required for accessing profile and edit profile and there's an admin panel for which you require a admin role right so what we will do is we will create a simple admin page simple admin panel we will not do much in this one okay and in root. JS what I want to do over here is in root in this particular object of user I want to add a role which will be an array and it will have user and admin roles so right now let's start with the basic user R so it has one rule it can have a array of roles that this user have maybe user analyst admin Etc right so right now it has just user role and user role is required for accessing profile and edit profile and for ED ad me to access admin you need admin role okay so with this user role you won't be able to access admin panel so let's quickly add the admin component to the routing so in this case because there is Rule based authorization so what we will have to do is we'll have to supply in a role over here in the protected route with the value of role that is required to access these children so we will have to have a separate setup for the admin role right so over here what I will have is I will have admin and in this I will have okay slash admin will get me to admin so this is what I'm doing is I'm sending in a prop to protected route with role that okay role user is required to access these components and Ro admin is required to access these components okay so in protected route I'll have to make some changes I'll have to expect a role in here and what this role will do we will check this in the condition and we will make some changes over here what will those changes be I will see if the user is set or so when do we navigate to home if the user is not set or if the role is not correct so how do we check for role we check that okay context. user do roll do includes the role that we are getting as a prop all righty and what if the role is not set so we can make this optional as well this is fine I think for better error handling um yep so this is done let's see if we are able to access admin panel 404 nothing here why 404 nothing here we are having admin in router.js and okay so we require admin yeah so if I try to access admin getting to home let's login this is fine edit profile is working now if I want to go to admin I'm getting getting back to login okay so the application is getting refreshed the user object is getting destroyed I will have to have some way to get to I need a URL over here with link so what we can do is we can simply have a button for admin over here let's say let's quickly have a button to take us to the admin panel if I click on this yes we are not getting to the admin panel why when the user clicks on this admin we are not able to get to the admin panel because the permission is not set but let's see if I update the permission to admin then are we able to go to this is the admin access that we are providing if you open admin okay we are still not able to get to the admin panel why is that let's log out this should not work login okay yeah it must have not got refreshed now I'm getting to admin panel if I go to profile still able to go to Prof profile admin able to go to admin log out logged out when the user is logged out can't go to admin if in case the user doesn't have the role of admin then if you log in go try to go to admin you cannot go to admin right so we have successfully set up a basic authentication and uh yeah role based authorization as well how we have had this protected route sort of you know uh enclosing our protected routes inside of it we have used Outlet like this supplied in context to the children have the condition over here used Navigate to navigate to the homepage and in case of routing all the magic happened we used the main protected element like this and everything else was children for authorization role was supplied in as a prop like this user role is required to access these component and admin role is required to access these component Etc so that's about it that's how you can create protected or private components in your application wherever you have login system authentication system or authorization maybe you know to give access to the user to access admin panel or their own profile or edit profiles Etc so if you like this video give it a thumbs up if you have not subscribed to the Channel please do subscribe to the channel and press the Bell icon so that you get notified whenever I post such amazing videos about reactjs and more videos are on the way I will cover a lot of things about react router doome the new introduced features then we will also look into other services like aight I will be making more projects based on aight so this season 2 is going to be amazing where we dive deep into reactjs and create good application and good stuff which actually matters so do subscribe do like do share this video do comment if you like this and you want me to create more such videos thank you so much for watching the video see you in the next [Music] one

Channel: Studytonight with Abhishek

Views: 3,737

Keywords: private component in react js, protecteed component in reactjs, private route in react router v6, private route reactjs, reactjs tutorial, reactjs private component, react router, react router dom, react, react router v6

Id: 9RfaG0IzccE

Length: 24min 5sec (1445 seconds)

Published: Thu Jan 25 2024