Site Authentication in Node.js: User Signup

Introduction

Just as authentication is important in APIs, it is also an important feature in certain web applications—those with pages and secrets that should only be accessible to registered and authenticated users.

In this tutorial, you will build a simple web application while learning how to create user registration.

Application Setup

Create a new directory where you will be working from. For the sake of this tutorial, I called mine site-auth. Initialize npm in the new directory you just created. Here is how to initialize npm.

The -y flag tells npm to use the default options.

Edit the dependencies part of your package.json file to look like what I have in mine.

With that done, run the command to install the dependencies.

Create a file in your working directory called app.js.

Start by requiring the dependencies you installed and the necessary files.

These dependencies were installed when you ran npm install. To use them in your application, you have to require them and save them in their respective variables.

For this tutorial, you will be using MongoDB as your database. You will need to store user information in the database. To work with MongoDB, you will make use of Mongoose—a MongoDB modelling tool for Node.js. Setting up Mongoose is easy, like this.

At this point, let’s set up our middleware.

  1. Express is initialized and assigned to app.
  2. Middleware to handle views is set up. For the views, you’ll be making use of handlebars.
  3. You set up middleware for bodyparser, cookie, session, and passport. Passport will be used when users want to log in.
  4. At some points, you will be displaying flash messages. Thus you need to set up middleware for that, and also create the type of flash messages you want.
  5. Routes middleware—this will handle any request made to a URL path. The URL paths specified here are for the index and users path.
  6. Middleware to handle 404 errors. This middleware kicks in when a request does not map to any of the middleware created above it.
  7. The server is set to listen at port 5000.

Views Setup

Create a new directory called views. Inside the views directory, create two other directories called layouts and partials. You want to achieve a tree structure like this in your views, so create the necessary files in their respective directories.

With that done, time to drop the code.

This is a dashboard that should be visible to only registered users. For this tutorial, it will be your secret page.

Now the index page for the application should look like this.

The application needs a layout that will be used, and here is that layout you will be using.

You’ll need a login page for registered users.

The notFound.handlebars file will be used as your error page.

Your registration page is supposed to look like this.

Finally for your views, here’s your navigation bar.

With that done, you are good to go into some deep parts.

Data Validation

You’ll need a User model. From the views code above, you can deduce that the properties needed for the User model are email, username, and password. Create a directory called models, and a file in it called user.js.

  1. Imports dependencies and saves them in variables.
  2. A new Schema is created. For each user, you want to save the email, username, and password to the database. The Schema shows how the model is to be constructed for each document. Here you want the email, username, and password to be of the String type.
  3. For each user saved to the database, you also want to create timestamps. You utilize Mongoose to obtain the createdAt and updatedAt, and this is then saved to the database.
  4. The model is defined and assigned to a variable called User, which is then exported as a module so it can be used in other parts of the application.

Salting and Hashing of the Password

You do not want to store users’ passwords as plain text. Here’s what you want to do when a user enters a plain text password while registering. The plain text password should be hashed using a salt that will be generated by your application (using bcryptjs). This hashed password is then stored in the database. 

Sounds great, right? Let’s implement that in the user.js file.

You just created a method that will be called in events of user registration. The method will receive the plain text password the user entered. As I mentioned earlier, the plain text password will be hashed using a generated salt. The hashed password will be returned as the password for the user.

Index and Users Routes 

Create a new directory called routes. In this new directory, create two new files: index.js and users.js.

The index.js file will be very simple. It will map to the index of your application. Remember you set up middleware for your routes in your app.js file when you did this.

So your index routes, which simply render the index page, should look like this.

Now to the users route. For now, this route file will be doing four things.

  1. Require dependencies. You will need to require the dependencies you installed using NPM.
  2. Validate user inputs. You want to make sure that the user does not submit an empty form. All inputs are required, and all must be of the type String. The email has a special validation called .email() which ensures that what is entered matches the email format, while the password is validated using a regular expression. For the confirmation password, you want it to be the same as the password entered. These validations are done using Joi.
  3. Set up your router. The get request renders the registration page, while the POST request kicks in when the user hits the button to submit the form.
  4. The router gets exported as a module.

Here is what the code looks like.

Let’s look deeper into what is happening in that POST request.

The values entered in the registration form are accessible via req.body, and the values look like this.

This is validated using the userSchema you created above, and the values entered by the user are assigned to a variable called result.

If an error is encountered because of the validation, an error message is displayed to the user and a redirection to the registration page takes place.

Otherwise, we try to find if a user with the same email address exists, as you do not want to have two or more users with same email address. If a user is found, the user is told that the email address is already in use.

In a scenario where no registered user has that email address, the next step is to hash the password. This is where you call the hashPassword method you created in your user.js file. The new hashed password is assigned to a variable called hash.

There is no need to store the confirmationPassword in the database. Thus this is deleted. The password available from result is still the plain password. Since you do not want to store the plain password in your database, it is important to reassign the password value to the hash that was created. This is done with a line of code.

The new user instance gets saved to the database. A flash message stating that the registration was successful is displayed, and the user is redirected to the login page.

Start up your server from your terminal by running:

Point your browser to http://localhost:5000 and you should see your new app.

Conclusion

Now you know how to implement the registration feature in a Node web application. You have learned the importance of validating user input and how to do that using Joi. You also made use of bcryptjs to salt and hash your password.

Next, you’ll see how to implement a login feature for registered users. I trust you enjoyed yourself!


Source: Nettuts Web Development