TOKEN BASED AUTHENTICATION FOR MEAN STACK APPS - PART 1

Creating independent frontend and backend applications makes scalability easy. Building your backend as an API and consuming it with frontend components makes development easily maintainable and allows distribution across different servers when your app grows very large.

SETTING UP YOUR ENVIRONMENT

Today, we’ll build a simple app that demonstrates how to implement token-based authentication in mean stack apps. This is one way of going about it amidst many others.

MEAN – Mongodb( Our Database ), Express ( Node.js Framework ), AngularJs ( Frontend Framework ), Nodejs( Server-side Language )

Let’s Jump Right In

Let’s create a new Node.js application called auth-meanapp. Make sure you have npm installed already. Create a directory named auth-meanapp, this is where our application will reside.

Now, create a package.json file by running this command like so:

npm init

npm init

Go through the instructions, fill the required details. name, version, description, entry point, test command, git repository, keywords, author, license . It’s actually optional, you could just press enter continuously to skip it till it’s completed.

Then run the following command from your terminal like so:

npm install express mongoose morgan dotenv lodash cors jsonwebtoken body-parser gravatar --save

1	npm install express mongoose morgan dotenv lodash cors jsonwebtoken body-parser gravatar --save

express – Fast minimalistic web framework for node.js

mongoose – It is a MongoDB object modeling tool designed to work in an asynchronous environment.

morgan – node.js module that enables detailed logging

dotenv – loads environment variables from .env in to ENV (process.env).

lodash – node.js module for working with data structures and functions

cors – node.js module for allowing cross origin request on your backend

gravatar – node.js module for fetching avatars from emails during user sign-ups

jsonwebtoken – node.js module for implementing json web tokens

body-parser – node.js middleware for parsing body form requests

bcrypt – A hashing library for node.js

— save is to ensure that it’s details are saved in our package.json file.

Your package.json file should look something similar to this:

{
 "name": "auth-meanapp",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo "Error: no test specified" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "body-parser": "^1.13.1",
   "cors": "^2.7.1",
   "dotenv": "^1.2.0",
   "express": "^4.13.0",
   "gravatar": "^1.1.1",
   "jsonwebtoken": "^5.0.2",
   "lodash": "^3.10.0",
   "mongoose": "^4.0.6",
   "morgan": "^1.6.0"
 }
}

{

"name": "auth-meanapp",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo "Error: no test specified" && exit 1"

"author": "",

"license": "ISC",

"dependencies": {

"body-parser": "^1.13.1",

"cors": "^2.7.1",

"dotenv": "^1.2.0",

"express": "^4.13.0",

"gravatar": "^1.1.1",

"jsonwebtoken": "^5.0.2",

"lodash": "^3.10.0",

"mongoose": "^4.0.6",

"morgan": "^1.6.0"

}

This is the folder structure of our app:

auth-meanapp

-------------- config
------------------- secrets.js
------------------- testdb.js
------------------- tokenMiddleware.js
-------------- node_modules
-------------- public
------------------ index.html
-------------- server
------------------ controllers
---------------------- user.server.controller.js
------------------ models
---------------------- user.server.model.js

-------------- config

------------------- secrets.js

------------------- testdb.js

------------------- tokenMiddleware.js

-------------- node_modules

-------------- public

------------------ index.html

-------------- server

------------------ controllers

---------------------- user.server.controller.js

------------------ models

---------------------- user.server.model.js

The next step is to create .env file so that node.js can properly pull environment variables for the app.

My .env file looks like this:

.env

MONGODB=mongodb://localhost/auth-mean
NODE_ENV=development
SESSION_SECRET=meanprosper

MONGODB=mongodb://localhost/auth-mean

NODE_ENV=development

SESSION_SECRET=meanprosper

Note: Make sure you have mongodb installed on your system.

Next, let’s create a server.js file in the root of our folder. This is the main entry and starting point for our application.

server.js

require('dotenv').load(); // loads the environment variables in the .env file
var  express      = require('express'),
    jwt           = require('jsonwebtoken');
    morgan        = require('morgan'),
    bodyParser    = require('body-parser'),
    mongoose      = require('mongoose'),
    User          = require('./server/models/user.server.model'),
    cors          = require('cors'),
    secrets       = require('./config/secrets'),
    testdb        = require('./config/testdb'),
    route         = require('./server/routes');
var port = process.env.PORT || 3000;
/**
* Connect to MongoDB.
*/
testdb.dbconnect();
/**
* Create Express server.
*/
var app = express();
/**
* Express configuration.
*/
app.use(cors()); // allows cross origin request
app.use(morgan('dev')); // for logging of every request made in the application
app.use(bodyParser.urlencoded({extended: true})); //use bodyParser for request and parsing info
app.use(bodyParser.json());
app.use(express.static( __dirname + '/public')); //use to serve static files like favicon, css, angular and the rest
/**
* Routes Configuration
*/
route(app);
//configure any route whatsoever to redirect to angular
app.get('*', function(req, res) {
   /** frontend routes =========================================================
     * route to handle all angular requests
     * load the single view file (angular will handle the page changes on the front-end)
     **/
    res.sendFile(__dirname + '/public/index.html' );
});
/**
* Start Express server.
*/
app.listen( port, function(){
 console.log("Server Listening on port ", port );
});

100

101

102

103

104

105

106

107

require('dotenv').load(); // loads the environment variables in the .env file

var express = require('express'),

jwt = require('jsonwebtoken');

morgan = require('morgan'),

bodyParser = require('body-parser'),

mongoose = require('mongoose'),

User = require('./server/models/user.server.model'),

cors = require('cors'),

secrets = require('./config/secrets'),

testdb = require('./config/testdb'),

route = require('./server/routes');

var port = process.env.PORT || 3000;

/**

* Connect to MongoDB.

testdb.dbconnect();

/**

* Create Express server.

var app = express();

/**

* Express configuration.

app.use(cors()); // allows cross origin request

app.use(morgan('dev')); // for logging of every request made in the application

app.use(bodyParser.urlencoded({extended: true})); //use bodyParser for request and parsing info

app.use(bodyParser.json());

app.use(express.static( __dirname + '/public')); //use to serve static files like favicon, css, angular and the rest

/**

* Routes Configuration

route(app);

//configure any route whatsoever to redirect to angular

app.get('*', function(req, res) {

/** frontend routes =========================================================

* route to handle all angular requests

* load the single view file (angular will handle the page changes on the front-end)

**/

res.sendFile(__dirname + '/public/index.html' );

});

