The Ultimate Authentication Course with NestJS and React

Create and configure a new authentication project by installing Node.js, using Visual Studio Code, and running npm scripts to launch the app on port 8000, then connect to the database.

Connect to the free my school database using the recommended package, map entities to tables, and configure local host, port, user Ruth, and database next to prepare the user table.

Create a user entity with an auto-incrementing id as the primary key, first name, last name, email, and password, enforce unique email, and map to a database table.

Create a NestJS user controller and a register endpoint at api/register using a post request, returning the body for testing with Postman.

Create and inject a user service with a user repository, save a new user after validating password match, hash the password before saving, and confirm successful user registration.

Log in by sending a post request with email and password, verify the user and password, throw unauthorized errors on failure, and prepare to return access tokens.

Learn to implement JWT-based authentication in NestJS and React by creating access and refresh tokens, securing them in HttpOnly cookies, and configuring token expiry and payloads.

Learn how to enable CORS in NestJS to allow the frontend on port 3000 to receive cookies and refresh tokens by setting allowed origins, credentials, and a global API prefix.

retrieve authenticated users by issuing a get request with a bearer access token, decode the jwt payload to extract the user id, and return the user data without the password.

learn to implement a refresh token flow in NestJS and React by creating a post /refresh endpoint, reading the token from cookies, validating it, and issuing a new access token.

Implement logout by clearing the refresh token cookie with a post request, return a success message, and plan to revoke tokens in the database.

Learn to revoke tokens by creating a refresh token table (token entity) and a token service to store, validate, and delete refresh tokens on logout, reducing login risk.

Create a reset model and service in NestJS, generate a token, save the email and token in a reset table, and implement a forgot password post endpoint.

Learn to send test emails in a NestJS and React setup using mailhog, install and configure a mailer module, and send a reset password email with a clickable link.

Reset password workflow uses a post request with a token, validates the password and confirmation, finds the reset by token, updates the user’s password (hashed), and returns a success message.

Set up the React frontend, start the dev server with npm start, and integrate Bootstrap for the sign-in form while updating class to className in React.

Create and export login and register components using TypeScript in a React-based authentication workflow, returning forms with email, first name, last name, password, and password confirm fields.

Explore dynamic routing in a React app using react-router-dom, BrowserRouter, and Route to navigate between login, register, and home components, with a Bootstrap header for navigation.

Build a register form in React using useState for first name, last name, email, password, and password confirmation; submit via axios to /api/register and navigate to login on success.

Learn to implement login by simplifying the form to email and password, navigate to home on success, and handle tokens stored in cookies with authorization header for subsequent requests.

Fetch the authenticated user in home component after login using useEffect, calling /api/user with the access token, and display the user's first and last name, noting the 30-second token expiry.

We implement interceptors to refresh access tokens on 401 errors, update the authorization header, retry the original request, and set a base url with credentials for cookies.

Show the authenticated user in the nav, implement logout with credentials and cookies, and prevent infinite refresh loops using an interceptor and a refresh flag.

Install redux toolkit and react-redux, configure the store with configureStore, and wrap the app with the provider to manage the authenticated user state.

Create a Redux Toolkit slice to manage authentication with an isAuthenticated boolean, dispatch actions, and connect useDispatch and useSelector to reflect login status in the UI.

Add forgot password functionality to the authentication flow by creating a forgot component, handling email input, posting to the forgot endpoint, and notifying users with success or error messages.

Implement a password reset flow in a NestJS and React app. Build a reset form that submits token, password, and password confirm, then redirects to login on success.

Implement two factor authentication by adding a dfa_secret to the user entity, generating a speakeasy secret for a QR code, and returning tokens after validation.

Describe implementing two-factor authentication with nestjs and react by sending a six-digit authenticator code via a QR code and secret, validating with speakeasy, and issuing access and refresh tokens.

Expand the login flow by implementing two-factor authentication, refactoring the login form into multiple components, and managing redirects with a typed success callback.

Design and implement an authenticator form in a React-based login flow, handling login data, transitioning to an authenticator input for a six-digit code, and validating via TSX state and props.

Implement two-factor authentication by generating and displaying a QR code from the OTP URL, collecting the authenticator code, submitting login data asynchronously, and updating the redux state on successful authentication.

Set up Google authentication in NestJS and React by creating Google OAuth credentials, verifying ID tokens, and issuing access and refresh tokens after user lookup or creation.

Install the react google login package, render the button with the google cloud client ID, and send the token to the backend, handling success, failure, and credentials in requests.