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.

WTH is a JWT

169 views

Published on

This is a talk given at CharmCityJS on May 2nd 2018.
Chances are sooner or later your shiny new single page application will need authentication. Add some security and resource access control to that list as well. But how can we integrate all of this into a single page application that is entirely public? How can we ensure that our users only have access to the resources they are authorized to by hacking way in via the console? In this talk, the attendees will learn about l JSON Web Tokens (JWT) and see how they can be used to properly secure single page applications.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WTH is a JWT

  1. 1. WTH is a JWT A Quick Intro To Token Based Authentication
  2. 2. @joel__lord #i?JS18 About Me @joel__lord joellord
  3. 3. Traditional Applications ! Browser requests a login page
  4. 4. Traditional Applications ! Browser requests a login page
  5. 5. Traditional Applications ! Browser requests a login page
  6. 6. Traditional Applications ! Browser requests a login page ! The server validates on its database
  7. 7. Traditional Applications ! Browser requests a login page ! The server validates on its database 👍
  8. 8. Traditional Applications ! Browser requests a login page ! The server validates on its database ! It creates a session and provides a cookie identifier
  9. 9. What’s wrong with traditional auth? ! Multiple platforms connecting to your application
  10. 10. What’s wrong with traditional auth? ! Multiple platforms connecting to your application ! Tightly coupled
  11. 11. What’s wrong with traditional auth? ! Multiple platforms connecting to your application ! Tightly coupled ! Sharing credentials to connect to another API
  12. 12. 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
  13. 13. Token Based Auth !
  14. 14. OAuth
  15. 15. @joel__lord CharmCityJS Authentication Flows Implicit Flow
  16. 16. @joel__lord CharmCityJS Authentication Flows Implicit Flow
  17. 17. @joel__lord CharmCityJS Authentication Flows Implicit Flow
  18. 18. @joel__lord CharmCityJS Authentication Flows Implicit Flow
  19. 19. JSON Web Token ! Header ! Payload ! Signature Header { "alg": "HS256", "typ": "JWT" } Payload { "sub": "1234567890", "name": "Joel Lord", "scope": "posts:read posts:write" } Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
  20. 20. JSON Web Token ! Header ! Payload ! Signature Header eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 Payload eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG 9yZCIsImFkbWluIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlY WQgcG9zdHM6d3JpdGUifQ Signature XesR-pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg
  21. 21. JSON Web Token ! Header ! Payload ! Signature eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMj M0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG9yZCIsImFkbWl uIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlYWQgcG9zdHM6d 3JpdGUifQ.XesR- pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg
  22. 22. JSON Web Token ! Header ! Payload ! Signature Image: https://jwt.io
  23. 23. Code
  24. 24. Authentication Create a JWT
  25. 25. @joel__lord CharmCityJS Create a JWT // sign with default (HMAC SHA256) var jwt = require('jsonwebtoken'); var token = jwt.sign({ name: 'Joel Lord' }, 'secret');
  26. 26. @joel__lord CharmCityJS Create a JWT // sign with default (HMAC SHA256) var jwt = require('jsonwebtoken'); var token = jwt.sign({ name: 'Joel Lord' }, 'secret'); eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0Ijox NTI1MTc2NDI3fQ.V89hohVfp1uVNfunkpdl ewNyvGCX5iPPxe1YpM-RqRg
  27. 27. @joel__lord CharmCityJS Create a JWT // sign with default (HMAC SHA256) var jwt = require('jsonwebtoken'); var token = jwt.sign({ name: 'Joel Lord' }, 'secret'); eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0Ijox NTI1MTc2NDI3fQ.V89hohVfp1uVNfunkpdl ewNyvGCX5iPPxe1YpM-RqRg { "name": "Joel Lord", "iat": 1525176427 }
  28. 28. API Validate a JWT
  29. 29. @joel__lord CharmCityJS Validate a JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0IjoxNTI1MTc2NDI3fQ .V89hohVfp1uVNfunkpdlewNyvGCX5iPPxe1YpM-RqRg
  30. 30. @joel__lord CharmCityJS Validate a JWT var jwt = require('jsonwebtoken'); // verify a token var data = jwt.verify(token, 'secret'); console.log(data); eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0IjoxNTI1MTc2NDI3fQ .V89hohVfp1uVNfunkpdlewNyvGCX5iPPxe1YpM-RqRg
  31. 31. @joel__lord CharmCityJS Validate a JWT var jwt = require('jsonwebtoken'); // verify a token var data = jwt.verify(token, 'secret'); console.log(data); eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0IjoxNTI1MTc2NDI3fQ .V89hohVfp1uVNfunkpdlewNyvGCX5iPPxe1YpM-RqRg { "name": "Joel Lord", "iat": 1525176427 }
  32. 32. Front End Handle a JWT
  33. 33. @joel__lord CharmCityJS Front-End Add the headers
  34. 34. Live Demo https://github.com/joellord/ secure-spa-auth0
  35. 35. Delegation!
  36. 36. WTH is a JWT @joel__lord joellord Charm City JS May 2nd, 2018

×