Who are vue? Authn in Vue, the important parts

In the ever-evolving landscape of modern single-page applications, VueJS stands out, but it also presents us with challenges. Among them, authentication is a crucial one: ensuring the user's identity and securing their journey within your application. Fear not, though; we're here to guide you through these exciting frontiers.

In our session, we'll unravel the secrets of authentication in VueJS applications, making it a delightful learning journey for everyone while keeping the focus on the most important parts. We'll provide an overview of an authentication flow, break down each step, and demystify the role of JWT tokens in the process.

Whether you're a seasoned VueJS developer or just getting started, you're in for a treat. A dash of prior experience with user authentication certainly doesn't hurt, but it's optional. We welcome all, no prior knowledge is necessary – bring your curiosity and enthusiasm to explore the world of user authentication!

Transcript

1. @leichteckig The Important Parts.
2. @leichteckig Who are Vue?
3. @leichteckig Who are Vue?
4. @leichteckig Who are Vue?
5. @leichteckig Who are Vue? Authn vs Authz
6. @leichteckig Who are Vue? Authn vs Authz
7. @leichteckig Who are Vue? Authn vs Authz
8. @leichteckig Who are Vue?
9. @leichteckig Who are Vue?
10. @leichteckig Who are Vue? Something you…
11. @leichteckig Who are Vue? Something you… …know.
12. @leichteckig Who are Vue? Something you… …know. …have.
13. @leichteckig Who are Vue? Something you… …know. …have. …are.
14. @leichteckig Who are Vue?
15. @leichteckig Who are Vue? Single factor
16. @leichteckig Who are Vue? Stackblitz GitHub
17. @leichteckig Who are Vue? Stackblitz GitHub
18. @leichteckig Who are Vue? Stackblitz GitHub
19. @leichteckig Who are Vue? Stackblitz GitHub
20. @leichteckig Who are Vue? Stackblitz GitHub
21. @leichteckig Who are Vue? Stackblitz GitHub
22. @leichteckig Who are Vue? // Import required libraries and create Express App ... const users = [{ ... }]; // Create a simple, mocked user // Login route app.post('/login', (req, res) => { const { username, password } = req.body.data; // Replace this with your database query to fetch user data const user = users.find((u) => u.username === username && u.password === password); // Simple mock response if (user) { res.status(200).json({ message: 'User is authenticated' }); } else { res.status(401).json({ message: 'Invalid username or password' }); } }) // Start the server... Stackblitz
23. @leichteckig Who are Vue? // Import required libraries and create Express App ... const users = [{ ... }]; // Create a simple, mocked user // Login route app.post('/login', (req, res) => { const { username, password } = req.body.data; // Replace this with your database query to fetch user data const user = users.find((u) => u.username === username && u.password === password); // Simple mock response if (user) { res.status(200).json({ message: 'User is authenticated' }); } else { res.status(401).json({ message: 'Invalid username or password' }); } }) // Start the server... Stackblitz
24. @leichteckig Who are Vue? // Import required libraries and create Express App ... const users = [{ ... }]; // Create a simple, mocked user // Login route app.post('/login', (req, res) => { const { username, password } = req.body.data; // Replace this with your database query to fetch user data const user = users.find((u) => u.username === username && u.password === password); // Simple mock response if (user) { res.status(200).json({ message: 'User is authenticated' }); } else { res.status(401).json({ message: 'Invalid username or password' }); } }) // Start the server... Stackblitz
25. @leichteckig Who are Vue? // Import required libraries and create Express App ... const users = [{ ... }]; // Create a simple, mocked user // Login route app.post('/login', (req, res) => { const { username, password } = req.body.data; // Replace this with your database query to fetch user data const user = users.find((u) => u.username === username && u.password === password); // Simple mock response if (user) { res.status(200).json({ message: 'User is authenticated' }); } else { res.status(401).json({ message: 'Invalid username or password' }); } }) // Start the server... Stackblitz
26. @leichteckig Who are Vue? // Imports… const routes = [ { path: '/', component: Home }, { path: '/login', component: Login }, // Protected route { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true }} ]; const router = createRouter({ history: createWebHashHistory(), routes }); export default router;
27. @leichteckig Who are Vue? // Imports… const routes = [ { path: '/', component: Home }, { path: '/login', component: Login }, // Protected route { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true }} ]; const router = createRouter({ history: createWebHashHistory(), routes }); export default router;
28. @leichteckig Who are Vue? Stackblitz
29. @leichteckig Who are Vue? Stackblitz
30. @leichteckig Who are Vue?
31. @leichteckig Who are Vue? JWT-Token
32. @leichteckig Who are Vue? JWT Token jwt.io
33. @leichteckig Who are Vue? Stackblitz jsonwebtoken
34. @leichteckig Who are Vue? Stackblitz jsonwebtoken
35. @leichteckig Who are Vue? Beware ... Stackblitz
36. @leichteckig Who are Vue? //... app.use(cors({credentials: true, origin: ‘http://localhost:8080'})); //… // Login route app.post('/login', (req, res) => { //... if (!user) { res.status(401).json({ message: 'Invalid username or password' }); } const token = jwt.sign(...); res.setHeader('Set-Cookie', `user_token=${token}; HttpOnly;`); res.json({ user, token }); }) // Start the server...
37. @leichteckig Who are Vue? //... app.use(cors({credentials: true, origin: ‘http://localhost:8080'})); //… // Login route app.post('/login', (req, res) => { //... if (!user) { res.status(401).json({ message: 'Invalid username or password' }); } const token = jwt.sign(...); res.setHeader('Set-Cookie', `user_token=${token}; HttpOnly;`); res.json({ user, token }); }) // Start the server...
38. @leichteckig Who are Vue?
39. @leichteckig Who are Vue?
40. @leichteckig Who are Vue?
41. @leichteckig Who are Vue? Single Sign On
42. @leichteckig Who are Vue? Single Sign On Social Login
43. @leichteckig Who are Vue?
44. @leichteckig Who are Vue?
45. @leichteckig Who are Vue? One does not simply build authentication
46. @leichteckig Who are Vue? Vue SDK Docs Try it!
47. @leichteckig Who are Vue?
48. @leichteckig Who are Vue?
49. @leichteckig Who are Vue?
50. @leichteckig Who are Vue? Secure authentication is crucial
51. @leichteckig Who are Vue? Secure authentication is crucial Authn != Authz
52. @leichteckig Who are Vue? Secure authentication is crucial Authn != Authz Three factors to remember
53. @leichteckig Who are Vue? Secure authentication is crucial Authn != Authz Three factors to remember Implementation in Vue via libraries or tools
54. @leichteckig