Role Based Authentication and Authorization in React JS. Role Based Access Control in React Node

here to manage roles and for this role-based management so whenever we log into our system so we should rent it to a page and is it a domain or a visitor or something else what's okay we have different roles in our database so by default I have already created this project okay the significance sign in is already done you have link for this video in the description this is the code that we have implemented this is server side code okay for that project we have used um session and cookies and login and sign up all functionalities is implemented in that okay login and also user interfaces so you're holding for this project in the description for this video we will just manage the rules okay we have different roles whenever we sign in as their admin we should move to the admin font if you were as a visitor we should move to the visitor page okay so for that let's add um another column here in our table we used sign up database and a user's table let's check it in the server side see we created the connection with the sign up table database and we use user table okay so we should add one another column by the name of row okay so let's come here and let's say come here to the structure and inside that one I add one another column and name it role for example and the this should be our car and it should be 10. and after that make it a channel okay it should technology null values because later I will explain why so we did it okay so now we will just um just sign up register an account so for that let's come here to the critical account so here we will register account admin gmail.com yeah let's sign up yeah we created the account yeah the account has created but the rule is null later I will do that okay let's create one another one let's sign up yeah it has created also for the rule why uh because we don't have um uh here when I drop down for role or admin and something else okay I will add that main value okay you can do that in using user interface but I will add the rules manually I will add for this one admin which is the admin with us and this is the visitor with us so after adding these so now let's perform our operation so whenever we log in so we should so let's login okay first of all admin gmail.com where we are going to let's press the login so we came here okay to this welcome page so whenever we come to the live welcome page here we should Implement that is it admin or a visitor okay so let's come here to the code so whenever I come here um login when we successfully log into the system okay if it was valid so then we should move navigate slash to this route okay let's find this route this route goes to the home component let's move to the home component inside home complete we can um just implemented this logic okay this logic says that whenever we come to the home component it should check is it valid or not whenever he is accessing the home page is it a valid it means it it's login or not we cannot access directly our home page okay if we are not login because we created the session and we store the session and we are checking whenever we come to the home page so now whenever we come here we return our username based on the username instead of username we will return our role which is what is the role of this user okay so let's come here to the login to this slash okay this logic that we have implemented we called this route okay this route inside our user entropy is this loud okay here we returned valid true and uh also the username from session see he returned the username and the value to here in this allergic instead of returning a username translation so first of all we should store in our session the role okay so let's come here to the login we will store our role instead of username whenever we login so we should store our role so after storing their role let's change the name of that it should be roll and just come here and stayed up for username we will turn the role decision Earl okay you can watch this video um okay you have Linked In the description to complete system okay I will just return the role now so whenever I return the rule to home page so here we will get our role okay data Dot roll so when we get our role so now we should set that store in this field okay let's change the name of this roll and also see troll let's copy this and come here okay so now let's come here we will Implement a logic here we will just write something let's create first of our two component the first one would be the admin.js the second one would be the visitor .js and let's come here to the hardware domain for example let's commute to the visitor visitor okay so now let's come here to the home we will Implement our logic here uh H2 sorry if our role was equal to equal to heard me so then we should implement we should render the whole the Arduino key admin page let's import it that has imported else if the role was equal to equal to be the visitor so then we should render the visitor okay visitor component yeah that has imported okay so now let's take it okay let's come here to the Chrome and pressure page let's enter the domain gmail.com and password after that place the login oh here is the error never so let's come here and we should come into the DB yeah here we should correct this one okay roll instead of your username we should check our role okay appreciate and let's come here at me at gmail.com and here password press the login yeah we came to our admin page okay and voltage authorization and welcome to admin page if we destroy our if you would like to destroy our login our sessions so first let's I will create another bar here at the top for admin page okay so I have created this now bar okay so now we never replace this log out we should log out and then we should like it back as a visitor okay right now we cannot login okay if we come here to the login so we will come back to admin because we have set the session a check decision if the session was it it will go to our back to us to admin so now let's perform this lag out functionality just come here this is the log out button okay we will add on click and uh log out let's create this function copy the name const we will just call let's copy this message paste it here instead of before this we will call logout and you can do state of this we will just reload our page whenever we log out okay so now let's create this API inside debit.json okay let's come here dirt it log out and after that let's create result and here we will just destroy our session request session dot destroy so it will destroy the session and return okay Jason example so now let's perform this axis is not defined here let's come here to admin we will just import the axis and also let's import it and that mean unexpected use of application so instead of just let's add window because it thinks that it is a global variable but that is not so let's appreciate now yeah the year has gone so now let's log in gmail.com and let's Press login we will come to the login page and let's press the logout button what happened see the cookie has cleared we came back to our login page so let's login as a visitor and here we would like to write password let's press that again see please come visitor when we came to the visitor page okay so it was on about role based management okay simply just add the rules uh to your database and restart and which role was that income and granted those components according to that even though in this one company you can render some part for admin in some part for visitor okay just instead of this then you can specify your rules here okay for example if role was admin render this area otherwise render all this area okay so you can specify using conditional statements and that okay so it was all about this I hope this video was helpful for you if you like this for you don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 30,028

Keywords: role based access control, role-based access control in react, role based authentication in node js, react, user role based access control and permissions in react, role based routing in react js, authentication in react js, react user role-based access control, role based access control in react js, authentication, role-based access control, role based authentication in react js, role based authorization in react, role based authorization, access control

Id: kvbmaS8o9Lw

Length: 11min 53sec (713 seconds)

Published: Tue Apr 04 2023