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

1. Securing PWAs

2. Sam Bellen
● Developer Evangelist at Auth0
● Google Developer Expert
● Co-organizer Fronteers
meetups Belgium
● I tweet as @sambego

3. Traditional web apps

12. Any questions so far?

13. Traditional web app
VS
Single page application

14. Traditional architecture

15. Single page architecture
app.sambego.be api.sambego.be
user.sambego.be
pay.sambego.be

16. Multi app architecture
app.sambego.be
api.sambego.beMobile app
Desktop app

17. What are some of the problems
with the traditional cookie based
approach?

18. Cookies don’t like CORS

19. Cookies require state

20. Cookies don’t flow

21. app.sambego.be api.sambego.be user.sambego.be

22. So what’s the solution?

23. Token based authentication

24. OAuth

25. OpenID Connect

34. 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

35. OpenID Connect

36. app.sambego.be
api.sambego.be
account.sambego.be

37. app.sambego.be
api.sambego.be
account.sambego.be

38. app.sambego.be
api.sambego.be
account.sambego.be

39. app.sambego.be
api.sambego.be
account.sambego.be

40. app.sambego.be
api.sambego.be
account.sambego.be

41. app.sambego.be
api.sambego.be
account.sambego.be

42. Will the user have to login with
every visit?

43. The login flow remains the same

44. app.sambego.be
api.sambego.be
account.sambego.be

45. With each next visit we will request
the tokens again

46. app.sambego.be
api.sambego.be
account.sambego.be

47. app.sambego.be
api.sambego.be
account.sambego.be

48. app.sambego.be
api.sambego.be
account.sambego.be

49. Does this approach solve CORS?

50. Does this approach solve flow?

51. Does this approach solve keeping
state?

52. Some questions by now?

53. What the #&$* is a token?

54. JSON Web Token

55. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz
dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ
SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI
iwicHJlZmVycmVkX3VzZXJuYW1lIjoiU2FtYmV
nbyIsImlhdCI6MTUxNjIzOTAyMn0.8dgxpiPlES
mjugv2GynQiY9a5LrGvWVKW5RI6eoch9A

56. A JSON Web token is made from 3
different parts
● The header
● The payload
● The signature

57. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz
dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ
SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI
iwicHJlZmVycmVkX3VzZXJuYW1lIjoiU2FtYmV
nbyIsImlhdCI6MTUxNjIzOTAyMn0.8dgxpiPlES
mjugv2GynQiY9a5LrGvWVKW5RI6eoch9A

58. Header
{
"alg": "HS256",
"typ": "JWT"
}

59. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz
dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ
SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI
iwicHJlZmVycmVkX3VzZXJuYW1lIjoiU2FtYmV
nbyIsImlhdCI6MTUxNjIzOTAyMn0.8dgxpiPlES
mjugv2GynQiY9a5LrGvWVKW5RI6eoch9A

60. Payload
{
"sub": "1234567890",
"given_name": "Sam",
"family_name": "Bellen",
"preferred_username": "Sambego",
"iat": 1516239022
}

61. Reserved claims

62. Public claims

63. Private claims

64. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJz
dWIiOiIxMjM0NTY3ODkwIiwiZ2l2ZW5fbmFtZ
SI6IlNhbSIsImZhbWlseV9uYW1lIjoiQmVsbGVuI
iwicHJlZmVycmVkX3VzZXJuYW1lIjoiU2FtYmV
nbyIsImlhdCI6MTUxNjIzOTAyMn0.8dgxpiPlES
mjugv2GynQiY9a5LrGvWVKW5RI6eoch9A

65. Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
✨your-256-bit-secret✨
)

66. JWTs can be verified!

67. Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
✨your-256-bit-secret✨
)

68. Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
this-is-a-super-secret-key
)

69. Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
nPilVwFjcF0v5NL5YT1xsiwRJCGqM1do
)

70. jwt.io

71. Demo time!

72. The future of authentication?

73. Web Authentication API
https://www.w3.org/TR/webauthn/

74. Web Authn
https://www.w3.org/TR/webauthn/

75. No more passwords! 🎉

76. That’s not new, we’ve had
passwordless login for a while now

77. Loggin in with an authenticator
device

78. api.sambego.be

79. api.sambego.be
123434
123123
987213
783541

80. api.sambego.be
123434
123123
987213
783541

81. api.sambego.be
Public
Key

82. api.sambego.be
Public
Key

83. Demo time!

84. Who has an authenticator device?

85. One last time, any questions?

86. Thanks!
@sambego