Securing Vue.js Applications with JSON Web Tokens

Ado Kukic

Developer Evangelist

Auth0

@kukicado

VueJS / SPA

Security Best Practices

...

https://myapp.com

User

📃

https://api.myapp.com

https://app.myapp.com

MyApp

OK, MyApp

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

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"
)

Vue JS

Single Page Application

Implicit Grant Flow

Baseline

{ json }

Authentication

Authenticated

{ json }

Silent Authentication

{ json }

Silent Authentication

{ json }

iframe

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.

Thank You

@kukicado