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.

1. WTH is a JWT
A Quick Intro To Token Based Authentication

2. @joel__lord
#i?JS18
About Me
@joel__lord
joellord

3. Traditional
Applications
! Browser requests a
login page

4. Traditional
Applications
! Browser requests a
login page

5. Traditional
Applications
! Browser requests a
login page

6. Traditional
Applications
! Browser requests a
login page
! The server validates
on its database

7. Traditional
Applications
! Browser requests a
login page
! The server validates
on its database
👍

8. Traditional
Applications
! Browser requests a
login page
! The server validates
on its database
! It creates a session
and provides a
cookie identifier

9. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application

10. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled

11. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled
! Sharing credentials
to connect to another
API

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. Token Based Auth !

14. OAuth

15. @joel__lord
CharmCityJS
Authentication Flows
Implicit Flow

16. @joel__lord
CharmCityJS
Authentication Flows
Implicit Flow

17. @joel__lord
CharmCityJS
Authentication Flows
Implicit Flow

18. @joel__lord
CharmCityJS
Authentication Flows
Implicit Flow

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. JSON Web Token
! Header
! Payload
! Signature
Header
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
Payload
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG
9yZCIsImFkbWluIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlY
WQgcG9zdHM6d3JpdGUifQ
Signature
XesR-pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg

21. JSON Web Token
! Header
! Payload
! Signature eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMj
M0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG9yZCIsImFkbWl
uIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlYWQgcG9zdHM6d
3JpdGUifQ.XesR-
pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg

22. JSON Web Token
! Header
! Payload
! Signature
Image: https://jwt.io

23. Code

24. Authentication
Create a JWT

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. @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. @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. API
Validate a JWT

29. @joel__lord
CharmCityJS
Validate a JWT
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSm9lbCBMb3JkIiwiaWF0IjoxNTI1MTc2NDI3fQ
.V89hohVfp1uVNfunkpdlewNyvGCX5iPPxe1YpM-RqRg

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. @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. Front End
Handle a JWT

33. @joel__lord
CharmCityJS
Front-End
Add the headers

34. Live Demo
https://github.com/joellord/
secure-spa-auth0

35. Delegation!

36. WTH is a JWT
@joel__lord
joellord
Charm City JS
May 2nd, 2018