A Token Walks into SPA

# 📝Description
We often need to deal with token-based authentication when building Single Page Applications. There is a lot of fear, uncertainty and doubt when it comes to JWTs, so how can you be sure you are handling token-based auth properly?

In this talk, I will cover best practices when it comes to implementing token-based authentication using JWTs in a Vue.js SPA.

# 📚Resources
- https://jwt.io
- https://auth0.com/resources/ebooks/jwt-handbook
- https://auth0.com/blog/json-web-token-signing-algorithms-overview
- https://auth0.com/docs/api-auth/tutorials/silent-authentication

Transcript

1. A Token Walks into SPA !" 1
2. ! Nacho Anaya @ianaya89 • JavaScript Engineer @BloqInc • Ambassador @Auth0 • Organizer @Vuenos_Aires 2
3. ⚠ 3
4. Why Tokens? ! 4
10. ! Stateless 10
11. ! JSON Web Tokens JWT 11
12. header.payload.signature + Base64 12
14. ! Header { "alg": "HS256", "typ": "JWT" } 14
15. ! Payload { "iss": "https://api.website.com", "exp": 1510745797148, "role": "root", "name": "John Doe" } 15
16. ! Payload { "iss": "https://api.website.com", "exp": 1510745797148, "role": "root", "name": "John Doe" } 16
17. ✍ Signature const data = base64urlEncode( header ) + '.' + base64urlEncode( payload ) HMACSHA256(data, 'your_secret_message') 17
18. ✍ Signature const data = base64urlEncode( header ) + '.' + base64urlEncode( payload ) HMACSHA256(data, 'your_secret_message') 18
20. ! 20
24. ! nhl.com 24
31. ! Not really... 31
32. ! Store the token 32
33. localStorage 33
35. ! Silent Auth 35
37. ! 37
38. ! JWT Considera.ons 38
39. ! Vue Router const router = new Router({ routes: [{ path: '/', component: Home }, { path: '/tickets', component: Ticket, meta: { isPublic: false, permission: 'write' } }] }) 39
40. ! Vue Router router.beforeEach((to, from, next) => { // resolve auth // check if page is public // check if user has permission next() }) 40
41. ! HTTP Interpectors // Example using axios axios.interceptors.request.use( config => { config.headers.authorization = 'Bearer ...' return config }, error => Promise.reject(error) ) 41
42. ! Vuex export default new Vuex.Store({ state: { token: 'Bearer ...' user : {} } }) 42
43. ! Resources • jwt.io • JWT Handbook • JWT Algorithms • Post about Silent Auth 43
44. ! Take Away 44
45. ! Thanks! @ianaya89 45