NodeJS Security: JWT, Role-Based Access, 2FA (/w React)

Understand the Node API folder structure within an Express.js setup, including controllers, services, middleware, routes, schema validation, global error handling, and a wrapper for async operations.

Prepare a React 19 project with React Router and redox for user state; build sign up and sign in forms with frontend validation, then run npm run dev locally.

Set up a MongoDB database for the project by creating a cluster, configuring the environment, and establishing a Mongoose connection.

Identify and fix a mongodb connection error by logging the error, adjusting network access, and allowing access from anywhere to connect to the database successfully.

Create a user model by defining a Mongoose schema with name, email, and password, then instantiate and save the user in the signup flow via the authentication API.

Explore the jwt anatomy: header, payload, and an optional signature, with base64 encoding and dot separators, to securely authenticate and authorize users while avoiding passwords in the payload.

Complete signup by validating name, email, and password, and checking the email in the database. Hash password with the Pilgrim library, store the user, and generate a JSON web token.

Generate a json web token by using a private secret key, configuring the header algorithm and a one-hour expiration, and returning an access token with user id, name, and email.

Authenticate users by verifying the provided email against the database, comparing the password, and generating a JSON web token upon success, while returning secure error messages for failures.

Create and integrate an authentication middleware to protect routes by verifying the authorization header and access token, enabling only authenticated users to access protected routes.

Learn token verification in authentication middleware by wiring the service provider to verify tokens, log results, and throw authorization exceptions for unauthorized requests.

Demonstrate the Express.js request-response cycle by passing data from middleware to the controller, attaching info to req.info and current user details to req.user for protected routes.

Connect the frontend login page to the backend API by calling the login endpoint, configure CORS for the client origin, and verify the access token and user data.

Set up the react router using createBrowserRouter and routerProvider, and render sign in and sign up routes. Refer to official docs to understand declarative data in the seventh version.

Set up toastify to show login notifications, importing the package and handling success and error messages. Use the network tab and console log to verify responses and errors.

Create an api layer to centralize error handling instead of repeating try-catch blocks; expose a configured api client with an interceptor to handle errors in one place.

Learn how request and response interceptors act as middleware to process API calls, handle errors, and customize messages before data reaches the client.

Store the login token, use React Router to navigate to a protected asset page, and fetch product data via API to prepare a guarded user experience.

Store the access token in local storage and implement a request interceptor to attach the Bearer token to the Authorization header, while avoiding sending it on sign-in.

Learn to selectively attach the access token on routes by inspecting the auth config and headers, confirming sign in and sign up requests omit the bearer token.

Build a profile page and render user name and email by storing the access token and user data in local storage as JSON, then parse it for display.

Set up Redux in the app using Redux Toolkit and React Redux. Centralize user information to share across components with a provider and store name, email, and avatar.

Explore how the user reducer with Redux manages authentication state, including is authenticated, access token, and user data, and persists them to local storage for session continuity.

Persist user data across refresh by storing authentication status and the access token in local storage, then read user details via a Redux app selector to render the header.

Fix TypeScript by separating the IUser interface into a shared data file and adding a local storage helper to reliably retrieve the user through the API interceptor.

Create a logout button on the profile page, dispatch a reset user action, remove the token from local storage, and navigate back to the lobby.

Build a prototype protected route in a React app by checking user authentication, redirecting unauthenticated users to sign in, and wrapping protected pages (like profile) to render children when authorized.

Explain using local storage for sign-in user data, why current user retrieval isn’t needed, and how logout clears storage; preview refactor to cookies and get current user.

Handle expired tokens with a response interceptor that detects 401 errors and redirects, while clearing Redux state and local storage via a reset action dispatched from the store.

Handle unauthorized routes by redirecting to the profile after authentication, customize redirects on the signing page, and stop execution to prevent dos errors.

Build the sign up page, link from sign in page with React Router, call the API to sign up, receiving an access token, user data, and navigate to the profile.

Explore how the refresh token extends secure authentication by obtaining new access tokens from the backend, keeping access tokens short lived, and discussing token revocation concepts.

Generate a refresh token alongside the access token, update signup and signin to return both, and outline how to generate and manage the refresh token.

Implement a refresh token controller, validate the refresh token in the request body, and issue a new access token with error handling.

Explore how the frontend handles an expired access token by triggering the refresh token flow after a 401 unauthorized, storing tokens after login, and retrying the request via the interceptor.

Explain how the ACR respawn interceptor detects token spikes and triggers refresh logic, then update backend json web token error handling to emit 403 forbidden or unauthorized session messages.

