Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the oldest patterns in web applications is to have someone log in to your website. Then use a cookie to identify the user on subsequent requests. Fortunately, there's more express middleware available for handling logins with sessions. In this video, we''ll handle user logins, and then use middleware to store that information in a session. First, let's set up our project. Go to exercise files in chapter seven, and then in video five, copy the start folder to the desktop. Next, let's go to terminal and install all of the modules.
Change directory to that folder, I'm just going to drag it in, and then press return, and then type npm install. And then press return. Now that we've installed all the existing modules, let's add a couple more. There's one called Passport, Passport is a module that acts as middleware for Express and it handles logins. So let's install that now. Type in npm install --save, and passport. There's also a specific module I want to use with Passport called passport -local.
So I'm going to install that as well. Press Up on the keyboard and then just add -local to the end. Now let's start configuring passport. There's a snippet file in the exercise files, so go back to chapter seven in video five and go to the snippets folder. There's an auth.js file. Copy that directly in to the root of the start folder. Now, let's open the start folder in sublime text. Let's take a look at this auth.js file. On lines one and two, we're requiring the two modules that we just downloaded.
The first is passport, which is the main library, and then the second is passport-local. And we're extracting the strategy property from that module. Passport has a concept of strategies where you can use different strategies for logging into a website. So for instance, if you've been to website where you can create an account on the website or you can use your Facebook login, it's the same concept. Passport allows you to use multiple strategies on the same site, or you can use just one. In this case we're using local strategy.
Local strategy is the most flexible strategy if you want to implement your own custom login logic. And in this case that's exactly what we want to do. We're passing in a function to handle the logins and it's going to receive the username and password and a function named done. Done gets called as soon as we decide we've either authenticated the user or we've rejected it. In this case, we only have one user named admin. Typically you would have a database call here that we would check against, or some other place where usernames and passwords would be stored.
But in this case, we just have one username and the password is lynda. If the login is successful, we return done, along with an object with the user information. Otherwise, we pass false. There are two functions that must be defined so that the user information gets stored in the session. There are serializeUser and deserializeUser. You don't need to call either of these functions directly. Now that we have Passport configured for our uses, we can export it from this module.
Now let's add Passport as middleware to our application, so go to app.js. Just underneath where we're requiring connect-mongo, let's get Passport. Instead of requiring Passport directly, we're going to require our off module that we just defined. Next, let's use Passport as middleware in our application. Scroll down to the line just above body parser, and make some space. Next, we're going to call app.use we're going to call the initialize method on Passport right here.
This first line starts up Passport; duplicate that line. And then change initialize to session. On this line we're telling Passport to use the sessions in Express. It's possible to use Passport in such a way where you don't have a session. For instance, maybe you just need someone to log in once, and authenticate that request, but you don't really need to use sessions after that. However, in our case we want to maintain a session. So we're telling Passport to store the sessions. Now we need to add some routes.
We're going to have one route that displays a login form, and then we're going to have a second route that handles that login form. And then finally, we're going to have one more route that displays user information after someone's logged in. So let's create those three routes now. The first one is login. We'll define the handler function in a moment. Then the second route is going to be a post request to login. Instead of handling this in the routes file, we're going to handle it right here. We're going to call passport.authenticate. Authenticate takes two arguments.
The first argument is the strategy that we want to use. Then the second argument is an object. We're going to use this object to define two things, we're going to define two redirect routes. The first is going to be the failure redirect. If the login fails we want to redirect the user back to the login form. The second is a success redirect. In this case, we want to redirect the user to the user page. And now, finally, let's define the route for that user page. So now we have two route handlers that we need to define, login and user.
So now, let's go to index.js and routes. Towards the bottom of the page, let's define those two route handlers. The first handler is going to be very straightforward. We're just going to call the render method of the response object. The first argument we're passing in is login, and that's the name of the jade view that we're going to add in a moment. And then we're going to pass a title to that view. And that title is going to be Log in. The user route is going to be a little bit more sophisticated. First we want to check to make sure that the user is actually there.
We're going to test the value of the user property of Passport, which is stored in the session. So if the user is undefined, we're going to redirect the user back to the login page. However, if we do have a valid user, we want to render the user page. So to do that we're going to call the render method of the response object. We're going to call the user view and we're going to pass in a title as well as the user information. Now let's add our views.
Go back to the exercise files and open up the snippets folder. There are two jade files, one for login and one for user. Copy both of those into the views folder of the project. The log in page is a form. There are two inputs here, one for user name and one for password. By default, Passport is going to look for user name and password in the request. You can change this later but for now, I'm just going to leave it with these. And then there is a third input that's a submit button.
Next, lets have a quick look at user.jade. In this case we are just showing the title, and we're greeting the user by their username. So let's start up the server and watch this in action. Type in node server and then press return. Now go to localhost at port 3000 in the browser. I'm going to go to the /login route. I'm going to type in the username admin and the password lynda. And then I'm going to log in. And now it greets me by name. I'm going to open up a session free window, so I'm going to go to File and New Incognito Window.
And that way, we'll have a separate session for this window. So I'm going to paste in the same URL and go to user. And it redirects me. So this way, we know we have separate sessions for the separate windows. Passport provides the middleware necessary for handling website logins through HTML forms. While there are different strategies you could use, the local strategy is best for handling traditional login forms. In the next chapter, we'll have a look at command line interfaces in node.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100268 Viewers
56 Video lessons · 113238 Viewers
71 Video lessons · 82120 Viewers
131 Video lessons · 39410 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.