Vue.js ❤️ JWT

JWT seems to be the new black in the authentication world. It is also a perfect fit when we need to add security in the client side. I will make an introduction to JWT, share my experience using it to "protect" SPA and show how easy is to implement it in your Vue.js app.

Transcript

1. Vue.js ❤ JWT { Vue.js ❤ JWT } - @ianaya89 1
2. Ignacio Anaya @ianaya89 > Full Stack Developer, Tech Trainer & Speaker > @Auth0 Ambassador > @Vuenos_Aires Organizer { Vue.js ❤ JWT } - @ianaya89 2
3. ! Why Tokens? 4 Stateless 4 Decoupled 4 Scalable { Vue.js ❤ JWT } - @ianaya89 3
4. { Vue.js ❤ JWT } - @ianaya89 4
5. ! Why JWT? 4 Standard 4 Secure 4 Self Contained 4 JSON ! { Vue.js ❤ JWT } - @ianaya89 5
6. JWT { Vue.js ❤ JWT } - @ianaya89 6
7. JWT ! Header { "alg": "HS256", "typ": "JWT" } { Vue.js ❤ JWT } - @ianaya89 7
8. JWT ! Payload { "sub": "1234567890", "name": "John Doe", "admin": true, "iss": "https://api.com" } { Vue.js ❤ JWT } - @ianaya89 8
9. JWT ✍ Signature HMACSHA256( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret ) { Vue.js ❤ JWT } - @ianaya89 9
10. JWT ! Use Cases 4 SPA's 4 Serverless 4 API's 4 Mobile 4 IoT { Vue.js ❤ JWT } - @ianaya89 10
11. { Vue.js ❤ JWT } - @ianaya89 11
12. ! What we need? 4 Auth Api 4 vue-router 4 trae (http library) 4 localStorage { Vue.js ❤ JWT } - @ianaya89 12
13. Server Auth = Auth Client Auth = UX { Vue.js ❤ JWT } - @ianaya89 13
14. ! Auth API 4 Send credentials & get JWT 4 Validate JWT 4 node, express, jsonwebtoken, express-jwt { Vue.js ❤ JWT } - @ianaya89 14
15. ! vue-router 4 SPA's 4 1 route = 1 component { Vue.js ❤ JWT } - @ianaya89 15
16. ! vue-router Routes Meta const router = new Router({ routes: [{ path: '/', component: Home }, { path: '/login', component: Login, meta: { isPublic: true } }] }) { Vue.js ❤ JWT } - @ianaya89 16
17. ! 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
18. ! trae 4 HTTP Library 4 Fetch Wrapper with steroids 4 Similar axios 4 Promised Based { Vue.js ❤ JWT } - @ianaya89 18
19. ! 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
20. trae Middlewares trae.before((config) => { const token = '123456789' config.headers['Authentication'] = token return config }) { Vue.js ❤ JWT } - @ianaya89 20
21. 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
22. Demo { Vue.js ❤ JWT } - @ianaya89 22
23. More? { Vue.js ❤ JWT } - @ianaya89 23
24. More! 4 jwt.io 4 Auth0 4 jwt-handbook 4 trae { Vue.js ❤ JWT } - @ianaya89 24
25. Questions { Vue.js ❤ JWT } - @ianaya89 25
26. ! Thanks! @ianaya89 { Vue.js ❤ JWT } - @ianaya89 26