Exercise: Authentication & Authorization

Using: Node.js, Express, MariaDB, Vue2, vue-router, Objection/Knex, Axios, cookie-parser, JSON Web Tokens (JWT), and Bcrypt.

Example Functionality

1. Register a new account
2. Log in to your account
3. Update your user profile (form submission)
4. Log out of your account

Server

REST API

Examples of custom RESTful APIs built with Node.js and Express:

exercise-vue-auth-jwt-bcrypt/server/api/index.js

Line 46 in 2ebffeb

router.post('/register', async (req, res) => {

exercise-vue-auth-jwt-bcrypt/server/api/index.js

Line 188 in 2ebffeb

router.get('/get/user/:id/public', requireSession, async (req, res) => {

ORM

Examples of database interaction performed using Objection with Knex:

exercise-vue-auth-jwt-bcrypt/server/logic/index.js

Line 203 in 2ebffeb

async function getUserPets(id) {

exercise-vue-auth-jwt-bcrypt/server/logic/index.js

Line 402 in 2ebffeb

async function doRegisterUser(formData) {

Sessions

Examples of managing authentication sessions using JSON Web Tokens (JWT):

exercise-vue-auth-jwt-bcrypt/server/logic/index.js

Line 16 in 2ebffeb

function createToken(id) {

exercise-vue-auth-jwt-bcrypt/server/logic/index.js

Line 24 in 2ebffeb

async function requireSession(req, res, next) {

exercise-vue-auth-jwt-bcrypt/server/logic/index.js

Line 36 in 2ebffeb

async function validateSession(session) {

Password Hashing

Examples of hashing passwords using Bcrypt:

exercise-vue-auth-jwt-bcrypt/server/logic/index.js

Line 10 in 2ebffeb

async function createHash(password) {

exercise-vue-auth-jwt-bcrypt/server/logic/index.js

Line 332 in 2ebffeb

async function doBcryptCompare(id, password) {

exercise-vue-auth-jwt-bcrypt/server/logic/index.js

Line 407 in 2ebffeb

hashedPassword: await createHash(formData.password),

Client

Navigation Guards

Examples of protecting application routes using navigation guards with vue-router:

exercise-vue-auth-jwt-bcrypt/client/src/index.js

Line 7 in 2ebffeb

async function findExistingSession(to, from, next) {

exercise-vue-auth-jwt-bcrypt/client/src/index.js

Line 21 in 2ebffeb

async function guardBehindSession(to, from, next) {

exercise-vue-auth-jwt-bcrypt/client/router.js

Line 17 in 2ebffeb

beforeEnter: findExistingSession,

exercise-vue-auth-jwt-bcrypt/client/router.js

Line 53 in 2ebffeb

beforeEnter: guardBehindSession

exercise-vue-auth-jwt-bcrypt/client/vue/private/app/UserEditor.vue

Line 104 in 2ebffeb

const session = await axios.get('/api/get/cookie').then((result) => { return result; }).catch((error) => { throw error; });

Form Handling

Examples of handling form submission data using Vue2 (Options API) and Axios:

exercise-vue-auth-jwt-bcrypt/client/vue/public/PortalRegistrationForm.vue

Line 40 in 2ebffeb

async handleSubmit() {