CSCI 421 - Lecture 8

Instructor's Class Notes

• Chapter 11 (Part 4:11) - Authenticating Users, Managing Sessions and Securing APIs
1. Adding authentication to the REST API - Authentication is the feature and facility that provides user registration, user login and REST API endpoint security. The basis of user authentication starts with the users model in MongoDB:
1. users.js - This file must exist in the models directory of your app_api with the content of the file as follows:

   
   var mongoose = require( 'mongoose' );
   mongoose.set('useNewUrlParser', true);    // Included to avoid warnings
   mongoose.set('useFindAndModify', false);  // Included to avoid warnings
   mongoose.set('useCreateIndex', true);     // Included to avoid warnings
   var crypto = require('crypto');
   var jwt = require('jsonwebtoken');
   
   // Users Schema
   var userSchema = new mongoose.Schema({
     email: {
       type: String,
       unique: true,
       required: true
     },
     name: {
       type: String,
       required: true
     },
     hash: String,
     salt: String
   });
   
   // Methods for Users Schema
   userSchema.methods.setPassword = function(password){
     this.salt = crypto.randomBytes(16).toString('hex');
     //this.hash = crypto.pbkdf2Sync(password, this.salt, 1000, 64).toString('hex');  // From the book - obsolete
     this.hash = crypto.pbkdf2Sync(password, this.salt, 10000, 64, 'sha512').toString('base64');  
   };
   
   userSchema.methods.validPassword = function(password) {
     //var hash = crypto.pbkdf2Sync(password, this.salt, 1000, 64).toString('hex');  // From the book - obsolete
     var hash = crypto.pbkdf2Sync(password, this.salt, 10000, 64, 'sha512').toString('base64');    
     return this.hash === hash;
   };
   
   userSchema.methods.generateJwt = function() {
     var expiry = new Date();
     expiry.setDate(expiry.getDate() + 7);
   
     return jwt.sign({
       _id: this._id,
       email: this.email,
       name: this.name,
       exp: parseInt(expiry.getTime() / 1000),
     }, process.env.JWT_SECRET); // DO NOT KEEP YOUR SECRET IN THE CODE!
   };
   
   mongoose.model('User', userSchema);

   
   Notes:
   • See how the setPassword function is passed in the password and that is used to generate the salt and hash variables using the crypto API.
   • The generated salt and hash variables are stored in the MongoDB along with the user's email address and name. The password is NEVER stored in the clear.
   • The validPassword function is used to check if the supplied password generates the same hash as the one that was stored in the database using the previously generated salt.
   • The book's code for generating the hash is now obsolete and instead the addtiional 'sha512' parameter is needed and 'base64' to be used for the toString method call.
   • Note the use of process.env in the last generateJwt method. This secret code is used to generate the token and should be stored as an environment variable in the .env file of the apps main folder and not in your code.
2. Update db.js - Add the new users model to the db.js file also found in the models directory of the app_api.
3. JSON Web Token - Before the updated data model will work properly, the JSON Web Token module must be installed, as so:

   
   $ npm install jsonwebtoken --save

4. .env file - You must author the .env file, if you haven't already, and place it in the root of your application. The file is where you store your JSON Web Token secret, in the following format:

   JWT_SECRET=secret

   where you replace the word secret with your own secret code.
5. Dotenv module - In order to store the secret code for generating a token in the environment or more specfically, in the .env file of the app, you must install the dotenv module as so:

   
   $ npm install dotenv --save

