Login and SignUp System with User Authentication Using Node Js, Express Js & MongoDB

[Music] hi everyone welcome back to another video of honeyweb designer in this video we will learn how to create a login system using nodejs and mongodb database first check demo of the project thank you [Music] foreign [Music] [Music] [Music] [Music] thank you [Music] [Music] I have opened my code editor next open Terminal first install Express module foreign then install Mongoose module next install bcryp module [Music] next install ejs module in package.json file are all module installed successfully next create an folder with name SRC in this folder create a file with name index.js [Music] create one more file in this folder with name config.js next open your index.js file here first import Express module next import built-in path module [Music] next import BCR ypt module [Music] next create an express application next choose a port where you want to run your application I choose 5000. [Music] next set ejs as a view engine [Music] next create a new folder which name views [Music] in this folder create free file first home.ejs [Music] second login.ejs [Music] third sign up.ejs foreign [Music] next create another folder which name public in this folder create one CSS file which name style.css next use app get method in this first parameter is a root and second is callback function in callback function we have two parameter request and response you can give any name to it next I use res dot render method and in this I render login page [Music] I can use another app get method and in this I render sign up page and enroute I Define sign up page [Music] next open login.ejs file in this first I write basic HTML code next I change the title of this page next I write one div tag and give class name form container in this div tag First I write h2 tag next I use form tag [Music] in action I write login next I use method attribute and here I use post method inform tag in write one div tag and give class name form group [Music] in this div first I use label tag next I use input field [Music] foreign [Music] next I write one more div tag and give the same class name form group in this div first I use label tag [Music] next I use input field and type password [Music] next I create one button and give type attribute to submit [Music] next I use class attribute and give name submit BTN okay next I use Pete tagon in this I write some text then I use anchor tag in it in Anchor tag I link sign up page [Music] next open Terminal and run index.js file [Music] here I write nodemon SRC index.js because our index file and SRC folder all right in terminal you can see our server running on Port 5000. next open your browser and run application on it here you can see I get a form successfully now I style this form open style.css file first I use Universal selector and apply some style property next I style Body [Music] next I style h2 tag [Music] [Music] save CSS file and open browser here you can see I cannot get any change because first we need to link style.css file open index.js file here I add a static folder path [Music] next open login page here I link a style.css file using link tag now open your browser and reload it you can see our form move to the center of the page next open CSS file and style remaining form next I style div which have form container class [Music] next I style form group div [Music] thank you next I style label tag [Music] foreign next I style input field next open your browser and reload it next open CSS file and change the font size of input field [Music] next browser and reload it next I style button tag [Music] thank you next I style P tag [Music] now open your browser and reload it you can see our login page successfully created now I click on sign up page and this page is empty now open your code editor copy all login file code and paste in sign up file [Music] thank you first change h2 tag text to sign up then change title next change the action [Music] then remove P tag next change button text now save all file next open your browser and reload it then click on sign up button and you can see I created sign up page successfully Now log in and sign up page successfully created next open config.js file and create a database connection here first I import Mongoose module next I create a connection with database [Music] here I use login Tut database which have one collection name users so I pass this path because I'm using localhost server [Music] so here I write mongob forward slash forward slash localhost 27017 slash thank you after the slash we use database name [Music] here I use login Tut [Music] next I check our connection build or not for this I use then and catch method [Music] next we create a schema [Music] we store two thing in database first name and second password [Music] [Music] next I create a model [Music] in model we have two parameter first is collection name and second we pass our schema [Music] next I export this model [Music] next open index.js file and here import model from config.js file in terminal you can see our database connection successfully now I write a functionality for sign up page here I use that post method and in this we Define a root as a first perimeter and second we use callback function in callback function we have two parameter request and response you can give any name to it when we are playing with mongodb database first I need to make a function async next I create an object and in this I get data from body which we can send through sign up form this username same like sign up username input name attribute [Music] next I write a code for send this data into database here I use our insert menu method [Music] next I console.log method to show data in terminal to check which kind of data we can send first we need to convert data into Json format for this I use app use method and in this I use express Json math next I use express Earl encoded method [Music] now our code is done open your browser and reload it now I enter a name and password in input field next click on sign up button thank you in terminal you can see our record successfully added next open database and refresh it I see a record twice time because I click two time on sign up button but here you can see I have two user with same name now I apply restriction on it [Music] here I check if user already exist next I find a user from database using find one method and store an exist user variable next I use if condition and said if you're already exist then try another name next open your browser and reload it now I enter a same name of user and want to save in database click on sign up button and you can see I get message user already exist next open database and refresh it in database you can see I get third record so check our code again because logical error in our code here you can see I cannot use else part of if condition due to this reason after if condition our code run so I write essel part and in this I write data insertion code now if user exists If part execute otherwise are else part execute now again I write same username and click on sign up button here you can see I get message you already exist now open database and refresh it now you can see at this time user cannot be added in our database I have only three record which I sent before now I want to Hash the password because this password easily hack for hashing password I use bcrypt method first I set salt rounds next I convert the password into hash form and Save in hash password variable okay in first parameter of hash method I write data.password and second we pass Salt rounds next I replace the hash password with original password next open your browser and reload it now again I want to register a user click on sign up button next open your database and refresh it you can see our password successfully converted into hash format next I write a code for user login here I use app post method in first parameter we Define root and in second we use callback function in callback function we have two parameter request and response you can give any name to it foreign next we make a function async [Music] next I use try and catch method [Music] next I check user if user are not registered in our database show a message user cannot find [Music] next I compare a hash password from database we store comparing password in as password match variable [Music] next I use if else condition if password match render to home page otherwise display a message password are not correct please foreign catch we write res dot send method and in this I write a message wrong detail next openhome.ejs file in this file First I write basic HTML code then I use H1 tag and in this tag I write well again to home page and then I apply CSS property on this tag text align Center next save all changes and open your browser reload it click on sign up button and register one more user [Music] here you can see our data successfully added in database open database and refresh it and in database you can see our record successfully added now I try to log in this user on our application here I write same name and same password and click on login button [Music] you can see our user login successfully next I enter a wrong name of user and then try to log in [Music] you can see I get a message user cannot find so our login system worked properly if this video is helpful for you subscribe to my channel like this video and share it with friends thank you for watching [Music] thank you [Music]

Channel: Honey web designer

Views: 49,319

Keywords: Honey web designer, login node js tutorial, express js, node js, login with node js, login with node js mongodb, login form, signup and login system in node js, login signup using node.js, express login, mongodb, mongodb login, login and signup system, how to create login and sign up system using node js

Id: O5kh3sTVSvA

Length: 24min 33sec (1473 seconds)

Published: Sat Aug 05 2023