@leichteckig The Important Parts.

@leichteckig Who are Vue?

@leichteckig Who are Vue?

@leichteckig Who are Vue?

@leichteckig Who are Vue? Authn vs Authz

@leichteckig Who are Vue? Authn vs Authz

@leichteckig Who are Vue? Authn vs Authz

@leichteckig Who are Vue?

@leichteckig Who are Vue?

@leichteckig Who are Vue? Something you…

@leichteckig Who are Vue? Something you… …know.

@leichteckig Who are Vue? Something you… …know. …have.

@leichteckig Who are Vue? Something you… …know. …have. …are.

@leichteckig Who are Vue?

@leichteckig Who are Vue? Single factor

@leichteckig Who are Vue? Stackblitz GitHub

@leichteckig Who are Vue? Stackblitz GitHub

@leichteckig Who are Vue? Stackblitz GitHub

@leichteckig Who are Vue? Stackblitz GitHub

@leichteckig Who are Vue? Stackblitz GitHub

@leichteckig Who are Vue? Stackblitz GitHub

@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

@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

@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

@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

@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;

@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;

@leichteckig Who are Vue? Stackblitz

@leichteckig Who are Vue? Stackblitz

@leichteckig Who are Vue?

@leichteckig Who are Vue? JWT-Token

@leichteckig Who are Vue? JWT Token jwt.io

@leichteckig Who are Vue? Stackblitz jsonwebtoken

@leichteckig Who are Vue? Stackblitz jsonwebtoken

@leichteckig Who are Vue? Beware ... Stackblitz

@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...

@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...

@leichteckig Who are Vue?

@leichteckig Who are Vue?

@leichteckig Who are Vue?

@leichteckig Who are Vue? Single Sign On

@leichteckig Who are Vue? Single Sign On Social Login

@leichteckig Who are Vue?

@leichteckig Who are Vue?

@leichteckig Who are Vue? One does not simply build authentication

@leichteckig Who are Vue? Vue SDK Docs Try it!

@leichteckig Who are Vue?

@leichteckig Who are Vue?

@leichteckig Who are Vue?

@leichteckig Who are Vue? Secure authentication is crucial

@leichteckig Who are Vue? Secure authentication is crucial Authn != Authz

@leichteckig Who are Vue? Secure authentication is crucial Authn != Authz Three factors to remember

@leichteckig Who are Vue? Secure authentication is crucial Authn != Authz Three factors to remember Implementation in Vue via libraries or tools

@leichteckig