#3 Login and Registration Authentication in React using Node JS and Mongo DB-1 | Learn MERN Stack

hello guys welcome to the debug arena i hope you are doing well currently i am trying to make a tutorial to teach you about how you can work with react node and mongodb simultaneously so that we can easily convert our static website to fully functional website so in the first video i have introduced you to the node.js and api and also we have seen that how we can create a node.js file how we can install packages and use them then in the second video we have seen about mongodb how we can create a cluster on mongodb and how we can connect our own node.js server to mongodb now this is the third video and in this video i am going to register a new user and also i am going to show you that how can you log in with that credentials so without any delay let's get started you can see here this is my login form and this is my register form now we are going to make it functional before moving forward one thing that this ui is not made by me i just visited the github and copied this ui because my main focus is to make it functional so i will give the link to that repository in my description so you can also download that now let's get to the code this is my folder structure which i have downloaded you can see here there is a component name login component this is my login form and this is my sign up form currently it is only ui now we are going to make it functional so let's do that so first go to your sign up page and you can see here here there is a input name first name last name email password so the first thing is to get the value from them so i am making state and to get the value from them [Music] i am making my state name as fname so these are my states now let's store this value like in this i will write on change and just store that in my state i will store this in fname so we can access the value so we can access the value by e dot target dot value this is the way to access it now we will just copy this function and paste it just change the name so now we are getting the values now let's make submit function and in this we are just going to console all the value we are getting like here i am restructuring it okay now let's console all this now give this function name to the form on submit we will just call this function handle handle submit now save it go to your project refresh it i will open console uh console [Music] i will write just this and let's get to the console when i click on sign up okay okay okay one thing like i have to give here [Music] e dot prefe prevent default so that it doesn't submit like it doesn't refresh it and i think we are also getting some error so let's see [Music] okay e is not defined okay so we will just pass e here save it come here refresh now just fill the data [Music] and now i will submit form and cannot read properties of this dot state okay so i think we need to bind it i will just bind it here now just save it let's go here refresh it now i will just fill the data again write password and sign up and you can see here that we are getting console so now we are successfully getting data now let's move to the node.js part okay so this is my node.js folder you can watch my previous video that what has happened here but yes i will also explain you now that first i have created this folder then run npm in it and initialize all the details after that i had installed packages like express mongos so that i can run this app then i have imported it as you can see here and also i have imported mongoose this is my url for this you can watch my second video in which i have shown how you can connect to mongodb and this is doing nothing but just showing us that whether we have connected to the database or not so that's it you can watch previous video and now we are going to make our new register api so first we have to write app dot the name will be register after that async request for my response okay now you can see here that we are going to accept first name last name email address and password and as i have told you in the previous video that we will get although that we will get all those data from request dot body so let's do that const i will get fname l name email and password from request dot body so first step is done now just try try and catch now before moving forward we have to make the schema like i have already told you you can watch the videos like we have to create the schema and we have to define the fields that are going to be in the mongodb so these are like useless for now so we can do that i will have fname which is of string i will have f l name which is of string email which is of string and password which is also of string so my schema is also ready now we can just import it here okay create const user and we will just write mongoose dot model and our model name which is i think yeah user info [Music] if you are not getting all this you can watch previous video but it is nothing like you are importing that model in your current project directory now this is done now in the try catch block you can just write await user dot create now like this will create a new user in our mongodb and we will give fname l name email and password okay and once it is done we will just send the response back to us otherwise in error we will just send error now let's just save it so our node.js part is done now let's try to register it from react.js using fetch come back to project inside this we will just use fetch function so fetch my url is http localhost my server is running on 5000 and my api name is register so i don't think you have any issues here now we will define our headers like method is post i will just write my headers okay i'm done with my headers now let's pass the body [Music] and i will pass it in the json format so i will just write json.stringify and inside that i will pass okay now we will pass the data we will first pass fname have to pass it like this but as we have both the name same we can just pass pass it like this so fname email okay now i will just handle it convert it in json and now just get the data so my fetch part is also done let's save this go to your project refresh it like fill all the details enter password and click on sign up and you can see here we are getting error and it is like from okay it is like swing course so you have to install course also of course so you have to just go here stop your server and don't forget to start your server i have i haven't shown that in this video but yes i hope you already know this so just install course npm install we have to install this because we have to communicate through the cross domain that's why now start our server again you can see here we have started our server just go to your project [Music] and here we have to use course just write const okay and we will just use it save it try to start the restart the server okay again refresh fill the form sign up and you can see here we are getting status as okay this means that our data has been recorded let's just check in our mongodb i had already opened my mongodb and i will just go here just refresh it and you can see here that our data has been recorded so the first part is done not fully but it is done let me show you what are the things remaining here so let's go here to your node.js project now we are like creating a new user but we have to make sure that one user with the same email id does not exist so go to your schema here just give one more field type is string and unique will be true so now all the email id all the new user email id should be unique so this this is done yes this is done now here also we will have to handle that so i will just try const old user what this will do this will just do user dot find one and find one with the email like if this user exists or not so if old user if this is true it will just return response dot send okay now this is this part is done also you can see here that we are like taking password so we should have to encrypt this so for that i am going to use decrypt.js go to your folder directory and install bcrypt.js so i will install that restart your server get back to the code let's import decrypt yes now what we have to do like we are receiving password so we have to encrypt it so you can write it like this you can just create a variable name encrypted password okay in this i will just write await hash it is the method of the decrypt and i will just pass your password and also you can pass any length i will pass 10 just save it and now you can see here that we will create we are creating user detail with password but we have to store it here encrypted password just pass that okay done now save here restart your server i think it has already restarted go back to your code refresh it fill the details you can see here that i am giving the same email so it might give me error it have to give me error okay you can see here it is giving me error of user exist now you can see here okay here also i'm getting some error cannot set headers okay okay no issue uh this error occurs because when our api sent more than one response and you can see here that here if old user exists then our api have to send this response but this will also execute so like uh api will also send this or this so there are like two responses so it is not acceptable therefore you have to write here return so that if api have to return this then this function will not execute now just save it restart restart your server go here refresh it now i will pass this pass password same email i am giving same email i'm getting user exist and i should not get error okay yeah i'm not getting error now i will just change the email you can see just some click on sign up okay it is giving me user exist okay so i am getting the user exist because i haven't added here await like uh it doesn't get time to execute this and it is returning true so i just write here await save this go here refresh it and now i will just like debug arena gmail.com pass password and here i will just change you can see here and when i click on submit you can see here that status okay user registered and now we will have a look at our database refresh it and you can see here that our response has been submitted also our password is now encrypted you can see that our password is encrypted now our registration part is done i will cover login part in the next video i hope you are understanding everything and if you are facing some issues or errors then you can write it in comment box i will also give link to the github page where you will find this code that's it for this video and if you found this video helpful then please like share and subscribe thank you

Channel: The Debug Arena

Views: 90,276

Keywords: how to do login and register authentication in react node js, login system in react, login system in node, mern stack, login in mongo, Mern stack, How to do login in react, How to register in react, Sign in in react, sign up in react, sign in sign up in react, sign in sign up in node, How to make sign in page, how to make sign up page, User authentication system, React login, node login, mongo login, login and register in react, login in react, register in react

Id: adMD46G5BXU

Length: 18min 0sec (1080 seconds)

Published: Mon Jul 11 2022