Implement frontend refresh token handling with an interceptor to refresh the access token, update local storage and redux, then retry the original request.

Explain the original request in authorization flow, how a new access token retries it, and why interceptors enable seamless token refresh instead of manual retries.

Demonstrate how stateless JWTs cause delayed user info updates after token refresh, and show bundling user data in refresh responses plus Redux updates to fix it.

Refactor the authentication flow to store the refresh token in an httpOnly cookie instead of local storage, improving security by restricting client access and handling tokens server-side.

Explore handling refresh tokens via cookies in the NodeJS & React authentication setup, enabling secure cookie options with credentials, and removing refresh tokens from local storage for production readiness.

Clear the refresh token cookie on the server during logout, since HttpOnly cookies can't be cleared client-side, and call the logout API to complete the flow.

Implement forgot and reset password workflows by updating the user model with a reset token, creating a forgot password API, generating a token, and emailing a reset link.

Build a forgot password by email flow using the crypto module to generate a reset token with a ten-minute expiry, storing it in the user model.

Install a mail package and configure a transporter to send forgot password emails, wire a mail provider, then test with ethereal credentials and a reset token.

Build a reset password flow that reads email and reset token, validates the token and expiry, checks new password against confirmation, and encodes and saves the new password.

Build reset password flow for the NodeJS and React authentication app, wire the reset password API, extract email and token from the URL, and navigate to sign in on success.

Handle loading status and error states in the authentication flow by managing local error state and is logged in checks, focusing on authentication tasks without redux or react query integration.

Demonstrate updating the user profile name using JWT, with a backend update, current-user verification, and syncing the Redux state and local storage.

Explore the fundamentals of role-based access control by building an RBAC mechanism from scratch, defining roles such as teacher, manager, and admin with permissions like adding or removing students.

Set up database for role-based access control by creating a permission model with name and description in mongoose. Link roles to permissions and update the user model to reference roles.

Seed permission data by creating a permission controller, configuring API routes and a permission model, and wiring a map view dashboard to manage basic permissions.

Seed role data by creating row data and permissions, setting up a row controller and row service, and wiring admin and teacher permissions for demonstration.

Assign a default role to new users during sign up, such as teacher, and verify the role exists before storing the user data.

Learn to add a role to a user by building a service that attaches a row to the user, clears old rows, and saves the updated user.

Design a rule-based system to generate permissions from API routes, avoiding thousands of permission names by mapping routes to rules and dynamically composing permission names based on the route.

Explore retrieving and listing all api routes in an express.js app using a log route and routes function, showing each route’s method and path in server.js.

Map API routes to permissions by aligning route methods to view, create, update, and delete actions, showing how to implement an action map for authorization.

Initialize permissions by creating a permission provider and a permission model, then wire routes and methods to map urls to the server and update the database with permission rows.

Create a permissions controller to fetch own permissions. Expose a get route and return the permissions from the permission table, while adjusting seed data and routes for upcoming controller work.

Update permission name in a NodeJS backend by processing the request body, validating the permission id, saving changes, and returning the updated permission or not found if missing.

Learn how to add permissions to a role by implementing a permission row, validating the row, updating the row's permissions, and persisting changes in a NodeJS and React authentication setup.

Implement a get all roles flow by building a service, wiring routes, and returning data via the row controller while populating the permission model with an async wrapper.

Learn to optimize role listing by excluding the permission field, and build a get detail endpoint to fetch a single role by id with its permissions.

Explore verify permission middleware for role-based access control in Node.js and React authentication workflows. Learn how to verify users after authentication and enforce route permissions via roles.

Implement a verify permission middleware that maps permissions and derives method and path from the request URL, enforcing access by returning an error when unauthorized.

Apply authentication and authorization middleware across routes, verify user permissions, and enforce role-based access using bearer token security in a Node.js and React app.

Build a get all users endpoint by creating a user controller and service, wiring routes, and preparing for front-end management of user roles and permissions.

Build a front-end permission management page by creating a permissions table and a three-tab layout for user, rows, and based on the result, with header, search, and tag components.

Render a user and a permissions table in a React TypeScript app, defining name, email, and action columns. Learn to fetch users via API and render them in the tables.

Fetch all users from the API with TypeScript typing, map the response to table rows, and display id, name, email, and role with simple styling in a React setup.

Build and render a roles management table for authentication systems, including creating a roles table, mapping roles to users, adding a description column, and configuring role-based actions.

