Node.Js Login and Registration with Database | Login, Logout and User Authentication | 1/2 |

hello ladies and gentlemen my name is destiny and welcome back to my channel so in today's video we're going to go ahead and start building a fully functional authentication system using node.js so in this one we're going to be building a login logout and register function so users can come over to our website create an account log into their home page we're going to display that data dynamically for example we're going to get the name of a user that's create an account and we're going to say something like hello dear hello tom or hello sam or whatever so that's what we're going to be building in this video so if you want to see more videos like this do make sure to drop a like and consider subscribing as it really means well to me so without wasting any more time let's go ahead and get started so before we go ahead and get started i want to show you guys what the end products of what will be building is going to look like and i'm going to demo it for you guys right now so when you come over to localhost 3000 as you can see we are listening for the port on 3000 and login you can see that we have this login page over here so this is actually working quite well let's say we want to hop over to the home page as you can see it will allow us to do that which will bring us back to the login page so it's saying hey you have to log in before you access the home page okay now firstly let's create an account we don't have an account yet so i'm going to create an account myself my name is destiny franks my email is this fix gmail.com and i'm gonna pull a very strong password over here and that's my email so i'm gonna go ahead and hit sign up now hit sign up and as you can see it brings us the login page where we can now log in with the credentials that we just created how about we just go ahead and hit sign in without putting anything now you can see it displays an error and it says missing credentials hey you've got to put something in here now how about putting the email and we'll put him some gibberish password that's not what we used now what he does is it's gonna say password incorrect okay how about we come over here and put in an email and add like let's say a typo to it and put in a password that doesn't make any sense i hit sign in as you can see it says no user found with that email so now we are getting three error messages when you don't put in anything it's going to tell you hey you've got to put in something in there when you're using the right password it's going to tell you here your password is incorrect and likewise for your email so now let's go ahead and meet all the requirements that this needs and we're going to log in so i'm going to put in my real password and i'm going to hit sign in so right now as you can see i hit sign in and what do you notice it says hello destiny franks so let's say your name is tim or your name is tom and you're the one signing here he's gonna say hello tom it's gonna say hello karen and all that kind of stuff you get a gist so this is what we've got over here now it's very very simple i just want to show you guys how it's getting the the name dynamically from the database and finally we can go ahead and log out so when you log out it comes back to the login page and if you try accessing the back page again as you can see it keeps bringing you back here okay so that's pretty much what we'll be building in this video hopefully you guys are going to enjoy it and lend a whole lot of new sense here working with sessions working with flash messages working with servers and a whole lot of things but i wasted none of my time let's just go ahead and get started already now the first thing we need to do is go ahead and open up a tummy now or you can open up comment prompts or or get cmd whatever so what we're going to be doing now is go ahead and install some of the packages that i'll be using so i told you guys to be using node.js we'll be using express to be using some things like decrypts for hashing of passwords so you'll be using things like express flash for displaying the flash messages so without sending my timeline just go ahead and start it already now we're on the desktop the next thing we want to do is just go ahead and create um we're going to create a new folder over here on this desktop and that's what we're going to be using to you know work on our our project so you could just name it whatever you want i'm going to say mkdir that means make directory and we can name this whatever let's say user art yeah user odds and now we create uh we created a folder named user or now we can go into the user folder by using the cd so cd means change directory so now we are in the user hotspot now what we can do is go ahead and open up this user in our visual studio code and in order to do that you want to press code space then dots and hits enter on your keyboard so this is going to go ahead and open up um it's going to open up uh the user also created over here in your visual studio code and as you can see this is it over here now i'm going to open this up so we're going to see some other things that we're doing now in this arts place in this course directory what you want to simply do is go ahead and initialize um node.js so we're going to say mpm in it just like this and it's going to bring up a lot of um you know like fields that we're going to choose and all that and we're just going to go ahead and like stick with the default ones for all that so over here you can see it's actually a package name we're just going to go with just hit enter on your keyboard and make sure this one over here the server point entry point is going to be server.js but for now let's just stick with not putting anything in here so i want to show you guys how everything work without um you know configuring anything from over here so we're going to hit enter keywords enter auto nothing then to say is that okay yes it's okay i'm going to hit enter and as you can see over here now it creates a package.json as you can see it's over here now the next thing we want to do in here is go ahead and install um you know some of the the libraries that we're going to be using so i told you guys that we're going to be using express and we're going to be using um we're going to be using ejs so egs is simply going to help us for templating so let's say we want to like pass in variables from our savvy.js or from our javascript to our html we'll be using ejs for that so if npm isn't working for you what you need to do is hop over to the official node.js website so i'm just going to come over here and i'm going to come over to download node.js and no no no js rather it's supposed to be download node so i'm just going to remove the node.js at the back or i'm just get rid of this download node so what you simply need to do is come over to this this over here i'm going to open this up and as you can see it's opening up the official website so simply click on windows installer and just install it as any as usual let's say you're installing any application a game or something just install it that way and after that your npm is going to start working so as you can see now it's created two new um files for us over here it's created one new file and it's created one directory so if we open up this directory now we're gonna see um something like ejs that's what we installed and if we go down a little bit we're gonna see express over here so these are things that were in installed now installing express on egs is going to come with a couple of things that's all we can see over here okay so if you are seeing others they know you are on the right track now after all this the next thing we're going to do is go ahead and you know create some developments dependencies and in order to do that we are simply going to use um npm sorry not that we're going to use mpmi and we're going to say dash save dash dev like this and what we want to install is nodemon i want to install nodemon and we also want to use install dots env okay i'm just going to go ahead and open this up like this so we'll see everything on one line so nodemon and that's the envy simply going to help us you know creates the environment variable files that's going to help us start since like secret keys and all that so when you've typed out npm i have an iphone save hyphen developments or dev in shots then node nodemon and dot env what you simply want to just go ahead and hit enter on your keyboard and give us a couple seconds it's going to go ahead and create all these files for you okay so after this file is done we're going to go ahead now and work with our files in here what we're simply going to do is go ahead and create a git ignore that git ignore file and in the let's get ignore file we're going to go ahead and you know put in the node.js we want to um want to ignore the node node sorry the node modules one is in ignore the node modules and we also want to ignore the the dots emv so let's just go ahead and do this so you guys can understand what's going on so over here i'm going to create a new file i'm going to call it dot git ignore like this and i created that ignore i'm going to create another one we're going to call it dot env so in env that's what we're going to be storing all our secrets case so i'm seeing i'm simply going to come over here and create a secret on the score key and this is going to be set to yeah whatever you want so what you're supposed to know about is that the longer the key the the more secure it's going to be the longer and the more complex it is the more secure it's going to be so secret key is equal to this yeah i'm going to go ahead and close this up and in the dot git ignore what we want to ignore is the dot emv file and one ignore the node modules node modules just like that okay so when we are um pushing this to github or to wherever it's gonna not it's not gonna push the env and it's not gonna push the node modules okay so i think that's pretty much what you wanna do for here now we wanna go ahead and open up the the package.json and want to go ahead and create um a development server so over here we're going to say dev stats that's what we're going to call it and we want to start dev start ads um we're going to come over here outside there put a semicolon and we're going to put firstly it's going to take in nodemon and it's going to take in server.js so it's about js that's what we're going to be running now what we simply want to do is come over here and we're going to create a new server.js okay so with this now when we come over to local hosts what we're gonna see is the salvador js but right now let me go ahead and open this up so you guys will see what i'm talking about so if i come over to localhost 3000. now we're not going to see anything definitely it's going to draw an error because number one we are not running this server number two we are not listening for any ports and no but sure we don't even have any routes yet that's gonna help us get get in the specific page so let's just go ahead and do all that real quick now what you wanna do in our temmie now over here in our team and i want to say npm run dev stats so you remember the dev site that we created in the package the json over here this one that's what we're running over here now this is going to go ahead and run this on our localhost so when we click on this we are supposed to see something but now we are not listening for any we're not listening for the spot over here so nothing is going to happen now in order to do that you want to come over to your server.js so in our server.json simply want to do is go ahead and import some of the libraries that were that we that we installed so to import them firstly we're going to create a const and assign a variable to this you can call this whatever you want don't want to simply go ahead and say require and we're going to pass in express so we created a variable express and we um require the express that we that we imported or rather that we installed using npm i express from a few seconds ago you still remember now we need to go ahead and create an app so we're going to say app and we're going to set this to the express that we have above so now we simply have a variable app and we assign it to this express over here and we opened up two parentheses okay just like this so with this now we can simply go ahead and say something like app.listing so we're going to be listening for 3 000. so now let me come over here and make sure our server is still running and come over here and refresh what do you notice now it's it's working but it's saying cannot get so it's not having any you know like it's not having anywhere that it's gonna reach route 2 and all that so in order to create our first routes it's going to be quite easy i'm just going to say app dot get and i don't get probably simply going to pass in this slash so personal passing slash over here means i want to come over to this first page let's say we did something like slash hello so for us to see anything we need to come over to slash hello hopefully you guys understand the gist okay now over here in the slash um we're simply gonna go ahead and pass in some things this is gonna take in two variables the first one is gonna be a request the other one is gonna be response so you're passing in request and response in here now we can simply go ahead and render a a template so we can see res.render and we call we could simply render an index.egs template over here so we say index.egs over here and now we need to create an index.egs but for now i don't want to do that i want to actually go ahead and show you guys something so we're going to say rest.send so i'm just going to pass in rest.send over here and let's see okay i think there is an error now we are passing right okay okay passingrez.com i'm gonna say hello there now i'm gonna come over and refresh what do you notice we're gonna have hello there that will pass in over here now this is where we'll be writing our html code and we're to just like break things apart like this come over here write all the html code but that's not going to look neat it's going to look so so untidy now in order to write our html code we're going to go ahead and create of a new file for it so instead of passing in just the the html codes like this in here we're going to pass in the templates in here so the template is going to be called index dot ejs now we use render to pass in the template okay so when we've done this what we simply want to do is just go ahead come over here and create a new folder i'm going to call this views and in this views folder we're going to create a new file and it's going to be called index dot egs okay now we have index.egs if we come over here and refresh this stuff now you can see we have nothing so you remember when we wrote hello hello there in here now you don't need to do that in there you need to download it in here so we're going to say hello there now we will come over here and refresh what do you notice we have hello there so this is where we could write all our all our code for the front end here basically for the front end and for the back end we're gonna brighten it in the server.js so i'm gonna go ahead and create two more views the first one sorry the first one is egs the second one that's what i'm supposed to say second one is going to be login.egs login.eds and we also need to have um register dot ejs okay but we don't have any route for this already so i just want you guys to understand the way things are working over here now we have um we have a template index.egs we need to have a route for it let's say you're coming from the django background this is going to be called the view so you need to have a view for it that's going to render the template this is simply enough now we have the login.egs but there is no way to access this we need to firstly create a route for it so a route is something like this okay now we're going to say app dot get and we're going to pass in slash which one should you create for let's create for the login first and is going to take into variables it's going to take in rec and it's going to take it i i don't know what click on that track it's actually a request and we're going to come over here and say rest.render so we what do you think we're going to render in here we're going to render the login.egs as simple as that okay now login.egs we come over here and come over to slash login what do you notice now we have something so in this login we can say something like h1 and i'm gonna say login and in the register we're gonna pass in the same thing but this time around it's gonna be register okay and then the index.html we're gonna create this i'm gonna say home page so you guys should understand what's going on now finally we're gonna go ahead and create one more route for the register page so we're going to say app does get and this is going to be slash red no not starts but slash register this time around and we're going to have requests are we going to have response this is a function so we're going to pass in an arrow over there then we're gonna say res dots render you guys already know what this is gonna do then in here we're gonna pass in register register dot egs so now we have routes for the login the the home page and the um where it's called the register so we're going to come over here and say register now we have register we come over here we say let's just go to the home page now we'll see home page we come over to login we get the login page yeah i think that's pretty much it now the next thing we're going to do is just go ahead and start you know configuring our views so i'm just going to come over here and pull the comments so this this should be i shouldn't call out for you let me just call this rounds okay and over here i'm going to say end round so i'm going to be adding um a robust comment for this so when i deployed to github you guys would understand what autocode does so this is going to be called important libraries that we installed using npm npm okay now this is important x price and this is aksignon express to the up variable i'm still going to put a comment over there so now in the index.egs what we're going to do now is go ahead and build out all the home page the login page and the register page and we're going to make it look a little bit nice and you know look good and i don't want to go ahead and start doing that from scratch that's why i've built this out before actually starts if i actually started shooting this video so now i've got the index.html does it over here i'm simply going to copy this this is totally bootstrap it's pure bootstrap i'm sure you can do everything that's in here if you already have html and css background but if you don't have it's totally okay you don't need to understand html css to do this what you need to understand is just very very very little minutes part of html in css so just copy that paste it in here now as you can see we've got the home page now when we come over to the login let's say we still have login it's not showing up anything so we need to come over here and we still need to copy the login page and we're gonna paste it in the login over here so i'm just gonna paste this in i'm gonna refresh the login now we have this really really nice looking login page now finally for the register okay i don't know what i'm doing so for the register we need to go ahead and copy the register this is it over here i'm simply going to copy this but before this i want to get rid of those comments i want my code to look you know a little bit clean i'd say now we need to paste this in our um the register.ejs now as you can see all our pages looking totally nice so the next thing i think we're going to configure is this over here let's say the user already have an account and they want to go back to the login page now when we click on this nothing is going to happen it's going to refresh this page so in that case um what we simply want to do is go ahead and configure that but before i configure but before i configure that i want to change this to register okay so this is register now i'm going to go ahead and collapse some of this so i you know see some other things that i'm doing in my code okay that's it now for the already have an account login we're simply gonna hop over to slash login and now i'm gonna come over here and refresh this so when we click on this what do you notice it's going to the login now in the login we need to configure this and we're going to pull slash red j star like this not register but register now when i refresh the login page and hit register it takes me to regis okay that's another okay we need to get back and refresh this page now when i hit this it brings me to the register page when i hit this it takes me to the login page so that's pretty much what we're gonna be doing for now and there is some things that you guys need to look out for okay so first let's start off with the login page now in the login page as you can see we've got a type of email so it's gonna force the user to put in their email and all that kind of stuff now you need to have a name a name of email so this name of email is what we'll be grabbing onto to get the email that the user is gonna pass in in here okay so from the server over here we're gonna be using this email over here to get whatever email that the user passes in but let's say this is empty then there is no way we're going to be getting the email we're not going to get anything even though user passes in blah blah blah over here and hit sign in we're not going to get in anything so make sure you pass a name for this and for the password you also want to pass in a name of password okay so that's simply what we need to do for the login and we also need to do the same thing for the register okay now for the full name the input we've got we've got name so the name is going to be name because it's supposed to be the phone name you know this is over here full name so we're going to pass the name as name and for the email we're going to pass the name as email i'm going to pass a name as email and finally for the password i'm going to pass in name as pass word okay i think that's pretty much what we want to do for now now we're going to go ahead and start working with the main functionality and you know go ahead and start doing the fun part of the video now the first thing we want to do is simply hop over to the to the server.js now what we're going to do is go ahead and allow our our our form over here or simply we're going to say we're going to create a function uh you know i keep calling that function we're going to do something that's going to allow us to get all the values that a user is going to pass in here so let's say a user is passing in their name chelsea ball their email defio neonita.com and their password now when we hit sign up we want to be able to get all the the informations that the user pass in at the back end okay now in order to do that what we simply want to do is go ahead and create something it's going to be very very easy we're going to say up we're going to say app.use and in this updates use what we want to pass in here is express dots url encoded so just follow along with what i'm doing that's url encoded and the url encoded we want to pass in extended should be false okay okay guys so i told you that this line over here is going to be helping us to take all the values and make and make us to be able to access them in the request variable that we've got in our post method and for the database for those projects we won't be using any database but i will be storing all our users in a in an array and this is not something i'd recommend you should do if you are really building a robust application i'd recommend you go ahead and use the database like mo mongodb or mysql and those are really really easy to integrate but for this video i just want to keep it simple and short for node.js beginners and i'm just simply going to store our all our user data in this array over here okay so after this the next thing we're going to do is go ahead and um i think we should go ahead and hash the passwords first because that's one of the the courses that we really need we don't want to go ahead and display all the users password maybe and store them like that on database um still in their raw format would want to hash them and in node.js we will be hashing password using a library that's called bcrypt so in node.js we'll be hashing passwords using the library that is called bcrypt and in order to install bcrypt you can go ahead and open up and i'm going to open up a new terminal over here or you could use this terminal over here to do it they all work the same way so in this time you know um i don't know it's taken a little bit of time to open up i'm just going to give it a sec and and i think you should it should successfully open up oh let's just let's just come over here and do it so i'm simply going to say npm i and i'm going to install bcrypt and i want to make sure i'm spelling that correctly so npm i be crypt and i'm going to hit enter on my keyboard and this is going to go ahead and install the decrypts package or library whatever you want to call it okay then after that we're going to go ahead and start using the big crypts to hash our password so we just need to give this um a couple sec and it should go ahead and install i don't know why that's not installing i want to make sure that i'm connected to the internet so i just connected my pc to the internet and they should go ahead and start working now but i'm just going to terminate it and start it up again afresh and npm i be crypt and let's just give you some time and as you can see now it started loading up so this time around it's installing so we should give it like let's say 30 seconds to a minute for you to success oh that was really fast so i think it's it's almost completed here it's completed now what we need to do is just go ahead and run our server again npm around dev stats the next thing we're going to do is simply come over here and i want to get the the big crypts that were installed so we're simply going to go ahead and require for the package so we're going say um const decrypt so i'm simply creating a variable decrypt and i'm gonna set this to require so you know we just import we just installed big crypt right now so i'm gonna say require big crypts just like this and to be able to make sure that all this is spelled correctly i don't know the spelling of big creeps usually gets me confused yeah i just mix up the letters at times okay so now we are importing decrypt over here i'm just gonna put a simple comment importing the big crypt package important be crypt package or whatever you want to name it now after importing the big crypt package now we need to post the register out and we'll be using async and things like awaits and don't worry when i start doing this you guys are going to understand fully how everything works over here so right now as you can see we've created gets over here so as you guys can see over here we've created some routes now i want to go ahead and start creating some posts so i'm going to say app.post and as you all know we are posting to the register so we put into slash register okay so to to help you guys understand more what this is doing um let me just come over here and i'm gonna refresh this and hit sign up okay so when we hit sign up now this is gonna be posting to this register route over here now that's what we're gonna be creating let's say this over here is going to um okay i don't wanna get you guys confused let's just go ahead and keep working with this so you guys will understand fully well what all these are doing so i'm going to i'm going to post to register and register it's going to take in async because we'll be using the try catch okay and after async this is a function it's gonna take in two variables um every request and response and that's req and res okay then after that i'm gonna just open up um braces like this and there's gonna be parentheses just like creating a function in javascript then after this we're gonna use a try catch in here so it's it's quite straightforward i'm gonna use try catch just like this this is where we're gonna be getting all the errors and this is where we're gonna be trying okay but in order to get things clear i'm gonna get rid of this of this over here i'm just gonna get rid of this and yeah this should be what i'm looking for now i'm gonna start with the try so in this try catch in here what i wanna do is very simple i'm going to first of all hash the password so i'm going to say const password hashed password now this is going to be equal to await so i'll wait and i'm going to call bcrypt dot hash so this is like this hash over here is like a metal that decrypts package that we imported over here that will install using npm has so this hash over here is something that big crypt has simple as that then after that i want to go ahead and get the password so i'm going to say request.body that's password okay now was request.buddy.password doing it's quite easy when you say request.body.password now it comes over here and it gets whatever that's passed in here okay and how is getting what's passed in here that's from the um this is the register page this is the password that's from this name over here so let's say i named this um let's say let's say i need this like user dash user one password take know what i'm doing let's say i named the name user one password then what do you think is gonna happen in the server.js i'm gonna say request.body.this okay hopefully you guys understand but i don't think this is this is gonna be working so we're gonna um get rid of that and we're just gonna stick with password for now so request the body.password i'm gonna get rid of what i did in here and it's just gonna be password like that okay now after we've done this the next thing we're gonna do now is just go ahead and um we're gonna push to this user's array that we have over here so let's say we are creating the user and everything is working fine we're gonna say use us dot push not pop users.push and in here we wanna do a couple of things firstly wanna get the id so i wanna get the id of the user and we'll be using dates dots now there is a lot of ways that you can use to get id you could just there's just a whole lot of ways but i think doing it this way um is quite easy and straightforward now i got the id and also i want to get the name and you might be like why am i getting the id so let's say you want to go ahead and make your application robust in a way that you can actually you know like view each user's profile and something like let's say block a user or delete a user or let's say chat up a user then you would want to identify each users by their id okay so the same users might have the same name there might be two users with the name with the same name of destiny but two users cannot have the same id so every second every time this id changes to random numbers like this every time every second it changes to random numbers okay so the id is going to be used to get specific users now the name for here is when it's going to be quite easy we're going to say dot requests.body.net i'll show you guys how we're getting all this name over here in over here as you can see i named it name the next one is email the other one is password okay so now we get the name let's get the email so email is gonna be um requests.body dots um email yeah that's what i called it and there's gonna be a comma over there and the last one is password so password is gonna be request dots body or rather what we can simply do is pass in the hashed password yeah i don't know just just skip my mind so we already hash the password over here using this now what we're simply gonna do is pass in the hash password and there is one more thing that we are missing we need to come over here and pass in 10. so that's like the standard way of hashing password that's going to make it a little bit um longer and secured and all that okay then after this the next thing we're going to do if everything works fine is to simply go ahead and redirect them to the login page so let's say we successfully created the user yeah that's fine we're going to go ahead and redirect them to the login page so they're going to try logging in with the new credentials that just created to match it to the one that we've got in the database okay so after we've done this i think that's pretty much what we want to do in the try now coming over to the catch let's say there is an error then we want to simply redirect them back to the let's say to the register page that's more better so i'm going to say rest.redirect register just like this and let's say you want to get an e an error i'm just going to come over here and put in an e so we can simply log an error if we get if we're going to get anyone as simple as that okay so don't worry i'm still gonna put comments for all this what it does before i commit this to github for you guys so when you're reading the code you're gonna understand what everything does so with this now let's go ahead and try creating the user and see if everything works fine i'm going to open up my server as you can see my server is still running perfectly well um i'm going to come over here i want to console.log i want to console this users so that when i create the user i can see what's going on so i'm simply gonna log so um okay what's going on this is it over here i'm gonna log users so this one over here is simply i'm gonna display display um newly registered users in the console in the console okay um yeah that's it so now let's go ahead and as you can see over here it's login so let's go over here and refresh this and i'm gonna try creating a new profile so i'm gonna say somehow james the email i'm gonna say whatever the password i'm gonna say testing three to one and i'm gonna hit sign up so as you can see this is simply just showing it up here okay as you can see nothing is going nothing is happening it's just throwing it back to this place now what you want to do is simply get back to our form get back to register.ejs and we want to look at the form over here so the form is supposed to have got a couple of times firstly it's need an action so the action is going to slash register and also it needs a method so the method is going to be a post method and we also want to look at the button so the button is supposed to have a type of submit and we have a text of sign up that's pretty much what we want now i'm going to come over here refresh this and i'm going to get rid of every other thing that we've got in the url refresh this again now we have a clean slate and i'm going to pass in a new name i'm going to pass in samuel james i'm going to pass in um sammy i'm going to pass in the password to be testing three to one whatever you want and hit sign up now what do you notice it redirects us to the to the login page okay now let's come over here i think this is supposed to show up something in here but it's not happening let's see what's called well let's see what's going on i'm gonna come over to my time and i'm gonna open this up and let's make sure that in the server.js we are contour login users i don't know why that's not reading perfectly well users users.push okay i'm not supposed to console log this over here rather i'm supposed to console log this in the try right okay let's just console up this over here hopefully that's what i'm looking for and i'm gonna get rid of this white space or empty line now when i refresh this i'm gonna try creating a new user again i'm going to pass in all the informations that i've got before and i'm going to hit create now what do you notice it goes ahead and creates a user for us now we've got a random id this is the id we've got the name remember the name of past 10 from the front end somehow james this is it remember the email this is it and what do you know the password is hashed and it's looking really really really really secure so let's say i'm getting rid of this hashed password over here and i'm putting requests dot body dot password so request.body.password and let me refresh this over here come over to register and i'm going to put in the same name i'll import something else i'm going to put in flourish i'm going to put in destiny gmail.com and i'm gonna put in testing three to one you could pull whatever you want and hit sign up okay i think something something is going on over here i'm gonna get rid of the the last comma over there requires the body the password as you can see my terminal keeps loading forever and ever it's not even stopping up i'm gonna come over here and see what's wrong so this is running again i'm gonna refresh this put in this was in this the password is testing three two one i'm gonna hit enter now when i come over here what do you notice that's the id this is the name this is the email this is the password now as you can see the password is in its raw format okay and that's how we want that's why we are hashing the password so that's pretty much it for the for the register now we have a registered user and one thing i'd like you guys to know is that whenever we come over here and refresh this we're gonna refresh the token of this okay so let's say we end off our timing now and we'll run it again now we're not going to have all this created user again so that's why it's very very necessary that you go ahead and use something like a database mongodb like sql or whatever you want to use it's all okay but for the sake of this project that's why i'm making it this simple and easy okay now the next thing we're gonna do is go ahead and start working with the login functionality and we're gonna be doing this using passports so passport is a simple library in node.js that helps us um you know work with things like authentication right out of box you don't need to implement every other thing by yourself it's going to help you um let's say you want to log in with your social accounts you want to log in with username and password email and password and all that kind of stuff passport is something that's really going to help you achieve all this easily okay and in order to get started using passports we're going to open up our terminal and we need to in install passport so we're going to say npi npmi passport so npm install passport and we also need to import a lockout in not import rather install so we need to install passport local and that one is going to help us with logging in using the using the email and the password okay and we also need express session so express session is simply going to help us store sessions across our across our applications okay for users that create an account and want to log in and all that kind of stuff and finally we need express flash so express flash is simply going to help us display some really really cool flash messages like hey there is an error or password doesn't match or the email wasn't found in the record and all the kind of stuff you get it just so after all this i'm just going to hit enter on my keyboard and we should give this a couple seconds go ahead and install all the packages that we're going to be using okay so as you can see it has successfully installed the packages that we were installing okay this is this was it over here so it successfully installed everything and now what i'm simply going to do is go ahead and close up this terminal now firstly we want to go ahead and you know get the the password that we installed so i'm going to say cons passports simple as that or i think before we do this we want to go ahead and work with some other things first let me know make this really really um you know cumbersome i don't want to make like a code from up to down writing of it i just want to go ahead and explain everything on the go okay now i'm going to create a new file over here and we're going to call it let's call this um passport config.js you could totally call this whatever you want well i'm going to say passportconfig.js you know trying to stick to conventional kind of stuff okay then after this the next thing i'm going to do is simply go ahead and you know get some things from passports for example i'm gonna get the local strategy so i'm gonna say const local strategy okay and this is simply gonna require so we're gonna be requiring this from local dot what do you know local strategy just like that or no no that's supposed to be just strategy so take note we're going to be getting the local strategy from passport.loco and after these we want to get a couple of things we also want to get big crypts so i'm going to say const b crypts so we'll be using big crypts to hash our passwords now i'm going to say require and as usual we're going to get in big crypts okay so after getting a big grip now i want to go ahead and create a new function now let's make sure that's looking good so i'm going to create a new function and we're going to call this function initialize initialize and we're going to initialize it with a variable passport okay and we're still going to pass in some things in here but for now this will want to be sticking with now in here we want to go ahead and create a function that's going to authenticate users so i'm going to add a comment um function to alterna k users function 2 or 10 to cate users and that function is going to look like this so i'm going to say const authenticate users or authenticate users and what we simply want to pass in is async because we're going to be using try catch told you guys that earlier so we're going to pass in async and in here we want to pass in a couple of things we want to pass in the email want to pass in the password pass word and want to pass and done so i told you guys that we're going to be authenticating users using email and password you're going to authenticate users using the username and password and since like social login with google facebook and other kind of stuff okay so i'm gonna be doing my with email and password and for this it's gonna be quite easy firstly let's go ahead and get user by email so i'm gonna say get users by email and to do this now we need to find a variable users and or let's just say user and we're going to call this get like you can call it wherever you want okay i'm going to say get user by email get user by email and what was simply gonna pass in here is email just like that okay and after this we want to check for some things so okay i think there is an error over here let's see what's going on it says it's expected we simply want to add an arrow over there like um a greater than sign and in here i define the variable user and i set it to this get user get user by email and take note this is going to be a function basically going to go ahead and create it now what i want to do is simply come over here and i want to say if um user is equal to no that means we don't have any user right so what do we want to do we want to do quite we want to do some things then we want to go ahead and return done so we don't uh whatever we're doing we're going to pass in no and we're going to pass in false that means we don't want to save any um thing to our database or to our array in this instance then we want to simply go ahead and show a nice message out there we're going to say something like no user found with stats email something like that the user found with that email okay no user found out email yet that's that's quite okay now after this there is a couple things we want to do so we want to use the try catch now i'm gonna click on that like that over there and we're gonna use try catch and do some some pretty easy things firstly in here i'm gonna write an if statement so this if statement is is simply gonna be an if statement that's gonna compare passwords okay so the first we wanna do is go ahead and pass in a weight in here so i'm gonna pass in a weight and after that i want to pass in big crypts so be crypt here is going to compare passwords for us so i told you guys there is um a lot of things that comes with big crypts like hash i've seen compare so we want to compare some password now we want to compare the password that's that's the user is passing in with the password that we've got in our database okay the password that the user is passing in with the password that we've got in our database and after that what else do we want to do in here so we want to simply go ahead and return done and we're going to pass in no and user so in here we're going to write an if statement and this if statement is simply going to help us um compare passwords so we're going to say awaits and we want to pass and decrypt in here so this big crypt is going to have it's going to help us compare passwords so from the um other time we've seen the hash method now we're looking at the the compare method so it's going gonna compare the password that the user is passing in and the password that we've got in our database or this time around in our array so when all this happens what we want to do want to simply go ahead and return done we're gonna pass in no and we're gonna pass in user just like that but how about um you know everything goes well do we want what do we want to do i'm gonna go ahead and okay let's okay we're done with the if statement and the trike hash now what we're supposed to do is simply go ahead and you know return an error so i'm simply going to return done and we're going to pass an e so if for any reason we're going to be getting any error i'm going to go ahead and lock the error down i'm going to say console.log e just like that okay now i think that should be it's now the next thing we should do is go ahead and you know do some couple things down here i'm gonna say passports.use or i think this should still be in this place over here in this function so i'm simply just going to get down a bit over here and i'm going to say passports.choose not user i want to set this to a copper scene so just follow along what i'm doing firstly there's going to be a new locale strategy not storage so there's going to be a new i'm going to pass in local strategy and in this local strategy you want to pass in a couple of things firstly we want to pass in the username field and the username field is going to be what in this instance we're using email so using a few you can use whatever you want you can use the phone name you can use username you can use um phone number or whatever but in my case i'm using the email okay then after this the next thing we also want to do is go ahead and serialize um a user and also just realize it so we're going to say pass not pass not password passport so we're going to say password dot serialize so password dot serialize user radar and what we're simply gonna pass in there is done i'm gonna open up another parenthesis i'm gonna say user and i'm gonna um give a comma and i'm gonna say done just like this now in here now i'm gonna create an arrow function like this and take note we're still gonna do some things in here for example we're gonna go ahead and serialize our users in here and we also need something that looks exactly like this but it's gonna be the serialized user so we're gonna do the same thing in here but this time around we're gonna be doing it for the id okay so i think that's going to be it for this one now we're going to go ahead and start working with us about the gs so we've written a very very very very very basic basic function over here and now we're going to hover back to the server.js and there is a couple things we want to do so at the top okay so we are simply gonna create a new variable and we're gonna call this one initialize passport and we could set this to require so we're trying to get in um everything that we've got in the past product config over here but take note there is something we need to do ours we're going to get an error in the in the passport.config sorry passport config hyphen config you call it wherever you want want to go ahead and export the the the initialize function that we created this one over here so we export it and as you can see now it's it's no longer looking um grayed out since it's looking great out now now i want to bring this in it's not looking great out so we expected it now in our 7.js we want to simply go ahead and require that so we're going to come over to dot slash then we're going to come over to passport config okay so after this the next thing we want to do is quite easy we're going to go ahead and use the initialize password i would created a booth to do something okay

Channel: Desphixs

Views: 62,237

Keywords: python, desphixs, technology, Desphixs™, nodejs login system, node js authentication, node js login, node js passport login, node js passport, node js login form, node js passport tutorial, node js login tutorial, node js, node js registration, node js passport login tutorial, node js passport authentication, node js authentication tutorial, node js password, node js user login tutorial, node js express passport, node js passport local strategy, passport login, login guide

Id: ILviQic0c8g

Length: 45min 56sec (2756 seconds)

Published: Sat Jul 16 2022