Role based User Authentication React - Private and Admin private route

hello guys welcome to another video and today we'll be looking at role-based authentication this is a request by one of my follower and I decided to spend out my time and do this for you guys so you can always request whatever you want me to be for you so let us look at the finished product so this is my react app running and let me log in let me log into the application so I already have a backend server run you can see I have tested that on Postman so I I have the admin user this is admin user and this is um the admin password okay so this is the user which is person one and this is the password so I'm going to copy the person's username which is person one or basically let me just type it which is pressing one at mail.com and the password is password so I'm going to log in okay you can see this user the email is wordpression one and the rule is user so let me prove to you that this is authenticated so I'm going to go to um another browser is my Firefox I'm going to press enter and you can see it redirect me back to the login page okay so let me log out and log in as I've been so this is admin at mail.com and the password is password one so I'm gonna log in okay for the admin user is seen um is in a a little panel button here you can see this give him the access to this give him the access to the admin panel so I can click on this and you can see it takes the user to the admin panel all right so let us look at something here on Postman so you can see this is the login so if I click on login right for the user so each return access token and and refresh token okay do not bother yourself about the refresh token for now I want us to focus on the access token so I'm going to copy this and I will go to the website the Json web token so I'm going to paste this and when I paste that you can see in that token right the payload of the token right you can see we have the email of the user we have the role of the user and we have other property including the expired date okay so let me log in as as an admin okay so I'm going to look in as an admin I'm going to copy the access token and I'm going to paste that here okay you can see the rule of this user what is an admin so I am getting the rule that's what I'm doing here in this app I'm getting the rule from the token and ensuring the user as the right assets so to show you that this is also protected so I'm going to copy that link and put it in another browser I'm gonna paste that and press enter you can see um there is no access to that page in fact let me log in as the user which is person1.mail.com and password I'm going to click on login I don't want to see if you can see I am logged in right but there is no what admin says so now let me try to access the admin the admin page you can see each redirects me back to um the user pixel meaning the admin route is protected so um with this view which I've presented um let us look at what the implementation so guys here is my reactor running this is like a basic Hub a new react app I have not touched anything this is just the way it is so the the first thing we want to do is to install some Library which should be needed so I'm gonna do npm install npm install and the first one is react router Dom then we're going to install acos and we're going to install gwt- decode okay so I'm going to press enter and Open my package.json okay okay I'm gonna pause the video and come back when the installation has been completed so here you can see I have reactional Dom this is the version 6.11.1 then I have the gwcd code 3.12 and asios which is 1.14 okay so the next thing I want to do is to create some folders right in the source so any Source I want to create some folders and I'm gonna name the first one routes and the second one and the second one of the creatine I'm going to create this side I'm going to call this services then I'm gonna create another one I'll call these pages and another one is Alpha okay pause okay and okay yeah let me create one more I'm gonna call this as yours okay all right so um the next we want to do is to create an EMV file which we are going to put our URLs through and that EMV is going to be in the default uh in the in the base directory in the root directory rather so I'm going to create my screen and create that here which is going to be dot EMV okay so this is the file which is a DOT EMV now we need to create what um our base URL okay as we can see this is a busy URL so I'm going to copy these parts without the login I'm going to copy these parts and ends here okay so I will call it react underscore app Biz URL this will be equal to the area of copied okay I want to remove the slash here okay so it ends in V1 right okay so the next thing I want to do is to um it will set up my easiest video I will okay so I'm going to save this then in the easiest folder I'm going to create a file and I'll call it is just instance okay sorry about that is using instance tortillas okay so in the easiest instance I want to import is yours from others okay foreign okay then this is gonna be us yes dot create and pgrl the video is going to be the e um the visual my EMV which is this one okay so to get access to that another process those EMV okay I spell this wrongly let me correct this should be e and then I'm going to correct the one we have here too okay so I'm gonna see remember any time you modify um the dot CMV file you need to stop your app and restart again to pick that changes so I have stopped my app and restart again and he's gonna pick that changes okay so the next thing I want to set up is the alt service these are all service okay so I want to set up the old service and in the folder service Services right I'm going to create a file and I'll call it Alt service.gs okay so the first thing I will do here is to import the base service instance okay it looked like I did not I'm export it to yeah sorry about that export default bees uh sorry is yours instance okay and let me just rename the file to follow the communication okay yes I think it's already set up okay all right Okay so is using instance and yeah I want to Define some function so for this I will call this search okay thank you and it's going to take a talking okay um we're going to be storing that token in local storage okay so uh I'm gonna do local storage dot set okay okay the token will be saved in the local storage and I'm gonna create another one called get to key this does not need a parameter okay what what two is this I want to get that okay which is your token when I get it from the local storage okay sorry when you are setting a token there needs to be a key okay so I'm going to satisfy key you can see to show that you can see there must be what a key right a key and value sorry about that so I'm gonna call this talking then to get it you only require one parameter sorry one argument actually local storage Dot get item so if you look at that you can see you only have to put in the key and what is the key the key is what's talking okay so if we get the token we want to return the token else we just want to return no okay so now we need to export this function get okay and search okay we need to add more so um I'm gonna call this login constant login to login we need to pass some parameter which is the user data and for the user data we need to call our easiest busy instance dot post the logs is going to be post requests if you look at my you can see this is what a post request here so the post and the URL we are posting to is login okay remember we have set up the base URL that is why we don't need to add that here so both sticks to argument the URL and the user data okay so we need to return this okay so this would return I also need to add this to our exports login one more method no I think we need a couple of more methods we need to get the user talking um the user email because if you look at this sorry let me copy this and through it again let me show you again okay it's already here so we have the rule we have the email we have the ID depending on whatever you want to use and also have the expired date so first of all let us get the email right so this is where we are going to make use of the jwtd code okay so import ant uwt no Beauty underscore to code from uwtd code okay um sorry I made a mistake there okay so gwd code has been imported and we want to use that here so I'm going to create a function and this one says get user email it doesn't take any parameter um what it does is we're going to get our token so I'm gonna get a token from sorry let me call it this okay we're gonna get that token from I think get okay yes foreign before we do the next thing so if there's talking we want to get the payload right and to get that payload we need to use a jwcd code and the code that's okay okay so when we decode that okay we're going to get this email here okay so what we need to do is to return the payload dot email so if there's no talking foreign okay so I'm gonna do same thing for um for the rule all right so get user rule [Music] so to get the user rule all I need to do is to change this part will return the row okay so we need to also export this function get user Rule and get user email now there is another one we should check if the user is logged in or not and to do that we need to Define that function is logged in okay it doesn't take any parameter so we also need to get a token from get token and we'll get that token we need to check if there is talking so if they are stoking okay once you use it okay so we want to decode that okay payload I want to get a payload so to get the payload we use the same thing JWT of the token okay the easy property in the token which is the ESP the ESP is a spare date okay so you can see the token I pasted here is this is the Aspire date right and it was created at this date which is sr1021 GMT um this is the experience which is 30 minutes it has expired already so let's we need the ESP value and to check if the user is logged in we need to create another variable and call this is login so we need to return the date dot now which is the current date if you turn the current date in milliseconds that elapses midnight Okay so we want to check if it is less than the the payload the payload dot ESP [Music] right multiply by one thousand so this is a Boolean right so when I return is logged in if I over my mouse here I can see is what a Boolean so this is going to return true or false if the user is logged in who I'm going to add that to my export is logged in okay all you need to do is to save and set up our router so I'm going to go to the index in the index we need to import browser router so import browser router from via browserton I will need to wrap our app with browser Raptor okay so this is the ending part I'm going to use it to report the app okay so I need to I need to include bootstrap in this project so I'm going to use a bootstrap CDN go to strap and go to the official website and copy this CDA here so I'm gonna place it in the browser router so the next thing I want to do is go to my app and remove everything that is here okay so I'm going to remove everything here and we want to create um some pages so in the folder pages I need to create the login page so I'm going to create form file first which is a login page .gs okay so um in order to bother you with so much code I already have the login page here so I'm going to copy this and paste it here okay so this is like um a simple login form with a bootstrap so this is a form and it has an email and password okay so this is submit form and in the submit form what we're doing here okay in the summit form you can see what we're doing um we're taking the email and password setting up as data then we are calling the alt service Dot Login right so when we log in we're going to get a response we'll get that response so we're checking if there is data dot access token right if you look at the postman you can see Wallace have what access token so what I'm checking here is if there is data dot access token I want to set that okay okay and when I set that token I should redirect that user to um the welcome page so you want to set up these pages so let me go to the app so first of all we need to wrap um interrupt our our element which routes so this is it route then we need to Define each route ish route so the first one is the first one should have a part which is a welcome page so we need to define a part for this so I'm going to call this slash welcome and I want to pass the element and the element is going to be the welcome page welcome pitch okay okay um we've now created a welcome page so let me make this one login I'm just gonna be what the login page this is going to be our default page let it be the default page okay so we also need one other route okay sorry I need to make this an element so that it looks like this okay so I need to Define one more element so that it takes every user back to the login page all right so let us test this I'm going to save and look at the browser okay we found an error right so it's hit alt service and login page okay let me fix that quickly okay um so from the import so let me fix that import or service okay I found out that it look like um I'm not making an import sorry this should not be exported as a module I need to do um export odd service they should be constant okay so let me see if I try again and see if everything will be good okay we'll see how some errors so in which of the page or service so it says jwbt is not defined cannot resolve GWT the code okay okay I had an hero about the import so you can see this is not pointing anywhere if I found this account you can see this one is matching somewhere but this is not pointing anywhere so if you look at the GWT the code you can see it is JWT Dash decode so to correct that I need to remove this underscore and put Dash and if I remove my mouse on here you can see it's not pointing towards it nude models okay so let me scroll down so if you look at the other Arrow it says logo is not defined in app so we need to go to app and we need to remove this logo okay so let me see if and see how everything goes okay it looks like we are back up and running let me come back to my browser and check so you can see this is now the login page so the login page is ready so um we need to create small order pages so we need to create a welcome page all right so let me create that quickly so I'm going to create a new file and I'll call this welcome page yes so for the welcome page I already have that okay let me just copy that okay so this is my welcome page so I'm going to copy the content and paste here so what is here is just email and user rule so using use effects I'm getting um the user rule from the old service remember the method we created which is get current user guest current user rule okay let me be sure let me type that again or service dot okay it looks like there's an error with the import so let me correct the old service to import or service okay so here is going to be odd service dots get user email and this one is going to be Auto Service dot get user rule okay so we are setting that by default and we are navigating the user right we're gonna go to user this is for logout when you are not logged in or you click out the logout button then we'll navigate you back to the login page okay so let me save this and let us go back to the browser okay we need to link this page we just created now so we need to go to the app and in the app we need to create that page okay let me create this and the part of this page is going to be welcome then the element is welcome page okay I have Auto Import and that is what is in the importation for me so let me see if and go back to the browser because I'm going to refresh and let me made an attempt to login okay so I'm going to type person1 at mail.com and password which is this from The Postman person one at mail.com and password so let me try that you can see each returns a token right it Returns the token and you can see the token has been passed here and the user is now in the welcome page okay so but remember we've not set up um route security so I want to test this in the new browser let me show that to you so if I press enter you can see anybody can just have access to that page Okay the reason for this is there's already a user here I was testing I was testing that is why um the each user here okay all right so let me know better about this let me go back to um the browser so anybody can just have access to our application so we need to create one more page for example let me log out right okay the logout is now implemented so let us fix that quickly so we need we need the logout function in the odd service so back to odd service function okay log out foreign storage dot clay you close the local storage so it deletes all the token all available token from the local storage okay so I'm going to see if sorry before I go we need to include that in our export let's log out okay so I have saved I'm going to click on this you can see I'm not logged out then we need to implement one more page and thereafter we'll go and implement the private route and the admin route so let me create the admin page for this page I'm going to call it admin page dot GS so already have the admin page let me just copy that so for the admin page I'm going to copy this um paste water heartview okay let me be sure of the Imports to import or service um this is get user email so this is get user rule it should be get user rule and get user email so the next we want to do is to build our private route so to create a private route we need to create the file private route GS so in a private choice is going to be a function [Music] um we want to export this function okay then I'm going to call it private route so the private routes is we are going to wrap our component with the private route so we won't use our login to have access to the children of this component okay so to do that we need to pass a prop here College children okay so you will see that in action now so what we need to do here we need to return a Boolean right true or false so if this user is logged in that is where we're going to need our odd service so I'm going to import or other service and and what we want to do is odd service dot is logged in you know this is already a Boolean so it tells if the user is logged in or not so what is scenario operator so if it's login we want to return the children s we are going to use the navigate router Dom foreign [Music] login okay so we need to return this so return we have successfully set up our private route so we also need what they had main route so to do the admin routes we need to create that file and I'm going to create that file admin routes dot GS so let me just copy this so I'm going to copy this and paste what I have here so I'm going to call this admin route admin private route okay so you know we have different rules remember like I show you in the token this is an admin and I showed you the previous one which is the user so we want to check if the user is an admin right so we want to get that rule not get rule get Visa rule right so if is equal to admin okay so let me wrap this condition so if this user is equals to admin we should render the children yes we want to send back the user to the login page okay so I'm Gonna Save and the next thing we want to do is to wrap our component with our private route and admin route so first of all let us wrap the welcome page right so for the welcome page in this element okay let me bring this down to a new line okay sorry this is logged in this is a welcome page okay okay so I'm going to wrap it with our private route foreign [Music] should be as a child of what the private route okay so we need one more page which is the admin route sorry the admin page um I'm going to duplicate that and I'm going to call this admin page so these five years should be what admin page and I want to wrap this with admin private route so now I have successfully protect this admin page with what admin private route so only user that has admin role we have access to this admin page why this page the welcome page is open for every user okay let us save and test our application okay back to my browser and login so I'm going to log in as an admin admin at mail.com and if you look at the credentials here for the admin the password it says password one two let me enter the password which is password one so I'm going to log in you can see I am not logged in right so if since Harmon Harmon I have access to the admin panel okay let me log in as a user on another browser okay so for the user I think it's personal mail.com and the password is password so I'm going to log in don't save okay I think I'm missing the password passing at mill.com sorry let me check Postman okay the email is person one person one and the password is password so you can see I'm logging and I want you to see the difference right this user does not have what the admin the admin panel but on my other browser you can see this user has what the admin panel and this user can go to the admin section so let me copy this URL and let me show you as a normal user right a person with a road user a copy the URL and we want to navigate to the admin page you can see it's returned that user back to the login page only an admin rule have an access to the admin page so guys I hope you find this helpful thank you very much for watching I'm going to share a link to the GitHub of this file so ensure you explore it if you find this helpful make sure you share like And subscribe I'll see you in another video

Channel: Swagasoft Programming

Views: 2,705

Keywords: react authentication and authorization, admin route react, role based user authentication react, react private route, react private route v6, react admin dashboard, react admin router, react-admin login routing for admin and simple user, react authentication jwt, react router v6, protected routes, role based authentication in react js, React js, react router, react router tutorial, react router dom

Id: TOZsHhxnFXo

Length: 41min 39sec (2499 seconds)

Published: Tue May 09 2023