Create User Roles in NodeJS and ReactJS - Tutorial

hey guys how's it going i'm back here with another video and today i'm going to be talking about how to create different roles in your website where for example if you have a user who is an admin he is going to be able to try to reach a website and see a page that fits directly to what role he is and if someone is just a simple normal user it's going to see a different page and if the person is like a moderator it's going to appear a different page so basically implementing roles into a react application with node and some database in our case we're going to be using mysql so this is a previous website i created this is not a continuation from that video but basically it's kind of like just a simple registration and login page that i created with react and it's it's pretty good like i mean it's already very secure in some ways basically we already hash the passwords there are sessions there's cool keys there's a bunch of stuff that are not actually useful to this video specifically but just so you guys understand that i already created a simple login system in this application the important thing is that we're going to be working with different routes so for example i have here in my mysql workbench a table called users and you can see that currently there's only two users and there's a username and a password however now we want to insert another column into our database called role and if i come here and write and click on alter table i can just alter directly and write roll so it's going to be a a variable character a varying character i think and it shouldn't be no so we need to add something basically a rule actually let me allow it to be no because if we don't uh it's gonna give us an error because there's already two users in our database without that so we need to change that immediately so basically let's say that please subscribe is an admin and that i don't know google is a visitor that those are the two roles that we want to use right we should also create a third one so let's save this let's apply and now go back to our alter user alter table and make this not able to be null if we had made this before it would give us an error because we already had two elements in our database which were no because they didn't have a role inserted into them so basically this should be it apply and let's for now just create a third user so if i come here to users these are the users i'm going to register another user called john smith and the password is going to be what's up let me click register and i actually i think it didn't register yeah because we are not uh we're not adding a role to that registration you can see that probably yeah there was an sql inst insert error and this is why i'm actually i don't want to add the role directly from here i just want to edit from the database so sorry about that i'm just going to alter again and remove the not null you can do it on your own if you want to add a a row input to add into your database but i'm not going to do that so i'm just going to apply and let me go back here to users and try to register john smith again it should work so yeah it worked so let's go to our mysql database refresh this and now we have a john smith so let's change this to moderator so mod there are three different roles in our application so apply so if we come here and we refresh this we're going to be using something called a react router so if we come here and navigate towards our re our client folder so where our react app is we can just write yarn add react router done basically this will allow us to have different pages in our application or different routes so if you don't have if you don't have yarn you're using npm it's the same it's just npm installed react router dom so now we have our and let me close this we have our react router dom here and instead of having all of this i'm going to do something which is a bit different and i'm going to remove this so we're going to have different pages so i'm going to create a folder called pages and inside of here we're going to have the registration page which is also going to be the login page so registration.js we're going to have the main page so main.js and these two pages the page that is going to be changing every as regarding to the role you are is going to be the main page so let me save both of this and i'm going to grab everything i've already added to the registration that i created here to my registration page so let me grab this come to our registration page and directly add this to here i'm also going to be copying the this div over here and adding to the top because it makes sense since we are since we are directly using we want to do the same thing we did before right so let's just come here and also copy all of our states so this this and all of our functions as well and the use effect we need to make it so that it's exactly the same right we're just changing the page so let's copy this and now let's copy all of the imports so this should be the same as well okay now on the app.js page we're just gonna have one simple thing so i'm gonna delete all of this and i'm also going to delete this we're just gonna have the following thing we're gonna import the the react router dom uh library so over here we're going to import you can just ignore this this thing right here i hate when this happens so basically let me just add a div right here so it doesn't give us errors so if i come here and write import and i write browser router as route and router from react router dom which is our library it should be working so inside of here we should add a router which will basically be an object representing all of our different pages that we can have so let me close this and add a route which is going to be have a path so this path is going to be slash registration and there's also going to be it's going to be exact meaning this is the main page we appear in and it's going to have a render which is going to be a function taking props props and it's going to be rendering the component called registration so if you don't understand what i'm doing i would recommend watching my video on react router dom this is just a way to create different routes in your application so i'm going to be adding this parentheses so it knows it knows that it represents a lot and i also need to put this over here so i'm saving it and it should be working it says cannot resolve dot app.css and i get i don't know what it means basically we should change this over here so now it should be working yeah so location of undefined where is this error did i interchange this let me see yeah i guess this is the error i had so basically we created a route that whenever we try to access the normal url it will render the registration page so let's try to access the normal url and it's not actually trying to access the registration page so let me see what happened oh okay i just realized that i'm not trying to access through this url you should write slash registration and you can see that now all of our registration information appears in the slash registration so let's create another route which is going to be the main page so this one is going to be just a simple slash so just like this and we're going to be rendering the main page that for now there's literally nothing right so if we go to the normal slash there's nothing so what we're going to be doing here is we're going to be adding sim a simple header basically representing which row we have so it's going to be admin if we are an admin and it's going to be a normal user so user if you are a normal user it's going to be let me see moderator if we are a moderator so you can see that for now all three of them appear because we haven't implemented what we want to do so that's what we want to do over here let's come here and import axios axios from axios and axis is an http request library so we're going to be making the request to our database and over here we need to create and use effect hook why do we need to do that is basically because we need to whenever we refresh this page or whenever we try to access this page we need to make this request immediately so we're also going to add the empty array in the end so that it doesn't quit like it doesn't consistently update this request it only does it once and we also want to create a state that will represent the role so row set row and use state use state and over here it's going to be a string so let's come here and import the use state hook so use state so it knows what we're using and what did i write i write i wrote you state wrong so now it should be right and over here the only thing we need to do in our user fact hook is fetch that information so let's get the user and the important thing we need to do is we need to create a route in our back end that will send us the information that is correctly related to whatever we want so in our case whenever we try to reach the let's look at our routes whenever we try to reach the uh slash login we want to receive the information from the user correctly so if we get the slash localhost login which is the same we have over here so let me go over here and grab the grab this same thing over here this will basically say if we are logged in or not and it will also return the object which is really interesting the object will be represented so the user information is represented like this it will return a response.data.user which will have which will be an array of all the users and it's dot username and the only thing we're sending uh currently is just the informa the information of the the login so basically we're just saying we're just asking to see if we are logged in so if we are logged in it's going to return whatever information from the user we have so instead of sending this we're going to write set role and change this to row because now our database object will have a username a password a role and an id so if we use the dot row you can see that now we'll have an object representing this so instead of just rendering all of this i can just come here and write rogue and save currently nothing will appear and this is important the reason why nothing will appear is because we haven't logged in yet so if we come here and log in and for example i'm logged in into the uh john smith i don't know the password for google i know that for john's methods what's up so i'll come here and write what's up and click login you'll see that it appears our name meaning we have logged in and if we try to come to the main page it didn't update while we need it let's take a look at what happened so i just figured out the error basically as i mentioned in a last video if you're trying to work with cool keys or whatever you just need to make sure that you you write this onto your page in order to set access to work with it so basically if you're not using x views or you're not working with cookies you shouldn't care but if you are then this should definitely help now if we come here and we refresh our page and we try to log into whatsup and the password is no actually the the password is whatsapp the name is john smith we click login if we try to come to the to the normal page you can see that now moderator appears and this is just a simple use case and normally if you're trying to make something like this you would change the whole page so basically let's let's imagine that for the moderator page we can come here to main for example and instead of just displaying mod we can do something like this uh create a page called component called moderator so let me create a folder called components and inside of here there's going to be three components moderator uh also i don't know admin yes you know what i think this is not spelled correctly but i had no idea for now i don't know why i'm just going to call this mod um this and i also want to create a normal user a normal user something like this so these are the three pages we can have and i'll write rfc for each one of them so that i can create a automatically create a page so you can see we have three three different components one of them will have something like um h1 modder mod and i don't know let's have an image so let's grab an image in the internet so moderator i know mod uh google just a random image so let's let's no mod doesn't mean that so let me just grab an image of google right so let me come here this will be the image we're using so let me copy the image address and i'll come here to my thing and over here in the href no not the href the src i'm gonna be posting this url so now in the moderator page we're gonna be seeing this image in the administrator page let's look at facebook or something like this uh let's grab this image copy the image address this is just for demonstration purposes so basically what i need to do is i need to do the same thing for the admin so h1 admin and let's add a an image which will have an src with this link so over here and let's do the same for the normal user but instead in the normal user i don't care i'll just write normal user and not use an image right okay we have now three different components representing three pages so if you have something like this you could come here and just simply ask so we're going to set the role equal to something and over here let's just ask if so if um i don't know if it's if row equals to a normal user so i don't know if it's normal using the database it's visitor actually i should have used the same name but if it is equal to visitor then we want to return the following page so we just want to return the component called a normal user normal user and we're going to create this component we're going to import this component right now so if you come here and write import normal normal you user from uh let's go back to the components folder and grab the the normal user you can see that now if we do this we should be rendering the the correct component right um actually we don't even need the return because this isn't a function let me just write it like this and if we are a normal user it's going to render like this but if we're not so let's ask another question if row equals to mod then we want to do the same thing but to the moderator page so and moderator page so let's just copy this come here and call this mod and change this to mod and let me do the same thing for admin so admin change this to admin i can just come here and render the mod page the mod component and let me close this and do the same for the administrator so if roll equals to admin then i just want to render the admin components so this should be it um let me just close this and you can see now we have three questions right there's more efficient ways of doing it but i just wanna this is just a simple way of doing it so let's come back here and currently it is not showing anything let's go to the console log the reason why is because i think we logged out let's go to the slash registration and let's log in with john smith and google no it's what's up sorry and john smith apparently he is a moderator so it should represent uh the name mod and an image of google let's see and as you can see this is correct but for example if we had another user and i'm gonna create different users right now because i literally don't remember then the password for this um this is going to be erica bryton i don't know and the password is hello and let's also register um i don't know let me see jake ferries random names and the password is clicker so register you can see that now we have this two users over here so let me add a visitor to erica brighton and an admin to jake ferriss let me apply and you can see that if i try to log in with erica bryton and her password was hello if i click log in you can see i'm now erica brighton but if i go to my normal page it says normal user because she is a visitor so if we come here and we try to log in for example with jake ferries and i should write this correctly so fairies the password is clicker and i click login now i am jake ferriss if i come back i should see an image of facebook and that is exactly what happens so basically this is how you define different roles if you're not using sessions to keep the login basically the only thing differently you would do is you would come to your back end and you would create a route like slash get roll like app.get slash roll and the only thing would do it would make an sql statement selecting all from users where username is equal to whatever username you have right now and it should return the whole object of the user and on the front end you would do the same thing you would do exeus.get and i try to access the route and just set the role equal to an estate and on the bottom you can now use that state to define which role you have so thank you guys for watching if you have any questions please leave a comment down below this was a video requested by a viewer so i hope i could have uh gave this this you the superior insight so yeah if you enjoyed this video please like this video comment down below subscribe if you enjoyed the channel and i see you guys next time

Channel: PedroTech

Views: 73,618

Keywords: coding, computer science, programming, react, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, admin, roles in nodejs, node js, nodejs, mysql, roles mysql, admin nodejs, admin node js, nodejs admin panel, nodejs limit access, react admin page, react roles, reactjs admin dashboard, reactjs admin roles, reaction roles discord

Id: YLihWZwLaGU

Length: 21min 29sec (1289 seconds)

Published: Sat Sep 19 2020