Node.js Passport Login System Tutorial
Video Title: 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
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
@WebDevSimplified -: Thanks Kyle great content and have learned allot! Can you confirm if this is still the best practice use case now it`s about 4 years old?
you are great may Ram ji bless you
The second half of the video was very rushed and I could not code along and still understand what was happening.
If you’re going to tell me to install something, explain how it works instead of assuming your audience knows what they’ve installed
how do i add css
do you have a video, to show how to put this Loginsystem on a hosting service or can you tell how can i use this on my Webapp witch i want to host on any hosting service?
by the way nice Video 👍
00:04 Create a login system for your web application
04:43 Create routes and views for login and register pages
09:13 Implementing user registration and login functionality using bcrypt for password hashing
13:58 The application registers users and allows them to login.
18:42 Configuring passport for user authentication
22:56 Set up flash and session middleware for the app
27:05 Implementing user authentication with Passport
31:20 Implement authentication and logout functionality
35:36 Successfully implemented login and logout functionality
guy dont use this its old version passport has changed a lot don't use
why the fuck do people always have to do something with the git repository when doing this kind of project? Is it even relevant? No fucking explanation. What a terrible web development learning experience!
Thank you so much this is just the problem i came up with.🙏
Thanks for teaching this so nicely. Now How do I store this login information of users into mongo DB
you are brilliant, you should seriously feel proud of yourself my friend. thank you so much
I thought we were making a passport airport login registration portal🤣
Have you ever considered post your video at bilibili your self Kyle.. because your video were there…
Thank you
Thanks to Kyle for this tutorial. If recently you are watching this tutorial you might get and error: "req#logout requires a callback function," when you try to logout. This error occurs because the req.logout() function requires a callback function in more recent versions of passport. Here's how you can modify the app.delete('/logout', …) route to include a callback function:
app.delete('/logout', (req, res) => {
req.logout((err) => {
if (err) {
return next(err);
}
res.redirect('/login');
});
});
it is a perfect instruction. good logic, straight to the point with required information 🙂
Hi Kyle, just wanted to thank you for putting so much energy and accuracy into your work. Lovely to watch and listen to.
love this channel… Can you create a program to send SMS or emails from ayn country using js ???
Which is the best authentication method between jwn and passport js?
hard as hell
Error: req#logout requires a callback function. If you got this error in the end of tutorial that's because passport was changed since Kyle uploaded this video. Now req.logout is asynchronous. Can't rly post this code here but if you go to stack overflow you will find solution there. Just copy paste error title.
As always, thx for upload Kyle!
Why should we use the method delete for logout purpose in server.js? We can use post method itself right and so we need not use methodOverride
Video was recoded 9 JUL 2019 15:13:12 UTC
Instead of using Ejs can I use html instead?
The introduction was quite unsatisfactory. It should be like…
Hello My name is kyle. I am here to make web simplified for you so that you can make your dream projects sooner then your intro tone pops up….. Tanaa naa na nanaa na na……
This is basically an audio version of documentations.. Not explaining any concept at all, just reading like a robot..
can I user html instead of ejs?
1:38 – npm init
goof one man
Great tutorial! Thanks
Hello sir Kyle, please can you make a video on how to use a real database for this instead of making one locally. I'd really appreciate that.
This man is elite. Thank you for taking the time to carefully explain each step.
Is it ever good practice to hash the password on the client side before sending it in the post for the login or register route? Does it make a difference in security if we hash locally?
FYI the function you use to logout the user now requires a callback function.
app.delete('/logout', (req,res) => {
req.logOut()
res.redirect('/login')
})
Doesn't work anymore and throws the error that it needs a callback function.
app.delete("/logout", (req, res) => {
req.logOut(function (err) {
if (err) {
return next(err);
}
res.redirect("/login");
});
});
Fixed it for me.
pls man make one with Mongoose in it 🙁
Error: Failed to deserialize user out of session
res.render('index.ejs', {'name': req.user.name})
the above is the error and the code that gives me that error but I don't know how to fix it
If we are using a mongodb database then according to 22:29, instead of users, we will be having database name but this line shows error of Model.find() no longer accepts a callback. How to solve this? @Web Dev Simplified
Does this code look familiar ? https://www.youtube.com/watch?v=ILviQic0c8g Kyles video was made 3 years ago. At good universities students need to quote source material but the other author has not referenced Kyles work. Has there been an oversight or is there another explanation?
can you make us a video showing how to test this project please
really crystal clear very useful stuff
Excellent!!! Aplauses!!! Tks!!!
you code too fast for a tutorial and dont explain anything, you gotta slow down
I get this error at 27:30 TypeError: Cannot read properties of undefined (reading 'password')
How were u able to access message in login.ejs
Neat, Clean , Point to Point === Simplified !
how to connect it to react application?
Super helpful!!
Thank you very much!