Protected Routes & Private Routes in React JS with React Router V6 || Role based Routing

hello guys welcome back to the debug arena in today's video we will see what is protected and private route in reactjs so first let's try to understand what is meant by protected and private route if you think about the protected route you can take that as a route or the screen that are only accessible once you are logged in then what is private route if you take example of this application in this there are two type of user which can do login one is the normal user and the other one is admin when this user will do login he will be navigated to user profile screen and when admin will do login he will be navigated to admin dashboard if you think about this both this user will do login First that means both will have access to the protected route but at the same time we also want that this user should not access the admin dashboard and vice versa so we can tackle that situation using private route so first let me show you the demo of what we are going to make in today's video okay you can see here this is the login page and currently I am unauthenticated user and I'm getting these three navigations about is a public route that means it will be available for everyone now I will go to login and let's login as a user so I will open the console and here let's enter email and password you can see here I have logged in successful and here my user type is user I'll click on this okay button and you can see my routing has been changed and here I'm getting the users detail these two are the navigation which are only allowed to the user type user that's why I'm getting them here and also you can notice that login and register is not here it is because once the user is logged in he should not be allowed to go to login and register screen again now what if I come here and inside the URL I pass login will it navigate me to login and the answer is no it will again navigate me to this user details this is all about protected route it will not allow the user to navigate anywhere without authentication and permission now I will do log out and let's login as admin and you can see that my user type is admin and when I click on okay now the navigations are changed now the routings are different and this routing is only available for admin now what will happen if I come here and I will pass user details which is a navigation of user and you can see it is navigating back to the admin dasboard so this is about private route now let's go to the code and implement the functionality okay you can see here this is my app.js and if I scroll down here I have imported all my component and I have assigned them to some particular routes now to apply the protected and the private route there are two main data which we have to get the first one is that when user is logged in we have to get that and the user type we have to get in my case if you see here I have created this variable is logged in and I'm getting that from window. loal Storage same thing for user type now you might be thinking from where I have said that for that I will go to login component and inside this this is the API which is doing the login and once the login is successful here I am getting data do status as okay and after that here I'm storing the token in local storage in the same way I am storing this data. user type which I'm getting from back end to the local storage and this logged in here inside app.js I'm just getting that so to apply the protected and the private route we must get this two data all of us might get this data from different sources like I'm getting from local storage you might get from session storage or or context it doesn't matter just we have to get this data once this is done we can start with protected routing before moving to the protected routing I will go to nvb bar. JS and here you can see I listed all the component that should be available inside nbar now let's check the output of my application as of now this is the output and here you can see all the links are visible and I can navigate to any link without any restriction so let's apply protected routing to restrict the user so I will come here to my code I will go inside components and let's create one file protected route. JS here let's create the basic structure okay this is the basic structure now what I will do I will go to app.js and let's copy this piece of code which is telling us whether the user is logged in or not and it is getting that data from windows. loal Storage then I will write one condition here that if is logged in is equal equals to true that means my user is logged in I will return here outlet and this outlet should be imported from react router Dom otherwise I will write here navigate this navigate should also be imported from react router Dom okay and inside this I can pass two and if user is not logged in then it should be navigated to login screen so I will write here login okay this is done I will save this then I will go to my app.js and currently you can see here that all my routing are listed here so I will come here and let's make a space between this I will write here protected route then I will comment this line okay then here I will write route like this not like this usual we have to do it like open and a closing tag and inside this route I can pass element and this element will refer to our protected route so I will write here protected route not like this we have to pass the whole component and now inside the protected route what route we have to add we will add all of this like user detail product and admin dashboard I will copy here paste it here I will save this now let's check the output so I will come here and you can see everything is visible why it is because we have not touched the navigation yet but if I try to click on this user detail you can see I'm not navigating there if I click on this dashboard I'm not navigating there on product not navigating there but on about I'm navigating there like you can see here so this is totally working fine also if I come here and write admin dashboard still I will not be navigated there so this is how you can apply protected routing like first you can create the protected route and add your condition here like in my case I'm checking the authentication if everything is true I passing this Outlet this Outlet will represent the inner element so here I have made this route as a protected route and inside this all the element are protected that means they are only accessible only after there is logged in condition is fulfilled okay this is done but still there are many issues in our application let me show you so I will come here and let's try to do login so I will go to login I will enter email and password I click on submit button okay and you can see I have been logged in as a user and here I'm getting the user detail but when I click on dashboard I navigating to admin dashboard which should not happen also when I'm clicking on login I am navigating to login screen like when user is logged in he should not be allowed to go to login or register or the admin dashboard so we have to handle this condition also so now we have to handle two condition the first one is that when user is login and he clicks on login or register or he enters the URL he should not be allowed to do that if he enters the URL he should navigate it to this user Details page same goes for dashboard and the second condition will be that if admin is logged in he should not be allowed to go to user details now you might tell me that I am showing this S Bar that's why user is navigating to login on register this is not true even if I am here and I will go to this URL and I will write register if this is allowing then it will allow the user to go to register so we have to tackle this in our routing so now let's tackle both of these scenarios here first thing which I will do I will come here and I will write here unauthorized route I will comment this now I will come here and let's add one condition that is if is logged in is not true that is user is not logged in then I will show these things so I will just create a default structure here and inside this I can paste this two things which is login and sign up along with login and sign up I will also add one default route which will be this and it will navigate the user to login so this is done now I will save this after this to tackle the scenario of login and register inside protected route I will copy this I will come here and I will paste that now we want that whenever user is logged in and he presses the login or enters the URL of login he should be navigated to the default screen so for that I will come here and I will write navigate and it will navigate user to the default screen like this I'll copy the same thing for the register also but you can notice here that we have not defined any default route so I will come here I will copy this I will remove this user details and here also when it is navigated to the default it should navigate to the user details so instead of this here I can pass user details here I'm not passing the component because it will only load the component it will not change the url but if I pass like navigate to it will change the url also now I will save this let's check the output okay navigate is not defined let's import the navigate it should be navigated from react router Dom I will save this let's go here okay now when I click on register you can see it is coming back to user details login user details and when I click on dashboard it is navigating to admin dashboard now let's handle this scenario so I will come here now I will make some space here so whenever user is logged in this login and register will be same like it will navigate to the default here like the user type doesn't change the outcome of this okay now for others what I will do I will add one condition here which is if my user type is not equals to admin okay that is my user is user then I will render this routing okay and this routing I will paste this okay and if my user type is admin then I will render this routing this routing I will paste this two routing are same as this so I will just remove this okay I will save this now here let's modify this for the normal user the default screen is user details which is correct PA user details will navigate to user details correct product product correct but for admin dashboard it should navigate to default only okay so I will copy this navigate to and instead of this admin home I can pass it okay cool now coming to the admin so for admin the default screen will be admin dashboard so I will remove this and it should be admin dashboard and user detail it should navigate to default which is admin dashboard for product also it should navigate to default okay this is done how you can do protected route and this is the private route that is admin there can be a efficient way also so if you find that way then please let me know in comment or you can raise the pr to my GitHub I will accept that and here at last you can say this is the public routing and here I will add one more routing which will state here that means if something went wrong like the URL is different then I can pass here navigate to the default whatever default is present okay I will save this let's check the scenarios so I will come here and if I click on register okay login dashboard product working fine about working fine I will do the log out let's click on this dashboard okay working fine user detail working fine product working fine and let's login as a admin okay and here I can click on this dashboard so working fine user detail working fine register working file login working file product working file and about is also working fine so now everything is done from the functional perspective now let's manipulate this nav bar okay let's scroll up and here you can see inside the N bar I am passing is logged in and user type as a prop and inside the NV bar. JS I'm accepting them so now let's add the condition to show the naar component based on that authentication I will come here and I will add condition that if is logged in is false that is user is not logged in then I will show this structure which will contain this login and register so I will just copy it them from there and paste them here so this is done now I will come below let's add another condition here which is if my is logged in is true that means user is login and its user type is equals equals to admin if both the condition is true then I will render this element which is link of dashboard so I will just remove them from here and paste that here otherwise only if my is log is true that is my user is logged in but its user type is not admin if that's the case then I will render this to element which is this user details and product so I will remove them from there and copy paste that here okay this is done and this about will be always there so you can see here the condition this is the condition for unauthorized and this is the condition for admin and this particular is the condition for user I will save this let's check the out I'll come here and you can see currently I am logged in as admin so I'm only getting dashboard I'm logged out so I'm getting this three and if I login as user I'm getting these three element this is how you can apply protected and the private route in your reactjs application let me know in comment whether you understand this video or not and if you find more efficient and optimized way to do this then please let me know in comment and raise the pr in my GitHub repo I will accept that and merge them with my code that's it for the video make sure to check out my previous video to learn all of these things thank you for watching

Channel: The Debug Arena

Views: 2,019

Keywords: Routing in react js, route in react js, react router, react router dom in react js, what is protected and private route in react js, protected and private route, public route in react js, protected route in react js, private route in react js, different types of routes in react js, react router v6 tutorial, learn react js, protected private and public route in react, role based routing, show navigation bar based on user logged in, mern stack

Id: zKlpiQvPKHI

Length: 13min 35sec (815 seconds)

Published: Tue May 28 2024