Building a JavaScript Auth system using TDD (part 2)
Tags: javascript, node, authentication, tdd
Published: 2018-10-23 16:47:50

---
title: Building a JavaScript Auth system using TDD (part 2)
published: true
description: Step by step guide to build a reusable authentication system following TDD
tags: javascript, node.js, authentication, tdd
---

<p>This is the second part of this series about building a JavaScript authentication system using TDD. In&nbsp;<a href="https://antonioufano.com/articles/building-a-javascript-jwt-auth-system-using-tdd-part-1-13" title="first part of the article" target="_blank">the first part</a>&nbsp;we created an Express app that exposed two endpoints for registering new users (with some validations) and login in. As we didn't sore the user details in a database, we were not able to implement a proper login validation so that's what we'll do in this article. Let's go!</p><h3>Store user details in MongoDB</h3><p>First thing to do is to obtain the connection details to a Mongo database. You can install it locally or you can use a <a href="https://www.mongodb.com/cloud/atlas" title="Mongo Atlas" target="_blank">Mongo Atlas instance</a>. With either of those options we'll just need the host, database, username and password. In my case I have MongDB installed in my PC so my host and database are "127.0.0.1:27017/authSys" (I created the database with the Mongo CLI).&nbsp; To keep all these details in the same place, let's create a config folder with a <em>local.js</em> file in it. In this file we'll export an object with the database connection details.&nbsp;</p><pre><code class="language-javascript">/**
 * config/local.js
 * exports an object with configuration params
 */

module.exports = {
  APP_PORT: "1337",
  DB_HOST: "YOUR_MONGO_HOST/DATABASE",
  DB_USER: "MONGO_USER",
  DB_PASS: "MONGO_PASS",
  JWT_KEY: "thisIsMyJwtKeyUsedToEncodeTheTokens"
}</code></pre><p>As you can see, I've also included the JWT key we configured in the first part of this article, which was hardcoded in our<em style="font-size: 1rem;">app.js</em> file. Now in our <em>app.js </em>let's remove the the hardcoded JWT_KEY and load all our environment variables from the config file:</p><pre><code class="language-javascript">/**
 * app.js
 * exports an Express app as a function
 */

..................

//load ENV Variables from config file
const config = require('./config/local');
process.env.APP_PORT = config.APP_PORT;
process.env.DB_HOST = config.DB_HOST;
process.env.DB_USER = config.DB_USER;
process.env.DB_PASS = config.DB_PASS
process.env.JWT_KEY = config.JWT_KEY;
...................</code></pre><p>Before changing anything else, let's run our tests to make sure that this change hasn't cause any damage :)</p><p style="text-align: center;"><img src="http://www.antonioufano.com/image_uploads/Part2_test1OK.png" alt="Original tests pass ok"><br></p><p>Our app will interact with the database using the <strong>mongoose</strong> module and we'll use the <strong>bcrypt</strong> module to encrypt the user password before saving it. We can install both via NPM running <em style="font-size: 1rem;"><span style="font-weight: bolder;">npm install mongoose bcrypt.</span></em></p><p>Next we have to import the mongoose module in our <em style="font-size: 1rem;">app.js</em> and pass the connection details to the <em style="font-size: 1rem;">connect() </em> method, which returns a promise. In our case, we'll just log a console message to inform if the connection was successful or if it failed. If so, we'll stop our app.</p><pre><code class="language-javascript">/**
 * app.js
 * exports an Express app as a function
 */

..................

