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.

AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.

147 views

Published on

Securing single page applications can cause some problems. Discover how JSON web tokens can help you and what the future of authentication is like.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.

  1. 1. Securing PWAs
  2. 2. Sam Bellen ● Developer Evangelist at Auth0 ● Google Developer Expert ● Co-organizer Fronteers meetups Belgium ● I tweet as @sambego
  3. 3. Traditional web apps
  4. 4. Any questions so far?
  5. 5. Traditional web app VS Single page application
  6. 6. Traditional architecture
  7. 7. Single page architecture app.sambego.be api.sambego.be user.sambego.be pay.sambego.be
  8. 8. Multi app architecture app.sambego.be api.sambego.beMobile app Desktop app
  9. 9. What are some of the problems with the traditional cookie based approach?
  10. 10. Cookies don’t like CORS
  11. 11. Cookies require state
  12. 12. Cookies don’t flow
  13. 13. app.sambego.be api.sambego.be user.sambego.be
  14. 14. So what’s the solution?
  15. 15. Token based authentication
  16. 16. OAuth
  17. 17. OpenID Connect
  18. 18. These are the steps we have to take to access an protected resource 1. User fills in login form 2. We pass that data to an authentication endpoint 3. The authentication endpoint returns an access token 4. We send along this access token with each request for protected data
  19. 19. OpenID Connect
  20. 20. app.sambego.be api.sambego.be account.sambego.be
  21. 21. app.sambego.be api.sambego.be account.sambego.be
  22. 22. app.sambego.be api.sambego.be account.sambego.be
  23. 23. app.sambego.be api.sambego.be account.sambego.be
  24. 24. app.sambego.be api.sambego.be account.sambego.be
  25. 25. app.sambego.be api.sambego.be account.sambego.be
  26. 26. Will the user have to login with every visit?
  27. 27. The login flow remains the same
  28. 28. app.sambego.be api.sambego.be account.sambego.be
  29. 29. With each next visit we will request the tokens again
  30. 30. app.sambego.be api.sambego.be account.sambego.be
  31. 31. app.sambego.be api.sambego.be account.sambego.be
  32. 32. app.sambego.be api.sambego.be account.sambego.be
  33. 33. Does this approach solve CORS?
  34. 34. Does this approach solve flow?
  35. 35. Does this approach solve keeping state?
  36. 36. Some questions by now?
  37. 37. What the #&$* is a token?
  38. 38. JSON Web Token
  39. 39. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI iwicHJlZmVycmVkX3VzZXJuYW1lIjoiU2FtYmV nbyIsImlhdCI6MTUxNjIzOTAyMn0.8dgxpiPlES mjugv2GynQiY9a5LrGvWVKW5RI6eoch9A
  40. 40. A JSON Web token is made from 3 different parts ● The header ● The payload ● The signature
  41. 41. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI iwicHJlZmVycmVkX3VzZXJuYW1lIjoiU2FtYmV nbyIsImlhdCI6MTUxNjIzOTAyMn0.8dgxpiPlES mjugv2GynQiY9a5LrGvWVKW5RI6eoch9A
  42. 42. Header { "alg": "HS256", "typ": "JWT" }
  43. 43. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI iwicHJlZmVycmVkX3VzZXJuYW1lIjoiU2FtYmV nbyIsImlhdCI6MTUxNjIzOTAyMn0.8dgxpiPlES mjugv2GynQiY9a5LrGvWVKW5RI6eoch9A
  44. 44. Payload { "sub": "1234567890", "given_name": "Sam", "family_name": "Bellen", "preferred_username": "Sambego", "iat": 1516239022 }
  45. 45. Reserved claims
  46. 46. Public claims
  47. 47. Private claims
  48. 48. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI iwicHJlZmVycmVkX3VzZXJuYW1lIjoiU2FtYmV nbyIsImlhdCI6MTUxNjIzOTAyMn0.8dgxpiPlES mjugv2GynQiY9a5LrGvWVKW5RI6eoch9A
  49. 49. Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), ✨your-256-bit-secret✨ )
  50. 50. JWTs can be verified!
  51. 51. Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), ✨your-256-bit-secret✨ )
  52. 52. Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), this-is-a-super-secret-key )
  53. 53. Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), nPilVwFjcF0v5NL5YT1xsiwRJCGqM1do )
  54. 54. jwt.io
  55. 55. Demo time!
  56. 56. The future of authentication?
  57. 57. Web Authentication API https://www.w3.org/TR/webauthn/
  58. 58. Web Authn https://www.w3.org/TR/webauthn/
  59. 59. No more passwords! 🎉
  60. 60. That’s not new, we’ve had passwordless login for a while now
  61. 61. Loggin in with an authenticator device
  62. 62. api.sambego.be
  63. 63. api.sambego.be 123434 123123 987213 783541
  64. 64. api.sambego.be 123434 123123 987213 783541
  65. 65. api.sambego.be Public Key
  66. 66. api.sambego.be Public Key
  67. 67. Demo time!
  68. 68. Who has an authenticator device?
  69. 69. One last time, any questions?
  70. 70. Thanks! @sambego

×