Define and render permissions in an api-driven flow, detailing methods, paths, and client-side visualizations to manage access control.

Clean up the database, recreate admin permissions, and update role-based access control to ensure admin accounts, tokens, and frontend and backend stay in sync.

Add a button in each user row to open a permission modal and update permissions, moving the modal logic to the parent and rendering a mutable permission select.

Fetch the data for the dropdown, map labels and values for options, handle selection changes, and submit the chosen permission via the API.

Learn how to auto-select default permissions by fetching admin row details, binding permissions to a select box, and updating the UI when updating a user's permissions through an API.

Fix the refresh token flow by boosting the refresh token listing, verifying authentication, and addressing forgot and reset network issues to ensure the token refresh works successfully.

Bind data to the selection and call an API to add a permission to a role row, handling the selected row and permission string, updating the UI.

Update permission name modal shows opening a modal from an action button, editing the table name with an input, and reusing a model component to implement the update flow.

Learn to call an API to update a permission name from a UI form, pass the record id and new name, and refresh the table to reflect changes.

Build an API endpoint to fetch permissions by role names, accepting a comma-separated list of roles, filtering with the in operator, and removing duplicates to prepare for authentication and authorization.

Modify the permission provider to ignore sign-in and sign-up routes, implement ignore logic in the API, and observe how refresh tokens and permissions interact on the server.

Build a front-end authorization system with a usePermission hook that fetches permissions from an API including view and create user, and controls UI elements for admin and manager roles.

Enhance the usePermission hook by replacing array lookups with an object map, where each vision key maps to true, improving permission checks as permissions scale.

Implement authorization routes by enforcing permission checks and redirecting unauthorized users to an access denied page, using hooks and a permission-based wrap in the front end.

Learn to implement select all permissions for a seller, using a permissions model, value handling, include checks, and a built-in clear option in the UI.

Organize routes in a React Router setup by grouping unauthorized and protected routes, refactoring to reuse path and element and using an outlet for clean navigation.

Introduce two-factor authentication using a QR code flow with Google Authenticator, generating a unique per-user QR from a secret key, scanning for an OTP, and verifying at login.

Create 2fa data models by adding an is_enabled flag to the user, defining a two_factor model with a key and user relation, and introducing a user_session model for QR sessions.

implement an api to generate and return a 2fa qr code for a user, creating or retrieving the secret and producing a provisioning qr image.

Implement a backend verify route for OTP from a QR workflow, validate the authenticator, enable two-factor for the user, and create a valid session for seamless access.

Build a front end two factor flow by adding a button that opens a modal, displays a QR code for Google authenticator, accepts input, and prepares verification.

Implement otp-based verification and two-factor authentication in a NodeJS and React app. Build the user API, manage session and token via local storage and redux, and update the UI accordingly.

Enhance the backend login and logout by creating, returning, and deleting a user session while validating access with a session flag and accommodating two-factor scenarios.

Demonstrates implementing a required two-factor authentication page, managing user sessions and redirects on invalid sessions, and integrating 2FA with profile submission and navigation.

Fix the sign-up and test flow in a NodeJS and React authentication setup by implementing the sign-up page, configuring request headers and user sessions, and validating two-factor authentication via QR.

Explore why access tokens should be short-lived and how refresh tokens enable seamless login, plus mechanisms to revoke tokens for sensitive apps like banking.

Implement a revoke token flow by assigning a unique token id at sign in, storing it in radius, and validating access on request by checking the token id in radius.

Build an api to ban a user by adding an active flag, exposing a ban route, and updating the user status, then discuss revoke options to boost performance.

Set up redis using a docker-based environment, install docker desktop, launch the release server, connect to the redis container, and configure a client to test key-value operations.

Create a unique jwt id from the asset token, store it in Redis with the asset token key, and integrate it into middleware for validation and token generation.

Store jwtId in a per-user set to hold all access and refresh tokens, enabling bulk revocation by removing all tokens for that user.

Implement a revoke tokens mechanism to ban users by removing their access and refresh tokens from the token store, updating the service logic to revoke tokens for banned users.

Learn how to revoke tokens on logout and during refresh, issue a new access token and a new refresh token, and revoke all old tokens for stronger security.

Fix axios interceptor to refresh tokens correctly by queuing refresh requests, ensuring only one refresh occurs at a time, and retrying with the new access token for all API calls.

Enforce bans on the frontend by revoking the access token from local storage, checking the user's active mailbox status, and throwing a forbidden exception with an admin contact prompt.