AngularJS: Send auth token with every request

AngularJS is an awesome javascript framework. With it’s $resource service it is super fast and easy to connect your javascript client to a RESTful API. It comes with some good defaults to create a CRUD interface.

However if you are using an API, which needs authentication via an auth token, you might run into issues: The resource factory creates a singleton. If you do not already have an auth token when the factory is called, or if the auth token changes afterwards, you cannot put the auth token as a default request parameter in the factory.

This article shows, how to solve this. First we define our resource, consuming a RESTful API, without using an authentication. Afterwards we create a wrapper to send the auth token with every request. This allows consumption of an API with an exchangeable auth token.

Build a RESTful resource

Here is a simple example of how to create a resource in your client, fed by a RESTful backend on your localhost:

angular.module('MyApp.services', ['ngResource'])
  .factory('Todo', ['$resource',
    function($resource) {
      var resource =
        $resource('http://localhost:port/todos/:id', {
          port:":3001",
          id:'@id'
          }, {
            update: {method: 'PUT'}
          });
      return resource;
    }])

We are creating a module which depends on ngResource, which provides the $resource service. We build a factory called Todo using the $resource service.

Inside the factory we create a resource object by passing an URL and a port to the $resource constructor. Have a look at the URL string: :port and :id are being replaced by the parameters defined in the object literal right after the URL string itself.

Setting a port is not as straight forward, as it could be: In this example we are setting it to 3001. Right now you cannot put it into the URL directly, as AngularJS would interpret :3001 in the URL as a placeholder with the name 3001. So we put the placeholder :port in the URL and replace it with :3001 via the parameter object literal.

Now have a look at the :id placeholder: It’s being replaced with @id. With the @ in front, AngularJS takes the attribute with that name from the current resource when doing a request. This is very handy, when sending non-GET request. Here is a simple example: When sending an update REST action for an resource item with id=123 the URL will look like this: http://localhost:3001/todos/123.

There is one last thing in the example: We define an update action for our resource. $resource defines some default actions:

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

I have no idea, why an update action is missing. I think it would be reasonable to add this to the AngularJS default actions. So, as the update action is missing, we define it ourselves. We just have to provide the HTTP method for it, which is PUT.

As you can see, connecting to a REST API is pretty straight forward.

Send auth token with every request

To send the auth token with every request we are going to wrap the resource actions in a function which appends the auth token. So first of all we create a new service to deal with all the token related stuff:

.factory('TokenHandler', function() {
  var tokenHandler = {};
  var token = "none";

  tokenHandler.set = function( newToken ) {
    token = newToken;
  };

  tokenHandler.get = function() {
    return token;
  };

As you can see, we create a service called TokenHandler which stores the token itself and provides getter and setter methods.

Now, let’s have a look at the actual action wrapping:

  // wraps given actions of a resource to send auth token
  // with every request
  tokenHandler.wrapActions = function( resource, actions ) {
    // copy original resource
    var wrappedResource = resource;
    // loop through actions and actually wrap them
    for (var i=0; i < actions.length; i++) {
      tokenWrapper( wrappedResource, actions[i] );
    };
    // return modified copy of resource
    return wrappedResource;
  };

The method wrapAction takes a resource and an array with strings identifying the actions to be wrapped as parameters. A copy of the resource is created, modified and returned. We don’t want to change the original resource to prevent any side effects (‘Don’t change parameters inside a function’).

We loop through the actions array, calling the method tokenWrapper for every single action. So finally let us have a look what happens there:

  // wraps resource action to send request with auth token
  var tokenWrapper = function( resource, action ) {
    // copy original action
    resource['_' + action]  = resource[action];
    // create new action wrapping the original
    // and sending token
    resource[action] = function( data, success, error){
      return resource['_' + action](
        // call action with provided data and
        // appended access_token
        angular.extend({}, data || {},
          {access_token: tokenHandler.get()}),
        success,
        error
      );
    };
  };

  return tokenHandler;
});

In a first step we copy the original action and store it with a new name. We prepend an underscore and save it into the resource. So the action query for example is now also available as _query.

Afterwards we overwrite the original action with our wrapper function. Parameters of the wrapper are identical with the normal actions: The resource data data and callback functions success and error.

The wrapper calls the renamed original action methods ( _query for example) and returns the result. But checkout the first parameter we pass to the original action: We use the data parameter and append the access_token as an object literal to that. This way, the auth_token is send to the API as a parameter called access_token!

Usage of the token wrapper

Of course we have to actually use our new action wrapper in the resource we defined in the first section. So here is how to use it:

.factory('Todo', ['$resource', 'TokenHandler', function($resource, tokenHandler) {
  var resource = $resource('http://localhost:port/todos/:id', {
    port:":3001",
    id:'@id'
    }, {
      update: {method: 'PUT'}
  });

  resource = tokenHandler.wrapActions( resource,
    ["query", "update", "save"] );

  return resource;
}])

The TokenHandler has to be added as a dependency and is passed as a parameter to the constructor method. No changes to the definition of resource are necessary. But before returning resource we overwrite with the result form wrapActions method of the tokenHandler. We pass the original resource and an array with string identifying the actions we want to wrap.

As you can see we can easily overwrite the default actions which are created by $resource implicitly. You can use the overwritten actions the same way you would use the defaults:

// get all todos
var todos = Todo.query();

// save a todo
todo[0].text = "New Text";
todo[0].$save();

You can get the full code of the TokenHandler service here. This approach is based on an idea by Andy Joslin on a stackoverflow question. Thanks, Andy!