Challenge: Build an Authentication System with Node.js

Welcome to the Challenge: Build an Authentication System with Node.js Lab

Throughout this lab, you will implement login, register, and logout functionality in an existing application for storing recipes. This will require adding authentication and authorization to the Node.js server. You will use the express-session package to implement session based authentication and bcrypt to store passwords. You will write a callback to use with Node.js express routes to facilitate authorizing a user by reviewing that they are logged in to process the request.

This lab provides a hands-on environment to help you practice the concepts learned in the Node.js: Authentication and Authorization course.

You are encouraged to reference the course if you have any questions regarding the concepts covered in this lab. Information necessary to complete the lab will be given at a high level.

A basic understanding of Node.js, Express, and routes using these technologies will be useful to complete this lab, but it is not necessary. Specific knowledge required to complete this lab will be provided. This application's database is MongoDB, and the application uses mongoose. Being familiar with these technologies may help you understand additional contexts in the server. The frontend is a React application if you feel like you want to look at the client code at any point in this lab.

Start the Recipe Application

To start, you have been given a recipe application created in a MERN (MongoDB, Express, React, Node.js) stack. You can create, read, update, and delete recipes using this application. The database has been seeding with recipes and users. Start the application by starting the client in one terminal and starting the server in another terminal. In one terminal, start the client by following the directions below:

1. Change directories to the client directory.
   • Run cd client.
2. Run npm run start to start the client.

In another terminal, start the server by following the directions below:

1. Change directories to the server directory.
   • Run cd server.
2. Run npm run dev to start the server.

Once the client and server are running, the application can be seen in the Web Browser tab if you visit http://localhost:3000. Take some time to start and visit the application.

When the application has been started, you will see the photo below. Once you implement the register and login route, you will be able to login to the application and see the recipe list.

--- ## Helpful Tips While Completing This Lab

There is a solution directory that you can refer to if you are stuck or want to check your implementations at any time. Keep in mind that the solution provided in this directory is not the only solution, so it is acceptable for you to have a different solution so long as the application functions as intended.

All dependencies you will need to complete this lab have already been installed for you using Node Package Manager, npm. If you are curious about what these dependencies are, feel free to look at the package.json file in the server directory. You will learn about these dependencies throughout the lab as well.

Just a reminder, you can stop running any foreground process in the Terminal with the command, Ctrl C.

Authentication Versus Authorization

In very simple terms, authentication is about proving who you are. It’s like when you show your ID to someone to prove you’re you. On a website or application, this usually means logging in with a username and password.

Authorization is about what you are allowed to do. Once you're proven to be you (authenticated), authorization decides what you're allowed to access or do—like which files you can view or which features you can use. This can also include needing to be logged into make certain requests to the server,

Authentication is the "Who are you?" part, and authorization is the "What can you do?" part. In this step, you will be learning more about authentication (specifically session-based authentication) and how authentication is implemented on a Node.js server.

Overview of Session-based Authentication

In the related course's Session-based Auth module, you will have learned about what session-based authentication is. Session-based authentication is a process that allows the client to prove its identity (with a username and password that matches what is in the servers database for example), allows a server to create data to validate the successful verification, and creates a cookie that can be passed from the client to the server to find the validating data that a session exists.

The benefits of a session include a user not having to login again before every protected action. With a session, a client can send a cookie to the server in order to communicate without reauthenticating.

Setup Express Session Middleware

Similar to what is done in the related course's Session-based Auth module, you will add session-based middleware to the recipe application.

To accomplish the above, do the tasks below.

Useful Session Cookie Options

You learned about changing the cookie session name and controlling the cookie's expiration in the related course's "Other Useful Session Cookie Options" module. You will configure the session in this application to use these two additional options in this lab. Other options included in the corresponding course included: store, secure, and httpOnly. For the sake of this lab, you are okay to use whatever the default value for these are and not include them in your configuration.

Follow the tasks below to customize your cookie configuration.

Create/Update User Sessions

In the related course's "Storing an Authenticated User" module you learned about session's regenerate method. The regenerate method can be used to generate a session once the session options are configured which was done in the previous step of this lab.

In this step, you will implement the createUserSession helper method that will be used in the /login and /register routes to create and regenerate a session ID and cookie.

