The Ultimate Authentication Course with NodeJS and React

Set up the development environment by installing node.js, selecting a code editor, creating a project directory, initializing npm, creating index.js, and running npm start to enable live reload.

Install and configure TypeScript for a NodeJS and React project, adding tsconfig.json, installing as a dev dependency, and enabling watch mode with npm start.

Install express with types express for a TypeScript setup, create an app, enable JSON parsing, define a simple get route, and listen on port eight thousand.

Connect to MySQL locally using MySQL Workbench or an alternative tool; install MySQL, set up a schema, test the connection on localhost:3306, and prep for the next tutorial.

Connect Express to a database using TypeORM, install and configure dependencies, define entities mapped to tables, and ensure the database connection starts before the server listens on a port.

Create your first entity by defining a user class with decorators that map to a database table. Define id as the primary generated column, enforce a unique email, and synchronize to auto-create the user table when the app runs on port 8000.

Implement a post /api/register route wired to a register controller, validate password and password confirm, hash with bcryptjs, and save new user via TypeORM repository.

Handle login by posting to api/login, fetch the user by email, compare the provided password to the hashed password, return invalid credentials on failure, and anticipate the JWT token next.

Create a jwt by signing to generate access and refresh tokens, configure separate secrets and expiries, and store them in http-only cookies for secure client-server authentication.

Enable cross-origin requests with cors, allowing cookies from frontend ports such as 3000 and 4200, and configure credentials; set up dotenv to manage access and refresh secrets.

Fetches the authenticated user from the api slash user endpoint by validating the access token from a cookie, verifying the jwt payload, and returning the user data without the password.

Refresh tokens last one week, enabling a post to /refresh to verify the refresh token and sign a new access token that expires in 30 seconds, stored in a cookie.

Learn to securely log out by overwriting access and refresh cookies via a post request to api/logout, returning a success message and leaving the user unauthenticated until re-login.

Implement forgot password functionality with a dedicated forgot controller, generate a unique reset token, store it in a reset entity, and expose a post endpoint to trigger password resets.

Learn to test email delivery with mail hook, configure a nodemailer transporter, and send password reset emails with a reset link in a Node.js and React workflow.

Learn to implement forgot and reset password flows using a token, validating and matching passwords, then updating and hashing the password.

Set up the React frontend by running npm scripts, start the development server, and preview the app; integrate Bootstrap and implement the sign-in form by adjusting class to className.

Create login and register components in a TypeScript React project, exporting logging and register components. Return the forms with inputs for email, first name, last name, and password confirm.

learn to build dynamic routing with React Router, install and configure dependencies, create login, register, and home components, and implement a navigation menu using Link components to switch pages.

Create a register form using useState for first name, last name, email, passwords; handle input changes, prevent submission, post to localhost:8000/api/register using underscore keys, and navigate to login on success.

Log in a user by posting email and password to login endpoint, enable with credentials to receive cookies, redirect to main page, and fetch authenticated user with the access token.

This lecture demonstrates fetching the authenticated user after login, handling cookies and access tokens with useEffect and useState, and showing an unauthenticated message when the token expires.

Explore axios interceptors that simplify requests with a base url and credentials, and refresh tokens on 401 errors by calling the refresh endpoint and retrying the original request.

Install Redux Toolkit and React Redux, configure the store with configureStore in a TypeScript file, and wrap the app with the provider to share the authenticated user state.

Create a redux toolkit slice to manage authentication with initial false state, a set reducer updating state from payload, and export actions for dispatch and selector use in the UI.

Add forgot password functionality by creating a forgot component, submitting the email to the server, and displaying success or error alerts to guide users to check their email.

Implement a reset password form in React by posting token, password, and password confirm, retrieving the token from the URL, and redirecting to login on success.

Enable two-factor authentication by adding a secret and generating a speakeasy-based QR code for an authenticator app, while refining login to return tokens and keep the secret hidden.

Implement two-factor authentication with an authenticator app, incorporating QR code generation and scanning, speakeasy-based code verification, and secret storage on the user via frontend and backend.

Expand the login form to support two-factor authentication by splitting it into components that handle email and password, then redirect on sign-in using TypeScript props.

Implement an authenticator form workflow in tsx, handling submit events and preventing default. Store the six-digit code with useState, pass login data to the authenticator, and redirect after successful login.

Display the qr code for two-factor authentication and submit the authenticator code to log in. Learn to send login data asynchronously, verify a 200 status, and dispatch Redux Toolkit actions.

Implement Google authentication in a node and react app by creating Google Cloud credentials, verifying id tokens on the backend, and issuing cookies with access and refresh tokens.

Install and integrate the React Google login button in the login form, configure the client ID, and handle success or failure to send the token to the backend.

Enhance authentication security by using bearer tokens for access, storing refresh tokens in a dedicated database table, and expiring them after seven days with revocation on logout.

Switch authentication to use an access token in request headers and avoid cookies. Attach a Bearer token in authorization headers during login, Google sign-in, and token refresh.