Authentication for the REST of us

A presentation at Nation JS in May 2019 in Washington, DC, USA by Divya

Slide 1

Slide 1

THE INTERNET IN THE BEGINNING… username username username ••••••••••• ••••••••••• username username ••••••••••• ••••••••••• username ••••••••••• ••••••••••• ••••••••••• username ••••••••••• username username ••••••••••• ••••••••••• username username username ••••••••••• username ••••••••••• ••••••••••• username username ••••••••••• usern usern ••••••••••• ••••••• ••••••• username ••••••••••• username username ••••••••••• ••••••••••• username username ••••••••••• ••••••••••• username username ••••••••••• username ••••••••••• •••••••••••

Slide 2

Slide 2

THE INTERNET IN THE BEGINNING…

Slide 3

Slide 3

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVC J9.eyJhcHBfbWV0YWRhdGEiOnsiYXV0aG9 yaXphdGlvbiI6eyJyb2xlcyI6WyJhZG1pb iIsImVkaXRvciJdfX19.4IKFHH33EXWseN jNIRO4-u5IlSlJOLyibG20qPA4Djs ????????? ????????? ?????????

Slide 4

Slide 4

Authentication for the REST of us Divya Sasidharan @shortdiv

Slide 5

Slide 5

works here Divya Sasidharan

Slide 6

Slide 6

Slide 7

Slide 7

WHY DOES IT MATTER? INTRODUCTION SECURITY STRATEGIES WHERE AUTHENTICATION WHAT WHO WHY WHEN HOW DON’T PANIC AUTHENTICATION INTRODUCTION

Slide 8

Slide 8

INTRODUCTION SECURITY STRATEGIES AUTHENTICATION DON’T PANIC AUTHENTICATION WHO WHAT WHY WHERE WHEN HOW INTRODUCTION WHY DOES IT MATTER?

Slide 9

Slide 9

WHY DOES IT MATTER? AUTHENTICATION WHY DOES IT MATTER?

Slide 10

Slide 10

AUTHENTICATION WHY DOES IT MATTER?

Slide 11

Slide 11

AUTHENTICATION WHY DOES IT MATTER?

Slide 12

Slide 12

AUTHENTICATION

Slide 13

Slide 13

CHARACTERISTICS HISTORY HOW TO HAVE FUN WITH AUTHORIZATION HOW TO NOT CONFUSE YOURSELF WHAT TO AVOID AUTHENTICATION

Slide 14

Slide 14

AUTHORIZATION AUTHENTICATION AUTHORIZATION

Slide 15

Slide 15

AUTHENTICATION AUTHORIZATION User Authenticated: Hitchhiker

Slide 16

Slide 16

AUTHENTICATION AUTHORIZATION ERROR: Hitchhiker NOT AUTHORIZED

Slide 17

Slide 17

AUTHENTICATION AUTHORIZATION

Slide 18

Slide 18

HOW IT WORKS AUTHENTICATION

Slide 19

Slide 19

AUTHENTICATION HOW IT WORKS username •••••••••••

Slide 20

Slide 20

AUTHENTICATION HOW BASIC IT WORKS AUTH Username: FPrefect Password: thisisn0t@dri11 1 RlByZWZlY3Q6dGhpc2lzbjB0QGRya 2 TEx

Slide 21

Slide 21

AUTHENTICATION HOW IT WORKS Username:Password FPrefect:thisisn0t@dri11 Authorization: Basic RlByZWZlY3Q6dGhpc2lzbjB0 QGRyaTEx BASIC AUTH { 3 “id”:”89765-1”, “role”:”hitchhiker”, “email”:”ford@infinidim.com”, … 4 }

Slide 22

Slide 22

AUTHENTICATION HOW IT WORKS BASIC AUTH { “id”:”89765-1”, “role”:”hitchhiker”, “email”:”ford@infinidim.com”, … Authorization: Basic RlByZWZlY3Q6dGhpc2lzbjB0 QGRyaTEx }

Slide 23

Slide 23

AUTHENTICATION HOW IT WORKS BASIC AUTH

Slide 24

Slide 24

AUTHENTICATION HOW IT WORKS BASIC AUTH

Slide 25

Slide 25

