#9 How to do admin login in React, Node & Mongo | Create admin | Redirect admin to dashboard #mern

hello guys welcome back to the debug arena in this video I am going to apply the admin login functionality in our website as you already know that we have covered login and registration of our user details now in this video I am going to show you that how can you create an admin and login with the admin so when admin will log in he will be redirected to the page where he will see the table with all the users registered to his website on the other hand from the same login page when user will try to login they will be redirected to the page where they will see only their data all this thing I am going to cover in this video before that if you are not following my playlist and you are here for only admin login then also you can watch this video I am going to explain each and everything and you will understand it you will find the link to the code in the description you can go and download it and take reference from it just one thing that if you don't have Basics knowledge of react node and mongodb then please don't watch this video go and follow my playlist who learn node and mongodb from scratch so without any delay let's get started first let me show you the working of the project till now this is our registration page I have already registered let me login so when I log in you can see that I have successfully logged in the token is generated this token will be expired after 15 minutes this is my logout button and here I am getting the user details and if I refresh this also then also it will be there now this was our user login now the question is how we will do the admin login so the first most easy and the common way is to create a separate file for admin login like you will create a new signup page for admin sign in page for admin and then you can proceed but that is not the most efficient way for the People Like Us who are trying to learn and implement it in our project like we have very less time and in that we can't do we can do but it is not efficient to do the same thing twice for user and admin so what is another way another way is that you can create an API for admin login you can run it on Postman and generate ID and password and from that ID and password login to this sign up page but yes that will be little tricky for beginners so how we are going to do that let me tell you that how I am going to do that I am going to first add here the radio button which will be like register as user or admin now you will be thinking that if you do like that then any user can come here and click on admin and register as that window what I will do I will first add a radio button here admin and user so whenever anyone clicks on the admin radio button then I will add another extra field which is known as the secret key and that secret key will be known by only the creator of the website so what we will do if anybody wants to login as admin then he has to give the secret key here and that security key must match the secret key which we have added on the website so in that way from this login page we will be login as user also and admin also so I hope you understand the concept now let me code it [Music] this is my sign up component you can see here here I have four states fname and name email and password representing my four fields after that you can see here I am setting the state fname and name email and password and on submit I am calling this hander button which is calling this register function to which we are sending these four values and now what I will do I will first create that radio button so let me create it and you can see that I have created the radio button let me create one state okay now I will just set here set user type let's see how my component is looking okay it is looking well let's add this here okay so our first step is that you can see here we are getting register as user and admin and we have set it to the state name as set user type now the next step will be to create the input box for the secret key so let me do that also let me create a state for that also [Music] now let's assign the secret key into the state yeah done let's see how our component is looking okay so user admin secret key first name L name email and password now we have to hide it for the user and show it for the admin so I will give your condition the user type which is this state is equal equals to admin so if user has been clicked on this the user type will store the admin if this is admin then I will show this otherwise none let's see whether it is working you can see if user is clicked the secret box is disappeared and if I click on admin the secret key is here moving ahead now we will make changes to the function so you can see whenever the submit is clicked this function will be called but we have to check here something so what I will do if user type is admin then if user type is admin and secret key is not equal to so this is my secret key for now you can keep it as you want so if user type is admin and the secret key is not equal to this then I will just alert [Music] invalid and I will copy paste this code inside this else you can use return also but yes for now this okay now I will copy paste this here because otherwise it will refresh every time now let's see whether it will be working or not so if I reload it you can see I go to admin so okay first here I go to user and I click on sign up you can see something went wrong this is the message from my API okay if I go to admin and click on sign up you can see it is showing invalid admin and if I give the secret key which only I know then it is also showing the message from API okay so it is also done now next step our next step will be first year user type [Music] by this what will happen whoever registered in our website will have this user type whether it should be user or admin so we can differentiate between them with the help of this user type now let's move to our backend so you can see here this is my register code before that let me make changes to the our schema before this we have only four element in our schema according to our field but now we will also have user type because we are accepting user type for every user to bifurcate between them whether it is a user or admin okay so this step is done now come back to app.js this is my register API here I am getting fname LM email and password from request.body this is coming from this so here I am sending user type also so I will just add here user type [Music] after that here I am encrypting the password yeah I am checking whether the user exists or not and here I am creating this is the method from the mongodb so if you don't have any idea you can go and watch my previous videos it will be very useful for you okay so now what it will do whenever user click on register whether it will be user or admin it will create with the user type okay now let's just save it let's try it [Music] before this remember one thing that whenever you make changes to a schema make sure to delete all the previous data from your collection otherwise it may through error so I will delete my schema now I will go and create a user so others thakur [Music] and when I click on sign up you can see registration successful now let's come here let's see whether it has been added or not let's refresh this and you can see it has been added and is user type is user now let's add admin [Music] you can see the data is already there I will just write here admin okay you can see if I click on sign up it is giving me invalidated admin also if I write here anything then click on sign up it is showing me invalid admin so there is no way that any other user other than you can login no not login create a create an admin okay now when I click on sign up you can see registration successful and if I come here refresh this you can see that my admin is created now what we will do we are going to handle the user Details page because currently the user Details page will only show us the name and the user we are going to bifurcate it between the admin and the user so let's do that before that let me explain you how our login is working this is my login API here I am getting email and password from react here I am checking whether that email exists or not and if it exists then whatever password we have get from react we are comparing it and decrypting it because you can see in register we have encrypted it after that this is we are generating the token and this is how our login is happening and after this this is our user details from that token we are getting the user data and we are returning that data to our user and we are showing it to our dashboard now let's make changes to our user Details page so you can see this is my user Details page I am getting the data and all okay let me create here two other components I will write here user home dot Js and okay for now leave admin I will just create user home what I will do I will copy paste this here [Music] and I will just save this here you can see we are calling the user data API which I have shown you I am getting a token which has been stored to our local storage let me show you inside login we are storing our token to the local storage here we are getting that token and we are getting the user data and yes during the user data in this variable user data okay let me also shift this function log out to that home [Music] save user details.js now what I will do here I will first create a variable const admin comma set again [Music] save this now you can see here that we are getting the data so here I will do this data dot data dot user type is equal equals to admin if it is admin then I will set admin to Pro okay let me set it here false yes I will set it to True after that I will set this so here I will write condition that if admin is true then we will render here our admin component or admin dashboard which I haven't created yet for now we can just write welcome admin otherwise we will show [Music] user home you can see that user home is our this component which we have created okay I will pass this user data whatever data is storing here we will pass there is equals to user data and I will just receive it as props [Music] user data now let's see whether it is working or not first I will login as user and when I click on submit you can see login successful and you can see that I am getting this screen address at the rate g.com okay when I click on logout now I will be login as admin [Music] and you can see I have been logged in as admin and I am getting this welcome admin you can see that how easy it is to implement admin login functionality in your website one thing when we are logging in as an admin we have seen a bit screen of our user details it is because we have to use the loading screen so in the next video I will be creating a new admin component in that I will show the table which have details of the all the users who have been registered to your website and as an admin you will be able to delete them and also I will implement the loading screen so stay tuned for that that's it for this video I hope you have learned something from this video do share the video with your friends and make sure that they also subscribe to my channel and learn web development with me thank you for watching

Channel: The Debug Arena

Views: 13,457

Keywords: How to do admin login in react node, admin login in react node and mongo, login as admin in react, navigate admin to dashboard, admin authentication in react, Node and Mongo, React, Node.js, MongoDB admin login, Building a login system with MongoDB and Node.js, React Node.js admin panel, MongoDB secure login system, Node.js admin authentication, react, node, mern login system, React admin login tutorial, login authentication, admin login, administrataor login, dashboard in react

Id: SZXZRRZML2g

Length: 16min 29sec (989 seconds)

Published: Mon Jan 23 2023