Save 37% off PRO during our Black Friday Sale! »

A Token Walks into SPA

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

6c3e7ef20801b4b967dc1643f63d6233?s=128

Ignacio Anaya

November 16, 2018
Tweet

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

  5. 5

  6. 6

  7. 7

  8. 8

  9. 9

  10. ! Stateless 10

  11. ! JSON Web Tokens JWT 11

  12. header.payload.signature + Base64 12

  13. 13

  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
  19. 19

  20. ! 20

  21. 21

  22. 22

  23. 23

  24. ! nhl.com 24

  25. 25

  26. 26

  27. 27

  28. 28

  29. 29

  30. 30

  31. ! Not really... 31

  32. ! Store the token 32

  33. localStorage 33

  34. 34

  35. ! Silent Auth 35

  36. 36

  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