Register a New User Route

In the related course's "Creating a User Registration" module you saw an example of a user registration route. In this step, you will create one that is very similar.

Start by removing the return res.status(501); line of code at the bottom of the try block in server/server.js's POST /register route.

You may also want to remove the comment above it. but leaving the comment will not affect any future tasks from being completed.

Follow the tasks below when you are ready. Now, if you look at Web Browser at http://localhost:3000, you should be able to register a new user and see the recipes list.

However, you will not be able to view a single recipe or create, edit, and delete recipes until a future step.

In addition to this, a page is accessible to you on the application whether or not you are logged in that has a table of all active sessions. You can click on the Active Sessions button in the navigation bar at any time to examine session and cookie data.

Lastly, you can preview cookie date in Developer Tools as well. Instructions for how this can be done will be given in a future step. For now, you can use the Active Sessions page.

User Login Route

In the related course's "Creating a Login Route to Authenticate a Registered User" module you saw an example of a user login route. In this step, you will create one that is very similar. To avoid redundancy in the lab, you have already been provided with variables that contain the user login information off of the request body. The data validation on these variables has already been provided for you as well in server/server.js's POST /login route.

Start by removing the return res.status(501); line of code at the bottom of the try block in server/server.js's POST /login route.

Feel free to remove the comment above this line as it no longer is relevant as well.

Finish implementing the logic by following the tasks below. Visit http://localhost:3000 in the Web Browser. After this step, you should be able to login as a user and see the recipes list. You may notice the Login button in the navigation bar now says Logout. However, if you were to click it you will not be logged out as you have not yet implemented the logout route.

If you would like to logout, remember that your cookie will time out after a minute because of the max age you set in the session configuration. You can either wait for the to happen to logout at this time or you can remove the cookie using Developer Tools. Open Developer Tools and go to the "Application" tab. Under Storage -> Cookies, you will see the recipe-app-demo cookie. If you remember, this is what we configured our session name to be in an earlier step. Right click on this cookie and click remove to be logged out.

Implement Route Authorization on the Server

In the related course's "Using a Session to Request a Protected Resource" module you learn about how to authorize a route. The authorization required in the course (and all that will be required in this lab) is just that a user must be logged in to see such resource.

You will write route level middleware, the authorizeRoute method, and use it on the GET /recipes route. This middleware is already being required by the other recipe routes.

Once completed, a user will have to be logged in (meaning the session on the request will have to have a user).

For now, experiment in the other Web Browser tab that you have not been using and visit http://localhost:3030/recipes. You should see something like the picture below:

The route currently responds with all recipes in the database regardless of whether or not a user is logged in. When you are finished with this step and visit the URL above while logged out, you will see the picture below:

Start by removing the return res.status(501); line of code and the comment above it in server/server.js's authorizeRoute helper method.

Next, follow the tasks below! Now, when you visit http://localhost:3030/recipes, you will see the picture below when you are not logged in on the client.

You can also now access the create, update, and delete recipe routes and the view a single recipe route from the client. These routes were already using authorizeRoute as middleware, and authorizeRoute was responding with a Not Implemented status code up until the completion of this step.

At this time, you are welcome to play in the application at http://localhost:3000 and see all the actions you are able to do while logged in.

User Logout Route

In the related course's "Destroying a Session with a Logout" module you learn about how to destroy a session. In the recipe application, there is a GET /logout route that has not been implemented. In this step, you will be responsible for logging a user out and destroying their session when no errors are encountered.

Start by removing the return res.status(501); line of code and the comment above it at the bottom of the try block in server/server.js's GET /logout route.

Follow the task below to finish this step. Now you should be able to click the logout button and logout of the recipe application.

This will remove the user cookie and you can verify that by looking at Developer Tools -> Application -> Storage -> Cookies or by visiting the application's Active Sessions page.

Conclusion

Congratulations on completing all of the steps of this challenge lab! You now have the skills to implement user authentication and authorization on a Node.js server. You also have a deep understanding of sessions and authentication that can be transfered to various other stacks.

The Node.js: Authentication and Authorization course covers an additional authentication options, OAuth. Due to the bounds of this environment, you will be unable to implement OAuth here. However, follow long the course in an environment of your own making to incorporate OAuth.