#16 Admin Login and Register authentication in React JS, Node JS and Mongo DB || Multi-User MERN

hello guys welcome back to the debug arena in this video I will show how we can do admin login in our react native application so there are many ways in which we can do admin login and the most common and the efficient way is that we can create a different application for user and admin but as a student or if you are starting with the react native it is very very difficult to make two different different application so in this video I will show how we can register as admin and user from the same sign up and the login page so first let me give you the demo of what we are going to do in this video so you can see here this is my registered page and here I have this two radio button one is user and the other one is admin so if a person select user here and give all the details and click on register he will be registered as user same thing if person select admin here give all the details and click on register he will be registered as admin now you might be thinking that in this way all the user can register as admin and you are correct but that is wrong so to to tackle that situation what I have done whenever a person will select this admin here a new text box will appear which is known as secret text so now if a person wants to register as a admin he have to give this secret text and this secret text will only known to the developer because it is hardcoded here like this so if inside a secret text I will give this text 1 2 4 3 and then fill all the mandatory details and click on register then only I will be registered as ad in case of user there is nothing like this secret text so anyone can register but in case of admin we have to give this secret text and if I pass here random thing and then click on this register you can see I'm getting this popup invalid admin so after registration at the login if a user who is trying to do login is admin he will be navigated to admin homepage and if it is a user it will be navigated to user homepage so we are going to cover all of these things in this video just one more thing if you are not following my playlist and you are here here only for admin login then also you can watch the video I have explained each and everything from scratch you can get the code from the GitHub link will be in description so without any delay let's get started you can see here this is my register screen and this is the code of it so first let me take you through the code I will scroll down and get to the UI and here you can see this is my text input and in this on change I have called this function handle name so whenever user will enter something inside this text input it will call this function and inside this function I'm setting that value to the state after this this is the validation for the field format like here I have defined what are the format our text input will accept like if I go inside name and write one digit I'm getting this error message name should be more than one character so I have applied field validation in all of the text input so if you want to learn all of these things then you can go and watch my previous video and I followed the same format for all of the other text input and at last at the register button I have called this function name as handle submit and inside handle submit you can see I have created this object user data which consist of all the data entered by users and At Last I am calling this exos which will post the data to our back end and here we are getting the message registration successful so now let's start the coding for admin the first thing we have to do is to create the radio button for that I will go up and import the radio button from react native paper now I will scroll down and go to register and here below the register I will create a view and inside that view I will create the UI for radio button so let me do that quickly and it is done here I have created one View and inside the view I have written this login as after that I have created another view which consists of two thing one is radio button and the label of radio button so here I have created user and admin and you can see the UI is not looking that much good but it is okay and also inside this style. JS I have added this CSS so you can copy this now I will again go to register I have created this radio button now we have to create another text input which will be secret text which will only be visible when user select this admin so let's create that for that I will come here and it is done now I will save this and you can see my text input is visible now let's create the state to store both this radio button and this secret text value so I will go up let me create the state so I will write here const user type okay here I have created two State one is user type and another one is secret text now let's assign the value to them so I will go to radio button and here I will write status and here I will write one condition which is if my user type which is my state is equal equals to user then I will mark this radio button as checked otherwise it will be unchecked I copy this condition I will paste that inside this radio button just I will change this user type to admin now I will write here on press and on press what will happen I will call one function which will set our user type to user I will copy this and on this radio button I will set our user type to admin like this okay this is done now I will go to my secure text input and here I will write on change and on change I want the value so I will write here e and after that we can get the value and we will store that inside our variable sorry not variable it State set secret text and the value will be e do native event do text okay done I will save this now you know we don't have to show this secret text input every time we only have to show this whenever our radio button is set to admin so let's add the condition here so I will write one condition which is if user type is equal equals to admin then I will copy this text input I will paste it here otherwise I will set it to null okay I will save this and you can see my secure text input has gone if I select user here nothing is happening if I select admin here it is visible so it is totally working fine great now let's go to handle submit function here you can see I have added this condition that if my name verify email verify is true then I'm directly posting the data to exos this name verify and email verify is the format of our Text data so we will keep this condition as it is inside this condition I will try to add one more condition which is if my user type is equal equals to admin and my secret text is not equal to this will be my secret text which is for now text1 123 you know the logic how we are going to do admin login whenever user will select admin he will have to enter one secret text and this secret text we are going to enter here and if this text and the text enter by user matches then only user will be able to do register as admin in our application so this condition is done now if this is not true like users selects the admin but secret text is not equal to this one then I will just return here and in return return I will write here alert invalid admin here I have used return so that whenever our Loop will come here and it will show this invalid admin the rest of the code will not be executed now I will save this so for now I will just remove this condition because otherwise I will have to enter each and every digit so I am going to just remove this for now I will save this I will come here I will choose user text box is not visible I will click on this admin and you can see secret text is visible and if I come here and write some random text and then click on this register button I'm getting here invalid admin but if I write here text 1 2 4 3 and then clicking on this register so you can see I'm getting data user already exist so it's okay this means this API is calling so that's why we are getting that so this means our UI is totally working fine now let's work on the back end before going to the back end you can see here that I am passing name email mobile and password Here I also have to pass this user type it will help us to identify whether the logged in user is actually the user or admin so I will save this I will just uncomment this now let's go to the back end this is my back end code where I have used Express and also there are many other thing and you can see this is the API where I'm doing the registration thing So currently from the user I'm getting the data from request. body if you want to learn all of these things then you can go and watch my previous videos as of now I am accepting the data like name email mobile and password from user but from now we also have to accept user type so I will add that here user type this variable name should be same as the variable which we have entered there also you know whatever data will be present inside the user we have to add that data inside the user schema so this is my user schema so in this currently only this these things are there so I will add one more thing which is user type and user type will be string then I will save this now I will come here and you can see this is my registered API So currently I'm getting all this data from user through request. body after that I'm trying to find whether that user exist or not if that user exist then he will not be able to do registration in our application and here I am doing the registration thing so here I have passed name email password and mobile so I'm going to pass here user type also okay then now I will save this now I will try to register one user before that let me open the mongodb just to check whether user is registered successfully or not okay my mongodb is open and you can see here currently I'm having 13 users so let's try to register one user so I will select here admin and I will write here secret text S text 1243 which is the correct text and here inside name I will just write admin okay done now let let me try to hit register and you can see I've got the message registered successful I will click on the okay then I will try to refresh this mongodb schema and you can see here I'm getting 14 records and if I scroll down you can see here this is our record which is admin admin g.co this was mobile number password is encrypted and my user type is admin so this is totally working fine now our front end part is done our back end part is done now we have to handle after the like when user is doing the login he should be navigated to homepage and when admin is doing the login he should be navigated to a place where he would see the user details so both these homepages are different so let's try to handle that for that first I will go to my backend code and I will scroll down to the login API so this is my login API where I'm doing the login of the user here I'm taking email and password from the user and after that I'm doing some validation and here I'm decrypting the password and generating this token and this is the response which I'm sending currently so here I will come and here I will add one more field which is user type and you can see here here I'm finding the user with a particular email which is user is sending from our react native application and if that user is available in our mongodb schema all his details will be stored inside this variable so here at the time of returning the response along with the token I will send one more thing which is old user do user type so when user will do the login he will receive the token with the help of token we can retrieve the user details if you want to learn this you can go and watch my previous video and along with the token I also want the user type so that I can navigate it to it respective homepage so I will save this now let's go to the front end here I will open my login. jsx this is my function which is doing the login and here you can see here I am calling that API and if I'm getting the response status as okay I'm doing login successful and also I'm storing that token inside as sync storage and here I'm navigating it to home so for now I will just comment this and I will save this let's go to the application let's try to do login so I will write here admin g.co I will open the console I click on login and in the response you can see I'm getting three things one is data inside data I'm getting the token here I'm getting status as okay and here I'm getting user type which is admin so now based on this data I can navigate the user to its respect home screen so let's go to the code I will minimize this then I will create a new file here inside the screens which will be admin screen. jsx let me write some code here I will save this now I will go to my app.jsx and here I will navigate to my login stack Navigator okay this is the stack Navigator so here I will add one more screen which will be my admin component so here I will write admin screen and my component will be admin screen you can create another stack navigator for admin but for now I am integrating it to my login Navigator now I will save this then I will go to my login and here once my everything is done I will add one condition here which is if my response. dat. user type is equal equals to admin then I will navigate the user to my admin screen and this name should be same as the name which we have added inside this stack Navigator admin screen otherwise I will write here else we can navigate the user to home now I will save this I will try to open my application now let's do the login so I will write here admin atate g.co I will pass the password click on login you can see I have got logged in successful and I have been navigated to my admin screen so this is totally working fine now here you can fetch the admin details you can add the log out button and there are many much more things which we are going to do in the future but for now in this video I will just try to fetch the admin details for that I will go to my admin screen then I will go to my home screen. jsx and here you can see this is the function which is fetching our users details so I will copy this I will go to my admin screen. jsx I will come inside function and I will paste that here what we are doing at the time of login you can see here that we have stored the token to our async storage so here we are getting that token and in the backend I have created one API which with the help of this token can fetch our users details and here I am setting the users details inside this state so let's create this state Also let's import use State also I will have to import this assing storage and at last inside use effect I will call this get data I will save this now let's go to the console to see whether we are getting the response. data so this is my console and you can see I'm getting some error and which is use effect doesn't exist okay let me just import use effect I will save this I will open the console again and you can see here that I have been navigated to my user home screen why it is it is because that inside app.jsx I have written one condition which is you can see here if is logged in is true then I am navigating to draw nav bar so here the question is are we logged in and the answer is yes so that's why it is navigating us to draw nav and inside draw nav this is the home screen so how we can solve this to solve this what we have to do along with this is logged in we also have to check whether the logged in user is actually the user or admin so for that again I will go to login and here you can see I'm storing this two data token and is logged in inside this assing storage so I will store one more data which is my user type so here I will write user type and I will set it to response. dat. user type if you are still confused that why we are navigating to users let me explain you a little bit more in this application I have applied one functionalities which is like that when our user log to our application and then closes the application and again reopens the application if he didn't logged out manually then he should already be logged in so in this condition also we were logged in as a admin and we didn't do the log out so we Clos the application that is in other case we reload the application so that's why it is navigating as to this page okay I hope it is clear now I'll go to my app.jsx here I'm having this function to get the data from as sync storage so I will create another line which will be data 2 or I will change the name to user type and it will be user type this user type spelling should be same as what we have used inside this login okay and after that I will create another state here user type comma set user type and I will set that here that is set user type and it will be this user type okay let me just change the name of this variable which will be user type one okay now I will save this then I will come here and add the condition which will be like if is logged in and then user type equal to admin both the things are true then I want it to navigate to admin screen so this is the first condition that if is logged in is true and user type is also admin then it will go to admin screen otherwise then we will here again check one condition which goes like if my is logged in is true here I'm just checking the is logged in then I will navigate to draw nav otherwise I will navigate to login nav so this is the condition now I will save this I will open my application I will do the log out I will try to do login again and you can see I have been navigated to admin screen now let's try to reload my application and you can see here it has directly been navigated to admin screen so this is totally working fine also I'm getting the user detail inside this console now I just have to show this detail in this screen so let me do that quickly I'm not going to focus on styling okay it is done so you can see here here I have written the UI to get the user so you can see that inside this API or you can say the function I'm storing the user detail inside the state user data and then in the UI I am retriving that data and showing it here also I have created this button which is sign out and I have just copy pasted the sign out function from there to here so here you can see I'm clearing the is logged in clearing the token and I'm navigating to login user so actually it should be login because currently this admin screen is present inside this login stch Navigator and its page name is login so it will navigate there and here we also have to clean one thing which is a sync storage do set item and we also have to do null to user type and I think everything is done so I will save this now I will click on this log out oops navigation doesn't exist let me take it from here so I can take navigation from my props I will save this I will click on this log out button and you can see I have been logged out now let's try to log in as a user and you can see I have got the message logged in successful when I click on okay I have been navigated to this home screen so this is how we can create the admin login in our react native application like we can login as a admin and user from the same register and the login page and they will be navigated to the respective Pages that's it for the video in the next video at the admin home screen I will try to fetch all the users details from mongod DB and I will show it there if you have any doubt then please let me know in comments and stay tuned for more videos thank you

Channel: The Debug Arena

Views: 580

Keywords: admin login in react native, role based login in react native, how to do admin login in react native, create admin, admin and user, navigate admin to dashboard react native, mongo db, node js, react native, admin in react native, react native admin, login auth, node and mongo db, how to do admin login in react native node and mongodb, mern stack, keep user logged in

Id: EQ9QvCrCXdQ

Length: 19min 56sec (1196 seconds)

Published: Mon Feb 19 2024