Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2 Authentication w/ JSON Web Tokens

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

More Decks by Sunny Gleason

Other Decks in Technology


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

    Boston AngularJS Meetup November 16, 2016 https://goo.gl/E9txvZ
  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 http://occammd.com/wp-content/uploads/2015/10/horse-and-buggy.jpg
  5. 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 http://www.ufo-disclosure.net/wp-content/uploads/2013/07/nasa-space-shuttle-500.jpg
  6. SunnyCloud acknowledgements • much of this is based on Auth0

    JWT implementation
 see: https://github.com/auth0/angular2-jwt • nifty demo by Todd Motto
 at: https://toddmotto.com/angular-2-authentication • nice background by Gábor Soós
 at: https://medium.com/@blacksonic86/angular-2- authentication-revisited-611bf7373bf9#.t9yf96mg0 • We’ll use Auth0 and Heroku to get started quickly
  7. 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 https://jwt.io/introduction/
  8. 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 https://jwt.io/introduction/
  9. SunnyCloud getting the code • All code is available at:

    https://github.com/sunnygleason/angular2-auth • You’ll need an Auth0 account to try it:
 https://auth0.com/ • It’s easiest to deploy the code to Heroku:
  10. 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
  11. 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

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

    using Auth0 • A nodejs API server with one protected resource
  13. 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) http://davidochmann.de/img/pictures/dragon.gif