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.
Securing PWAs
Sam Bellen
● Developer Evangelist at Auth0
● Google Developer Expert
● Co-organizer Fronteers
meetups Belgium
● I tweet as...
Traditional web apps
Any questions so far?
Traditional web app
VS
Single page application
Traditional architecture
Single page architecture
app.sambego.be api.sambego.be
user.sambego.be
pay.sambego.be
Multi app architecture
app.sambego.be
api.sambego.beMobile app
Desktop app
What are some of the problems
with the traditional cookie based
approach?
Cookies don’t like CORS
Cookies require state
Cookies don’t flow
app.sambego.be api.sambego.be user.sambego.be
So what’s the solution?
Token based authentication
OAuth
OpenID Connect
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...
OpenID Connect
app.sambego.be
api.sambego.be
account.sambego.be
app.sambego.be
api.sambego.be
account.sambego.be
app.sambego.be
api.sambego.be
account.sambego.be
app.sambego.be
api.sambego.be
account.sambego.be
app.sambego.be
api.sambego.be
account.sambego.be
app.sambego.be
api.sambego.be
account.sambego.be
Will the user have to login with
every visit?
The login flow remains the same
app.sambego.be
api.sambego.be
account.sambego.be
With each next visit we will request
the tokens again
app.sambego.be
api.sambego.be
account.sambego.be
app.sambego.be
api.sambego.be
account.sambego.be
app.sambego.be
api.sambego.be
account.sambego.be
Does this approach solve CORS?
Does this approach solve flow?
Does this approach solve keeping
state?
Some questions by now?
What the #&$* is a token?
JSON Web Token
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz
dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ
SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI
i...
A JSON Web token is made from 3
different parts
● The header
● The payload
● The signature
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz
dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ
SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI
i...
Header
{
"alg": "HS256",
"typ": "JWT"
}
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz
dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ
SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI
i...
Payload
{
"sub": "1234567890",
"given_name": "Sam",
"family_name": "Bellen",
"preferred_username": "Sambego",
"iat": 15162...
Reserved claims
Public claims
Private claims
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz
dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ
SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI
i...
Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
✨your-256-bit-secret✨
)
JWTs can be verified!
Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
✨your-256-bit-secret✨
)
Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
this-is-a-super-secret-key
)
Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
nPilVwFjcF0v5NL5YT1xsiwRJCGqM1do
)
jwt.io
Demo time!
The future of authentication?
Web Authentication API
https://www.w3.org/TR/webauthn/
Web Authn
https://www.w3.org/TR/webauthn/
No more passwords! 🎉
That’s not new, we’ve had
passwordless login for a while now
Loggin in with an authenticator
device
api.sambego.be
api.sambego.be
123434
123123
987213
783541
api.sambego.be
123434
123123
987213
783541
api.sambego.be
Public
Key
api.sambego.be
Public
Key
Demo time!
Who has an authenticator device?
One last time, any questions?
Thanks!
@sambego
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
AP Hogeschool - Knock knock, who's there? Authenticating your single page apps using JSON Web Tokens.
Upcoming SlideShare
Loading in …5
×

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

191 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

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

×