A Token Walks Into a Bar ...

SPA

Ado Kukic

Developer Evangelist

Auth0

@kukicado

SPA (Angular)

Security Best Practices

...

https://ng-thor.com

User

📃

https://api.ng-thor.com

https://app.ng-thor.com

ngThor

OK, ngThor

JSON Web Tokens

JWT's (RFC 7519) are an open industry standard method for representing claims securely between two parties.

JSON Web Tokens

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI

How is a Drivers License like a JSON Web Token?

Header

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI

Drivers License

New York State

{
  "alg":"HS256",
  "typ":"JWT"
}

Payload

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI

Picture

Name

Address

Demographics

Restrictions

{
  "sub": "1234567890",
  "name": "Thor Odinson",
  "admin": true
}

Signature

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI

UV Light

Hologram

HMACSHA256(
  header + "." + payload,
  "lokisucks"
)

👍

📝

✋

💰

🔗

/v1/orders

✋

{ "status": 401 }

🔑

/v1/auth

🈺

{ 
  "status": 200,
  "jwt" :"eyJhbGciOiJIU.." 
}

🔗🈺

/v1/orders

-H "Authorization: Bearer eyJhbGciOiJ..."

📃

{ 
  "status": 200,
  "order_id" : 138,
  "total_cost" : 27.99,
  ...
}

🔑

🈺

🔗🈺

📃

JWT and Angular

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MyAppService {
  private url = 'https://api.ng-thor.com/v1';

  constructor(private http: HttpClient) { }

  login() {
    return this.http.get(`${this.url}/auth`);
  }

  getOrders() {
   return this.http.get(`${this.url}/orders`);
  }
}

HTTP Client Library

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders} from '@angular/common/http';

@Injectable()
export class MyAppService {
  private url = 'https://api.ng-thor.com/v1';

  constructor(private http: HttpClient) { }

  login() {
    return this.http.get(`${this.url}/auth`);
  }

  getOrders() {
   let headers = new HttpHeaders(
    { 
      Authorization: "Bearer " + localStorage.getItem("jwt")
    }
   );
 
   return this.http.get(`${this.url}/orders`, {headers: headers});
  }
}

HTTP Client Library

HTTP Interceptors


import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class JWTInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    
    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${localStorage.getItem("jwt")}`
      }
    });

    return next.handle(request);
  }
}

HTTP Interceptors


import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {

    if (!this.authService.authenticated) {
      this.router.navigate(['/login']);
      return false;
    }

    return true;
  }
}

Route Guards

import { Routes, RouterModule, CanActivate } from '@angular/router';
import { LoginComponent } from './components/login.component';
import { CheckoutComponent } from './components/checkout.component';
import { AuthGuard } from './auth/auth.guard';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'checkout',
    component: CheckoutComponent,
    canActivate: [
      AuthGuard
    ]
  }
];

Route Guards

Summary

JSON Web Tokens are excellent for securing Angular applications.

Angular's excellent HTTP Library makes it easy to work with JWT's.

Single Page Application security is mainly concerned with authorization.

A security guard couldn't stop Thor, but your server can refuse requests without valid JWT's.

Thank You

@kukicado

http://bit.ly/ng-spa-demo

http://bit.ly/ng-auth-series