//interact with MongoDB
const mongoose = require('mongoose');
//compose connection details
let dbConn = "mongodb://" + process.env.DB_USER + ":" + process.env.DB_PASS + "@" + process.env.DB_HOST;
//connect to the database
mongoose.connect(dbConn, {useNewUrlParser: true}).then( () =&gt; {
  console.log('Connected to the database');
}).catch( err =&gt; {
  console.log('Error connecting to the database: ' + err);
  process.exit();
})
...................</code></pre><p>Now if we start our app with <strong>node app.js</strong> (or npm start if we've added it to our package.json file) we'll see our app connects to the database:</p><p style="text-align: center;"><img src="http://www.antonioufano.com/image_uploads/app_connected.png" alt="app connects to the database"><br></p><p style="text-align: left;">To make sure our user details are stored in the database, let's modify the 'User registration' test we created in the first part of the article and expect to receive the user details, which will contain the id and the date it was created:</p><pre><code class="language-javascript">  it('/register should return 201 and confirmation for valid input', (done) =&gt; {
    //mock valid user input
    let user_input = {
      "name": "John Wick",
      "email": "john@wick.com",
      "password": "secret"
    }
    //send /POST request to /register
    chai.request(app).post('/register').send(user_input).then(res =&gt; {
      //validate
      expect(res).to.have.status(201);
      expect(res.body.message).to.be.equal('User registered');
      
      //new validations to confirm user is saved in database
      expect(res.body.user._id).to.exist;
      expect(res.body.user.createdAt).to.exist;

      //done after all assertions pass
      done();
    }).catch(err =&gt; {
      console.log(err);
    });
  })</code></pre><p style="text-align: left;">Now that we've added new validations, our test fail so let's fix it. In order to store the user details in our database we have to define a schema and a model which will detail the different attributes our user will have. In our case it will be the name, email and password, as these are the ones we'll send from our test, and in addition we'll save an id that will help us uniquely identify the user, and the date is was created and updated. The mongoose module we just installed contains the functions we need to define both the schema and the model. Create a new file <em>user.js</em> inside the <em>api </em>folder with the following code:</p><pre><code class="language-javascript">/**
 * api/user.js
 * Defines the User Schema and exports a mongoose Model
 */

const mongoose = require('mongoose');
const userSchema = mongoose.Schema({
  _id: mongoose.Schema.Types.ObjectId,
  name: {type: String, required: true},
  email: {type: String, required: true, unique: true},
  password: {type: String, required: true}

}, 
{
  timestamps: true
});

