Angular JSON Web Token Authentication Module

Angular authentication with JSON Web tokens.

Intro

This module is for authenticating with a remote REST API, and attaching the auth token to all subsequent $http xhr requests to the API.

The module has the following features

• Basic (username/password) authentication
• Automatic token refreshing when it is about to expire,
• Persisting the token to localstorage so it is available between sessions
• Token based authentication (useful for authenticating a confirmed registration email).

Installation

Install through bower:

bower install angular-jwt-auth --save

Usage

• Require the ngJwtAuth module in your angular application

angular.module('app', ['ngJwtAuth'])

• (Optionally) configure the service provider

angular.module('app', ['ngJwtAuth'])
.config(['ngJwtAuthServiceProvider', function(ngJwtAuthServiceProvider){
    ngJwtAuthServiceProvider
        .configure({
            tokenLocation: 'token-custom',
            apiEndpoints: {
                base: '/api',
                login: '/login-custom',
                tokenExchange: '/token-custom',
                refresh: '/refresh-custom',
            }
        })
    ;
}])

• Inject the ngJwtAuthService, initialise it then use it! The init function loads any existing token from storage and kicks off the $interval that monitors the expiry status of the token.

It is highly recommended that you register a credential promise factory (See below), as this will allow the interceptor to prompt your users for their login details when an api request that returns status code 401.

angular.module('app', ['ngJwtAuth'])
.run(['ngJwtAuthService', function(ngJwtAuthService){
    ngJwtAuthService.init();
}])
.controller('AppCtrl', ['ngJwtAuthService', function(ngJwtAuthService){
    
    $scope.login = function(username, password){
        
        ngJwtAuthService.authenticate(username, password)
            .then(function(authenticatedUser){
                console.log("Login Success!", authenticatedUser);
            })
            .catch(function(err){
                console.error(err);
            })
        
    };
    
}])

Credential Promise Factory

To handle prompting the user for authentication, angular-jwt-auth provides a registration method to allow the application to provide a function that returns a promise containing the credentials to attempt to login, then to retry the intercepted request with.

Example using a modal from angular-bootstrap's $modal :

angular.module('app', ['ngJwtAuth'])
    .run(['ngJwtAuthService', '$modal', function(ngJwtAuthService, $modal){
        ngJwtAuthService
            .registerCredentialPromiseFactory(function(existingUser){

                var credentialsPromise = $modal.open({
                    templateUrl : '/path/to/template.tpl.html',
                    controller: 'LoginModalCtrl',
                    size : 'md'
                }).result;


                return credentialsPromise;

            })
            .init(); //note that init must be called after the credential promise is registered

    }])
    .controller('LoginModalCtrl', ['$scope', '$modal', function($scope, $modalInstance){
        $scope.login = function (username, password) {
            //the promise must resolve with the form {username: string, password: string}
            $modalInstance.close({
                username: username,
                password: password
            });
        };
    }])
;