AUTHENTICATION SESSION HOWBASED IT WORKS AUTH Username: FPrefect Password: thisisn0t@dri11 1 2 setcookie:hiker=“SESSION_ID; path=/; Secure; HttpOnly; SameSite”

Slide 26

Slide 26

AUTHENTICATION HOW IT WORKS SESSION BASED AUTH { cookie:“hiker=XHTGubdsnHFJ 3 KHHJGFJHGKHhgjgJHNJGHGJHjs ddsBHJGGFJKHtcbjBUY” “id”:”89765-1”, “role”:”hitchhiker”, “email”:”ford@infinidim.com”, … 4 }

Slide 27

Slide 27

AUTHENTICATION HOW IT WORKS SESSION BASED AUTH

Slide 28

Slide 28

AUTHENTICATION HOW IT WORKS SESSION BASED AUTH

Slide 29

Slide 29

AUTHENTICATION TOKEN HOW BASED IT WORKS AUTH SESSION BASED AUTH

Slide 30

Slide 30

AUTHENTICATION HOW IT WORKS Username: FPrefect Password: thisisn0t@dri11 1 TOKEN BASED AUTH eyJhbGciOiJIUzI1NiIsInR5cCI6I kpXVCJ9.eyJuYW1lIjoiRm9yZCBQc mVmZWN0Iiwic3ViIjoiZm9yZEBpbm ZpbmlkaW0uY29tIiwiaWF0IjoxNTE 2 2MjM5MDIyLCJhcHBfbWV0YWRhdGEi OnsiYXV0aG9yaXphdGlvbiI6eyJyb 2xlcyI6WyJqb3VybmFsaXN0Il19fX 0.0eXsZauX7hjEB9oGjx7cg6LdyU8 QzNnFFS7tevWnqCA

Slide 31

Slide 31

AUTHENTICATION HOW IT WORKS Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5c CI6IkpXVCJ9.eyJuYW1lIjoiR m9yZCBQcmVmZWN0Iiwic3ViIj oiZm9yZEBpbmZpbmlkaW0uY29 tIiwiaWF0IjoxNTE2MjM5MDIy LCJhcHBfbWV0YWRhdGEiOnsiY XV0aG9yaXphdGlvbiI6eyJyb2 xlcyI6WyJqb3VybmFsaXN0Il1 9fX0.0eXsZauX7hjEB9oGjx7c g6LdyU8QzNnFFS7tevWnqCA TOKEN BASED AUTH { 3 “id”:”89765-1”, “role”:”hitchhiker”, “email”:”ford@infinidim.com”, … 4 }

Slide 32

Slide 32

JWT AUTHENTICATION HOW IT WORKS TOKEN BASED AUTH

Slide 33

Slide 33

AUTHENTICATION TOKEN BASED AUTH JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ 9.eyJuYW1lIjoiRm9yZCBQcmVmZWN0Iiwic 3ViIjoiZm9yZEBpbmZpbmlkaW0uY29tIiwi aWF0IjoxNTE2MjM5MDIyLCJhcHBfbWV0YWR hdGEiOnsiYXV0aG9yaXphdGlvbiI6eyJyb2 xlcyI6WyJqb3VybmFsaXN0Il19fX0.0eXsZ auX7hjEB9oGjx7cg6LdyU8QzNnFFS7tevWn qCA

Slide 34

Slide 34

AUTHENTICATION TOKEN BASED AUTH JWT signature payload header eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ 9.eyJuYW1lIjoiRm9yZCBQcmVmZWN0Iiwic 3ViIjoiZm9yZEBpbmZpbmlkaW0uY29tIiwi aWF0IjoxNTE2MjM5MDIyLCJhcHBfbWV0YWR hdGEiOnsiYXV0aG9yaXphdGlvbiI6eyJyb2 xlcyI6WyJqb3VybmFsaXN0Il19fX0.0eXsZ auX7hjEB9oGjx7cg6LdyU8QzNnFFS7tevWn qCA

Slide 35

Slide 35

AUTHENTICATION { } { } TOKEN BASED AUTH JWT “alg”: “HS256”, “typ”: “JWT” “name”: “Ford Prefect”, “sub” : “ford@infinidim.com”, “exp” : “1577836800”, “app_metadata”: { “authorization”: { “roles”: [ “journalist” ] } }, header

Slide 36

Slide 36

