The Ultimate Authentication Course with NestJS and VueJS

Set up a new project by installing node.js, choosing an editor, creating files, running npm run start dev, and previewing hello world at localhost:8000 after port changes.

Connect to a local database by installing my school database, map entities to tables, test the connection via a workbench, and prepare to create the user table.

Create a user entity mapped to a database table with TypeORM in NestJS and VueJS, defining id, first name, last name, email with a unique index, and password.

Create the user controller, update the user model, and implement a POST /api/register endpoint that echoes the request body for testing with Postman.

This lecture demonstrates creating a user service in NestJS, injecting a user repository, validating password confirmation, hashing the password, and saving a new user through the controller.

Implement a login post request sending email and password, validate credentials by locating the user by email and comparing the hashed password.

Create access and refresh tokens with the user id payload. Return them as cookies with one week expiration, accessible only to the backend via a NestJS jwt service.

Enable cors and credentials for frontend on a port, configure allowed origins and api prefix, and ensure login responses return 200 so refresh tokens can be retrieved by frontend.

Retrieve the access token from authorization header, strip the Bearer prefix, decode the JWT payload to get user id, fetch user via API, and return the response without password.

Create a refresh endpoint in NestJS that reads the refresh token from cookies, verifies and decodes it to issue a new access token, returning status 200 on success.

Logout by posting to the logout endpoint, clearing the refresh token cookie, and returning a success message; expired access tokens prevent new tokens, and the database will revoke tokens.

Course covers revoking tokens by introducing a refresh token table, saving each token with expiry, validating tokens against the database during refresh, and deleting tokens on logout to harden security.

Create a reset model and service to support password recovery, generate a random token, and expose a post /forgot endpoint that saves the email and token in the database.

Configure and test sending password reset emails using mailhog and a mailer model, set up endpoints with host and port, and include a reset link aligned to the front-end port.

Learn to reset passwords via a token-based post request: validate new password and confirmation, locate the user by email, update the hashed password, and return a success message after testing.

Create a new Vue project via the CLI, selecting TypeScript, Vuex, and Vue 3, then run it on port 88 and customize with Bootstrap using a signing template.

Create a navigation component and header to manage home, login, and register views, then use a router view with paths '/logging' and '/register' and router links.

Register a user with Vue 3 composition API by creating reactive form data, binding inputs via v-model, and posting to the backend before redirecting to login on success.

Learn to implement a login flow with a reactive form, sending credentials to a NestJS backend, handling access and refresh tokens with cookies, and securing requests with a bearer token.

Fetch authenticated user via axios get request to localhost:8000/api/user with the access token in headers, and update the message using ref after mounting.

Learn how to implement axios interceptors to automatically refresh access tokens using a refresh token, retry failed requests, and preserve authenticated user state.

Change the header to a logo button and manage authentication with an isAuthenticated flag set on mounted; implement logout with credentials and a single refresh flag to prevent loops.

Learn to manage authentication state with Vuex by defining isAuthenticated, creating actions and mutations to update it immutably, and sharing the authenticated user across components via the store.

Implement a forgot password flow by wiring a login link to a forgot component, collecting the user email, posting to the forgot endpoint, and showing success or error notifications.

Learn to build a reset password view by reusing the forgot and register code, posting password and password confirm with a token via axios, then redirect to login.

Implement two factor authentication by adding a DFA secret to the user entity, generating a QR code with speakeasy, and returning the secret or user id for front-end display.

Implement two-factor authentication by scanning a QR code, submitting a six-digit code, optionally using a secret, validating with speakeasy, and issuing access and refresh tokens.

Enable two-factor authentication on the frontend by refactoring logging flow: create a logging folder, split the logging component into a logging form, and emit login data toward the authenticator form.

Learn to build an authenticator form in a Vue and TypeScript setup, handling login data, a six-digit code, and a two-factor authentication flow with API requests and token handling.

Learn to display a qr code for authenticator setup by installing a qr code package, generating the image, and handling the two-factor authentication login flow.

Explore Google authentication in a NestJS backend by creating Google Cloud credentials, obtaining a client ID, verifying tokens, creating users when needed, and issuing access and refresh tokens with cookies.

Implement Google authentication in a Vue 3 frontend by adding a login with Google button using the vue3 google package to obtain and send a token to the Bequant backend.