module.exports = mongoose.model('User', userSchema, 'users');</code></pre><p>Notice that we have to define the type of field (strings and an ObjectId) and that we can also define if it's required or unique. You can find more information about that in the <a href="https://mongoosejs.com/docs/guide.html" title="Mongoose Schema documentation" target="_blank">mongoose schema documentation</a>.</p><p>In the first part we included a validation to make sure that all expected fields are being received and if that was ok, we returned a 201 code and a message 'User created'. Now we're going to save the user details in a User model, send it to our database and, <strong>only if it's correctly saved,</strong> we'll send the response.&nbsp;</p><p>We'll have to import the mongoose module and the model we just created in our&nbsp;<em>routes.js</em>. Then use the <em>new User() </em>constructor and assign to the user's attributes the fields we've received in our request body. Then we'll use the <em>save() </em>method to store it in the database. This methods returns a Promise so if it's resolved, we'll send our response (including the user we've just created), and if it's rejected, we'll send the error details back. Our complete register route would look like this:<br></p><pre><code class="language-javascript">
/**
 * /api/routes.js
 * exports an express router.
 */ 

..............................

//database
const mongoose = require('mongoose');
//import User
const User = require('./user');

router.post('/register', (req, res, next) =&gt; {
  let hasErrors = false ;
  let errors = [];
  
  if(!req.body.name){
  //validate name presence in the request
    errors.push({'name': 'Name not received'})
    hasErrors = true;
  }
  if(!req.body.email){
    //validate email presence in the request
    errors.push({'email': 'Email not received'})
    hasErrors = true;
  }
  if(!req.body.password){
    //validate password presence in the request
    errors.push({'password': 'Password not received'})
    hasErrors = true;
  }

  if(hasErrors){
    //if there is any missing field
    res.status(401).json({
      message: "Invalid input",
      errors: errors
    });

  }else{
  //if all fields are present
    //create the user with the model
    const new_user = new User({
      //assign request fields to the user attributes
      _id : mongoose.Types.ObjectId(),
      name: req.body.name,
      email: req.body.email,
      password: req.body.password
    });
    //save in the database
    new_user.save().then(saved_user =&gt; {
    //return 201, message and user details
      res.status(201).json({
        message: 'User registered',
        user: saved_user,
        errors: errors
      });
    }).catch(err =&gt; {
    //failed to save in database
      errors.push(new Error({
        db: err.message
      }))
      res.status(500).json(errors);
    })
  }

});</code></pre><p>Now the assertions we added to our User registration test will pass.... once. If we run our tests multiple times, we'll try to store the same user each time and, as in our model we defined the email as unique, it'll throw an error if we try to store again. To avoid this happening we can just delete all users from our table before running our test suite. We can just add a <em>before()&nbsp;</em>&nbsp;block at the beginning of our <em>test.js</em> and use the <em>deleteMany()</em> function of our User model:</p><pre><code class="language-javascript">  /**
 * test/test.js
 * All endpoint tests for the auth API
 */


...................

//import User model
const User = require('../api/user')


describe('App basic tests', () =&gt; {
  
  before( (done) =&gt; {
    //delete all users 
    User.find().deleteMany().then( res =&gt; {
      console.log('Users removed');
      done();
    }).catch(err =&gt; {
      console.log(err.message);
    });
  });

  ................

}</code></pre><p>Another option is to delete our users after the tests. We can do it at the end in an <em>after() </em>block. In any case, now we can run our tests as many times as we want.&nbsp;</p><h3>Encrypting the password</h3><p>We should always encrypt our user's passwords so in case someone access our database, they will not be able to use the details to login into our system. We can easily encrypt the passwords using the bcrypt module, which we can install with <strong>npm install bcrypt</strong>. A good test we can do to make sure we're encrypting the password is to check that the password we sent to our back end is not the same to the one we receive. Let's go ahead and add this assertion to our 'User registration' test:</p><pre><code class="language-javascript">/**
 * test/test.js
 * All endpoint tests for the auth API
 */

....................

it('/register should return 201 and confirmation for valid input', (done) =&gt; {
    //mock valid user input
    let user_input = {
      "name": "John Wick",
      "email": "john@wick.com",
      "password": "secret"
    }
    //send /POST request to /register
    chai.request(app).post('/register').send(user_input).then(res =&gt; {
      //validate
      expect(res).to.have.status(201);
      expect(res.body.message).to.be.equal('User registered');
      console.log(res.body.user);
      //new validations to confirm user is saved in database
      expect(res.body.user._id).to.exist;
      expect(res.body.user.createdAt).to.exist;
      //validation to confirm password is encrypted
      expect(res.body.user.password).to.not.be.eql(user_input.password);

      //done after all assertions pass
      done();
    }).catch(err =&gt; {
      console.log(err);
    });
  })</code></pre><p>If we run our test now, it will fail with the message "<em>AssertionError: expected 'secret' to not deeply equal 'secret'</em>". Let's go ahead and fix this in our <em>routes.js</em> file. First we need to import the bcrypt module and then we need to use the <em>hash()</em> function before we store the details of the user in the database. As detailed in the <a href="https://www.npmjs.com/package/bcrypt" title="bcrypt documentation" target="_blank">bcrypt documentation</a>, there are a couple different ways to hash our password. I'll use the second one which receives the password we want to hash and the number of salt rounds (I'll use 10). Then it returns the hashed password or an error in a callback function. If there are no errors, we'll just have to assign the hashed password to our User model and save it in our database as we did before. It will look like this:</p><pre><code class="language-javascript">/**
 * /api/routes.js
 * exports an express router.
 */ 

.........................

//to encrypt
const bcrypt = require('bcrypt');


..................
 if(hasErrors){
    //if there is any missing field
    res.status(401).json({
      message: "Invalid input",
      errors: errors
    });

  }else{
  //if all fields are present
    //encrypt user password
    bcrypt.hash(req.body.password, 10, (err, hashed_password) =&gt; {
      if(err){
        //error hashing the password
        errors.push({
          hash: err.message
        });
        return res.status(500).json(errors);
      }else{
        //if password is hashed
        //create the user with the model
        const new_user = new User({
          //assign request fields to the user attributes
          _id : mongoose.Types.ObjectId(),
          name: req.body.name,
          email: req.body.email,
          password: hashed_password
        });
        //save in the database
        new_user.save().then(saved_user =&gt; {
        //return 201, message and user details
          res.status(201).json({
            message: 'User registered',
            user: saved_user,
            errors: errors
          });
        }).catch(err =&gt; {
        //failed to save in database
          errors.push(new Error({
            db: err.message
          }))
          res.status(500).json(errors);
        })
      }
    });
  }</code></pre><p>If we run our test now, we'd be back to green :)</p><h3>Validating email and password in login</h3><p>Now that we're storing our user's details in the database, we can properly validate them. In the first part of this article our login route was just checking if the email and password were hardcoded values (req.body.email == 'john@wick.com' &amp;&amp; req.body.password == 'secret') but now we can check if the provided details matches with any of the records in our database. In addition, as we're storing the password encrypted, we'll have to use the bcrypt module again to confirm if the provided password matches with the one received in our requests. Our response will be the same so in this case, we'll not need to modify our test:</p><pre><code class="language-javascript"> it('should return 200 and token for valid credentials', (done) =&gt; {
    //mock invalid user input
    const valid_input = {
      "email": "john@wick.com",
      "password": "secret"
    }
    //send request to the app
    chai.request(app).post('/login')
      .send(valid_input)
        .then((res) =&gt; {
          //assertions
          expect(res).to.have.status(200);
          expect(res.body.token).to.exist;
          expect(res.body.message).to.be.equal("Auth OK");
          expect(res.body.errors.length).to.be.equal(0);
          done();
        }).catch(err =&gt; {
          console.log(err.message);
        })
  });</code></pre><p>In the login route of our <em>routes.js</em> file first thing we'll do is to try to find a user with the same email to the one we're received in the request body using the <em>findOne()</em> method of our User model. This method receives an object with the field we're searching for and the value (<em>{'email': req.body.email}</em>). If we find it, we'll use the <em style="font-size: 1rem;">bcrypt.compare()</em> method to validate if the password matches and, if it's valid we'll send the same response we're sending before, which includes a 200 message, an 'Auth OK' message and a token. Our login route would be like this:</p><pre><code class="language-javascript">/**
 * /api/routes.js
 * exports an express router.
 */ 

...................

router.post('/login', (req, res, next) =&gt; {
  let hasErrors = false ;
  let errors = [];

  //validate presence of email and password
  if(!req.body.email){
    errors.push({'email': 'Email not received'})
    hasErrors = true;
  }
  if(!req.body.password){
    errors.push({'password': 'Password not received'})
    hasErrors = true;
  }

  if(hasErrors){
  //return error code an info
    res.status(422).json({
      message: "Invalid input",
      errors: errors
    });

  }else{
  //check if credentials are valid
    //try to find user in database by email
    User.findOne({'email': req.body.email}).then((found_user, err) =&gt; {
      if(!found_user){
        //return error, user is not registered
        res.status(401).json({
          message: "Auth error, email not found"
        });
      }else{
        //validate password
        bcrypt.compare(req.body.password, found_user.password, (err, isValid) =&gt; {
          if(err){
            //if compare method fails, return error
            res.status(500).json({
              message: err.message
            }) 
          }
          if(!isValid){
            //return error, incorrect password
            res.status(401).json({
              message: "Auth error"
            }) 
          }else{
            //generate JWT token. jwt.sing() receives payload, key and opts.
            const token = jwt.sign(
              {
                email: req.body.email, 
              }, 
              process.env.JWT_KEY, 
              {
                expiresIn: "1h"
              }
            );
            //validation OK
            res.status(200).json({
              message: 'Auth OK',
              token: token,
              errors: errors
            })
          }
        });
      }
    });
  
  }
});</code></pre><p>Now that we're able to properly store our users data and log in, let's use the token we receive upon login to access a protected route.</p><h3>Using JWT to access protected routes</h3><p>As usual, first thing we'll do is to define a new test. As this test will target a new endpoint, I'll create a new <em>describe()</em> block. We want to access the endpoint '<em>/protected</em>' sending a valid token and we expect to receive a 200 code, a welcome message that includes the user's name, and the user's email. In order to get a valid token we'd need to login with valid credentials so our test will have two requests: the login and the protected:</p><pre><code class="language-javascript">/**
 * test/test.js
 * All endpoint tests for the auth API
 */

...................
describe('Protected route', () =&gt; {

  it('should return 200 and user details if valid token provided', (done) =&gt; {
    //mock login to get token
    const valid_input = {
      "email": "john@wick.com",
      "password": "secret"
    }
    //send login request to the app to receive token
    chai.request(app).post('/login')
      .send(valid_input)
        .then((login_response) =&gt; {
          //add token to next request Authorization headers as Bearer adw3R£$4wF43F3waf4G34fwf3wc232!w1C"3F3VR
          const token = 'Bearer ' + login_response.body.token;
          chai.request(app).get('/protected')
            .set('Authorization', token)
            .then(protected_response =&gt; {
              //assertions
              expect(protected_response).to.have.status(200);
              expect(protected_response.body.message).to.be.equal('Welcome, your email is john@wick.com ');
              expect(protected_response.body.user.email).to.exist;
              expect(protected_response.body.errors.length).to.be.equal(0);

              done();
            }).catch(err =&gt; {
              console.log(err.message);
            });
        }).catch(err =&gt; {
          console.log(err.message);
        });
  })

  after((done) =&gt; {
    //stop app server
    console.log('All tests completed, stopping server....')
    process.exit();
    done();
  });

});

</code></pre><p>The request to the <em>/login</em> endpoint is similar to the one we send in the login test but the one we send to the <em>/protected</em> endpoint is a little different. We're adding our token in the&nbsp; '<em>Authorization</em>' header using the <em>set()</em> method and adding '<em>Bearer </em>' to it to identify the type of authentication. As usual, this test will now fail with a 404 error as the <em>/protected</em> endpoint is not defined yet. Lets fix that.</p><p>Back to our <em>routes.js</em> let's add our <em>/protected</em> route and return just a basic response:</p><pre><code class="language-javascript">/**
 * /api/routes.js
 * exports an express router.
 */ 

.......................

router.get('/protected', (req, res, next)=&gt; {
  res.status(200).json({
    message: 'Welcome!',
    errors: [],
  })
})</code></pre><p>Obviously this is not checking if the token is valid so we could add that validation here but, thinking long term and, if we want to reuse this code in other projects, extracting the token validation to another file, a middleware, will be a better idea. Express middlewares are functions with access to the <em>request</em> and <em>response</em> objects and <em>next</em> function, which triggers the following middleware or function. You can read more about them in <a href="https://expressjs.com/en/guide/writing-middleware.html" title="Express middleware documentation" target="_blank">the express documentation</a>. In our middleware we'll validate our token using the <em>verify()</em> function from jsonwebtoken and, if it's not valid we'll return an error but if it's valid we'll trigger the next function.&nbsp;</p><pre><code class="language-javascript">/**
 * /api/middleware/check-auth.js
 * Exports an arrow funtion used as middleware by the express app.
 * Validates presence of a valid auth token in request header
 */
const jwt = require('jsonwebtoken');

module.exports = (req, res, next) =&gt; {
  try{
    //get the token from header. Remove 'Bearer ' with split()[].
    const token = req.headers.authorization.split(" ")[1];
    //verify method verifies and decodes the token
    const decoded = jwt.verify(token, process.env.JWT_KEY)
    //add userData from the JWT to the request
    req.userData = decoded;
    next();
  }catch(err){
    res.status(401).json({
      message: 'Auth failed',
    });
  }

}</code></pre><p>This way we can attach this middleware to multiple routes in our app. For now, let's just add it to our protected route:</p><pre><code class="language-javascript">/**
 * /api/routes.js
 * exports an express router.
 */ 

.......................

//import check-auth middleware
const checkAuth = require('./middleware/check-auth');

router.get('/protected', checkAuth, (req, res, next)=&gt; {
  res.status(200).json({
    message: 'Welcome, your email is ' + req.userData.email,
    user: req.userData,
    errors: [],
  })
})</code></pre><p>And now our test should pass.</p><h3>Conclusion</h3><p>I hope this article helps you understand how to use the mongoose module to define schemas and store the data in our database, use the bcrypt module to encrypt passwords and validate them upon login, and how to create Express middlewares to separate the logic of our back end as I've done with the one to check the JWT. All of this while using a TDD approach to make sure that if any change in our code breaks an existing tests, we can easily identify it and fix it.&nbsp;</p><p>This is just a basic authentication system that could be improved with many more validations or even change the project structure to include a controller so our routes files is simplified. I leave those improvements to you. Remember that you can find all the code of this article in the <a href="https://gitlab.com/uF4No/authsysjs/tree/article-part-2" title="code in GitLab" target="_blank">following repo</a>.</p>
<p>This article was originally posted in <a href="https://antonioufano.com/articles/building-a-javascript-jwt-auth-system-using-tdd-part-2-31" target="_blank">my website</a>. Feel free to pay me a visit and give me some feedback in the <a href="http://antonioufano.com/contact" target="_blank">contact</a> section.</p>
<p>Happy coding!</p><br>