AUTHENTICATION { } { } TOKEN BASED AUTH JWT “alg”: “HS256”, RS256 “typ”: “JWT” “name”: “Ford Prefect”, “sub” : “ford@infinidim.com”, “exp” : “1577836800”, “app_metadata”: { “authorization”: { “roles”: [ “journalist” ] } }, header

Slide 37

Slide 37

AUTHENTICATION { } { } TOKEN BASED AUTH JWT “alg”: “HS256”, “typ”: “JWT” “name”: “Ford Prefect”, “sub” : “ford@infinidim.com”, “exp” : “1577836800”, “app_metadata”: { “authorization”: { “roles”: [ “journalist” ] } }, header

Slide 38

Slide 38

AUTHENTICATION { } { } { TOKEN BASED AUTH JWT “alg”: “HS256”, “typ”: “JWT” “name”: “Ford Prefect”, “sub” : “ford@infinidim.com”, “exp” : “1577836800”, “app_metadata”: { “authorization”: { “roles”: [ “journalist” ] } }, payload

Slide 39

Slide 39

“name”: “Ford Prefect”, “sub” : “ford@infinidim.com”, JWT AUTHENTICATION TOKEN BASED AUTH “exp” : “1577836800”, “app_metadata”: { “authorization”: { “roles”: [ “journalist” ] } }, } { HMACSHA256( base64UrlEncode(header) + “.” + base64UrlEncode(payload), a-256-bit-super-secret-secret) } signature

Slide 40

Slide 40

AUTHENTICATION TOKEN BASED AUTH JWT

Slide 41

Slide 41

AUTHENTICATION TOKEN BASED AUTH JWT

Slide 42

Slide 42

CHARACTERISTICS HISTORY HOW TOIMPLEMENTATION HAVE FUN WITH HOW TO NOT CONFUSE YOURSELF WHAT TO AVOID AUTHENTICATION TOKEN BASED AUTH

Slide 43

Slide 43

CHARACTERISTICS HISTORY HOW TO HAVE FUN WITH HOW TO NOT CONFUSE YOURSELF WHAT TO AVOID AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION

Slide 44

Slide 44

AUTHENTICATION TOKEN BASED AUTH DEMO IMPLEMENTATION

Slide 45

Slide 45

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION Auth Server Username: FPrefect Password: thisisn0t@dri11 Authorization: Bearer eyJhbGciOJ9.sfsfweHsefw9 .dgergeJGhg9HV… eyJhbGciOJ9.sfsfweHsefw9 .dgergeJGhg9HV… { “id”:”89765-1”, “role”:”hitchhiker”, … } Resource Server

Slide 46

Slide 46

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION

Slide 47

Slide 47

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION Authentication with Functions as a Service |—————-| | THERE | | ARE | | STILL | | SERVERS | | IN | | SERVERLESS| |—————-| (_/) || (•ㅅ•) || / づ |—————-| | THERE | | ARE | | STILL | | SERVERS | | IN | | SERVERLESS| |—————-| (_/) || (•ㅅ•) || / づ |—————-| | THERE | | ARE | | STILL | | SERVERS | | IN | | SERVERLESS| |—————-| (_/) || (•ㅅ•) || / づ |—————-| | THERE | | ARE | | STILL | | SERVERS | | IN | | SERVERLESS| |—————-| (_/) || (•ㅅ•) || / づ

Slide 48

Slide 48

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION

Slide 49

Slide 49

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION MYAWESOMESITE.netlify.com/.netlify/functions/jwt

Slide 50

