Login and Registration using MERN Stack | Mongo, Express, React and Node Authentication

hello everyone this video is about login and registration Forum using Marine stack okay mongodb Express reactors in node.js this is the complete login and registration form so let's first of all create a new record for example Salman gmail.com and let's sorry that is the email let's cut that and paste it here and let's write a Selma name and here's the password let's Press Register CV registered successfully now let's write a login Salman .com and let's write the password let's face login see we came to the home component but if we write to the wrong credentials okay what we will get in the result for example .gmail.com okay and right rank password C no record existed okay so if I write the correct email dot com in the wrong password then the password is incorrect so it is all about that we will create okay also the routing so we will create this registration login form using mirror stack so let's get started before starting if you are new to my YouTube channel don't forget to like this video and also subscribe our YouTube channel so let's get started so for this login and registration so this is an empty an empty folder which I have opened in Visual Studio code so let's create first of all the front end app our react app so let's come here to the login register let's write npam in it wait okay bit is used to create react app yeah wait it will we will assign a name now so let's assign name to our project that is like client let's select the framework we will select the react then we'll select the JavaScript and after that let's move to the CD client and let's write npm install so it will install the repeat dependencies here that has installed so now let's install those packages that we need npm install first of all bootstrap which is for Designing access for HTTP request and response in react Auto down which is used for routing so now we will install these packages so there is an error I think yeah the spelling mistake install okay press enter yeah that is installed so now let's write npm run due to run our react app server so it will run the server so let's move to this URL see this is our react app okay which has created now let's create our um server app okay because again node.js app okay for that let's move to back create a new terminal and now let's write npm init hyphen y so it will create oh sorry so we should create first of all a folder let's delete it let's create a folder by name of server and now let's move CD server and let's right now NVM init hyphen y so it will initialize it and it will create a package.json file inside this now let's install Express npm install Express which is the framework of node.js mongoose which will be used for the to connect with the database and cards which are used to Max our backend side in the front end and also not mon which is used to refresh our server whenever we make some changes in that so let's press enter we will install these now yeah those as installed so now let's create a new file inside this that would be like because index .js here we will write our API codes okay and so one thing else here let's just write not more start nerdman index.js so it will start our file whenever we make some changes automatically say let's write npm start so let's restart the server so it was all about the configuration and creating of our server and react app let's close it so now let's move back to our client side so for this so first of all I will create sign up Forum okay then I will create a in account first I will create the design of that okay just simply design of that so now let's move here and just come here let's delete all this unnecessary thing steal it this one and also delete this one and come here remove this link and also just come here remove all these things and remove this code state of this so now let's import the bootstrap first of all to use that for designing yeah we have imported it so now let's use it and I will just create a sign up Forum I will pause the video because it is simple HTML code I will show you later but for that I will create a new file here for the signup form so let's create sign up dot GSX I will create that inside this okay so I just wrote this sign up code okay let's check it okay this sign up file component and this is just the name input field email input field and also the password input field okay these are the fields and I imported the sign up inside app.j6 let's check it okay this is the register Forum that you guys created simply okay we used a bootstrap for designing so now let's create the routing okay so use react autorum we never replace the login we should move to the login okay we will use a routing for that so let's come here to the app.j6 I will just right now here instead of sign up and let's write let's import first of all the activator Downs import browser router routes and also route from react totodom after importing them so let's use them now let's use routes use route and inside a route route we have on a Path property which is the route that we will specify this is for register okay register and the element would be the sign up okay is equal to size up and now so let's specify one for the login shift card and let's specify it login and now let's create a new anywhere now I will create one another component for the login so just come here X okay inside that list let's put let's save it and now let's import it here like okay that has imported so let's check it now uh we paste within here so let's check it let's move to the register okay we change the route register your route path is equal to register to move to the sign up for yeah the error is here we should use browser router spilling mistake browser yeah browser router that is the key now so let's check it now let's replace the page and we paste again within a browser router has already been declared oh that is already declared so let's remove one of them save it see it we again let's Press login so we should yeah sorry we just come here to the sign up and this button should not be in inside the form close the form Ctrl X under this register now appreciate and let's Press login oh sorry we didn't use length for this okay so I will use Link and import it from react Auto down and let's specify path 2 is equal to we should move to login let's save it yeah everything is okay just come here it's login so we came to the login page okay let's come back to the register so now whenever we press records data in this input fields we should store that in some somewhere okay in the variables so let's come here and to do that we will create three variables three state name is equal to use and this would be for email sit here and also password Institute password okay so now we know what we are writing something in this input field so we will call unchange event and let's create an arrow method and we will call set name and we will call it a Target dot value so it will assign the value that we are writing in input field to that variable to the name okay let's copy this for the email also just instead of city name I will write set email and also here instead of asset name I will call sit email password sorry password okay yeah we did and we store the video inside this okay so now let's um whenever we press this register button okay registration so we should call a function and we should send the data to the server side so let's come here to The Forum and right here on submit call handle submit method so let's create this one const handle submit I get an event and let's prevent default submission and under that we will use now axis to post the data okay so let's import the axis import access from axis and let's use it now access dot post and here I will assign the URL right now we didn't set our server side I will leave it empty so just come here we will pass the data now name email and password this means like this okay but both are the same so we can write just one that is again so after passing the data we will get a result we will get a result so let's display the result and the console .log result if there was any error and so that log here let's save it okay so now let's move to our server side and the mongodb database to set up first of all the database for the database I have installed locally mongodb server Edition Community server Edition so you can set up with the atlas mongodb also okay just that is a simple connection so I have set up that locally okay so let's connect with that yeah I have connected with that so I will create a new database let's come here to the database and create database and let's name it for example register or I can name it employee in the collection name let's register okay register I mean let me register this is the table name and this is the database name yeah we have created that so to create connection with this database okay so let's copy first of all listing string before copying this let's come here to write the boiled Fleet code of our server side app okay let's come here to the server side app index.js and here I will first import the express const Express is equal to require Express in Wisconsin is equal to require s enhanced cards is equal to require cars let's create enough const up is equal to let's call Express method and after that let's use up dot use express.json this will just transfer the data that we are passing from our front end to backend that will transfer to the Json format and after to use let's use cards after that let's create connection with the mongodb okay to create the connection so let's write mongos just Mongoose dot connect okay and just come here let's here I will write the connection string okay just come here to the mongodb compass and copy the connection string after that just paste that here sometimes the localhost not work so just write the local IP address instead of that that 0.0.1 and also write the database name the database name is the uh that we has created that was Employee yeah we have created the connection so now let's run our server so let's write after listen it's assign a put number to that 3001 and create a callback function that console.log server is running so now let's come here to the terminal and just check okay so what is running it is okay so we did it okay we created connection with that so now whenever we pass the data to this from our front end so in the front end here I will write to um in the http localhost and then the port number port number is three double zero one and after that the route the route would be like register okay so we will move to this route and to be to insert the data to the database so let's create now this route okay register just come here up dot post here I will write register this is the route and here we will create a function in that would get request and response request is the data which are coming from front end and the responses we are sending back to the front end so yeah here yeah that is post limited method is first so first of all let's pitch the data from request start to body so let's leave it okay we should we will not fix the data um I will directly insert it to the database so to insert it to the database first we will create a model okay for this database okay the database that I would like to create uh I will create a um for the table sorry for the table for that table I will create a model so just come here to the server app inside the server app I will create a folder that would be models inside it I will create an employee employee model okay dot Js so now let's import first of all cast mongoose is equal to require mongoose and after that let's create the schema for our table the schema would be a let's write const employee schema is equal to new schema and here I will assign the fields okay which Fields our table how so let's the first one is the name that is string type it as we can either add other properties like required in length in other we can add other properties also but I will just assign the type okay the type is string the second one is the email which is string type in password which is string type okay so now let's create model const imply RL is equal to Mongoose dot model we will assign the name that we would like to have in the database okay I will assign the name like the name would be like implies and the second one is the employee schema that we have created right now okay this one so it will create implies a table and this is the schema for that so now let's export it module.export is equal to employee model after exporting it let's import it inside our server app const ply model is equal to require model slash employee so now let's use it to insert a recur to the database let's write employee model dot create here I will insert the records the records are requested value okay we have the record that we that the data that are coming from front end that is inside requested body okay so now let's write that then we will get the UV employees so let's return them back to the front end later on a message that depend on you okay result.json I will return it the implies dot cage if there was any error so result.json erector on the error so we have to in work and we we can insert and every car to the database so let's stick it okay we will learn the server the server is running okay so now let's move to our code here the front end let's write user gmail.com let's set a password for that let's press the register so let's check it the data and let's move to the sorry to the console what happened uh what we got from yeah we got this object okay the object has the data okay it means that we have a insert record successfully okay let's come here to the database and let's depreciate okay now it has created a new database so let's refresh it okay yeah a new registers uh implies table has created okay this is the data inside that okay the name that we have entered inserted here and let's come here to the schema to the model so this implies it has created this table for us and inserted the record to that okay this is implies stable and this is the data that we have inserted so it means our registration Forum altern successfully okay so now let's create a sign up for a minimum register so we should move directly to the login page so for that let's come here to the page and just come here inside this and let's write here we will use a react router term okay so let's import use navigate from react auto Dom so let's create an instance of that navigate is equal to use navigate and now let's use it okay navigate we will move back to the login page let's save it and let's come here and let's create a new record that would be like wreath Reaper at gmail .com and password space register so we came back to the login page okay so now let's create the design for the login page so I will write the HTML code for it for it yeah I have copied the code from sign up page just the email and also the password okay I copied the same code and this is the same method that I have used okay the same two variable I have created email and password then whenever we are writing data we will store them in the email and in the password so whenever you press this like in button so we are calling this handle submit function this one okay so here we will call now the login method okay so let's write login route and we will pass immediate faster to that route and after that um whenever we successfully login so we should move to the Home Route okay so right now we don't have this route login so let's first of all create it then we will create the home let's come here and we will create the home the login one that post here let's create the login and let's write request and response so here first of all let's get the record okay we will just first of all let's write const get the name email in password is equal to request start body we will distract them from the request start body so now let's use again the model employee model OKAY employee model dot find one okay you will just use this method and here I will just write the email it will find a record based on the email okay if gear was exists the record was existed so let's write user we will get a user if user was existed so then let's write the code for the login if user was existed then I will write hippo user.password was equal to equal to with the password that I have okay with this password so then let's uh result the Json return success okay else result.json already sorry the password is incorrect okay first of all you will check if the user was existed it means the user was there and this email then we will check the password the password was okay with the email and the password in the success if that was not then the password is incorrect if the user was not existed so then let's return another message no record existed okay it means the email is not registered so now let's move back to our login page and here we will call this log in and we will email and password after the result we will get a result so whenever we get the result so let's write the code for that now first we will cancel that then we will check if result dot data was equal to equal to with success so then we will move to this navigate to home page okay let's save it and let's try it okay just come here to the login page so let's change it to the login let's move to the console also for we have used it from react yeah everything is imported so let's depreciate yeah it is okay so now let's write library card gmail.com and let's write the password and let's press the login button see we came back to the home page it means that we are a success okay so first I will create a new home home component let's come here home.jsx inside that I will write home component export it and let's use it inside route slash home in the element is equal to with that is okay okay so now let's move back here see we came to the home component so if I move back to the login page okay and I enter around um incorrect record for example I read gmail.com but the password is incorrect space like in C the password is incorrect but if I enter around email free sliding no record existed so it was all about let's say correct in the correct three four five see we came back to the home component so it was all about uh sign up registration for in login form using modern stack okay I hope this video was very helpful for you and short video for you if you like this video and you learned something so don't forget to subscribe our YouTube channel and also like this video and comment down and share with friends finally thanks for watching

Channel: Code With Yousaf

Views: 97,940

Keywords: how to do login and register authentication in react node js, mern stack, react js login and registration example, react, react login and registration authentication, login and register in react, login authentication using nodejs and mysql, react user login and authentication with axios, react registation and login in hindi, login and registration form in react, mern stack project, mern stack login and registration, react js login and registration form

Id: ZVyIIyZJutM

Length: 29min 21sec (1761 seconds)

Published: Tue Jun 06 2023