A Token Walks Into a BarΒ ...
SPA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4998326/takeoff.png)
Ado Kukic
Developer Evangelist
Auth0
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
SPA
Β
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
Security Best Practices
@kukicado
...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748986/noun_69258_395115.png)
https://avengers.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748991/noun_2553_0d5267.png)
User
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748986/noun_69258_395115.png)
https://api.avengers.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4743661/ngvuereact.png)
https://app.avengers.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748989/noun_150441_0d5267.png)
Avengers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748988/noun_697275_0d5267.png)
OK Google, Call Tony Stark
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
JSON Web Tokens
JWT's (RFC 7519) are an open industry standardΒ method for representing claims securely between two parties.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
JSON Web Tokens
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626306/thor_license.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
How is a Drivers License like a JSON Web Token?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626306/thor_license.jpg)
Header
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI
Drivers License
New York State
{
"alg":"HS256",
Β "typ":"JWT"
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626306/thor_license.jpg)
Payload
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI
Picture
Name
Address
Demographics
Restrictions
{
Β "sub": "1234567890",
Β "given_name": "Thor",
Β "family_name" : "Odinson",
Β "admin": true
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626306/thor_license.jpg)
Signature
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI
UV Light
Hologram
HMACSHA256( header + "." + payload, "lokisucks" )
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748993/noun_52603_617b3a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748994/noun_686678_59a8c0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626306/thor_license.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748995/noun_40293_59a8c0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626306/thor_license.jpg)
π
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748993/noun_52603_617b3a.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748994/noun_686678_59a8c0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626306/thor_license.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626306/thor_license.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4644137/noun_512341_c30e2e.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626314/thor_fake.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748986/noun_69258_395115.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4743661/ngvuereact.png)
/v1/sos
{ "status": 401 }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748986/noun_69258_395115.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4743661/ngvuereact.png)
/v1/auth
{
Β "status": 200,
"jwt" :"eyJhbGciOiJIU.."
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748986/noun_69258_395115.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4743661/ngvuereact.png)
/v1/sos
-H "Authorization: Bearer eyJhbGciOiJ..."
{ Β "status": 200, "message" : "ok", Β "avenger" : "Hulk", Β ... }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
Example (Axios)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
axios.post(
this.apiUrl + '/sos',
{
description: "Help, Thanos!"
},
{
headers: {
Authorization: "Bearer " + this.jwt
}
}
).then(function(data){
console.log(data); // {message: "ok", avenger: "Hulk"}
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748986/noun_69258_395115.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4743661/ngvuereact.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
api.avengers.com
app.avengers.com
login.avengers.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748986/noun_69258_395115.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4743661/ngvuereact.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
api.avengers.com
app.avengers.com
login.avengers.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4748986/noun_69258_395115.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4743661/ngvuereact.png)
π
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
@kukicado
api.avengers.com
app.avengers.com
login.avengers.com
Resources
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
Overview of JWT Signing Algorithms
http://bit.ly/jwt-alg
JWT Handbook
http://bit.ly/jwt-book
General JWT Resources
jwt.ioΒ
@kukicado
Summary
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
JSON Web Tokens are excellent for securing SPA applications.
Many excellent JWT LibrariesΒ exist for all languages and frameworks.
Single Page Application security is mainly concerned with authorization.Β
A security guard couldn't stop Thor, but your server can refuse requests without valid JWT's.
@kukicado
Thank You
@kukicado
Β
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4626284/badge.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/830923/images/4998326/takeoff.png)
A Token Walks Into a SPA (TakeOff Conf 2018)
By Ado Kukic
A Token Walks Into a SPA (TakeOff Conf 2018)
- 808