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. A Token Walks into SPA
    !"
    1

    View Slide

  2. !
    Nacho Anaya
    @ianaya89
    • JavaScript Engineer @BloqInc
    • Ambassador @Auth0
    • Organizer @Vuenos_Aires
    2

    View Slide


  3. 3

    View Slide

  4. Why Tokens?
    !
    4

    View Slide

  5. 5

    View Slide

  6. 6

    View Slide

  7. 7

    View Slide

  8. 8

    View Slide

  9. 9

    View Slide

  10. !
    Stateless
    10

    View Slide

  11. !
    JSON Web Tokens
    JWT
    11

    View Slide

  12. header.payload.signature
    + Base64
    12

    View Slide

  13. 13

    View Slide

  14. !
    Header
    {
    "alg": "HS256",
    "typ": "JWT"
    }
    14

    View Slide

  15. !
    Payload
    {
    "iss": "https://api.website.com",
    "exp": 1510745797148,
    "role": "root",
    "name": "John Doe"
    }
    15

    View Slide

  16. !
    Payload
    {
    "iss": "https://api.website.com",
    "exp": 1510745797148,
    "role": "root",
    "name": "John Doe"
    }
    16

    View Slide


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

    View Slide


  18. Signature
    const data = base64urlEncode( header ) + '.' + base64urlEncode( payload )
    HMACSHA256(data, 'your_secret_message')
    18

    View Slide

  19. 19

    View Slide

  20. !
    20

    View Slide

  21. 21

    View Slide

  22. 22

    View Slide

  23. 23

    View Slide

  24. !
    nhl.com
    24

    View Slide

  25. 25

    View Slide

  26. 26

    View Slide

  27. 27

    View Slide

  28. 28

    View Slide

  29. 29

    View Slide

  30. 30

    View Slide

  31. !
    Not really...
    31

    View Slide

  32. !
    Store the token
    32

    View Slide

  33. localStorage
    33

    View Slide

  34. 34

    View Slide

  35. !
    Silent Auth
    35

    View Slide

  36. 36

    View Slide

  37. !
    37

    View Slide

  38. !
    JWT Considera.ons
    38

    View Slide

  39. !
    Vue Router
    const router = new Router({
    routes: [{
    path: '/',
    component: Home
    }, {
    path: '/tickets',
    component: Ticket,
    meta: { isPublic: false, permission: 'write' }
    }]
    })
    39

    View Slide

  40. !
    Vue Router
    router.beforeEach((to, from, next) => {
    // resolve auth
    // check if page is public
    // check if user has permission
    next()
    })
    40

    View Slide

  41. !
    HTTP Interpectors
    // Example using axios
    axios.interceptors.request.use(
    config => {
    config.headers.authorization = 'Bearer ...'
    return config
    },
    error => Promise.reject(error)
    )
    41

    View Slide

  42. !
    Vuex
    export default new Vuex.Store({
    state: {
    token: 'Bearer ...'
    user : {}
    }
    })
    42

    View Slide

  43. !
    Resources
    • jwt.io
    • JWT Handbook
    • JWT Algorithms
    • Post about Silent Auth
    43

    View Slide

  44. !
    Take Away
    44

    View Slide

  45. !
    Thanks!
    @ianaya89
    45

    View Slide