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.

Transcript

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 AngularJS 1.x Interceptor
6. SunnyCloud AngularJS 1.x Interceptor
7. SunnyCloud could it be better? http://www.ufo-disclosure.net/wp-content/uploads/2013/07/nasa-space-shuttle-500.jpg
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 http://www.ufo-disclosure.net/wp-content/uploads/2013/07/nasa-space-shuttle-500.jpg
9. 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
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 https://jwt.io/introduction/
11. SunnyCloud what’s the JWT flow? https://jwt.io/introduction/
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 https://jwt.io/introduction/
13. 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/
14. SunnyCloud step 1: auth0 login widget
15. SunnyCloud step 2: display fruit list
 (authenticated)
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) http://davidochmann.de/img/pictures/dragon.gif