6. Creating an Authentication API with Passport - It is rather straightforward to add /register and /login endpoints using the passport module. In order to begin, first install the passport module via the following:

   
   $ npm install passport --save
   $ npm install passport-local --save

   
   Once installed, this allows for a new file, placed in a new config directory of app_api, and name that file passport.js and include in the file the following:

   
   // passport.js
   var passport = require('passport');
   var LocalStrategy = require('passport-local').Strategy;
   var mongoose = require('mongoose');
   var User = mongoose.model('User');
   
   passport.use(new LocalStrategy({
       usernameField: 'email'
     },
     function(username, password, done) {
       User.findOne({ email: username }, function (err, user) {
         if (err) { return done(err); }
         if (!user) {
           return done(null, false, {
             message: 'Incorrect username.'
           });
         }
         if (!user.validPassword(password)) {
           return done(null, false, {
             message: 'Incorrect password.'
           });
         }
         return done(null, user);
       });
     }
   ));

   
   Also, the main app.js file must be updated to include passport and require the strategy by including the addtional bold statements (note the load of dotenv at the top of the file):

   
   require('dotenv').config();
   var express = require('express');
   var path = require('path');
   var favicon = require('serve-favicon');
   var logger = require('morgan');
   var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser');
   var uglifyJs = require("uglify-js");
   var fs = require('fs');
   var passport = require('passport');
   require('./app_api/models/db');
   require('./app_api/config/passport');
   var routes = require('./app_server/routes/index');
   var routesApi = require('./app_api/routes/index');                

   
   Also in app.js make sure to initialize passport at the following point in your code:

   
   app.use(express.static(path.join(__dirname, 'public')));
   app.use(express.static(path.join(__dirname, 'app_client')));
   app.use(passport.initialize());
   app.use('/api', routesApi);

7. Creating Register and Login API Endpoints - Before you can extend the REST API to include /register and /login endpoints, you must have an authentication.js controller file that contains the following:

   
   var passport = require('passport');
   var mongoose = require('mongoose');
   var User = mongoose.model('User');
   
   var sendJSONresponse = function(res, status, content) {
     res.status(status);
     res.json(content);
   };
   
   module.exports.register = function(req, res) {
     if(!req.body.name || !req.body.email || !req.body.password) {
       sendJSONresponse(res, 400, {
         "message": "All fields required"
       });
       return;
     }
   
     var user = new User();
   
     user.name = req.body.name;
     user.email = req.body.email;
   
     user.setPassword(req.body.password);
   
     user.save(function(err) {
       var token;
       if (err) {
         sendJSONresponse(res, 404, err);
       } else {
         token = user.generateJwt();
         sendJSONresponse(res, 200, {
           "token" : token
         });
       }
     });
   };
   
   module.exports.login = function(req, res) {
     if(!req.body.email || !req.body.password) {      
       sendJSONresponse(res, 400, {
         "message": "All fields required"
       });
       return;
     }
   
     passport.authenticate('local', function(err, user, info){
       var token;
   
       if (err) {
         sendJSONresponse(res, 404, err);
         return;
       }
   
       if(user){
         token = user.generateJwt();
         sendJSONresponse(res, 200, {
           "token" : token
         });
       } else {
         sendJSONresponse(res, 401, info);
       }
     })(req, res);
   
   };

   
   Also, make sure to declare the authentication controller in index.js of the routes folder, as so:

   
   var express = require('express');
   var router = express.Router();
   var jwt = require('express-jwt'); 
   var ctrlBlogs = require('../controllers/blogs');
   var ctrlAuth = require('../controllers/authentication');  // Lab 6
   ... 

