Set of AngularJS services used to set/get and refresh JSON tokens using cookies

authService.js

// modified from: https://medium.com/@kevinle/exchange-refresh-token-for-json-web-token-jwt-in-angularjs-using-promise-453da9127cd7

'use strict';

angular.module('supportApp.services', [])

    .factory('authService', ['$http', '$q', 'authCookies', 'parseToken',
        function ($http, $q, authCookies, parseToken) {

            return {
                getAuthorizationHeader() {
                    var accessToken = authCookies.getAccessToken();
                    if (accessToken && parseToken.parseJwt(accessToken)) {
                        // if access_token exists AND it's valid and
                        // not expired return its value
                        return $q.when({'Authorization': 'Bearer ' + accessToken});
                    } else {
                        // access token is invalid or doesn't exist, so check
                        // for refresh token, if it exists use it to make a
                        // POST call to token refresh resource
                        var refreshToken = authCookies.getRefreshToken();
                        if (angular.isUndefined(refreshToken)) {
                            // refresh token doesn't exist so pass empty header
                            // so the resource responds with 401 unauthorized which
                            // will cause a redirect to /login (via the controller)
                            return $q.when({});
                        } else {
                            // use existing refresh token from cookies to make a POST
                            // request to token refresh endpoint
                            return $http({
                                method: 'POST',
                                url: 'http://localhost:5000/api/token-refresh',
                                headers: {Authorization: "Bearer " + refreshToken}
                            })
                                .then(function (response) {
                                    // a successful response will have a new access token,
                                    // so we'll replace the old token in the cookie
                                    accessToken = response.data.access_token;
                                    authCookies.setAccessToken(accessToken);
                                    // and return token in the header
                                    return {'Authorization': 'Bearer ' + accessToken};
                                })
                                .catch(function (err) {
                                    // any problem making this token refresh call gets logged out here
                                    console.log('Error refreshing token ' + err.data)
                                })
                        }
                    }
                }
            }
        }
    ])

    .factory('authCookies', function ($cookies) {
        var setAccessToken = function (jwt_access_token) {
            $cookies.putObject('accessToken', jwt_access_token);
        };
        var getAccessToken = function () {
            return $cookies.getObject('accessToken');
        };
        var setRefreshToken = function (token) {
            $cookies.putObject('refreshToken', token);
        };
        var getRefreshToken = function () {
            return $cookies.getObject('refreshToken');
        };
        return {
            setAccessToken: setAccessToken,
            getAccessToken: getAccessToken,
            setRefreshToken: setRefreshToken,
            getRefreshToken: getRefreshToken
        };
    })

    .factory('parseToken', function () {
        var parseJwt = function (token) {
            var base64Url = token.split('.')[1];
            var base64 = base64Url.replace('-', '+').replace('_', '/');
            var decoded_token = JSON.parse(window.atob(base64));
            var current_time = new Date().getTime() / 1000;
            if (current_time > decoded_token.exp) {
                return false;
            } else {
                return true;
            }
        };
        return {
            parseJwt: parseJwt
        };

    });

//**** PAIRED WITH THIS MODULE WHICH HAS A LOGIN CONTROLLER AND A CONTROLLER TO ACCESS A PROTECTED RESOURCE ****//

'use strict';

angular.module('supportApp.users', ['ngRoute', 'supportApp.services'])

    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/users', {
            templateUrl: 'users/users.html',
            controller: 'UsersCtrl'
        });
    }])

    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/login', {
            templateUrl: 'users/login.html',
            controller: 'loginCtrl'
        });
    }])

    .controller('UsersCtrl', [
        '$scope',
        '$http',
        '$location',
        'authService',
        function ($scope, $http, $location, authService) {
            return authService.getAuthorizationHeader().then(authHeader => {
                return $http.get('http://localhost:5000/api/user/', {headers: authHeader})
                    .then(function (response) {
                        $scope.users = response.data;
                    })
                    .catch(function () {
                        $location.path('/login');
                    });
            });
        }
    ])

    .controller('loginCtrl', [
        '$scope',
        '$http',
        '$location',
        'authCookies',
        function ($scope, $http, $location, authCookies) {
            $scope.user = {};
            $scope.userLogin = function () {
                $http.post('http://localhost:5000/login', $scope.user)
                    .then(function (response) {
                        $scope.successMessage = response.data;
                        var jwt_access_token = response.data.access_token;
                        var jwt_refresh_token = response.data.refresh_token;
                        authCookies.setAccessToken(jwt_access_token);
                        authCookies.setRefreshToken(jwt_refresh_token);
                        $location.path('/users');
                    })
                    .catch(function (error) {
                        $scope.errorMessage = error.data;
                    });
            };
        }]);