Slide 50

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION 56 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 const jwt = require(“jsonwebtoken”); const uuidv4 = require(“uuid/v4”); const axios = require(“axios”); exports.handler = function(event, context, callback) { const getExpiryDate = () => { const exp = Math.floor(Date.now() / 1000) + 60 * 60; // const expReadable = new Date(exp); return exp; }; const generateJWT = (exp, claims, roles, secret) => jwt.sign( { exp, app_metadata: { user_id: uuidv4(), authorization: { roles } }, user_metadata: claims }, secret ); const parsedBody = JSON.parse(event.body); const { claims, roles, secret } = parsedBody;

Slide 51

Slide 51

1 const jwt = require(“jsonwebtoken”); 2 const uuidv4 = require(“uuid/v4”); IMPLEMENTATION AUTHENTICATION TOKEN BASED AUTH 3 const axios = require(“axios”); 4 5 exports.handler = function(event, context, callback) { const getExpiryDate = () => { 6 const exp = Math.floor(Date.now() / 1000) + 60 * 60; 7 // const expReadable = new Date(exp); 8 return exp; 9 }; 10 const generateJWT = (exp, claims, roles, secret) => 11 jwt.sign( 12 { 13 exp, 14 app_metadata: { 15 user_id: uuidv4(), 16 authorization: { roles } 17 }, 18 user_metadata: claims 19 }, 20 secret 21 ); 22 const parsedBody = JSON.parse(event.body); 23 const { claims, roles, secret } = parsedBody; 24 25 const expiry = getExpiryDate(); 26 const token = generateJWT(expiry, claims, roles, secret); 27 28 const response = { 29

Slide 52

Slide 52

}, 18 user_metadata: claims 19 }, 20 IMPLEMENTATION TOKEN BASED AUTH secret 21AUTHENTICATION ); 22 const parsedBody = JSON.parse(event.body); 23 const { claims, roles, secret } = parsedBody; 24 25 const expiry = getExpiryDate(); 26 const token = generateJWT(expiry, claims, roles, secret); 27 28 const response = { 29 jwt: token, 30 }; 31 32 callback(null, { 33 statusCode: 200, 34 body: JSON.stringify(response) 35 }); 36 37 }; 38 39 40 41 42 43 44 45 46 47

Slide 53

Slide 53

1 const jwt = require(“jsonwebtoken”); 2 const uuidv4 = require(“uuid/v4”); 3 const axios = require(“axios”); IMPLEMENTATION AUTHENTICATION TOKEN BASED AUTH 4 5 exports.handler = function(event, context, callback) { const getExpiryDate = () => { 6 7 // const expReadable = new Date(exp); 8 return exp; 9 }; 10 const generateJWT = (exp, claims, roles, secret) => 11 jwt.sign( 12 { 13 exp, 14 app_metadata: { 15 user_id: uuidv4(), 16 authorization: { roles } 17 }, 18 user_metadata: claims 19 }, 20 secret 21 ); 22 const parsedBody = JSON.parse(event.body); 23 const { claims, roles, secret } = parsedBody; 24 25 const expiry = getExpiryDate(); 26 const token = generateJWT(expiry, claims, roles, secret); 27 28 const response = { 29 jwt: token, 30

Slide 54

Slide 54

1 const jwt = require(“jsonwebtoken”); 2 const uuidv4 = require(“uuid/v4”); 3 const axios = require(“axios”); IMPLEMENTATION AUTHENTICATION TOKEN BASED AUTH 4 5 exports.handler = function(event, context, callback) { const getExpiryDate = () => { 6 const exp = Math.floor(Date.now() / 1000) + 60 * 60; 7 // const expReadable = new Date(exp); 8 return exp; 9 }; 10 const generateJWT = (exp, claims, roles, secret) => 11 jwt.sign( 12 { 13 exp, 14 app_metadata: { 15 user_id: uuidv4(), 16 authorization: { roles } 17 }, 18 user_metadata: claims 19 }, 20 secret 21 ); 22 const parsedBody = JSON.parse(event.body); 23 const { claims, roles, secret } = parsedBody; 24 25 const expiry = getExpiryDate(); 26 const token = generateJWT(expiry, claims, roles, secret); 27 28 const response = { 29 jwt: token, 30

Slide 55

Slide 55

}, 18 user_metadata: claims 19 }, 20 IMPLEMENTATION AUTHENTICATION TOKEN BASED AUTH secret 21 ); 22 const parsedBody = JSON.parse(event.body); 23 const { claims, roles, secret } = parsedBody; 24 25 const expiry = getExpiryDate(); 26 const token = generateJWT(expiry, claims, roles, secret); 27 28 const response = { 29 jwt: token, 30 }; 31 32 callback(null, { 33 statusCode: 200, 34 body: JSON.stringify(response) 35 }); 36 37 }; 38 39 40 41 42 43 44 45 46 47

Slide 56

