Angular 2 Authentication w/ JSON Web Tokens

Ac1a1d449af259bfb7191105db5212a2?s=47 Sunny Gleason
November 16, 2016

Angular 2 Authentication w/ JSON Web Tokens

Authentication is a critical part of many applications. In this talk, we focus on the use of JSON Web Tokens (JWTs) for authentication. We will demonstrate how JWTs can be implemented with Angular 2 and discuss tips and tricks to help you keep your app secure.


Sunny Gleason

November 16, 2016


  1. SunnyCloud Angular 2 Authentication w/ JSON Web Tokens Sunny Gleason

    Boston AngularJS Meetup November 16, 2016
  2. SunnyCloud var self = this; • Sunny Gleason, All-Stack Engineer

    • Previous: Amazon (web services), Ning, Startup(1..N) • Current: SunnyCloud • Short Story: A-Team you can call on to build (and rescue) cloud services, web & mobile applications • Longer Story: Network of developers aiming to change the way businesses build applications
  3. SunnyCloud what’s this all about? • real-world applications need authentication

    (user identification) • also: authorization (who can do what) • previously, this was not so standard
 in Angular 1.x • with Angular 2 & JWT, a lot of things get cleaner
 with the component model
  4. SunnyCloud AngularJS 1.x Auth • API access is provided via

    $http • $http object is decorated with
 interceptors • Use cookies to denote logged-in status • Auth events are tied to global event loop
  5. SunnyCloud AngularJS 1.x Interceptor

  6. SunnyCloud AngularJS 1.x Interceptor

  7. SunnyCloud could it be better?

  8. SunnyCloud Angular 2 Auth • Use angular2-jwt component by Auth0

    • AuthService component handles JWT
 (easily customizable) • authHttp object automatically decorates
 requests with Authorization header • No more cookies, use local storage • We can use component event propagation to
 handle loggedin/loggedout events
  9. SunnyCloud acknowledgements • much of this is based on Auth0

    JWT implementation
 see: • nifty demo by Todd Motto
 at: • nice background by Gábor Soós
 at: authentication-revisited-611bf7373bf9#.t9yf96mg0 • We’ll use Auth0 and Heroku to get started quickly
  10. SunnyCloud what’s a JWT? • an encrypted JSON packet with

    3 parts: header, payload, signature • designed to be as small as a cookie,
 but *WAY* less complicated than
 SAML or OAuth (for example) • Allows APIs to be stateless, for
 easier clustering/load balancing
 without shared sessions
  11. SunnyCloud what’s the JWT flow?

  12. SunnyCloud why is this better? • cleaner model - API

    requests do not
 depend on browser cookies • separation of concerns: authentication & claims
 are in one place, authorization may be separate • simpler to implement than competing standards like OAuth(x) and SAML
  13. SunnyCloud getting the code • All code is available at: • You’ll need an Auth0 account to try it: • It’s easiest to deploy the code to Heroku:
  14. SunnyCloud step 1: auth0 login widget

  15. SunnyCloud step 2: display fruit list

  16. SunnyCloud step 3: logout (unauthenticated)

  17. SunnyCloud what’s auth0? • A backend for authentication and user

    profile storage • Allows us to sidestep JWT creation logic in our server • Integration with 3rd-party identity providers
 (Google, Facebook, Linkedin, etc) • Out-of-the-box implementations of 2FA • Security auditing/protection features to prevent abuse
  18. SunnyCloud auth0 setup • Create an account • Create an

    app • Set up users
  19. SunnyCloud auth0 create account

  20. SunnyCloud auth0 create app

  21. SunnyCloud auth0 create user

  22. SunnyCloud what did we just do? • Our login form

    will be able to use Auth0’s login widget
 • Our nodejs server will be able to parse JWTs from Auth0

  23. SunnyCloud the server - part 1

  24. SunnyCloud the server - part 2

  25. SunnyCloud so what do we have now? • Authentication backend

    using Auth0 • A nodejs API server with one protected resource
  26. SunnyCloud inside a real JWT

  27. SunnyCloud the client - index.html

  28. SunnyCloud the client - systemjs

  29. SunnyCloud the client - main.ts

  30. SunnyCloud the client - app.ts (UI)

  31. SunnyCloud the client - app.ts (Impl)

  32. SunnyCloud the client - AuthService

  33. SunnyCloud challenges • Bootstrapping minimally • Getting used to systemjs

    and TypeScript requirements • Dependency injection
 (transitive deps, nested components) • Thinking in a component-oriented way
 (still TODO: propagating auth events)