8. Registering and logging in a user - Pages 366 and 367 of the book show how to use Postman to test the /register and /login endpoints.
9. Securing REST API endpoints - The last step in updating the REST API to allow for user registration, login and to make it secure is to add required authorization to endpoints that require security.

   For the Blogger app, the endpoints that read blogs should be open (unsecured) and those that create, update or delete a blog entry should be secured.

   Before you can update index.js in your app_api area, you must install a version of the express-jwt module that will be used to generate authorization tokens in Express. The 5.3.1 version of express-jwt is recommended and can be installed with the following command.

   $ npm install express-jwt@5.3.1 --save

   Securing the endpoints is done by adding an auth object in between the URL of the API and its corresponding controller method.

   The updated index.js file looks as follows:

   var express = require('express');
   var router = express.Router();
   var jwt = require('express-jwt'); 
   var auth = jwt({   // Lab 6
     secret: process.env.JWT_SECRET,
     userProperty: 'payload'
   });
   var ctrlBlogs = require('../controllers/blogs');
   var ctrlAuth = require('../controllers/authentication');  // Lab 6
   
   /* Setup routes to API URLs */
   router.get('/blogs', ctrlBlogs.blogsList);
   router.post('/blogs', auth, ctrlBlogs.blogsCreate);  // Lab 6 - added auth param
   router.get('/blogs/:id', ctrlBlogs.blogsReadOne);
   router.put('/blogs/:id', auth, ctrlBlogs.blogsUpdateOne);  // Lab 6 - added auth param
   router.delete('/blogs/:id', auth, ctrlBlogs.blogsDeleteOne);  // Lab 6 - added auth param
   router.post('/register', ctrlAuth.register);  // Lab 6
   router.post('/login', ctrlAuth.login);  // Lab 6
   
   module.exports = router;                    
                       