Slide 56

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION 56 1 fetch(“/.netlify/functions/jwt”).then(res => { 2 fetch(“/.netlify/functions/super-secret-function”, { 3 method: “POST”, 4 headers: { 5 “Authorization”: Bearer ${res.jwt} 6 }, 7 body: JSON.stringify({ 8 text: someDataIWanttoPost 9 }) 10 }) 11 }) 12 13 14 15 16 17 18 19 20 21 22 23 24

Slide 57

Slide 57

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION Auth Server Username: FPrefect Password: thisisn0t@dri11 Authorization: Bearer eyJhbGciOJ9.sfsfweHsefw9 .dgergeJGhg9HV… eyJhbGciOJ9.sfsfweHsefw9 .dgergeJGhg9HV… { “id”:”89765-1”, “role”:”hitchhiker”, … } Resource Server

Slide 58

Slide 58

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION Auth Server Username: FPrefect Password: thisisn0t@dri11 cookie:“hiker=XHTGubdsnH FJKHHJGFJHGKHhgjgJHNJGHG JHjsddsBHJGGFJKHtcbjBUY” setcookie:hiker=“eyJhbGciOJ 9.sfsfweHsefw9.dgergeJGh g9HV…; path=/; Secure; HttpOnly; SameSite” { “id”:”89765-1”, “role”:”hitchhiker”, … } Resource Server

Slide 59

Slide 59

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION 56 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 const const const const jwt = require(“jsonwebtoken”); uuidv4 = require(“uuid/v4”); cookie = require(“cookie”); axios = require(“axios”); exports.handler = function(event, context, callback) { const getExpiryDate = () => { const exp = Math.floor(Date.now() / 1000) + 60 * 60; // const expReadable = new Date(exp); return exp; }; const generateJWT = (exp, claims, roles, secret) => jwt.sign( { exp, app_metadata: { user_id: uuidv4(), authorization: { roles } }, user_metadata: claims }, secret ); const parsedBody = JSON.parse(event.body);

Slide 60

Slide 60

secret 22 ); 23 const parsedBody = JSON.parse(event.body); 24 IMPLEMENTATION TOKEN BASED const { claims, roles, secret } = AUTH parsedBody; 25AUTHENTICATION 26 const expiry = getExpiryDate(); 27 const token = generateJWT(expiry, claims, roles, secret); 28 29 const netlifyCookie = cookie.serialize(“nf_jwt”, token, { 30 secure: true, 31 path: “/”, 32 expires: new Date(expiry.toString()) 33 }); 34 35 const response = { 36 jwt: token, 37 exp: expiry 38 }; 39 40 callback(null, { 41 statusCode: 200, 42 headers: { 43 “Set-Cookie”: netlifyCookie, 44 “Cache-Control”: “no-cache” 45 }, 46 body: JSON.stringify(response) 47 }); 48 49 }; 50 51

Slide 61

Slide 61

secret 22 ); 23 const parsedBody = JSON.parse(event.body); 24 IMPLEMENTATION TOKEN BASED const { claims, roles, secret } = AUTH parsedBody; 25AUTHENTICATION 26 const expiry = getExpiryDate(); 27 const token = generateJWT(expiry, claims, roles, secret); 28 29 const netlifyCookie = cookie.serialize(“nf_jwt”, token, { 30 secure: true, 31 path: “/”, 32 expires: new Date(expiry.toString()) 33 }); 34 35 const response = { 36 jwt: token, 37 exp: expiry 38 }; 39 40 callback(null, { 41 statusCode: 200, 42 headers: { 43 “Set-Cookie”: netlifyCookie, 44 “Cache-Control”: “no-cache” 45 }, 46 body: JSON.stringify(response) 47 }); 48 49 }; 50 51

Slide 62

Slide 62

AUTHENTICATION TOKEN BASED AUTH DEMO IMPLEMENTATION

Slide 63

Slide 63

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION

Slide 64

Slide 64

AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION auth.js export const state = { … } export const mutations = { … } export const actions = { … } export const getters = { … } src/state/auth.js

Slide 65

Slide 65

