Just as authentication is important in APIs, it is also an important feature in certain web applications—especially 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 this tutorial, we will create a folder called site-auth. You can initialize npm in the new directory you just created. Navigate to the terminal of your directory and initialize npm by typing the code snippet below.

npm init -y 

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

We will also be installing some dependencies for this project. Install them as follows:

npm install bcryptjs
npm install connect-flash
npm install cookie-parser
npm install express
npm install express-handlebars
npm install express-messages
npm install express-session
npm install joi
npm install mongoose
npm install morgan
npm install passport
npm install passport-local

Now create a file in your working directory called app.js.

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

// app.js

const express = require('express');
const morgan = require('morgan')
const path = require('path');
const cookieParser = require('cookie-parser');
const expressHandlebars = require('express-handlebars');
const flash = require('connect-flash');
const session = require('express-session');
const mongoose = require('mongoose')
const passport = require('passport')

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.

// app.js

mongoose.Promise = global.Promise
mongoose.connect('mongodb://localhost:27017/site-auth')

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

// 1
const app = express()
app.use(morgan('dev'))

// 2
app.set('views', path.join(__dirname, 'views'))
app.engine('handlebars', expressHandlebars.engine({
    extname: '.handlebars',
    defaultLayout: 'layout',
    layoutsDir: "views/layouts/"
}));
app.set('view engine', 'handlebars')

// 3
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cookieParser())
app.use(express.static(path.join(__dirname, 'public')))
app.use(session({
  cookie: { maxAge: 60000 },
  secret: 'cookiesecret',
  saveUninitialized: false,
  resave: false
}));

app.use(passport.initialize())
app.use(passport.session())

// 4
app.use(flash())
app.use((req, res, next) => {
  res.locals.success_messages = req.flash('success')
  res.locals.error_messages = req.flash('error')
  next()
})


// 5
// catch 404 and forward to error handler
app.use((req, res, next) => {
  res.render('notFound')
});

// 6
app.listen(5000, () => console.log('Server started listening on port 5000!'))

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 express urlencoded, 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. Middleware to handle 404 errors. This middleware kicks in when a request does not map to any of the middleware created above it.
6. The server is set to listen at port 5000.

We can run the server we just created on our computer with the following command:

node app.js

You should see the message Server started listening on port 5000! if your setup was successful.

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 folder, so create the necessary files in their respective directories.

├── layouts
│   └── layout.handlebars
├── partials
│   └── navbar.handlebars
├── dashboard.handlebars
├── index.handlebars
├── login.handlebars
├── notFound.handlebars
└── register.handlebars

With the file structure done, it is time to write the code.

#views/dashboard.handlebars

<!-- Jumbotron -->
<div class="jumbotron">
  <h1>User DashBoard</h1>
</div>

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.

#views/index.handlebars

<!-- Jumbotron -->
<div class="jumbotron">
  <h1>Site Authentication!</h1>
  <p class="lead">Welcome aboard.</p>
</div>

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

#layout/layout.handlebars

