Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Ignacio Anaya

November 16, 2018
Tweet

More Decks by Ignacio Anaya

Other Decks in Programming

Transcript

  1. 5

  2. 6

  3. 7

  4. 8

  5. 9

  6. 13

  7. ✍ Signature const data = base64urlEncode( header ) + '.'

    + base64urlEncode( payload ) HMACSHA256(data, 'your_secret_message') 17
  8. ✍ Signature const data = base64urlEncode( header ) + '.'

    + base64urlEncode( payload ) HMACSHA256(data, 'your_secret_message') 18
  9. 19

  10. 21

  11. 22

  12. 23

  13. 25

  14. 26

  15. 27

  16. 28

  17. 29

  18. 30

  19. 34

  20. 36

  21. ! Vue Router const router = new Router({ routes: [{

    path: '/', component: Home }, { path: '/tickets', component: Ticket, meta: { isPublic: false, permission: 'write' } }] }) 39
  22. ! Vue Router router.beforeEach((to, from, next) => { // resolve

    auth // check if page is public // check if user has permission next() }) 40
  23. ! HTTP Interpectors // Example using axios axios.interceptors.request.use( config =>

    { config.headers.authorization = 'Bearer ...' return config }, error => Promise.reject(error) ) 41