Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

SunnyCloud AngularJS 1.x Interceptor

Slide 6

Slide 6 text

SunnyCloud AngularJS 1.x Interceptor

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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/

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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/

Slide 13

Slide 13 text

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/

Slide 14

Slide 14 text

SunnyCloud step 1: auth0 login widget

Slide 15

Slide 15 text

SunnyCloud step 2: display fruit list
 (authenticated)

Slide 16

Slide 16 text

SunnyCloud step 3: logout (unauthenticated)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

SunnyCloud auth0 create account

Slide 20

Slide 20 text

SunnyCloud auth0 create app

Slide 21

Slide 21 text

SunnyCloud auth0 create user

Slide 22

Slide 22 text

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


Slide 23

Slide 23 text

SunnyCloud the server - part 1

Slide 24

Slide 24 text

SunnyCloud the server - part 2

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

SunnyCloud inside a real JWT

Slide 27

Slide 27 text

SunnyCloud the client - index.html

Slide 28

Slide 28 text

SunnyCloud the client - systemjs

Slide 29

Slide 29 text

SunnyCloud the client - main.ts

Slide 30

Slide 30 text

SunnyCloud the client - app.ts (UI)

Slide 31

Slide 31 text

SunnyCloud the client - app.ts (Impl)

Slide 32

Slide 32 text

SunnyCloud the client - AuthService

Slide 33

Slide 33 text

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