<!DOCTYPE html>
<html>
  <head>
    <title>Site Authentication</title>
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
          crossorigin="anonymous">
    <link rel="stylesheet"
          href="/css/style.css">
  </head>
  <body>
    {{#if success_messages }}
      <div class="alert alert-success">{{success_messages}}</div>
    {{/if}}
    {{#if error_messages }}
      <div class="alert alert-danger">{{error_messages}}</div>
    {{/if}}
    <div class="container">
      {{> navbar}}
      {{{body}}}
    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
  </body>
</html>

You'll need a login page for registered users.

#views/login.handlebars

<form class="form-signin" action="/users/login" method="POST">
  <h2 class="form-signin-heading">Please sign in</h2>

  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>

  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>

  <br/>

  <button class="btn btn-lg btn-default btn-block" type="submit">Sign in</button>
</form>

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

#views/notFound.handlebars

<!-- Jumbotron -->
<div class="jumbotron">
  <h1>Error</h1>
</div>

Your registration page is supposed to look like this.

#views/register.handlebars

<form class="form-signin" action="/users/register" method="POST">
  <h2 class="form-signin-heading">Please sign up</h2>

  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>

  <label for="inputUsername" class="sr-only">Username</label>
  <input type="text" id="inputUsername" name="username" class="form-control" placeholder="Username" required>

  <label for="inputPassword" class="sr-only">Password</label>
  <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>

  <label for="inputConfirmPassword" class="sr-only">Confirm Password</label>
  <input type="password" id="inputConfirmPassword" name="confirmationPassword" class="form-control" placeholder="Confirm Password" required>

  <br/>

  <button class="btn btn-lg btn-default btn-block" type="submit">Sign up</button>
</form>

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

#partials/navbar.handlebars

<div class="masthead">
  <h3 class="text-muted">Site Authentication</h3>
  <nav>
    <ul class="nav nav-justified">
      <li class="active"><a href="/">Home</a></li>
      {{#if isAuthenticated}}
        <li><a href="/users/dashboard">Dashboard</a></li>
        <li><a href="/users/logout">Logout</a></li>
      {{else}}
        <li><a href="/users/register">Sign Up</a></li>
        <li><a href="/users/login">Sign In</a></li>
      {{/if}}
    </ul>
  </nav>
</div>

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.

#models/user.js

// 1
const mongoose = require('mongoose')
const Schema = mongoose.Schema
const bcrypt = require('bcryptjs')

// 2
const userSchema = new Schema({
  email: String,
  username: String,
  password: String
}, {

  // 3
  timestamps: {
    createdAt: 'createdAt',
    updatedAt: 'updatedAt'
  }
})

// 4
const User = mongoose.model('user', userSchema)
module.exports = User

1. Imports dependencies and saves them in constants.
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 constant 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.

#models/user.js

module.exports.hashPassword = async (password) => {
  try {
    const salt = await bcrypt.genSalt(10)
    return await bcrypt.hash(password, salt)
  } catch(error) {
    throw new Error('Hashing failed', error)
  }
}

You just created a method that will be called for 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.

app.use('/', require('./routes/index'))
app.use('/users', require('./routes/users'))

So your index route, which simply renders the index page, should look like this.

#routes/index.js

const express = require('express')
const router = express.Router()

router.get('/', (req, res) => {
    res.render('index')
})

module.exports = router

Signup Implementation 

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.

#routes/users.js

const express = require('express');
const router = express.Router()
const Joi = require('joi')
const passport = require('passport')

const User = require('../models/user')


//validation schema

const userSchema = Joi.object().keys({
  email: Joi.string().email().required(),
  username: Joi.string().required(),
  password: Joi.string().regex(/^[a-zA-Z0-9]{6,30}$/).required(),
  confirmationPassword: Joi.any().valid(Joi.ref('password')).required()
})

router.route('/register')
  .get((req, res) => {
    res.render('register')
  })
  .post(async (req, res, next) => {
    try {
      const result = userSchema.validate(req.body)
      if (result.error) {
        req.flash('error', 'Data entered is not valid. Please try again.')
        res.redirect('/users/register')
        return
      }

      const user = await User.findOne({ 'email': result.value.email })
      if (user) {
        req.flash('error', 'Email is already in use.')
        res.redirect('/users/register')
        return
      }

      const hash = await User.hashPassword(result.value.password)

      delete result.value.confirmationPassword
      result.value.password = hash

      const newUser = await new User(result.value)
      await newUser.save()

      req.flash('success', 'Registration successfully, go ahead and login.')
      res.redirect('/users/login')

    } catch(error) {
      next(error)
    }
  })

  module.exports = router

The regex format for the password—/^[a-zA-Z0-9]{6,30}$/—indicates that the password should contain lowercase or uppercase alphabets or numerics and the password length should be a minimum of 6 and maximum of 30 characters. 

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.

{
    email: 'maryokosun@gmail.com',
    username: 'marynoir',
    password: 'marynoir',
    confirmationPassword: 'marynoir'
}

This is validated using the userSchema you created above, and the values entered by the user are assigned to a constant 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 the 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 constant called hash.

There is no need to store the confirmationPassword in the database, so 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.

result.value.password = hash

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:

node app.js

Point your browser to https://localhost:5000 and you should see the registration page of your application.

Sign-In Implementation 

After a user has successfully registered, they would be routed to the login page. The next step would be implementing code for the sign-in feature. In the /routes/users.js file, within the validation schema, just below the userSchema, add the following code snippets for the login validation schema:

const loginSchema = Joi.object().keys({
  email: Joi.string().email().required(),
  password: Joi.string().regex(/^[a-zA-Z0-9]{6,30}$/).required()
})

In the routes section, add the following snippets just below the register route:

router.route('/login')
  .get((req, res) => {
    res.render('login')
  })
  .post(async (req, res, next) => {
  try {
    const result = loginSchema.validate(req.body)
    if (result.error) {
      req.flash('error', 'Data entered is not valid. Please try again.')
      res.redirect('/users/login')
      return
    }

    const user = await User.findOne({ 'email': result.value.email })
    if (user) {
      let passwordIsValid = bcrypt.compareSync(
        result.value.password,
        user.password
      );
      if (!passwordIsValid) {
        req.flash('error', 'Email/Password is not valid. Please try again.')
        res.redirect('/users/login')
        return
      }
      req.flash('success', 'Login successfully')
      res.redirect('/users/dashboard')
    }
  } catch (error) {
    next(error)
  }
})

The code snippet above sets up the login router. The GET request renders the login page, while the POST request handles the validation of the req.body and compares the password against the saved password in the database. If these checks are successful, the registered user can successfully log in and gets routed to the dashboard page.

Dashboard Implementation 

The dashboard implementation is quite straightforward. Add the following code snippets in the /routes.index.js file beneath the GET request for the index page.

router.get('/users/dashboard', (req, res) => {
    res.render('dashboard')
})

The code above renders the dashboard page when the GET request to /users/dashboard is made.

Conclusion

Now you know how to implement a registration and login system using Node.js in a 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.

You can find the full source code for the example used in the GitHub repository.

This post has been updated with contributions from Mary Okosun. Mary is a software developer based in Lagos, Nigeria, with expertise in Node.js, JavaScript, MySQL, and NoSQL technologies.