Authentication

and

Authorization

in

Angular

Objectives

• Review classical authentication flow

• Solidify distinction between tokens and cookies

• Use angular packages to send secure/authorized information using JWT

• Create the feeling of a "session" without cookies

Token Authentication

Client

Server

1. Client sends user/password

2. Server validates user/pass and upon success creates a JWT (which are signed)

3. Server sends JWT

4.
All further requests

send the JWT

5.

All further requests check the JWT

Those Look The Same

• Established best practices for securing information have not changed much even since paper based cryptography.
   
• What has changed is the mechanism for keeping the secret.
   
• JWTs and Cookies are different standards that behave differently in implementation, but similarly in concept.

So What Matters?

Crucially: a client needs to be able to hold information that uniquely identifies it, but that could not be recreated by a 3rd party attacker.

Then why change?

JWT was invented specifically to deal with cases where cookies do not work well.

Single Page App + Service Oriented Architecture is an example of such a case. 

Implementation

1. Interceptors on the front end
2. login + Middleware on the back end
3. Joy

"Interceptors": The Code

app.config(function($routeProvider, $httpProvider){
  $httpProvider.interceptors.push('testInterceptor');
})

Step 1: register your interceptor with $httpProvider

This is a service that we are about to create

"Interceptors": The Code

.service('testInterceptor', function testInterceptor(){
  return {
    request: function(config){
      return config;
    },
    requestError: function(err){
      return err;
    },
    response: function(response){
      return response;
    },
    responseError: function(err){
      return err;
    }
  };
})

Step 2: Create the "interceptor service"

"Interceptors": The Code

// Somewhere in the login code:
var loginPromise = $http({
    method: "POST",
    url: "/login",
    data: {user: "teb", password: "123456"}
});

loginPromise.then(function(response) {
     // Assuming this is how your server responds
    if(response.data.jwt) {
        localStorage.set('token', response.data.jwt);
    }
});

Step 3: If you login successfully -- store JWT

"Interceptors": The Code

myApp.service('testInterceptor', function testInterceptor(){
  return {
   request: function(config){
      var token = localStorage.getItem("token");
      
      if(token) {
        config.headers.Authorization = "Bearer " + token;
      }

      return config;
    }
  };
})

Step 4: Use an Interceptor for JWT tokens

Ask local storage if there is a JWT -- if there is then always throw it in the authorization header