The Ultimate Authentication Course with Django and VueJS

Set up the Django project, install Python from python.org, follow quickstart to install Django, create an empty folder, run django-admin startproject, and run the dev server to view in browser.

Connect to the my school database locally using root credentials and the jungle_oath database on localhost:3306. Test the connection and prepare for migrations later as you configure settings.

Extend the Django user model to login by email, add first name, last name, email, and password fields, and run migrations to create the core user table.

Create a register api view to add users via a post request to /api/register, wired into core urls and routes, with serialization planned for actual creation.

Build a user serializer using a model serializer to expose id, first name, last name, and email, validate password and password confirm, and avoid exposing passwords in the API.

Show how the serializer's create method handles passwords by popping the password from validated data, hashing it with Django's built-in function, saving the user, and not exposing the password.

Implement a login API view that accepts email and password via post, validates the user by email, checks the password with check_password, and returns the serialized user.

Build jwt-based authentication by creating an access token (user id, 30-second expiry) and a 7-day refresh token, stored in an httpOnly cookie for the frontend.

Resolve cross-origin resource sharing issues between the Django backend and VueJS frontend by installing cors headers middleware, enabling origin access, and allowing credentials to deliver access and refresh tokens.

Decode and verify access token via the authorization header and JWT decoding to identify authenticated user. Return the user id or raise unauthenticated errors if token is invalid or expired.

learn to build a reusable jwt authentication middleware in django rest framework by overriding authenticate, reading the authorization header, retrieving the user, and applying it to views via authentication_classes.

Create a refresh API view to refresh tokens; retrieve the refresh token from cookies, decode it to obtain the user id, and issue a new access token.

Extend the logo api view to implement logout by deleting the refresh token cookie, return a success message, and ensure unauthenticated access if the cookie is removed.

Implement a secure logout by adding a user token model, running migrations, and storing refresh tokens on login; validate and revoke tokens on logout to prevent unauthorized access.

Create a password reset flow by adding a reset model with email and a unique token, generate the token, migrate the database, and implement a reset api endpoint for testing.

Implement a password reset workflow by sending emails with Mail Hook, configure Django mail settings, and generate secure reset links to the frontend using a token.

Build a Django reset password api view that processes a post request, validates the token and password confirm from the url, updates the user password, and returns a success response.

Understand how to implement a Django exception handler to convert 403 responses to 401 unauthorized for certain requests, using a custom exceptions module and an interceptor in settings.

Create and configure a Vue project with TypeScript, Vuex, and Vue 3 features using the Vue CLI, and run the dev server on port 88 to bootstrap the sign-in form.

Refactor the navigation by creating a nav component, removing unnecessary bootstrap code, and using a rotor view to render login, register, and home components via rotor links.

Leverage the Vue 3 composition API to create a reactive registration form in TypeScript, bind inputs with v-model, submit via axios, and redirect to the login page on success.

Set up a login form with reactive data and post credentials to the API. Use the access token in headers and secure a refresh token in an http-only cookie.

Fetch the authenticated user with access and refresh tokens in a Vue 3 app, updating a ref message with the user's name on mount.

Implement interceptors to automatically refresh expired access tokens with a refresh token, retry failed requests, and update the authorization header across subsequent calls.

Turn the header logo into a clickable link that triggers logout via a credentialed backend call, using an isauthenticated flag set on mounted and a one-time 401 refresh guard.

Learn how to manage authenticated user state across components with Vuex, using actions and mutations to toggle is authenticated, dispatch events, and reflect login and logout in the user interface.

Learn to implement a forgot password flow in a Django and VueJS authentication setup by submitting an email to the backend, handling success and error notifications with reactive state.

Build a reset password component by copying from register, wiring password and password confirm inputs, token from the route, posting via axios, and redirecting to login after success.

Enable two factor authentication by adding a secret to the user model, migrating the database, and generating a QR code for Google Authenticator using an OTP library.

Implement a two-factor authentication flow by returning or generating the user secret and QR code URL, then verify codes to issue tokens and save the secret on first login.

Implement two-factor authentication on the frontend by refactoring the logging component into a logging form, emitting login data via context to the authenticator form with reactive data and TypeScript casting.

Create an authenticator form linked to the login flow, including a six-digit code input, TypeScript props, and a two-factor post request to secure sign-in.

implement qr code based two-factor authentication by displaying a qr code, installing the qr code package, rendering the image, and handling a successful login with state and redirect.

Implement Google authentication in a Django backend by creating Google credentials, verifying tokens from frontend with Google OAuth, and creating or fetching a user, then issuing access and refresh tokens.

Implement google authentication on the frontend with vue 3 by adding a log in with google button and configuring the google client id.