A Token Walks Into a Bar ...

SPA

Ado Kukic

Developer Evangelist

Auth0

@kukicado

SPA

Security Best Practices

...

https://piedpiper.com

User

📃

https://api.piedpiper.com

https://app.piedpiper.com

PiedPiper

OK, PiedPiper

JSON Web Tokens

JWT's (RFC 7519) are an open industry standard method for representing claims securely between two parties.

JSON Web Tokens

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI

How is a Drivers License like a JSON Web Token?

Header

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI

Drivers License

New York State

{
  "alg":"HS256",
  "typ":"JWT"
}

Payload

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI

Picture

Name

Address

Demographics

Restrictions

{
  "sub": "1234567890",
  "given_name": "Thor",      
  "family_name" : "Odinson",
  "admin": true
}

Signature

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOmZhbHNlfQ.uI_rNanTsZ_wFa1VnICzq2txKeYPArda5QLdVeQYFGI

UV Light

Hologram

HMACSHA256(
  header + "." + payload,
  "lokisucks"
)

👍

📝

✋

💰

🔗

/v1/orders

✋

{ "status": 401 }

🔑

/v1/auth

🈺

{ 
  "status": 200,
  "jwt" :"eyJhbGciOiJIU.." 
}

🔗🈺

/v1/orders

-H "Authorization: Bearer eyJhbGciOiJ..."

📃

{ 
  "status": 200,
  "order_id" : 138,
  "total_cost" : 27.99,
  ...
}

🔑

🈺

🔗🈺

📃

🔑

🈺

🔗🈺

📃

🍪

🔄

🈺

🔗🈺

📃

🍪

JWT and Vue

Library

Framework

Why Vue?

Live Demo

🤞

Summary

JSON Web Tokens are excellent for securing SPA applications.

Many excellent HTTP Libraries exist and makes it easy to work with JWT's.

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.

Thank You

@kukicado