Login and Signup tutorial in React JS with node ,express and mongoDB in 2023 | MERN stack tutorial

hey everyone and welcome to another video in this video I will show you how you can create a login sign up form into the act.js okay so we will see each and every step required to do this and I will explain in very easy form okay so let's start with the video and first of all if you can see here uh I have an app.js and I've already write some routing code okay uh which is react router so that we can focus on our backend part mode okay so there is nothing here I have just defined router and give some routes here okay so so we have three components okay in this component file we have three components home.js login.js and signup.js so these three will be our like pages okay and apart from that I have also this app.js and mongo.js okay uh these two are for our backends okay so we will see them later now after this app.js uh we have this login.js okay so for that I will first write H1 log in here okay and I will create a form which is the action of which will be post and I will write an input tag all right input tag and in here I will make an on change function okay which takes an callback function as a function oops I don't want this uh okay which takes an error function and inside this what I will do I will write set email okay and this type of this input will be email okay so set email I will let e Dot Target Dot value okay and I will also write here placeholder I will write email and I will copy this down and I will do the oops I will do the same thing for password I will say here set password here okay so I will also write here password in the placeholder and after that I will make another input okay which is the type of submit okay of which the type will be submit and [Music] after this form here I will write a break from in a p form in which I will write or uh this is for if you are not logged in okay if you are not sign in I will redirect you to the what to this sign up page okay so this 2 and I will write slash sign up so this link I have already defined it here okay so you have to install this react and one more thing I remember let me just show you what are the dependencies you have to install so I am opening my package.json and you can see these all are the dependencies you have to install so the first one is axios which help us to connect our front end to the back end then the course which works with axios then Express Mongoose node mon oops okay then node mod and then react router Dom so these are some dependencies you have to install so make sure you have already installed it before writing the codes okay now let's continue okay so in our this uh I will write here sign up page okay you can write anything and make sure to give this link correctly okay and let's do format document okay and so yeah I think that stimul part of this login form is completed now let's make some functions here first of all I will write const and I will use Set uh use State okay I will write set email okay is equal to U State and I will give it NT and I will do the same for set password Here okay yeah just like that and then I will make a function which will be an async function okay and async function and I will write submit here okay and I will give it an parameter then I will write e Dot prevent default okay so to make sure we don't get any small others and I will come here down here uh in this submit button and I will write on click whenever you will click the button it will just run that submit function just like that okay and we are not done yet I will also write try and catch blocks okay in order to make our function here and I will write here with the help of a weight await um x0os okay so we are using it as yours I have already defined it here okay import x0os for Max use okay so a bit axios dot post and I will write that URL okay so you have to also write that uh like exact URL in which you are currently uh like filling the details okay so this is the login page okay so the URL um I have given the port number 8000 and the URL will be just slash okay so I am giving it here just a simple slash okay and here you have to write in curly braces and then you have to pass those email and password okay so these email and password will then uh get to that app.js okay so after um like doing this let's define this catch here here okay so I will write console log e all right that's it and I think uh we are done with the login.js okay so I will copy this whole and I will paste it here okay and we have to make some changes okay I will let her sign up and okay so I have changed that heading and I also have to change this okay link and I will give it here login page okay and this will be same here okay and in this uh this post I will now write sign up okay because we are in the sign up page now all right and yeah that's it and now let's go to the home page so whenever you are logged in or sign up you will get to the home page first so now let's write some code for the home page okay so I will add in H1 tag which says hello and here I will write some code okay you will see later and I will write hello and here you I have I'm I will write the name okay the name of that user and I will write and welcome to the home okay that's it and yeah that's it and for this uh I will use use location okay so I will write const location okay is equal to me use is equal to use location all right and you can see here I have already defined that use location here so I can use it freely and I will also um let's not say okay so yeah so and in to get the name here I will write location Dot state dot ID okay so I will explain why I have written uh this here this code location dot state DOT ID okay we will see it later uh for now let's make that app.js okay so let get the data from front end to the back end okay and okay even before uh let's make our database okay so let's make our database here all right so I will write const [Applause] new schema here okay to make a schema and I will write const uh schema is equal to new Mongoose dot schema okay so you can get that here and inside this we will pass an object okay so the first one will be email which is the type will be string and required oops and required will be true and I will just copy this down here oops not this whole um just this part and I will do the same for password okay and write a comma here okay so we have defined email and password Here then I have to define a collection okay so I will just name it collection and I will write oops okay equal to Mongoose dot model okay so this model is a keyword used to define our collection and I will just simply write collection here and I will write new schema so make sure this word and this word should be equal okay and after the last line for this file will be module dot exports okay to get the collection okay so to get that collection in any file you will need to write this code here okay so we are done with the mongodb code now let's write some code in our app.js okay which is important so first of all I will write app dot get okay slash which is for our login okay the slash is our login page okay and I will write and a sink here I'm not a sync I will write course okay which I have already defined it here okay up here and I will write request dot response it will be an arrow function and that's it okay and here I will write app dot post here and now in this function in this post function we will get the data from the login page so make sure and let's see how it is done okay request dot response and I will write an arrow function here and then I will Define two variables in a object form first will be email and then password and this will be equal to request dot body okay so now what is happening here uh you can see in our login page okay so in our login page with the help of xzos I am passing two variables email and password okay which are these okay so email and password and in this app.js I am getting that exact email and password with the help of this request dot body okay so just uh give the data of email to this email name and the data of password to this password okay so I hope you understand and then I will write a try and catch block okay so I will write try and catch block and inside this try to login uh we first have to check if that particular email already exist okay so to do that uh I will make a constant uh which name is check you can Define you can name it anything okay and then I will write and like DB code to check if that email already exists okay so I will write await collection Dot find one so as you can see here head is find one and it will just search the entire database if there is an exact email so okay so I will write email is equal to email so it will search if that particular email already exists okay so now here I will write if check okay that's it what it will give if if email is if email already exists uh this check will be true and this if statement will run okay so inside this I will write response dot Json Okay so oh I will write here exist Okay so uh like let me explain you what is this Json exist okay so I am like given the condition if that email already exists I will run this piece of code which is which will uh you can see response which will just give back this response exist okay so we will now um see how you can grab this response here okay so we will also need to write some code here also okay we are not done with this login and signup page we have to write some more code here okay so we will see but for now let's just assume uh you are just giving back some confirmation code okay so now if that email exists I will just write just give back and response which is exist and in this else part okay if email is new and does not exist I will just say um not exist okay so I will say not exist and okay that's it and in this catch block uh I will just get uh like give back that LL okay if anything is here and let's just remove that console log and I will also write here some Json here okay which is not exist okay that's it okay all right so I think we are done with the login code now I will just copy this here and copy this down okay now um inside instead of this term you can just remove this here okay you don't have to write this get and now we will write the code for our sign up okay so make sure to write this sign up word here now the same thing okay I will just I'm like just writing the same thing const email password is equal to request dot body okay and to like in sign up form we are creating a new user okay we are creating a new user and saving that user information in our database so to do so I am making an object called Data in which email will be equal to email and password will be equal to password okay so what is it doing here I am making a new and uh like variable in an object email and this will be equal to this email okay and the password will be equal to this password from our body all right and now um I will write another or try and catch just like that okay and in this I will also check if there is email okay so if there is email I will write like it is already exist okay and if it does not exist and okay so it does not exist I will write a function to let's just write here okay so I will write a function to like store that data in the mongodb so I will write away dot collection okay so this line of code is will be used to insert that data object user in the mongodb so I will write insert many data so it will just insert that data in the mongodb okay so this will run if the user is new okay if the email is new okay then only this code will run otherwise it will return it exist Okay so yeah I think we are done with the app.js and one more thing here you have to also write listen okay and you have to give a port number so I am giving it 8 000 you can give it anything okay and it will I will make an arrow function and I will write Port connected okay just to make sure the port is running so I think we are done with this app.js code now the only thing left is to like confirm okay is to ah like get this data from here okay so now uh I will just get this exist and known exist from this back end to the front end here okay so how we will do this um let me just show you how you can do this okay so you have to come here in this xios dot post and you have to write dot then okay and write this and need to make an arrow function here and okay and write an if else statement here okay so now if this dot data okay so it will just grab that data here okay so what is this this dot data so this is dot data will be this okay this here so here the best DOT data will be exist here it will be not exist and here it will be exist and here it will be not exist okay so in this login form if this dot data is exist okay is equal to exist which means the email already the email is present okay in the database which is fine okay and then um you have to write let's say then um what you have to do oh you have two okay so first of all uh before writing that here let me just show you one more piece of line of code which is const and I will write history and I will use use Navigate Okay so this use navigate is used to navigate between different pages in react router okay so I will write use navigate here okay and I have already defined use navigate here okay so okay and I will now use this history okay here and I will add history and I will write slash home that's it and then okay on this line of code will just make sure if the email exists then this line of code will redirect us to the home page okay and nothing else and uh let me just show you what I mean by this location dot state DOT ID okay so let me just show you uh here we will like pass the email okay so I will write State then another object which is ID and then it will be email okay that's it and you can see this home page we are getting location dot state DOT ID so you can see uh this state DOT ID will be equal to email so instead of this name we will be using the email okay so I hope you understand and I will do this same I will just copy this and I will write else here and ah not else uh let's say else if okay and I will write not exist okay so if email does not exist what I will do I will not redirect it the home page I will uh just create an alert and I will say user is not logged in okay user is not logged in okay um no not this user have not signed in okay have not sign up okay so this means if the user does not exist in our database this means that user have not signed up okay so I am like passing this alert here okay and then after that then I will write catch okay in which it takes an as a function and then here also I will write an alert which says wrong details okay and then I will just console log that error okay that's it uh now we are done with the login.js and I will just copy this thing and I will do the same with our sign up form okay so in this sign up form if this dot data is equal to exist which means the user has already signed in and they are like trying to sign in again so for that I will just create an alert here okay so I will just um writing alert here and I will say user already exists okay and if that user does not exist then I will redirect it to the home page okay so as you can see here home page okay and that's it guys we are done with our login sign up form now let's check it okay so to run this uh open your terminal and click on this two rectangles okay you have to do this because you are running back end and front end both okay so in this right side I will then our backend part okay so I will write node mod app dot JS and let's see as you can see here it is successfully connected Port connected and mongodb connected and on the left side I will start our react tab okay so now let's see it is starting our react tab okay and if I'll just open my Compass as you can see here we have a database react login and we have a collection called Collections and it has zero data okay and okay so um okay so we are getting an error in sign up Js um oh okay so I am not I have not copied this line of code okay so I have to also copy this here okay so I have to also write history here okay all right guys so as you can see here we are getting a login page and also you can see a sign up page so if I'll just click it here it take me to sign up and login okay so now first let's sign up here and I will just make an random email okay um let's say new DOT mail.com okay I'm new at the greatmail.com and the password will be one two three and if I just hit submit um okay it is just showing user already exist um let me just see what is happening okay so the email is now here okay so we have get the email here okay um let's just try one more time if I just write second at the rate mail.com and the password will be one two three and hit submit okay so let me see what is the problem how it is showing email already exist all right guys so I finally found the mistake so what is happening here uh in this if and else if statement uh I have written here a single equal to but we have to write double equal to here okay so that is the whole mistake here and I have to do the same for this sign up page here and yes that's it and now I hope it will work so let's reload the again and let's write in email I will write random threatmail.com and let's say password will be one two three and if I just hit submit and yes guys it is now working fine and it is saying hello random email.com and welcome to the home and if you will look at our mongodb Compass as you can see here it is now here also now let's test this login form here so I will go back to the login here and now I will write login at the date mail.com 123 and it should take me to the home page so yes and let's see if no more entries is there so as you can see here it is working great now let's see uh if we just write an different emails I will just write anything in the password and if you just submit as you can see here users have not signed up so yes it is working great and yes guys that's how you can create a login slash sign up form in react.js I hope you have understand how to do that and that's it for this video guys I will see you in the next one [Music] foreign

Channel: Techy Web Dev

Views: 109,094

Keywords: mern stack, react js, node js, express js, mongo db, login, signup, form, login and signup form in react, axiox, 2023

Id: S9eCBX-Re8A

Length: 29min 51sec (1791 seconds)

Published: Sun Dec 25 2022