Thinkster
Angular
Simple AngularJS Authentication with JWT
  •  

Setting up an Angular App with Login and Registration

Set up a base AngularJS application with an authentication form

Before we dive in, let's start with some scaffolding for our example. Create two new files -- index.html and app.js -- in an empty directory and add the following code:

Create index.html
<html>
    <head>
    <title>Simple Angular Auth</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
        <script src="app.js"></script>
  </head>
    <body ng-app="app" ng-controller="Main as main">
    <h1>Simple Angular Auth - Thinkster</h1>

    <input type="text" ng-model="main.username" placeholder="username"><br>
    <input type="password" ng-model="main.password" placeholder="password"><br>
    <br>

    <button ng-click="main.register()">Register</button>
    <button ng-click="main.login()">Login</button>
    <button ng-click="main.logout()" ng-show="main.isAuthed()">Logout</button>

    <button ng-click="main.getQuote()">get quote</button>
    <br><br>
    {{main.message}}

    <br><br><br>
    <a href="https://twitter.com/IAmMattGreen">shameless plug</a>
    </body>
</html>
Create app.js
;(function(){
function authInterceptor(API, auth) {
  return {
    // automatically attach Authorization header
    request: function(config) {
      return config;
    },

    // If a token was sent back, save it
    response: function(res) {
      return res;
    },
  }
}

function authService($window) {
  var self = this;

  // Add JWT methods here
}

function userService($http, API, auth) {
  var self = this;
  self.getQuote = function() {
    return $http.get(API + '/auth/quote')
  }

  // add authentication methods here

}

// We won't touch anything in here
function MainCtrl(user, auth) {
  var self = this;

  function handleRequest(res) {
    var token = res.data ? res.data.token : null;
    if(token) { console.log('JWT:', token); }
    self.message = res.data.message;
  }

  self.login = function() {
    user.login(self.username, self.password)
      .then(handleRequest, handleRequest)
  }
  self.register = function() {
    user.register(self.username, self.password)
      .then(handleRequest, handleRequest)
  }
  self.getQuote = function() {
    user.getQuote()
      .then(handleRequest, handleRequest)
  }
  self.logout = function() {
    auth.logout && auth.logout()
  }
  self.isAuthed = function() {
    return auth.isAuthed ? auth.isAuthed() : false
  }
}

angular.module('app', [])
.factory('authInterceptor', authInterceptor)
.service('user', userService)
.service('auth', authService)
.constant('API', 'http://test-routes.herokuapp.com')
.config(function($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
})
.controller('Main', MainCtrl)
})();

For simplicities sake we'll be working out of these two files for the remainder of this tutorial.

Because we'll be making cross-origin requests to the test API, make sure you're serving these files from a local webserver and NOT from the file system. I recommend using Browsersync (npm install -g browser-sync)