Vue.js ❤️ JWT - Speaker Deck

Slide 1

Slide 1 text

Vue.js ❤ JWT { Vue.js ❤ JWT } - @ianaya89 1

Slide 2

Slide 2 text

Ignacio Anaya @ianaya89 > Full Stack Developer, Tech Trainer & Speaker > @Auth0 Ambassador > @Vuenos_Aires Organizer { Vue.js ❤ JWT } - @ianaya89 2

Slide 3

Slide 3 text

! Why Tokens? 4 Stateless 4 Decoupled 4 Scalable { Vue.js ❤ JWT } - @ianaya89 3

Slide 4

Slide 4 text

{ Vue.js ❤ JWT } - @ianaya89 4

Slide 5

Slide 5 text

! Why JWT? 4 Standard 4 Secure 4 Self Contained 4 JSON ! { Vue.js ❤ JWT } - @ianaya89 5

Slide 6

Slide 6 text

JWT { Vue.js ❤ JWT } - @ianaya89 6

Slide 7

Slide 7 text

JWT ! Header { "alg": "HS256", "typ": "JWT" } { Vue.js ❤ JWT } - @ianaya89 7

Slide 8

Slide 8 text

JWT ! Payload { "sub": "1234567890", "name": "John Doe", "admin": true, "iss": "https://api.com" } { Vue.js ❤ JWT } - @ianaya89 8

Slide 9

Slide 9 text

JWT ✍ Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret ) { Vue.js ❤ JWT } - @ianaya89 9

Slide 10

Slide 10 text

JWT ! Use Cases 4 SPA's 4 Serverless 4 API's 4 Mobile 4 IoT { Vue.js ❤ JWT } - @ianaya89 10

Slide 11

Slide 11 text

{ Vue.js ❤ JWT } - @ianaya89 11

Slide 12

Slide 12 text

! What we need? 4 Auth Api 4 vue-router 4 trae (http library) 4 localStorage { Vue.js ❤ JWT } - @ianaya89 12

Slide 13

Slide 13 text

Server Auth = Auth Client Auth = UX { Vue.js ❤ JWT } - @ianaya89 13

Slide 14

Slide 14 text

! Auth API 4 Send credentials & get JWT 4 Validate JWT 4 node, express, jsonwebtoken, express-jwt { Vue.js ❤ JWT } - @ianaya89 14

Slide 15

Slide 15 text

! vue-router 4 SPA's 4 1 route = 1 component { Vue.js ❤ JWT } - @ianaya89 15

Slide 16

Slide 16 text

! vue-router Routes Meta const router = new Router({ routes: [{ path: '/', component: Home }, { path: '/login', component: Login, meta: { isPublic: true } }] }) { Vue.js ❤ JWT } - @ianaya89 16

Slide 17

Slide 17 text

! vue-router Guardian Navs router.beforeEach((to, from, next) => { // resolve if user is authenticated... if (!to.meta.isPublic && !isAuthenticated()) { return next('login') } next() }) { Vue.js ❤ JWT } - @ianaya89 17

Slide 18

Slide 18 text

! trae 4 HTTP Library 4 Fetch Wrapper with steroids 4 Similar axios 4 Promised Based { Vue.js ❤ JWT } - @ianaya89 18

Slide 19

Slide 19 text

! trae Example import trae from 'trae' trae.baseUrl('http://api:com') trae.get('/', {}) .then(res => console.log(res.data)) .catch(err => console.log('[ERROR]', err)) { Vue.js ❤ JWT } - @ianaya89 19

Slide 20

Slide 20 text

trae Middlewares trae.before((config) => { const token = '123456789' config.headers['Authentication'] = token return config }) { Vue.js ❤ JWT } - @ianaya89 20

Slide 21

Slide 21 text

localStorage trae.post('/auth', { email, password }) .then(res => { localStorage.token = res.data localStorage.user = atob(res.data.split('.')[1]) }) .catch(err => console.log('[ERROR]', err)) { Vue.js ❤ JWT } - @ianaya89 21