Login and Signup tutorial with nodejs, express & mongodb

hey everyone in this video i will show you how you can make a login signup form with the help of node express and mongodb okay so let's get started so first of all you need to install three applications or three extensions for the first one is express then we have to install hbs which is a engine for express and then we will install mongoose okay so let me first install oops so let me just clear this okay now i will write npm i express it will install express js in my folder okay as you can see here i have package json and package log json then i will install hbs okay you can also use pug js or ejs for this one but in this video i am using hbs then at last we will install mongoose which will help us to connect mongodb to node.js alright all right we are done with all the installations and if you take a look at the package.json here you can see all three express hbs and mongoose okay you can see the versions also all right so let's create some files first of all i will create src in which i will create index.js and one more file which is mongodb all right then i will create another folder i'm not inside this but oops no not inside this one um outside src and it will be public okay inside this our css files will lie okay so let's say home dot css we will have three uh html files okay uh the first one is home login and sign up so let's create login.css and sign up dot css all right and one more last folder we want which will be templates okay in which our hbs file will lie okay templates right make sure the spelling is correct templates and inside this i will write login dot hbs okay hbs it stands for handlebar jsp then signup.hbs and home dot hps okay so we are done with the file names okay all the file names we are done with them let's come here the index one okay um first of all we'll just clear all these css and hbs we will focus on these js files okay so come here in the index dot js and first of all we will write const express equal to require express okay so it will require the express dot js okay and then you have to write const app is equal to express it will start the express dot js alright one more thing you have to write const path oops const path equal to require path okay you will see what i have written here why i have written path here okay all right so now let's use the app here the constant app okay so first of all we need to define a port number so for that we have to write app dot listen and inside this we have to give a port number so we will give 3 000 and then we have to write a function here i will write an error function and we will write console log to just confirm so i will say port connected okay it will just confirm that the port has been connected okay so if we'll just save this and and yes one more thing for we have to install one more thing which is npm i node one it is an extension which allows us to refresh the js file automatically if we will click the save button okay so now if i will just write nodemon src slash index.js it will run the this file and as you can see the port has been connected successfully it is giving me this port connected okay so it is working fine all right and now if you will just ctrl save as you can see it it is running automatically okay so now i don't have to write again and again in the terminal okay so let's now do the get one okay so let's app dot get the first fall the slash one which is the default one okay uh in here we have to write um sign up okay sign up no no no sign up login all right so login and then we have to write a argo function in which it will take two arguments which is request and it responds okay it is an arrow function make sure and then we will render the file which file the login file okay and this one is login dot hbs okay this one login dot hbs all right okay and i will do the same for sign up okay but here we have to write sign up okay sign up and instead of this login also we apply it sign up okay that's it now now um in order to work this vendor we have to also uh require hbs file okay so let's do const hbs equal to require hbs all right then then we have to write app dot use okay app dot use remember these commands okay express dot json okay these few lines you have to write okay you have to write to get the hbs files and get the mongodb successfully connected okay so app dot one more use and in this um i will say um let's wait for mongodb okay then we will write that okay first of all let's define the hbs one so app dot set okay set um in commas view engine hbs okay so we are defining that our view engine is hbs okay so if you have egs or pug just you will write egs or pug here okay instead of this hbs and one more line you have to write here app.set views um this line is for to change the name of the file okay instead of this all right so we will write template path okay so what is the template path we will define it here so let's say const template path is equal to the path which i have defined okay so path dot join underscore dir name then comma and then in semicolons in quotes we have to write we have to give the path of the template files okay um this is because by default the name of this file okay on this template file by default it will be views okay so we are saying that instead of this views we have to make this name templates okay so this is for that okay but if you don't want to include these lines in include this codes you can just rename it and you can write views instead of templates okay it will work fine but as i am not using views i am using the name templates i have to inform it that we are using template name okay all right so now let's come to the login and sign up hbs okay so lgbs as you can see it is just similar like html okay so i will just here uh do the shortcut for the boilerplate here okay in the login form and i will say here in h2 login okay and i will give a form which have a action of also login okay so make sure the the name of the action and the name of the file is same okay well you don't have to write the same name but it will be easier if you have the same okay and one more thing you have to write here called method okay and make sure the method will be post all right now instead uh inside this form we will write three input tags the first one will be for name okay so here name and this name okay this name is very important so make sure to write that okay and i will also write placeholder okay and then i will copy this down and i will say password okay and the name will be also password and that type also is password okay so yes and after that i will create a button okay oops and make sure to also do this okay type is equal to submit that's it okay make sure to include this type equal to submit input okay otherwise it will not work all right so i think this will be enough for our login dot hbs okay so now i will copy this whole and just paste it in sign up form and instead of this login okay uh mentioned of this login i will say sign up okay sign up and here also it will be sign up and method will be post and all the things will be same okay will remain same and after someone log in or sign up our website okay they will come to the home so let's create the home page also all right so let's do oops so let's do and let's just write home for now okay we will change it later but for now let's just do home okay so we are done with the hbs parts with the html files and also the index files but not fully with the index files so let's come to the mongodb file okay so let's create a mongodb database then collections and then we will connect it to our node.js okay so first of all come to the mongodb.js and you will write mongoose const mongoose is equal to required mongoose okay then you have to write mongoose dot connect okay this command is used to connect the node to your mongodb database all right and inside this connect you have to write this okay which is bb semicolon double slash and you have to write this okay you have to write this okay and it is important okay so localhost 1 27017 okay it is the ip address and then slash and after this you uh whatever you will write it will be the name of your database so i will say um let's say login tutorial okay um let's say login sign up tutorial so this will be the name of our database okay so make sure to spell it right okay and then we will come here it is not finished um we'll just write then and we have a i have a function here which says console.log which says um connected okay let's do mongodb connected okay and then if it is not connected if it fails to connect then i will say then i will create another function in which it will just print failed to connect okay all right so this will be the command to connect your mongodb to your node.js okay now we have created the database so let's create uh documents okay so for that we have to create a schema so let's do login schema is equal to okay it is a format of your documents okay mongoose dot schema and here you have to define what your document will look like okay so i have create a login form which in which i have a name and a password so the first is name okay and inside this the type of this name will be string okay and and i will say required is equal to two okay um so this way it should be filled okay and i will do the same thing for password all right for password and the type will be also the string and required will also be true okay so we have also defined the schema for the document now let's do the collection part let's define the collection okay so we'll say um let's let's just simply name it as a collection okay so we write new mongoose dot model okay so instead of collection you have to write model and inside this you have to give a name for the color for your collection okay so i will write collection one okay so this is the name of our collection and this is the name for the collection we are defining in vs code right now okay and one more thing we have to write after this name you have to write a comma and you have to give the name for the schema okay so i will write this login schema okay which schema it will follow okay it will follow this login schema all right and at last one last line you have to write you have to write module dot exports and then this one login schema i'm not logging schema sorry this collection okay the name of the collection okay so make sure you have written this line otherwise we will not be able to get this in the index.js okay so this is the whole code for dbgs okay we are done with this mongodb file now let's get back to our index file okay here we have to do the rest of the work all right so i will come under this app dot get and you have to write app dot post here okay okay so you have to write app dot post and inside this um inside this you have to write what will be the ip address okay so i will say slash which will be same as this login form all right um let me check again if i'm doing it right or not okay so uh this will be the same as your action okay um so if you can see here the action is slash login so i'll just copy this and paste it here okay so make sure uh this will be the same okay this has to be same then i will write the same request and response and it will be an error function and um this time it will been a sync await function okay because in order to work with mongodb we have to write a thing of it we have to work with async await okay so make sure to write async there now now what we have to do we are um first of all let's create a sign up form okay the user will sign up first okay so let's create sign up uh so what will happen here uh we will get the data okay so what will happen when a user enter their name here and password here and whenever they will click on submit a copy of their name and password will be stored in our database okay so we will do the same thing here so first of all i will declare a variable okay it will be an object of let's say name and in order to get this name how um whatever a user has written here in order to get that i will write here i will write here request dot body dot name here all right and same i will do the same for password here okay password all right so yes exactly like that now what i will do um i will do response dot vendor um not right now first of all i have defined the data as this one and now i have to this data to mongodb okay so in order to do that i will write let's say const we don't have to write const we can just simply write await okay so remember that in order to work with mongodb we have to work with async await functions okay and now we have to also require this function okay now let's collection is equal to require db okay mongodb here okay so in this way it will oops not here here so in this way and make sure you have to like this also okay so as you can see here oops in this way it will get this collection here okay which we have export okay all right so i will just copy this collection here and i will write await collection dot insert many okay it is a syntax for mongodb so make sure you learn that okay and after insert money you have to write in square brackets the name of the data okay that's it and now it will just create a data and fill it and fill this in your collection of the data okay mongodb all right and after this um after this you will just response dot vendor and the home will be rendered okay after the user details have been collected you will be directed to the home page okay in this way you will direct it to the home page all right so let's see if this works or not okay so as you can see here our port number is 3000 so let me just open the chrome browser and localhost 3000 and as you can see it is working you can see it is written login name and password so let me just say name john and password let's say one two three okay if i will click submit okay so we are getting an error which says cannot post login okay all right so let's see what is the error all right all right okay so we are we are giving the details in login form but we have written the post for sign up okay so one more thing i will do here i will write an a tag and inside this a tag what i will write i will give the path for the um the sign up form okay in this way you can either go to login page or you can go to sign up page also okay i will i'm right here on this sign up dot hbs and i will say um make a new account okay let's make a new account okay all right uh let's see now okay let's uh let's see now reload the page and as you can see here we are getting a link so if you just click this link all right so it is showing another um all right so let me just remove this dot from here and also this hbs file um now okay so now it's working okay so now if i'll just do the same john and one two three here and now click here all right so it is still not working so let's see what is the problem all right so now i have figured it out what was the error okay so in the starting i have told you that one more line is missing here and that is app.use you have to write this line in order to get this work okay app.use inside this you have to write express dot url encoded and curly braces then extended and you have to write this false okay so that's it this one line will help us to get the mongodb data okay so now if i will just reload the page and do the same thing let's say john and let's say one two three password and if i will now click submit and as you can see we are directed back to the home okay so it means we are successfully logged in in this website okay and now we will see if this data okay if our name and password if the the name john and the password one two three has been recorded in the database or not okay so for that you have to install a application which called db compass so make sure you have installed this okay so open this mongodb compass and click on this connect then here you can search your database so as you can see here login signup tutorial this is the database and you can see the there are two collections because i have just now renamed the collection which was first of all it was collection one but i have renamed it to login collection okay so don't be confused here the new collection is this login collection so i will click on this login collection and now here it is okay you can see the data has been stored in our mongodb okay the name john in the password one two three okay so let me just do one more time to check it if it is working or not so i will create um let's say ready and password let's say 777 okay i will click submit and oops okay so you can see here i have come to the home and let's see if there is not okay so i will just refresh it and as you can see one more document one more um data has been collected here okay ready and password is 77 so our data is working our sign up form is ready now let's do the same for logging okay so i will come here in the index and let me just copy this hole for sign up okay sorry for login so i will paste it here and in this i will say login then we don't need this okay we don't need this and now um what will happen i will say uh i have to get if the here okay the user will type their name and password so i will just get the name and i will search if the name and password match to the existing user then it will redirect it to the to the home okay so in order to do that i will create a variable called const check okay it will check if the user exists or not okay and i will write this hole in a try and catch block oops okay you copy then i will say i'm trying oops what is happening okay so we have to also write catch okay and inside this try i will say cons check is equal to await then collection dot find one again this is the syntax for mongodb okay and and inside this i will say name is equal to request dot body dot name okay so it will just get the name which is in the database okay it will grab the name from the user and it will search for it in the database whether it is present or not okay so then i will say if it is present okay for that i will say if check dot name okay if check dot name is present um for that what i will do i will create if check dot i'm sorry not name if check dot password is also same request dot body dot password okay if it is same the password is also same i will just do response dot render home all right so i'll just under home and i will just delete this line from there alright and in else i will say oops in else i will say response dot send i will write wrong password okay and in this cache block in this cache block if the name is also incorrect and the password is also incorrect then i will send wrong details okay wrong details here all right now i think we are done with the login signup form completely okay so let's check all right so let's check it and oops so let's save it again and now i will just refresh the page and now if you remember we have two uh two users one is john and when one is ready so let's just uh test john okay so the name is john and password is one two three okay john and password is one two three so i will hit submit it must take me to the home page and yes as you can see here it is working great okay so our login sign up form is ready okay it is completely ready okay and the only thing left is to make this page beautiful to add some css okay so as you can see here i have make some files for css but you can do that on your own okay in this video the main motive is for logging and signup form not css okay so you can do that on your own to add some css and design to make this beautiful okay so as you can see here the this is working fine so let me just do again so let me just write another um user so let me just test it submit and as you can see here it is working so if we just refresh the compiles and as you can see one more entry is there okay so it is working great all right so i hope you like this video and now i hope you are ready to make your own login and sign up form and this is the easiest way to make a login or sign up form okay and that's it for this video guys i will see you in the next one [Music] you

Channel: Techy Web Dev

Views: 5,099

Keywords: nodejs, login nodejs tutorial, express js, node js express mongodb tutorial, express, nodejs login, login and signup with restful api, login signup using express and jwt hindi, login with node, node.js, express login, nodejs signup, express tutorial node js, expressjs, login nodejs, mongodb

Id: V8dYGNfHjfk

Length: 36min 32sec (2192 seconds)

Published: Tue Sep 20 2022