SunnyCloud Angular 2 Authentication w/ JSON Web Tokens Sunny Gleason Boston AngularJS Meetup November 16, 2016 https://goo.gl/E9txvZ 

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 

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 

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 

SunnyCloud AngularJS 1.x Interceptor 

SunnyCloud AngularJS 1.x Interceptor 

SunnyCloud could it be better? http://www.ufo-disclosure.net/wp-content/uploads/2013/07/nasa-space-shuttle-500.jpg 

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 

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 

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/ 

SunnyCloud what’s the JWT flow? https://jwt.io/introduction/ 

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/ 

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:
 https://www.heroku.com/ 

SunnyCloud step 1: auth0 login widget 

SunnyCloud step 2: display fruit list
 (authenticated) 

SunnyCloud step 3: logout (unauthenticated) 

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 

SunnyCloud auth0 setup • Create an account • Create an app • Set up users 

SunnyCloud auth0 create account 

SunnyCloud auth0 create app 

SunnyCloud auth0 create user 

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
 

SunnyCloud the server - part 1 

SunnyCloud the server - part 2 

SunnyCloud so what do we have now? • Authentication backend using Auth0 • A nodejs API server with one protected resource 

SunnyCloud inside a real JWT 

SunnyCloud the client - index.html 

SunnyCloud the client - systemjs 

SunnyCloud the client - main.ts 

SunnyCloud the client - app.ts (UI) 

SunnyCloud the client - app.ts (Impl) 

SunnyCloud the client - AuthService 

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