Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Secure your SPA with Auth0

192 views

Published on

A quick demo that shows the attendees how to secure an SPA (could be React, Angular or VueJs) using Auth0. Can be adapted based on the time available for the presentation.

Published in: Engineering
  • Be the first to comment

Secure your SPA with Auth0

  1. 1. Secure Your SPA Using Auth0
  2. 2. @joel__lord #confoo About Me @joel__lord joellord
  3. 3. But Why?
  4. 4. Delegation!
  5. 5. What’s wrong with traditional auth? ! Multiple platforms connecting to your application ! Tightly coupled ! Sharing credentials to connect to another API ! Users have a gazillion passwords to remember, which increases security risks
  6. 6. What’s wrong with traditional auth? ! Multiple platforms connecting to your application ! Tightly coupled ! Sharing credentials to connect to another API ! Users have a gazillion passwords to remember, which increases security risks
  7. 7. What’s wrong with traditional auth? ! Multiple platforms connecting to your application ! Tightly coupled ! Sharing credentials to connect to another API ! Users have a gazillion passwords to remember, which increases security risks
  8. 8. What’s wrong with traditional auth? ! Multiple platforms connecting to your application ! Tightly coupled ! Sharing credentials to connect to another API ! Users have a gazillion passwords to remember, which increases security risks
  9. 9. OAuth - The Flows Authorization Code
  10. 10. Authentication Flows Implicit Flow
  11. 11. Authentication Flows Implicit Flow
  12. 12. Authentication Flows Implicit Flow
  13. 13. Authentication Flows Implicit Flow
  14. 14. Authentication Flows Implicit Flow
  15. 15. Tokens 101
  16. 16. OAuth Tokens Access Token Refresh Token ! Give you access to a resource ! Controls access to your API ! Short lived ! Enables you to get a new token ! Longed lived ! Can be revoked
  17. 17. OAuth Tokens ! WS-Federated ! SAML ! JWT ! Custom stuff ! More…
  18. 18. JSON Web Token ! Header ! Payload ! Signature Header { "alg": "HS256", "typ": "JWT" } Payload { "sub": "1234567890", "name": "Joel Lord", "admin": true } Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
  19. 19. JSON Web Token ! Header ! Payload ! Signature Header eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 Payload eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG 9yZCIsImFkbWluIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlY WQgcG9zdHM6d3JpdGUifQ Signature XesR-pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg
  20. 20. JSON Web Token ! Header ! Payload ! Signature eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMj M0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG9yZCIsImFkbWl uIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlYWQgcG9zdHM6d 3JpdGUifQ.XesR- pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg
  21. 21. JSON Web Token ! Header ! Payload ! Signature Image: https://jwt.io
  22. 22. Auth Server API
  23. 23. Codiiiing Time!
  24. 24. Secure Your SPA js-Montreal, March 2018 @joel__lord joellord

×