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