/**

* Start Express server.

app.listen( port, function(){

console.log("Server Listening on port ", port );

});

secrets.js

module.exports = {
 db: process.env.MONGODB || process.env.MONGOHQ_URL,
 sessionSecret: process.env.SESSION_SECRET
};

module.exports = {

db: process.env.MONGODB || process.env.MONGOHQ_URL,

sessionSecret: process.env.SESSION_SECRET

};

testdb.js

var mongoose  = require('mongoose'),
   secrets    = require('./secrets');
var db = mongoose.connection;
mongoose.connect(secrets.db);
module.exports = {
 dbconnect: function(){
   db.on('error', console.error.bind( console, 'MongoDB Connection Error. Please make sure that MongoDB is running.'));
   db.once('open', function callback(){
     console.log('auth-meanapp db opened');
   });
 }
};

var mongoose = require('mongoose'),

secrets = require('./secrets');

var db = mongoose.connection;

mongoose.connect(secrets.db);

module.exports = {

dbconnect: function(){

db.on('error', console.error.bind( console, 'MongoDB Connection Error. Please make sure that MongoDB is running.'));

db.once('open', function callback(){

console.log('auth-meanapp db opened');

});

}

};

tokenMiddleware.js

var jwt       = require('jsonwebtoken'),
   secrets    = require('./secrets');
module.exports = function(req, res, next){
 // check header parameters for token
 var token = req.headers['x-access-token'];
if(token) {
   // verifies secret and checks exp
   jwt.verify(token, secrets.sessionSecret, function(err, decoded) {
     if(err) {
       return res.json({ message: 'Unauthorized Access. Mismatched token.' });
     } else {
       // if everything is good, save to request for use in other routes
       req.decoded = decoded;
       next();
     }
   });
 } else {
     // if there is no token return an error
     return res.status(403).json({
         message: 'Unauthorized Access'
     });
   }
};

var jwt = require('jsonwebtoken'),

secrets = require('./secrets');

module.exports = function(req, res, next){

// check header parameters for token

var token = req.headers['x-access-token'];

if(token) {

// verifies secret and checks exp

jwt.verify(token, secrets.sessionSecret, function(err, decoded) {

if(err) {

return res.json({ message: 'Unauthorized Access. Mismatched token.' });

} else {

// if everything is good, save to request for use in other routes

req.decoded = decoded;

next();

}

});

} else {

// if there is no token return an error

return res.status(403).json({

message: 'Unauthorized Access'

});

}

};

routes.js

var User       = require('./controllers/user.server.controller'),
   jwt         =  require('jsonwebtoken'),
   secrets     = require('../config/secrets'),
   verifyToken = require('../config/tokenMiddleware');
module.exports = function(app) {
};