2. Adding Registration, Login and Dynamic Menuing to the Angular SPA - There are several steps one must take to add authentication to an Angular SPA and they include:
1. Add authentication service - Your client should include an authentication service, also placed in a file named authentication.js, and best held in a directory common/auth, with the contents as follows (sample from instructor's bloggerApp application):

   
   var app = angular.module('bloggerApp');
   
   //*** Authentication Service and Methods **
   app.service('authentication', authentication);
       authentication.$inject = ['$window', '$http'];
       function authentication ($window, $http) {
       
           var saveToken = function (token) {
               $window.localStorage['blog-token'] = token;
           };
                                          
           var getToken = function () {
               return $window.localStorage['blog-token'];
           };
           
           var register = function(user) {
               console.log('Registering user ' + user.email + ' ' + user.password);
               return $http.post('/api/register', user).success(function(data){
                   saveToken(data.token);
             });
           };
        
           var login = function(user) {
              console.log('Attempting to login user ' + user.email + ' ' + user.password);
              //$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
               return $http.post('/api/login', user).success(function(data) {
                 saveToken(data.token);
              });
           };
           
           var logout = function() {
               $window.localStorage.removeItem('blog-token');
           };
           
           var isLoggedIn = function() {
             var token = getToken();
   
             if(token){
               var payload = JSON.parse($window.atob(token.split('.')[1]));
   
               return payload.exp > Date.now() / 1000;
             } else {
               return false;
             }
           };
   
           var currentUser = function() {
             if(isLoggedIn()){
               var token = getToken();
               var payload = JSON.parse($window.atob(token.split('.')[1]));
               return {
                 email : payload.email,
                 name : payload.name
               };
             }
           };
   
           return {
             saveToken : saveToken,
             getToken : getToken,
             register : register,
             login : login,
             logout : logout,
             isLoggedIn : isLoggedIn,
             currentUser : currentUser
           };
   }
   
   app.controller('LoginController', [ '$http', '$location', 'authentication', function LoginController($htttp, $location, authentication) {
       var vm = this;
   
       vm.pageHeader = {
         title: 'Sign in to Blogger'
       };
   
       vm.credentials = {
         email : "",
         password : ""
       };
   
       vm.returnPage = $location.search().page || '/';
   
       vm.onSubmit = function () {
         vm.formError = "";
         if (!vm.credentials.email || !vm.credentials.password) {
              vm.formError = "All fields required, please try again";
           return false;
         } else {
              vm.doLogin();
         }
       };
   
       vm.doLogin = function() {
         vm.formError = "";
         authentication
           .login(vm.credentials)
           .error(function(err){
             var obj = err;
             vm.formError = obj.message;
           })
           .then(function(){
             $location.search('page', null); 
             $location.path(vm.returnPage);
           });
       };
    }]);
   
   app.controller('RegisterController', [ '$http', '$location', 'authentication', function RegisterController($htttp, $location, authentication) {
       var vm = this;
       
       vm.pageHeader = {
         title: 'Create a new Blooger account'
       };
       
       vm.credentials = {
         name : "",
         email : "",
         password : ""
       };
       
       vm.returnPage = $location.search().page || '/';
       
       vm.onSubmit = function () {
         vm.formError = "";
         if (!vm.credentials.name || !vm.credentials.email || !vm.credentials.password) {
           vm.formError = "All fields required, please try again";
           return false;
         } else {
           vm.doRegister();
         }
       };
   
       vm.doRegister = function() {
         vm.formError = "";
         authentication
           .register(vm.credentials)
           .error(function(err){
             vm.formError = "Error registering. Try again with a different email address."
             //vm.formError = err;
           })
           .then(function(){
             $location.search('page', null); 
             $location.path(vm.returnPage);
           });
       };
   }]);                    
                       

2. register.html and login.html - The HTML for these views can be found in the author's GitHub repo, in the branch for chapter 11, under app_client/auth in the register and login directories, respectively. See the link here. Make copies of those files within your app's app_client/common/auth directory.

   Once those HTML pages and the controllers from the authentication service are included in your client (don't forget to update the $RouteProvider), you can add "Sign On" and "Logout" links to your navigation.

3. Adding a Dynamic Navigation Menu - The navigation menu is best made dynamic at this point so that your SPA can include a "Sign On" menu choice if no user is logged in, and replace it with a "Logout" choice if someone is logged in.

   Using an Angular directive makes it easy to develop a dynamic navigation menu.

• navigation.js - Start with the navigation directive code and place it and it's controller in navigation.js which should be located in the common/nav directory of your app_client. A sample navigation.js follows:

  
  var app = angular.module('bloggerApp');
  
  //*** Directives ***
  app.directive('navigation', function() {
      return {
        restrict: 'EA',
        templateUrl: '/nav/navigation.html',
        controller: 'NavigationController',
        controllerAs: 'vm'
      };
  });
  
  //*** Controller ***
  app.controller('NavigationController', ['$state', '$location', 'authentication', function NavigationController($state, $location, authentication) {
      var vm = this;
      vm.currentPath = $location.path();
      vm.currentUser = function()  {
          return authentication.currentUser();
      }
      vm.isLoggedIn = function() {
          return authentication.isLoggedIn();
      }
      vm.logout = function() {
        authentication.logout();
        $location.path('/');
      };
  }]);

• navigation.html - The HTML template for the navigation directive is rather simple and it uses Angular directives (ng-?) to perform it's magic:

  
  <!-- Navigation -->  
  <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary">
  <a class="navbar-brand" href="#/">My Blog</a>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#/blog-list">List Blogs</a>
          <a ng-show="vm.isLoggedIn()" class="nav-item nav-link active" href="#/blog-add">Add Blog</a>
          <a ng-show="!vm.isLoggedIn()" class="nav-item nav-link active" href="#/login">Sign In</a>
          <a ng-show="vm.isLoggedIn()" class="nav-item nav-link active" href="" ng-click="vm.logout()"Logout <small>({{ vm.currentUser().email }})</small></a>
      </div>
  </div>
  </nav>

• Use the navigation tag - Once you have included the navigation directive in your application, your other HTML pages (e.g. index.html may include the navigation menu by simply including the new navigation directive, as so:

  
  <!-- Navigation Directive -->    
  <div ng-controller="NavigationController">
  	<navigation></navigation>  
  </div>  					
  					

• Passing Tokens to Secure Endpoints - The final step in securing the front-end is to make sure to send the JWT as part of the header so that it shows up in the auth object of the endpoints that are secured. That is done by updating your previously developed REST methods that have security, as follows:

  
  function updateBlogById($http, authentication, id, data) {
      return $http.put('/api/blogs/' + id, data, { headers: { Authorization: 'Bearer '+ authentication.getToken() }} );
  }