AUTHENTICATION 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 TOKEN BASED AUTH IMPLEMENTATION import GoTrue from “gotrue-js”; import axios from “axios”; const auth = new GoTrue({ APIUrl: “https://chipie.netlify.com/.netlify/identity”, audience: “”, setCookie: false }); export const state = { currentUser: getSavedState(“auth.currentUser”), loading: false, token: null, notifications: [] }; export const mutations = { SET_CURRENT_USER(state, value) { state.currentUser = value; saveState(“auth.currentUser”, value); }, TOGGLE_LOAD(state) { state.loading = !state.loading;

Slide 66

Slide 66

AUTHENTICATION 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 C TOKEN BASED AUTH IMPLEMENTATION import GoTrue from “gotrue-js”; import axios from “axios”; const auth = new GoTrue({ APIUrl: “https://chipie.netlify.com/.netlify/identity”, audience: “”, C setCookie: false }); export const state = { currentUser: getSavedState(“auth.currentUser”), loading: false, token: null, notifications: [] }; export const mutations = { SET_CURRENT_USER(state, value) { state.currentUser = value; saveState(“auth.currentUser”, value); }, TOGGLE_LOAD(state) { state.loading = !state.loading;

Slide 67

Slide 67

isLoggedIn(state) { 27 return !!state.currentUser; 28 C } 29AUTHENTICATION IMPLEMENTATION TOKEN BASED AUTH 30 }; 31 32 export const actions = { init() { 33 localStorage.removeItem(“auth.currentUser”); 34 }, 35 validate({ commit, state }) { 36 if (!state.currentUser) return Promise.resolve(null); 37 const user = auth.currentUser(); 38 commit(“SET_CURRENT_USER”, user); 39 return user; 40 }, 41 attemptLogin({ commit, dispatch }, credentials) { 42 return new Promise((resolve, reject) => { 43 dispatch(“attemptConfirmation”, credentials).then(() => { 44 auth 45 .login(credentials.email, credentials.password) 46 .then(response => { 47 resolve(response); 48 commit(“SET_CURRENT_USER”, response); 49 }) 50 .catch(error => { 51 reject(error.json); 52 }); 53 }); 54 }); 55 }, 56

Slide 68

Slide 68

isLoggedIn(state) { 27 return !!state.currentUser; 28 C } 29AUTHENTICATION IMPLEMENTATION TOKEN BASED AUTH 30 }; 31 32 export const actions = { init() { 33 localStorage.removeItem(“auth.currentUser”); 34 }, 35 validate({ commit, state }) { 36 if (!state.currentUser) return Promise.resolve(null); 37 const user = auth.currentUser(); 38 commit(“SET_CURRENT_USER”, user); 39 return user; 40 }, 41 attemptLogin({ commit, dispatch }, credentials) { 42 return new Promise((resolve, reject) => { 43 dispatch(“attemptConfirmation”, credentials).then(() => { 44 C auth 45 C .login(credentials.email, credentials.password) 46 .then(response => { 47 resolve(response); 48 commit(“SET_CURRENT_USER”, response); 49 C }) 50 .catch(error => { 51 reject(error.json); 52 }); 53 }); 54 }); 55 }, 56

Slide 69

Slide 69

11 loading: false, 12 token: null, 13 notifications: [] IMPLEMENTATION TOKEN BASED AUTH 14AUTHENTICATION }; 15 16 export const mutations = { 17 SET_CURRENT_USER(state, value)C{ 18 state.currentUser = value; C 19 saveState(“auth.currentUser”, value); 20 }, 21 TOGGLE_LOAD(state) { 22 state.loading = !state.loading; 23 } 24 }; 25 26 export const getters = { 27 isLoggedIn(state) { 28 return !!state.currentUser; 29 } 30 }; 31 32 export const actions = { 33 init() { 34 localStorage.removeItem(“auth.currentUser”); 35 }, 36 validate({ commit, state }) { 37 if (!state.currentUser) return Promise.resolve(null); 38 const user = auth.currentUser(); 39 commit(“SET_CURRENT_USER”, user); 40 return user;

Slide 70

Slide 70

56AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION 1 <template> 2 <div class=”login-screen”> 3 <div class=”account-login”> 4 <form @submit.prevent=”login()”> 5 <label> 6 <span>Email:</span> 7 <input 8 type=“text” 9 placeholder=“name” 10 v-model=“loginCreds.email” 11 /> 12 </label> 13 <label> 14 <span>Password:</span> 15 <input 16 type=”password” 17 placeholder=”password” 18 v-model=“loginCreds.password” 19 /> 20 </label> 21 <button type=”submit” class=“account-button”>Login</button> 22 </form> 23 </div> 24 </div> 25 </template>

Slide 71

Slide 71

56AUTHENTICATION TOKEN BASED AUTH IMPLEMENTATION 1 <template> 2 <div class=”login-screen”> 3 <div class=”account-login”> 4 <form @submit.prevent=”login()”> 5 <label> 6 <span>Email:</span> 7 <input 8 type=“text” 9 placeholder=“name” 10 v-model=“loginCreds.email” 11 /> 12 </label> 13 <label> 14 <span>Password:</span> 15 <input 16 type=”password” 17 placeholder=”password” 18 v-model=“loginCreds.password” 19 /> 20 </label> 21 <button type=”submit” class=“account-button”>Login</button> 22 </form> 23 </div> 24 </div> 25 </template>

Slide 72

Slide 72

22 </form> 23 </div> 24 </div> IMPLEMENTATION AUTHENTICATION TOKEN BASED AUTH 25 </template> 26 27 <script> 28 import { mapActions } from “vuex”; 29 30 export default { name: “LoginAccount”, 31 data() { 32 return { 33 isNewUser: true, 34 loginCreds: { 35 email: null, 36 password: null 37 } 38 } 39 }, 40 methods: { 41 …mapActions(“auth”, [“attemptLogin”]), 42 transferToDashboard() { 43 this.$router.push(this.$route.query.redirect || “/”); 44 }, 45 login() { 46 let token = decodeURIComponent(window.location.search) 47 .substring(1) 48 .split(“confirmation_token=”)[1]; 49 this.attemptLogin({ token, …this.loginCreds }) 50 .then(res => { 51

Slide 73

Slide 73

34 isNewUser: true, 35 loginCreds: { 36 email: null, IMPLEMENTATION 37AUTHENTICATION password: nullTOKEN BASED AUTH 38 } 39 } 40 }, 41 methods: { 42 …mapActions(“auth”, [“attemptLogin”]), 43 transferToDashboard() { 44 this.$router.push(this.$route.query.redirect || “/”); 45 }, 46 login() { 47 let token = decodeURIComponent(window.location.search) 48 .substring(1) 49 .split(“confirmation_token=”)[1]; 50 this.attemptLogin({ token, …this.loginCreds }) 51 .then(res => { 52 this.transferToDashboard(); 53 }) 54 .catch(err => { 55 console.log(err); 56 }); 57 }, 58 } 59 } 60 </script> 61 62 63

Slide 74

Slide 74

34 isNewUser: true, 35 loginCreds: { 36 email: null, IMPLEMENTATION AUTHENTICATION TOKEN BASED AUTH 37 password: null 38 } 39 } 40 }, 41 methods: { 42 …mapActions(“auth”, [“attemptLogin”]), 43 transferToDashboard() { 44 this.$router.push(this.$route.query.redirect || “/”); 45 }, 46 login() { 47 let token = decodeURIComponent(window.location.search) 48 .substring(1) 49 .split(“confirmation_token=”)[1]; 50 this.attemptLogin({ token, …this.loginCreds }) 51 .then(res => { 52 this.transferToDashboard(); 53 console.log(res); 54 }) 55 .catch(err => { 56 console.log(err); 57 }); 58 }, 59 } 60 } 61 </script> 62 63

Slide 75

Slide 75

AUTHENTICATION HOW IT WORKS IMPLEMENTATION

Slide 76

Slide 76

AUTHENTICATION HOW IT WORKS IMPLEMENTATION

Slide 77

Slide 77

AUTHENTICATION DON’T ROLL YOUR OWN Passwordless MFA SSO Centralized Auth Social Login

Slide 78

Slide 78

AUTHENTICATION DON’T ROLL YOUR OWN Passwordless MFA SSO Centralized Auth Social Login

Slide 79

Slide 79

AUTHENTICATION LINKS AND THINGS Roll your own JWT code: https://github.com/shortdiv/jwt-generate example: https://login-to-gated-site.netlify.com/ Identity Example code: https://github.com/shortdiv/gotruejs-in-vue example: https://netlify-gotrue-in-vue.netlify.com/

Slide 80

Slide 80

So Long and Thanks for All the Auth!!! Divya Sasidharan @shortdiv