Node.js Passport Login System Tutorial

welcome back to web dev simplified my name is Kyle and you can imagine when you're using the web almost every single website that you use has some form of log and component to it where you have a user account you can log in log out etc and I bet you the project that you're thinking about working on also has that exact same login component so in today's video I'm going to show you the boilerplate template for how to set up your very own login system inside of your application let's get started now Before we jump into coding let me show you the absolutely beautiful looking website that we're gonna build in this video well maybe not so beautiful what we have here is a login screen we can click register and go to our register screen and let's say that we register a user here just a very basic user click register it'll bring us to our login page and then if we want to login let's say we choose an email that doesn't exist and we're going to choose password and we click login it'll tell us that the user with the email doesn't exist and if we actually login with correct email but the wrong password it'll tell us our passwords incorrect and finally if we type in both the same email and the same password and click login it's going to bring us to the page display our name and give us a logout button also if your redirect to that login page it's actually going to read your ex back to this homepage because we're already logged in as soon as we click logout though it's gonna bring us back to login and if we try to go to that home page it won't let us sisters going to redirect us back to the login page so now that we know what we're building let's fire up Visual Studio code and we're just going to have a completely blank project to get started with because that's the best way to do things and the first thing we need to do is initialize our project since we're going to be using NPM to store all of our dependencies we can just type in NPM an it and we can just use the default values so we can hit enter a bunch of times and here we go it's going to give us a package.json which is where we're going to store all of our dependencies and to get started I'm only going to install the dependencies we're going to need to get the basic application running and then we'll install the pendency zazz we run into the need for them later so we can type in npm i and this is going to let us start installing dependencies and the first dependency we need is called Express this will be our application server and the next dependency we need is ejs and this will be our templating language for all by different views such as log in register etc we're also going to need a few development dependencies so we can type in npm i - - save dev just a table user for development only and we want no daman as well as dot env and node menthe is going to allow us to restart our server automatically every time we make changes and dot env will just allow us to have environment variables that we can store it inside of a dot env file that we can load into our server so let's create that EMV file now just call it a env and this is where our environment variables will go and we also want to create here a dot get ignore because we actually want to ignore these files we don't want to commit our env and we also don't want to commit our node modules to our git repository and this is because node modules is just all of our installed dependencies and env could contain secret sensitive information we don't want to share it the world the very last thing that we need to do is actually set up our package.json so that we can start our server inside of this script section let's just create a script called dev start and inside of here what we're going to do is we're just going to run node Mon and we're gonna run server GS which is the server file we're going to be creating now we can save that create that server file sorry ojs and now inside of a console if we've run node Mon whoops not node Mon if we run NPM run dead start just like that that's going to run that script that we just created in here this dead start script and every single time we make a change to our server jeaious it's going to refresh our server and rerun all of our code to get started the very first thing we want to do is just set up our basic Express application so let's import Express we can do that just using an expressive variable we can just say require Express that's going to bring in Express and we also want to get the app variable from Express so we can just say call the Express function here and if we come down here and type in app dot listen and give it a port we now have an application running on port 3000 when we save that we go to localhost 3000 you can see we get cannot get slash and that's because we have no route set up for our application so the first thing we should do is set up a route we can just say apt-get slash this is going to be our homepage route that you'll need to be logged into to access and instead of here we just get a function which has a request variable and a response variable and all we want to do is actually send them a certain page that we're going to create so we can just say response dot render and inside of here we want to render a file we're going to call that index ejs and we can say that and right now we don't have any files being rendered in order to get that working what we needed to do is create a folder called views and inside of here we need to create that view index ejs and now instead of here let's just put some code we'll put an h1 whoops h1 and inside of it we're just going to say hi just like this save that and now when we refresh this you see that we get hide being sent out to the server now in order to use EGS syntax we need to tell our server that we're using ejs so inside of here we can say app dot set and what we want to do is we want to set the view engine so just like this we can say type in view engine and we want to set this here to ejs and this is why we installed that ejs dependency earlier because now our view engine is set to ejs and we can actually use EGS in our template so for example let's say that we want to pass a user down we can just say user I should just say we want to pass down a name and we can just give a name of Kyle for example as a basic example and inside of here we can just put that name by putting it inside of this less than with a percent and an equal sign this luxury render out a variable and we could just render name now if we save that and we refresh over here you'll see us as hi Kyle now that we have a super simple server setup let's actually create the routes we need for our login page and our register page first we'll create views for them we'll call it login dgs and we'll also create a view here call the register ejs these would be our two different pages and then inside of our server we're gonna create routes for both of those so we can just use get routes again since we just want to get them via the URL the first one is going to be login and again it'll take a request and a response and instead of here what we want to do is you just want to copy this code up here for rendering but instead we want to render our login dgs and we don't need to worry about passing any extra information to it so here's our login and we could do the exact same thing for register except for we're going to change our route to be register and we want to make sure that we render the registered ejs file which is inside of our views folder now if we save that and instead of here we just put the text login and in here we put the text register make sure we save both of those and if we go to slash login you'll see it says login and if we go to slash register you'll see it says register now that we know our pages are rendering let's create the actual HTML inside of them for render in our forms will be register first and the first thing we want to do is we want to have an h1 and inside of here we're just going to but the text register so we know that we're on our register page and then after that we're gonna have our form which is going to contain all of our different inputs make sure we close that off and inside of this form we're going to have an action whoops action and this action here is going to be slash register and we want to make sure that we change the method here to be post and this means that we're going to post to a route with the name slash register inside of our server so let's create that right now we'll do it right here after our apt-get and this one is going to be an app dot post and it's going to be the same route of register and again this is going to have a request and a response variable inside of that function and we'll just implement this later for now we're going to work on making sure our HTML in the register that ejs is complete the first thing we need to do is we need to have a row so we'll just use a div for doing this and this row is actually going to contain all of our information for our login and for the name so we're gonna have here an input or a label first and as label is going to be for our name element and we want to make sure we just label this as name make sure you close off this label next we can actually create the input which is going to be for that name it's going to have a type here whoops a type which is going to be text we want to make sure we give it an ID which is the same as the four so it's going to be named and we also want to give it a name which is how we'll access it on the server and this will just be named lastly we want to make sure this is required so we use the required attribute now let's save this refresh our page and you'll see we have our name input right here let's copy this down because we're going to need a few more inputs we're going to have our first input which is going to be email so we're gonna just change everything up here to the email type is going to be email whoops email we want to make sure the ID is email so it matches this for and lastly the name is email and down here we're gonna do the same thing but we're gonna do this for password so make sure we change all of our old text to be password type is password ideas password and of course name is password save that and refresh and you see now we have our name our email and our password being set the last thing we need to do is actually to create a button to submit our form so we'll just create a button with the type of submit and instead of here we can just put in the text register now we save that refresh we have all of our form elements for registering our page the last thing we're going to want to do is actually add in an anchor tag which will just link us back to our login page so we'll just have an href which is going to go to /login and we just want to put in the text login now if we refresh and click login you'll see we get brought back to our login page and our login page is going to be almost exactly the same as register so let's copy that paste it over here instead we're gonna want to put login up here and we want to make sure our href is going to our register page with the text of register and of course we want to post to our login route instead of to our register route also the last thing we can remove is this name and we can change this register text here to say login and now if we refresh this you see we get a login page as an email a password a login button and we can go back to the register page or back to the login page we can really change around whichever one we want to be on now that we have our pages complete let's go back into our server and actually implement these post methods first we want to create the post method for a login those are just going to be posting to slash login and we also since we're going to be getting information from forms what we need to do is come up here and we actually need to say app use and we need to tell it that we want to use Express that URL encoded and we want to make sure we pass it the option of extended we want to put this as false essentially all that this is doing is it's telling our application that what we want to do is take these forms from our email and password and we want to be able to access them inside of our request variable inside of our post method so inside of post here for our register we could say request that name whoops request body that name and that would correspond to this name field right here can do the same thing for email and of course lastly the same thing for password and what we put after body here corresponds exactly to this name field so name is name name is email name is password whatever this name field is corresponds to what we're going to use after body to access it now we're going to use is instead of using a database to store our users we're just going to store them in a local variable inside of our server so let's create a variable up here we're just going to say Const users is going to be equal to an empty array now this is something you would never want to do in production but it's much easier to use just a local variable as opposed to connecting to an entire database especially since this tutorial is only focused on the authentication and login portion and not on how to connect to a database if you want to learn how to connect to a database in an application I have an entire full stack course on YouTube for node.js and MongoDB you can check out I'll have it linked in the cards and the description below so now down here inside of our body we also need to build a hash our user's password and to do that we're going to use something called bcrypt which is a library that we want to install so down here inside of our terminal we could just hit + to open up a new tournament type in NPM I bcrypt and bcrypt is going to allow us to hash passwords as well as to compare hashed passwords to make sure that our application is entirely secure once that's done downloading we can come up to the top here and we can actually include that so we can say Const decrypt is going to be equal to require just like that and we want to make sure we require bcrypt the video now we actually have access to that variable let's make sure we go back to our other console that has our actual application running on it and instead of here what we want to do is we want to create a new user with the correct hashed password so to do this we're going to use a try-catch block because we actually are using asynchronous code and what we want to do is we want to make sure this is an async function so that we can use trycatch inside of it and what we want to do is we want to make a hashed password so we can create a variable call it hashed password and that's going to be equal to bcrypt dot hash and we want to do is we want to pass it in the password which is request body dot password and we also want to pass it how many times that we wanted to generate essentially that hash how secure do we want it to be and we're going to use the value 10 which is just a good standard default value which is going to make it fairly quick but also quite secure and we need to make sure that we actually await this because this is asynchronous so it's going to return after waiting for it so now here we have an actual hashed password which we can store in our database and if you want more in-depth information on security for authentication with hash hashing passwords I have an entire video which I'll also link in the cards in the description that goes over just authentication and hashing passwords using bcrypt inside of nodejs now what we can do down here is we have that users variable we can just push a new user to it and this user is first gonna have an ID that we can uniquely identify it for so we'll just use date now to string this is going to be a unique identifier for us again if you had a database this would be automatically generated so you wouldn't have to worry about this stuff next we want to get the name from the request so we'll say request body dot name we want to get the email whoops email which is request body email and lastly this password is instead of the request dot body - word we want to use that hashed password right here because this is actually safe to store in our database now if all of that was successful we want to redirect the user back to the login page so we can say response oops the dot redirect and we want to redirect them to slash login so that they can log in with the account they just registered but if for some reason we had a failure we just want to redirect them back to the register page here so redirect to register and we can remove this bogey line down here and that's our entire application for registering users now if I say that and at the bottom here we just put a console dot log for our users so we can see if we added a user we can come in here type in a name we'll use w WAW and a password of w if we click register you'll see down here in the console we get printed out an ID which is just the current timestamp we have the name W email wo W and this hashed password which is completely safe for us to store in our database now one thing to note is that every time we save our application and it reloads this variable users is going to get reset to an empty array so we just have to make sure to remember that and every time we make a change we just need to re add our user and this is purely because we're not using a database as I said earlier this is just in memory this is something again you would not want to do in a production application now that we have our register functionality done the next thing to work on is login and the actual act of checking to make sure the users name and email and password are the same is not too difficult but to actually persist that user across all of your different requests it gets a little bit involved so we're going to use a really handy library called passport jeaious which is used by nearly everyone for authentication so let's go over here to our other terminal where we can actually install that and what we want to do is we just want to type in NPM I and we want to install passport as well as passport local and the local version essentially allows us to use usernames and passwords for logging in password has a passport has a bunch of different ways you can log in whether it's through Google Facebook local password email etc so we just want to use the local version but again if you wanted to experiment with other versions feel free to also in order to store and persist our user across different pages we need to use something called session so we're going to install Express session and and also to display messages for if we fail to login we're going to install something called Express flash which is used by passport inside the internals to display those nice handy messages for wrong email wrong password etc so after that finishes installing there we go we can actually set up our passport to be working with our login and while we could put all this information into our server file here it's quickly going to become quite large and bloated so what I like to do is actually create a separate file and we're just going to call this here passport config j/s and in here we're going to put all of our different passport related information and we're gonna do it all inside of a function which we're going to just call initialize there we go and inside of this function we're going to initialize our passport which we're going to make sure that we pass to our initialize function and then inside of our server what we want to do is we actually want to require that so we can just come down here and we can require that function we'll just call it here initialize passport oops and that's going to be equal to equal to required and we want to make sure we require here our passport config and then we can just call that function and nish Sheila's passport and we'll post it in our passport variable which we can just get by using Const whoops Const passport is equal to require of passport which is just that library we just installed now we are calling this function to initialize passport instead of our passport configure and we can do all of our configuration for passport inside of this single file and to use that local version of passport what we want to do is gonna come up here we want to create a variable we're just gonna call local strategy whoops strategy there we go we're going to set this equal to require passport local and we just want to get the strategy from that so we can just say dot strategy this is going to be our local strategy and then we can come down here and say passport use and we actually want to use that local strategy so we can just say new local strategy and inside of here this is going to take options the first option that we want to pass is we want to pass the username field and this essentially says what is our username cult by default it's going to be username but in our example we're calling this email so here we just want to put an email and you can also pass in the password field but it defaults to password in our application we already call a passport or password so we're perfectly fine then the next thing that we need to do is we actually need to pass a second variable here which is going to be the function that this is going to call to authenticate our user so we'll just create a function here we're just going to call it authenticate whoops authenticate user there we go and we're going to pass in that function name which will create up here as a function called authenticate user and actually to make this easier on ourselves we're actually going to put this awesome ticket user function inside of our initialize function we'll just make it an arrow function and this authenticate user function is going to take in a few different parameters the first parameter this is going to take in is going to be the email in our case this is the username field the next thing is going to be our password and lastly it's a done function essentially we're going to call this whenever we're done authenticating our user so now that we have that done we have our passport use setup the next thing we need to do is set a passport for serializing our user so we can just come in here serialize user and inside of here we're going to take a function which is going to take a user and it's going to take it done and this is going to serialize our user to store inside of the session and we need to have a function which is going to do the exact opposite of deserializing our user and this is again going to take in here an ID and done because we're going to serialize our user as a single ID and then let's work on our authenticate user function because this is essentially what we're going to call from our login using our email password to make sure our user is correct so the first thing we want to do is get our user by email so we can just create a user here and we're just going to say that this is going to be get user by email and we're gonna pass in the email this is a function that we're going to create but we don't have to worry about it right now we just know that this is going to return us a user by email or we're going to return null if there is no email for that user so we want to check to make sure that we actually have a user so we can say if our user is null then we for some reason cannot find the user and we want to return so we can just say return done which is this function we needed to call every time we're done and the first parameter is the error in our case we don't have an error because the error would be if something went wrong on your server and in our case there is no error on the server the next thing we need to do is we need to return the user we found in our case we found no user so we'll return false and we can also return message which will be displayed this is essentially our error message we can just say no user with that email there we go and now that we know if we get past this if statement that we actually have a user what we can do is we can actually try to make sure that the users password matches this password that's passed in here and to do that we're going to need decrypt so let's make sure we take in decrypt by using the require statement whoops require and we want to require that bcrypt library just like that and then down here this is again asynchronous so we're going to wrap this inside of a try-catch and inside the try portion of this try catch what we want to do is we want to make sure that we check by awaiting our bcrypt dot compare and the first thing we want to password is the password that the user sent in with the login form which is this password and we want to compare that to our user dot password just like this oops password and if this return is true and that means that we actually have an authenticated user so everything returned successfully but else if it did not return true then that means that our users password did not match so let's do the bad case first we're gonna return done with no error and we want to return false here because we don't have a user again the passwords did not match and we also want to return a message here and the spouses are essentially is going to say password incorrect just like that and if we for some reason did find the user our passwords are correct we want to return done again with no error but this time we're going to return the user that we want to actually authenticate with this is the user that they have actually logged in as and lastly inside of our catcher let's catch that error and we don't return done here but we won't return that error inside of our done statement as our first parameter because we actually had an error with our application so now the only thing we have left is this get user by email we need to make sure we pass that in so we're going to pass that into our initialize function here and we need to make sure down here that we actually export that function so we're gonna save modules dot export or I'm sorry module dot exports is going to be equal to that initialized function this is just so we can call that function by requiring in our passport config that we created here so back into our server instead of our passport we actually want to pass in that function it's going to take in an email so email and inside of here what we're going to do is we just say users dot find and we want to find where our user dot email is equal to the email that we passed in and we want to make sure that we return that and to make this even easier to read let's make sure we put all these on different lines just like this we can actually put this all into a single line up here there we go remove a bunch of these extra parentheses and there we go this is our function for finding the user based on the email and this is our passport that we're configuring now that we have our passport configured what we need to do is we actually need to work on you a bunch of use statements essentially so that our server knows how to use passport the first thing that we want to do is an app dot use and this one's going to be for flash which we have not actually required yet so let's make sure we require that we're going to say Const clash is going to be equal to require whoops in here we have Express flash we also need to do the exact same thing for session these are just the libraries that we installed earlier and now down here with our app dot use we have flash as our first one the next one we need to use is session and session actually takes a bunch of different options the first one is a secret this is essentially a key that we want to keep secret which is going to encrypt all of our information for us and we're going to get this from our environment variables so we'll say process a NV dot session whoops session underscore secret this is just going to be the name of our secret key which we're gonna put inside of our MV file so we'll say session underscore secret and you can set this to whatever you want in our case we'll just set it to a secret used to most likely want to generate this as a random string of characters so that it's more secure the longer and more random it is the more secure it'll be now back inside of our server here we actually need to load in our environment variables so we'll do that at the very top of our application we can just say if our process env node E&V is not equal to production essentially it means that we're in development we want to require that development tendency of dot env and we want to call dot config this is going to load in all of our different environment variables and set them inside of process env now with that out of the way we have a few more properties that we need to set the first one is resave we want to set this to false essentially this says should we re save our session variables if nothing has changed in our case we don't want to resave it if has changed and lastly we have save uninitialized which again we want to be false and essentially this is saying do you want to save an empty value in the session if there is no value and we don't actually want to do that now with flash and session out of the way we can set up a passport so we can say app that you use passport initialize this is just a function inside of passport which is going to set up some of the basics for us and since we want to store our variables to be persisted across the entire session our user has we want to use passport session which is going to work with our app dot use session up here and that with all that finally out of the way we can come down to our post for our login and we actually don't even need this function because we're just going to use the passport authentication middleware so we can say passport dot authenticate and we want to use the local strategy and what we want to do is pass it a list of options for things that we want to modify the first is going to be where do we go if there's a success so our success redirect is going to go to our home page which is just slash up here and for some reason if there's a failure where do we want to redirect and we want to redirect them back to the login and we also want to make sure that we show a message so we'll set failure flash to true this is just going to let us have a flash message which we can display to the user which is going to be equal to our messages in here so no user with that email or password and correct depending on what the error is that they get and now in order to display that error message we need to go into our login dgs and we need to use our EGS here in order to actually first have an if statement and we want to check if messages dot error and this is just essentially saying that we have an error message and the way that this messages air gets set is flash is going to set a messages variable to all of our different flash messages messages and passport is going to set a error message here which is going to be whatever error that we get for example over here no user with that name or password incorrect is going to be what error is set to so if we do have an error being set we want to do is we just want to render that so we can just say locals got messages dot error actually we don't even need the locals we can just turn your bet it's just messages dot air make sure we close that off and of course we also need to make sure that we close off our curly braces here so now we're actually going to display our message if we have one and if we save refresh you can see that we're getting an error so let's go over to our application here see what our error is if we scroll up you sit as saying that we have an error here on line 12 it's saying that it can't understand what bcrypt is and it's actually because it can't understand a weight because we need to have an asynchronous function here so now if we say that scroll back down you see we're getting the same error message because I put a sink in the wrong spot it's this authenticate user that needs to be asynchronous and now if you save that you see we're getting a final error here we're just saying that local strategy requires a verified callback and whoops don't actually go there and if we scroll down to where we're defining our local strategy you see that we're not actually passing an authenticated user to our local strategy we're passing it to passport use so let's make sure that we are properly passing authenticate user to our new local strategy and not to the passport use now let's save that scroll down you can see that we have no errors or the application so we can refresh over here and our login page is working let's try to register with the user will just do W W at W and W and now if we try to log in with a random email and a random password we could login whoops if we make sure this is an email and you'll see this there's no user with that email now we'll choose the correct email and a wrong password and we'll get password incorrect and now finally if we use the correct email and the correct password click login you see that it's loading for a while and that's probably because we have an error and we do actually have an error we're not actually implementing our serialize user or our deserialize user functions yet so let's do that instead of our serialize user all we need to do is serialize our user so we can just say user ID we just want to get the users ID and save that into our session and we need to make sure we pass this to the done function null is for our error and in here user ID is the actual serialized version of our user next we need to do almost the exact same thing for our deserialize but instead of here what we want to do is we actually want to get the user so what we're going to do is wrap this onto a separate line so it's a bit easier to read for you all and we want to get our user by ID so we'll just say get user by ID and we're gonna pass it in the ID right here that we're getting and we want to make sure that we return this and this get user by ID is something we need to make sure we pass in up here so let's pass in this get user by ID go into our server scroll up to where we defined that just right here and we're going to define a function which takes an ID and we're going to get a user by that ID and there's going to almost exactly the same as our email function but instead of comparing emails we're gonna be comparing IDs just like this now we can actually test that we can go into our email or a register make sure we register that user now we can type in the email correctly and the password click login and you'll see it redirects us back to that perfect page for our index of where we want to log in if we have an authenticated user and the best part about using passport is that we can get our user really easily instead of here instead of passing our name we want to pass our user's name so we can just say here our request dot user dot name and request that user is just going to be the actual user that we're using now if we save this make sure we go back to our register page re register our user and we want to use that exact email and login you'll see this has high W which is the name of the user that we specified and that's the power of using session with passport is request that user is always going to be sent to the user that's authenticated for that moment but there's a big problem with our application for example if we were to just save this so that our user no longer exists we can go to this index page and it gives us an error because we don't have a user and we can access this information even if we're not logged in but of course we don't want to allow non logged in users to access this information so let's work on protecting all of our different routes for when we're not logged in and to do this is actually really simple let's just minimize this so it's a little bit out of the way and we just want to create a new function this function is going to be check authenticated and as function is going to take a request response and next this is essentially a middleware function which is just going to take our request and response and an X variable that we call whenever we're done finishing up our authentication here would check authenticated and we want to do is we just want to check if the users authenticated so because of passport we can you call a function on request which is called is authenticated whoops authenticated and this function is just going to return true if there's a user that's authenticated or false if there is no user so if it returns true we can just come in here and we just want to return our call to next essentially saying everything works just go on to the next but if it returns false what we want to do is we're gonna redirect the user so we'll say response dot redirect we don't a redirect them to the login page so now we can use this check authenticated go all the way up to here we have in our app get and whatever we want to authenticate we just put in this check authenticated before our actual function and this will get called first and if for some reason there's a problem it'll actually redirect the user to that home page or the login page so now it's saved that and if we just try to go to this page you'll see immediately we get redirected to login and again if we try to go back to that it's going to redirect us to our login page because we're not logged in yet we want to do the same thing for when we are logged in so if we log in with a user we're just going to register our same W user and we're going to log them in we don't want to allow them to go back to login for example if I type in login I can go back to the login page even though I'm already logged in so we want to use another check this one's going to be almost exactly the same so we can come down here function this is going to be called check not authenticated it's going to take in a request a response and next and inside of here we want to do that same check to see if our users authenticated but if they are authenticated we want to redirect them so we're gonna say res dot redirect whoops res des redirect and we on a redirect them to the home page just like this it's going to redirect them back to that dashboard and if for some reason they're not authenticated we just want to continue on with the call so now we can put this check authenticated in all the places we want to check to see if the users not authenticated for example we don't want to allow users to go to the login page if they're already authenticated we don't want to allow them to login if they're already authenticated same with register and lastly again with register down here all of these we want to make sure that no users logged in if they want to access these different reps so now if we register a user using the register make sure we login and we try to go to that login page select type in slash login in the URL hit enter and you see that we get an error so let's check out a function we just wrote and it looks like down here we forgot to put in our return for one redirect in the user now let's say that make sure we go back all the way to our registered page whoops make sure the name is w.w same user we've been using this whole time and we login and now if we try to go to that login page whoops login hit enter you see it redirects us back to this dashboard page because we're already authenticated we can do the same thing by trying to go to our register page and again it's going to redirect us back here to our dashboard now the very last thing that we have to set up is our final route which is going to be for logging our user out because right now we have no way to log out we're just stuck on this page so we need to click a delete request and it's delete request we're just gonna call log out and it's going to take our typical request whoops request and response variables just like this and inside of here all we need to do is just call request dot logout whoops log out just like that and then we can just redirect the user so we can just say request dot redirect and we just want to redirect back to the login page this logout function is again something that passports sets up for us automatically it'll clear a session and log our user out and in order to call this delete function we can't actually do that directly from HTML what we need to use is we need to use a form and we need to post but since delete is not actually supported by forms we can only use post we need to use another final library so let's go over and install this library NPM I and this is called method override and essentially what this will allow us to do is actually override our method that we're using and so instead of using post we can actually call this delete method here so now let's scroll all the way up to the top make sure we include this library so we can say Const method override is going to be equal to require of method over red and we want to make sure we use that so say AB dot use method over red and instead of here we ask you to pass what we want our method override to be in our case we're just going to use underscore method this is what we're gonna pass for our method so in order to see that in example let's go into our index here and create a form this is going to be our logout form' so the action is just going to be slash logout and we want to make sure in here that we put question mark and an underscore method and that's going to be equal to delete so this underscore method is what we're using to override our method which we set here which is going to be post so we're going to override that with delete so that inside of our server here we can call this app dot delete that we have here instead of a hat dot host for logout this is just safer because you should always use delete when you're deleting things so now come down here inside of our form all we need to do is put a single button which is going to be our submit button so we put the type of submit and instead of here we can just put text of logout now if we save that make sure that we register our user so we can put our name all the same stuff that we've been doing this whole time you can say we have a logout button and when we click that of course we're going to get an error and it's because as I can see we put request dot redirect and this should be response dot redirect so now let's try that again let's make sure we go back to our page register our user login everything is looking good and we click logout you see it brings us back to the login because our users logged out and we no longer can go and access our homepage and finally we have an entirely working login application which you can plug in to your project you're working on if you enjoyed the video make sure to check out my other videos linked over here and also subscribe to the channel for more videos of me simplifying the web thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 517,140

Rating: 4.9113884 out of 5

Keywords: webdevsimplified, node js user registration, node js user login, 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: -RCnNyD0L-s

Length: 36min 28sec (2188 seconds)

Published: Sat Jul 13 2019