The Ultimate Authentication Course with Django and React

Install Python and follow the Django quickstart to create a new project and a core app with settings, views, and models, then run the development server on port 8000.

Connect to the local my school database jungle_oath, configure root credentials and host localhost, test the connection, and migrate to populate the empty database for the wrist framework features.

Extend the abstract user to create a custom user model with unique email for login, configure settings, and run migrations to create the core user table.

Create a Django REST framework register API view, expose api/register in core URLs, and test a post request that returns hello before user serialization.

Define a Django REST framework user serializer to convert user objects to JSON, selecting id, first_name, last_name, email, and password, validate passwords, save, and return serialized user without exposing password.

Use serializer extra_kwargs to set password as write_only, extract and hash it with set_password in create, then save the user so the password is stored hashed and never exposed.

Implement a login api view that accepts email and password via post and returns serialized user data after validation. Raise same invalid credentials exception for incorrect inputs.

learn to create json web tokens (jwt) for authentication by building an access token (30 seconds) and a seven-day refresh token with a user id payload and http-only cookie storage.

Retrieve the authenticated user by sending the access token in the authorization header and decoding the JWT to obtain the user id, then serialize and return the user data.

Create a JWT authentication middleware that extends the base authentication, overrides authenticate, reads the authorization header, retrieves the user, and returns serialized user data for every request.

Implement a refresh token flow by creating a refresh api view that reads the refresh token from cookies and decodes it to issue a new access token after 30 seconds.

Extend the logo API view to log out by deleting the refresh token cookie and returning a success response, ensuring authentication ends and highlighting a future fix.

Add a user token model to store refresh tokens with created at and expired at fields and run migrations. Validate and revoke tokens on login, refresh, and logout for security.

Create a reset model with email and token, where the token is unique. Generate a random token and store it with the email via a reset api post, then test.

Configure mail hook and Django's send_mail to send reset password emails, including host, port, from address, and recipients, then test the forgot API flow.

Implement a Django DRF reset password API view that validates password and password confirm, verifies the token and user email, updates the password, and returns a success response.

Set up the React frontend by initializing with npm, run npm start, customize the sign-in form with Bootstrap, replace inputs and adjust className for a functional login.

Develop login and register components in a components directory using TypeScript, exporting login and register components that render the form structure, including first name, last name, and password confirm fields.

Create dynamic navigation for login, register, and home using react-router's BrowserRouter, Routes, and Link; build a shared header with Bootstrap, add route components, and ensure navigation updates without URL typing.

Build a register form with React hooks, handle input changes, prevent default submit, send a post request to /api/register with underscored keys, and redirect to login on success.

Master the login flow in Django and React by using email and password, handling cookies, and applying access and refresh tokens with the authorization header for secure requests.

Fetch the authenticated user in the home component using the access token, update the name in state, and display the login message. The tokens expire after 30 seconds.

Learn how to implement interceptors that refresh access tokens using a refresh endpoint, handle 401 errors, set authorization headers, and retry failed requests in a Django and React authentication setup.

Update the navigation to show logout for authenticated users. Handle logout by clearing cookies and headers, and prevent infinite refresh with a refresh flag.

Explore configuring Redux Toolkit to manage authentication state, install Redux Toolkit and react-redux, set up a store with configureStore, and wrap the app with a provider.

Manage authentication state with Redux Toolkit by creating a slice, setting an initial false authenticated value, and updating it with a set action using action payload, dispatch, and selectors.

Add forgot password functionality from the sign in page by creating a forgot password component that submits the user email and shows success or error notifications with a reset email.

Learn to implement a reset password workflow in a Django and React app by capturing a token from URL, submitting password and password confirm, and redirecting to login on success.

Add a two factor authentication secret to the user model and create an api view that generates a base32 secret and a provisioning uri for Google authenticator.

Implement a two-factor authentication flow in the django backend: generate or fetch a user secret, display a qr code, verify the code, and issue tokens.

Expand the login flow by adding two-factor authentication, refactor the login form into separate components, and implement a redirect with a success callback in a React and TypeScript setup.

Build a TSX authenticator form that validates a six-digit code, handles login data including secret and QR code, and switches from the login form to the authenticator after login.

Display the two-factor authentication QR code by rendering the image from the OTP URL. Submit login data and the authenticator code, verify a 200 OK response, and redirect on success.

Learn to implement Google authentication in a Django and React app by creating OAuth credentials, verifying the frontend token in a Django API view, and issuing access and refresh tokens.

Integrate Google authentication by adding a Google login button to the login form, configure the client id from Google Cloud, and send the token to the backend to complete login.