Introduction

As MERN applications grow in size, user base, and complexity, basic CRUD functionality is no longer sufficient. Advanced topics focus on:

• Real-time communication
• Flexible data querying
• High performance
• Strong security
• Scalability and maintainability

These concepts are essential for building production-grade, enterprise-level MERN applications.

---

WebSockets and Real-Time Communication (Socket.io)

What is Real-Time Communication?

Real-time communication enables instant data exchange between clients and servers without repeated HTTP requests.

Examples:

• Chat applications
• Live notifications
• Real-time dashboards
• Online gaming
• Collaborative tools

---

Limitations of HTTP

• Client must request data repeatedly (polling)
• High latency
• Inefficient for live updates

---

What are WebSockets?

WebSockets provide:

• Persistent, full-duplex connection
• Low latency
• Server-initiated messages

Once connected, data flows both ways in real time.

---

Socket.io Overview

Socket.io is a popular WebSocket-based library that:

• Handles connection management
• Falls back to HTTP when WebSockets aren’t supported
• Supports rooms, namespaces, and events

---

Socket.io with MERN Stack

Backend (Express + Socket.io)

import { Server } from "socket.io";
import http from "http";
import express from "express";

const app = express();
const server = http.createServer(app);

const io = new Server(server, {
  cors: { origin: "http://localhost:3000" }
});

io.on("connection", (socket) => {
  console.log("User connected:", socket.id);

  socket.on("message", (data) => {
    io.emit("message", data);
  });

  socket.on("disconnect", () => {
    console.log("User disconnected");
  });
});

server.listen(5000);

---

Frontend (React)

import { io } from "socket.io-client";

const socket = io("http://localhost:5000");

socket.on("message", (data) => {
  console.log("New message:", data);
});

socket.emit("message", "Hello Server");

---

Real-Time Use Cases

• Notifications
• Live chats
• Activity feeds
• Presence detection (online/offline)

---

Implementing GraphQL with MERN Stack

What is GraphQL?

GraphQL is a query language for APIs that allows clients to request exactly the data they need, nothing more and nothing less.

---

REST vs GraphQL

Feature	REST	GraphQL
Endpoints	Multiple	Single
Over-fetching	Yes	No
Under-fetching	Yes	No
Schema	Optional	Mandatory
Flexibility	Limited	High

---

GraphQL Architecture

• Schema – defines types and queries
• Resolvers – fetch data
• Queries – read data
• Mutations – modify data

---

GraphQL Backend with MERN

Install Dependencies

npm install apollo-server-express graphql

---

GraphQL Schema

const typeDefs = `
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
  }
`;

---

Resolvers

const resolvers = {
  Query: {
    users: async () => await User.find()
  }
};

---

Server Setup

const server = new ApolloServer({ typeDefs, resolvers });
await server.start();
server.applyMiddleware({ app });

---

GraphQL in React (Apollo Client)

import { gql, useQuery } from "@apollo/client";

const GET_USERS = gql`
  query {
    users {
      name
      email
    }
  }
`;

---

When to Use GraphQL

• Complex data relationships
• Mobile apps (bandwidth efficiency)
• Microservices
• Large frontend teams

---

Performance Optimization Techniques

Frontend Performance Optimization (React)

Lazy Loading

Load components only when needed.

const Dashboard = React.lazy(() => import("./Dashboard"));

---

Code Splitting

Reduces initial bundle size.

<Suspense fallback={<Loader />}>
  <Dashboard />
</Suspense>

---

Memoization

Avoid unnecessary re-renders.

React.memo(Component);
useMemo();
useCallback();

---

Virtualization

Render only visible items (large lists).

Libraries:

• react-window
• react-virtualized

---

Backend Performance Optimization

Database Indexing

db.users.createIndex({ email: 1 });

---

Caching

Use:

• Redis
• In-memory cache

---

Pagination

Avoid loading large datasets at once.

---

Compression

import compression from "compression";
app.use(compression());

---

Securing MERN Applications

Rate Limiting

Prevent brute-force and DoS attacks.

import rateLimit from "express-rate-limit";

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 100
});

app.use("/api", limiter);

---

Data Validation

Use libraries like Joi or Zod.

import { z } from "zod";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
});

---

Other Security Measures

• Helmet for HTTP headers
• CSRF protection
• Input sanitization
• Secure cookies
• HTTPS
• Role-based access control

---

Scaling MERN Applications and Microservices Architecture

Why Scaling is Needed

As traffic grows:

• Single server becomes a bottleneck
• Deployment becomes risky
• Development slows down

---

Horizontal vs Vertical Scaling

Type	Description
Vertical	Add more resources
Horizontal	Add more servers

Cloud platforms favor horizontal scaling.

---

Microservices Architecture

Monolith vs Microservices

Monolith	Microservices
Single codebase	Multiple services
Hard to scale	Easy to scale
Tightly coupled	Loosely coupled

---

Microservices with MERN

• Separate services (auth, orders, payments)
• Independent databases
• API gateway
• Inter-service communication (REST/GraphQL/events)

---

Tools for Scaling

• Docker
• Kubernetes
• Load balancers
• Message queues (RabbitMQ, Kafka)
• API gateways

---

Deployment Strategy

• CI/CD pipelines
• Blue-green deployment
• Rolling updates
• Canary releases

---

Monitoring and Observability

• Logging (Winston)
• Error tracking (Sentry)
• Metrics (Prometheus)
• Tracing (OpenTelemetry)

---

Best Practices

• Design for scalability early
• Secure APIs by default
• Optimize frontend and backend together
• Automate deployments
• Monitor continuously

---

Summary

Advanced MERN development focuses on:

• Real-time communication with WebSockets
• Flexible APIs using GraphQL
• Performance optimization techniques
• Strong application security
• Scalable, microservices-based architectures

Mastering these topics allows you to build high-performance, secure, and scalable MERN applications suitable for real-world production systems.

Introduction to Testing in the MERN Stack

What is Testing?

Testing is the process of verifying that an application works as expected and continues to work when changes are made. In a MERN application, testing ensures that:

• React components render correctly
• Express APIs return correct responses
• MongoDB operations behave as expected
• Frontend and backend work together seamlessly

---

Why Testing is Important

• Detects bugs early
• Prevents regressions
• Improves code quality
• Makes refactoring safer
• Essential for CI/CD pipelines
• Builds confidence in deployments

In production-grade MERN apps, testing is not optional.

---

Types of Testing in MERN Applications

Testing Type	Focus
Unit Testing	Individual functions/components
Integration Testing	Interaction between modules
End-to-End (E2E)	Full user flow
Component Testing	UI behavior
API Testing	Backend routes

---

Unit Testing with Jest and Mocha

What is Unit Testing?

Unit testing tests small, isolated pieces of code, such as:

• Utility functions
• Redux reducers
• React components
• Backend service functions

---

Jest (Most Popular in MERN)

Why Jest?

• Zero configuration (with React)
• Fast
• Snapshot testing
• Built-in mocking

Install:

npm install --save-dev jest

---

Simple Jest Test Example

// sum.js
export function sum(a, b) {
  return a + b;
}

// sum.test.js
import { sum } from "./sum";

test("adds two numbers", () => {
  expect(sum(2, 3)).toBe(5);
});

Run:

npm test

---

Unit Testing React Components with Jest + React Testing Library

Install:

npm install --save-dev @testing-library/react @testing-library/jest-dom

Example React Component

function Greeting({ name }) {
  return <h1>Hello {name}</h1>;
}

Test Case

import { render, screen } from "@testing-library/react";
import Greeting from "./Greeting";

test("renders greeting message", () => {
  render(<Greeting name="John" />);
  expect(screen.getByText("Hello John")).toBeInTheDocument();
});

---

Mocha (Alternative Testing Framework)

Mocha is commonly used for backend testing.

Install:

npm install --save-dev mocha chai

Example:

import { expect } from "chai";

describe("Math test", () => {
  it("should add numbers", () => {
    expect(2 + 3).to.equal(5);
  });
});

---

Integration Testing with Supertest and Chai

What is Integration Testing?

Integration testing checks how multiple components work together, such as:

• Express routes + MongoDB
• Middleware + controllers

---

Supertest (API Testing)

Supertest allows testing Express APIs without starting a real server.

Install:

npm install --save-dev supertest

---

Express App Example

// app.js
import express from "express";
const app = express();
app.use(express.json());

app.get("/api/health", (req, res) => {
  res.json({ status: "ok" });
});

export default app;

---

Integration Test

import request from "supertest";
import app from "../app.js";

describe("GET /api/health", () => {
  it("should return health status", async () => {
    const res = await request(app).get("/api/health");
    expect(res.status).toBe(200);
    expect(res.body.status).toBe("ok");
  });
});

---

Using Chai for Assertions

import { expect } from "chai";

expect(res.body).to.have.property("status");

---

Testing Protected Routes

request(app)
  .get("/api/profile")
  .set("Authorization", `Bearer ${token}`)

---

End-to-End (E2E) Testing with Cypress or Selenium

What is End-to-End Testing?

E2E testing simulates real user behavior:

• Opening the browser
• Clicking buttons
• Filling forms
• Submitting data
• Receiving responses

---

Cypress (Recommended for MERN)

Why Cypress?

• Easy setup
• Real browser testing
• Excellent debugging tools
• Fast execution

Install:

npm install --save-dev cypress

Open:

npx cypress open

---

Cypress Test Example (Login Flow)

describe("Login Test", () => {
  it("logs in the user", () => {
    cy.visit("http://localhost:3000/login");
    cy.get("input[name=email]").type("test@example.com");
    cy.get("input[name=password]").type("12345678");
    cy.get("button[type=submit]").click();
    cy.contains("Dashboard");
  });
});

---

Selenium (Alternative)

• Supports multiple browsers
• Language-agnostic
• Slower setup compared to Cypress
• Used in enterprise testing

---

Writing Test Cases for React Components

What to Test in React

• Rendering
• Props
• State changes
• User interactions
• API responses (mocked)

---

Testing Button Click

test("button click increments count", () => {
  render(<Counter />);
  fireEvent.click(screen.getByText("Increment"));
  expect(screen.getByText("Count: 1")).toBeInTheDocument();
});

---

Mocking API Calls

jest.spyOn(global, "fetch").mockResolvedValue({
  json: async () => ({ users: [] }),
});

---

Writing Test Cases for Express Routes

What to Test

• Status codes
• Response body
• Authentication
• Error handling
• Database interactions

---

Example: POST Route Test

describe("POST /api/users", () => {
  it("creates a new user", async () => {
    const res = await request(app)
      .post("/api/users")
      .send({ name: "Alice", email: "alice@test.com" });

    expect(res.status).toBe(201);
    expect(res.body.success).toBe(true);
  });
});

---

Mocking MongoDB

Use:

• In-memory MongoDB
• Jest mocks
• Test databases

npm install --save-dev mongodb-memory-server

---

Test Coverage

Test coverage measures how much code is tested.

npm test -- --coverage

Coverage includes:

• Statements
• Branches
• Functions
• Lines

---

Best Practices for MERN Testing

• Write tests early
• Keep tests isolated
• Use descriptive test names
• Mock external services
• Separate unit and integration tests
• Run tests in CI/CD

---

Testing in CI/CD Pipelines

Tests should run automatically on:

• Pull requests
• Merges
• Deployments

Example:

- name: Run tests
  run: npm test

---

Common Mistakes

• Testing implementation instead of behavior
• Not mocking APIs
• Relying on real databases
• Ignoring edge cases
• Skipping frontend tests

---

Summary

• Testing is essential for reliable MERN applications
• Jest and Mocha handle unit testing
• Supertest and Chai test Express APIs
• Cypress handles full user workflows
• React components and Express routes must be tested separately
• Automated testing improves confidence and deployment safety

Introduction to Deployment and DevOps

Deployment is the process of making an application available for users in a production environment.
DevOps is a set of practices that combines development (Dev) and operations (Ops) to automate, monitor, and improve the process of building, testing, deploying, and maintaining applications.

In a MERN stack application:

• MongoDB → database
• Express + Node.js → backend API
• React → frontend UI

Deployment involves hosting these components securely, efficiently, and reliably.

---

Preparing the MERN Application for Production

Before deployment, your application must be production-ready.

1. Production Folder Structure

A common structure:

mern-app/
│
├── backend/
│   ├── server.js
│   ├── routes/
│   ├── models/
│   ├── controllers/
│   └── .env
│
├── frontend/
│   ├── src/
│   ├── package.json
│   └── vite.config.js / build/
│
└── README.md

---

2. Production Build for React

React must be converted into static files.

For Vite:

npm run build

For Create React App:

npm run build

This generates optimized static files (dist/ or build/).

---

3. Backend Configuration for Production

• Enable compression
• Disable unnecessary logs
• Handle errors properly
• Serve frontend (optional)

if (process.env.NODE_ENV === "production") {
  console.log("Running in production mode");
}

---

4. Security Checklist

• Use HTTPS
• Secure MongoDB credentials
• Enable CORS properly
• Hash passwords
• Use environment variables
• Validate inputs

---

Deploying the Backend on Cloud Platforms

Option 1: Deploying Backend on Heroku

Steps:

1. Create Heroku account
2. Install Heroku CLI
3. Login:

heroku login

4. Create app:

heroku create my-mern-backend

5. Set environment variables:

heroku config:set MONGO_URI=your_uri JWT_SECRET=secret

6. Push code:

git push heroku main

Heroku automatically:

• Installs dependencies
• Runs npm start
• Hosts API

---

Option 2: Deploying Backend on AWS (EC2)

Steps:

1. Launch EC2 instance (Ubuntu)
2. Install Node.js, Git, PM2
3. Clone project
4. Install dependencies
5. Start server using PM2

pm2 start server.js --name backend
pm2 save

Advantages:

• Full control
• Highly scalable
• Production-grade

---

Option 3: Backend on Render / Railway (Modern Alternative)

• GitHub-based deployment
• Auto-build and auto-deploy
• Easier than AWS

---

Deploying the Frontend on Cloud Platforms

Deploying React Frontend on Netlify

Steps:

1. Push frontend to GitHub
2. Connect repo to Netlify
3. Set:
   • Build command: npm run build
   • Publish directory: dist or build

Netlify handles:

• CDN
• HTTPS
• Auto-deploy on git push

---

Deploying React Frontend on Vercel

Steps:

1. Connect GitHub repo
2. Select framework (React / Vite)
3. Deploy

Vercel features:

• Fast global CDN
• Serverless functions
• Preview deployments

---

Frontend-Backend Connection

Frontend API calls should use production backend URL:

const API_URL = import.meta.env.VITE_API_URL;

---

Environment Variables and Configuration Management

Why Environment Variables?

Environment variables store sensitive or environment-specific data:

• Database URLs
• API keys
• Secrets
• Ports

They prevent:

• Hardcoding secrets
• Security leaks

---

Backend (.env)

PORT=5000
MONGO_URI=mongodb+srv://...
JWT_SECRET=supersecret
NODE_ENV=production

Load using:

import dotenv from "dotenv";
dotenv.config();

---

Frontend Environment Variables

For Vite:

VITE_API_URL=https://api.example.com

Access:

import.meta.env.VITE_API_URL

---

Environment-Specific Config

• .env.development
• .env.production

---

CI/CD (Continuous Integration / Continuous Deployment)

What is CI/CD?

CI/CD automates:

• Testing
• Building
• Deploying applications

CI (Continuous Integration)

• Code pushed to repo
• Tests run automatically
• Build validated

CD (Continuous Deployment)

• Successful build auto-deployed
• Minimal human intervention

---

CI/CD Pipeline for MERN Application

Tools Commonly Used

• GitHub Actions
• GitLab CI/CD
• Jenkins
• CircleCI

---

Example: GitHub Actions CI/CD Pipeline

Create:

.github/workflows/deploy.yml

name: MERN CI/CD Pipeline

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install backend deps
        run: |
          cd backend
          npm install

      - name: Run tests
        run: npm test || echo "No tests"

      - name: Build frontend
        run: |
          cd frontend
          npm install
          npm run build

---

Automated Deployment Flow

1. Developer pushes code
2. CI runs tests
3. Build created
4. App deployed to cloud
5. Users see updates instantly

---

Monitoring and Logging (Production)

Important for DevOps:

• Logs (Winston, Morgan)
• Error tracking (Sentry)
• Health checks
• Performance metrics

---

DevOps Best Practices

• Use Git branches
• Automate deployments
• Use secrets managers
• Enable rollbacks
• Monitor uptime
• Backup databases
• Document deployment steps

---

Common Deployment Mistakes

• Hardcoded API URLs
• Missing environment variables
• Improper CORS configuration
• No error logging
• Exposing secrets in frontend

---

Summary

• Production deployment requires preparation and security
• Backend can be deployed on Heroku, AWS, Render, etc.
• Frontend is best hosted on Netlify or Vercel
• Environment variables protect sensitive data
• CI/CD automates build and deployment
• DevOps ensures reliability, scalability, and maintainability

Introduction to State Management Libraries: Redux, MobX

State management libraries like Redux and MobX are essential in managing the state of complex React applications. They help centralize and manage the state across different components, making it easier to track and update.

• Redux: A predictable state container for JavaScript apps, often used with React. Redux follows three core principles: single source of truth, state is read-only, and changes are made with pure functions (reducers).
• MobX: A simpler, reactive state management library. It allows for automatic updates of the UI when the state changes and is more flexible than Redux, but with fewer constraints.

Setting Up Redux in a React Project

Install Redux and React-Redux:

npm install redux react-redux

Create a Redux Store:

import { createStore } from 'redux';

// Initial state
const initialState = {
  count: 0,
};

// Reducer function
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// Create store
const store = createStore(counterReducer);

export default store;

Wrap Your React Application with the Redux Provider:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Redux Fundamentals: Actions, Reducers, Store

Actions: Objects that describe changes in the state. They have a type property that indicates the type of action being performed and may include additional data.

const incrementAction = {
  type: 'INCREMENT',
};

const decrementAction = {
  type: 'DECREMENT',
};

Reducers: Pure functions that take the current state and an action as arguments and return a new state. Reducers should not have side effects.

const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

Store: The central repository of the state in Redux. The store holds the entire state tree and allows access to the state, dispatch actions, and register listeners.

const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

Connecting Redux to React Components

To use Redux state and dispatch actions in React components, you use the connect function or the useSelector and useDispatch hooks provided by react-redux.

Using connect:

import React from 'react';
import { connect } from 'react-redux';

const Counter = ({ count, increment, decrement }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </div>
);

const mapStateToProps = (state) => ({
  count: state.count,
});

const mapDispatchToProps = (dispatch) => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Using useSelector and useDispatch:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

export default Counter;

Advanced State Management with Redux Middleware (e.g., Thunk, Saga)

Redux middleware allows you to handle asynchronous actions and side effects in your Redux application.

• Redux Thunk: Allows you to write action creators that return a function instead of an action. The function can dispatch actions and interact with the store asynchronously.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', error });
    }
  };
};

const store = createStore(counterReducer, applyMiddleware(thunk));

Redux Saga: A more complex middleware that uses generator functions to handle side effects and manage more advanced scenarios like complex async flows, race conditions, etc.

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { takeEvery, call, put } from 'redux-saga/effects';

function* fetchDataSaga() {
  try {
    const data = yield call(fetch, '/api/data');
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_FAILURE', error });
  }
}

function* watchFetchData() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchDataSaga);
}

const sagaMiddleware = createSagaMiddleware();
const store = createStore(counterReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchFetchData);

Authentication = who the user is (login)
Authorization = what the user can access (permissions/roles)

Below is a complete, course-style guide for implementing auth in a Node.js + Express + MongoDB (MERN backend), including hashing, JWT, middleware, RBAC, and cookies/sessions.

---

Implementing User Registration and Login

Registration flow

1. User submits name/email/password
2. Backend validates input
3. Password is hashed
4. User is stored in MongoDB
5. Optionally: auto-login by issuing token/cookie

User schema (Mongoose)

import mongoose from "mongoose";

const userSchema = new mongoose.Schema(
  {
    name: { type: String, required: true, trim: true },
    email: { type: String, required: true, unique: true, lowercase: true, trim: true },
    passwordHash: { type: String, required: true },
    role: { type: String, enum: ["user", "admin"], default: "user" }
  },
  { timestamps: true }
);

export const User = mongoose.model("User", userSchema);

---

Login flow

1. User submits email/password
2. Backend finds user by email
3. Compare password with stored hash
4. If valid → issue session or JWT
5. Return success + user info (never return passwordHash)

---

Password Hashing and Storing in MongoDB

Why hashing?

Passwords must never be stored as plain text. Hashing protects users even if the database leaks.

Use bcrypt:

• slow hashing = harder to crack
• includes salting automatically

Install:

npm i bcrypt

Hash password during registration

import bcrypt from "bcrypt";
import { User } from "./models/User.js";

export async function register(req, res) {
  const { name, email, password } = req.body;

  if (!name || !email || !password || password.length < 8) {
    return res.status(400).json({ success: false, error: "Invalid input" });
  }

  const existing = await User.findOne({ email });
  if (existing) {
    return res.status(409).json({ success: false, error: "Email already registered" });
  }

  const saltRounds = 12;
  const passwordHash = await bcrypt.hash(password, saltRounds);

  const user = await User.create({ name, email, passwordHash });

  res.status(201).json({
    success: true,
    user: { id: user._id, name: user.name, email: user.email, role: user.role }
  });
}

Compare password during login

export async function login(req, res) {
  const { email, password } = req.body;

  const user = await User.findOne({ email });
  if (!user) return res.status(401).json({ success: false, error: "Invalid credentials" });

  const ok = await bcrypt.compare(password, user.passwordHash);
  if (!ok) return res.status(401).json({ success: false, error: "Invalid credentials" });

  res.json({ success: true, message: "Login ok" });
}

---

Protecting Routes with Authentication Middleware

There are two common approaches:

Approach A: JWT (Token-based auth)

• Backend issues a JWT
• Frontend sends it in Authorization: Bearer <token>
• Backend verifies token on protected routes

Install:

npm i jsonwebtoken

Create token

import jwt from "jsonwebtoken";

function signToken(user) {
  return jwt.sign(
    { userId: user._id.toString(), role: user.role },
    process.env.JWT_SECRET,
    { expiresIn: "1h" }
  );
}

Auth middleware (JWT)

export function requireAuth(req, res, next) {
  const header = req.headers.authorization;

  if (!header?.startsWith("Bearer ")) {
    return res.status(401).json({ success: false, error: "Missing token" });
  }

  const token = header.split(" ")[1];

  try {
    const payload = jwt.verify(token, process.env.JWT_SECRET);
    req.user = payload; // { userId, role, iat, exp }
    next();
  } catch {
    return res.status(401).json({ success: false, error: "Invalid/Expired token" });
  }
}

Protect route

app.get("/api/profile", requireAuth, async (req, res) => {
  res.json({ success: true, user: req.user });
});

---

Approach B: Sessions (Cookie-based auth)

• Server stores session data
• Browser stores session id cookie
• Easy for classic web apps, also works for SPAs

Install:

npm i express-session connect-mongo

Setup:

import session from "express-session";
import MongoStore from "connect-mongo";

app.use(session({
  secret: process.env.SESSION_SECRET,
  resave: false,
  saveUninitialized: false,
  store: MongoStore.create({ mongoUrl: process.env.MONGO_URI }),
  cookie: {
    httpOnly: true,
    secure: false,   // true in production with HTTPS
    sameSite: "lax",
    maxAge: 1000 * 60 * 60 * 24 // 1 day
  }
}));

Set session on login:

req.session.user = { userId: user._id.toString(), role: user.role };
res.json({ success: true });

Middleware:

export function requireSession(req, res, next) {
  if (!req.session?.user) {
    return res.status(401).json({ success: false, error: "Not logged in" });
  }
  req.user = req.session.user;
  next();
}

---

Role-Based Access Control (RBAC)

What is RBAC?

RBAC means users have roles like:

• user
• admin
• manager

and routes/actions are allowed based on those roles.

Store role in DB

We already added role field in the User schema.

RBAC middleware

export function requireRole(...allowedRoles) {
  return (req, res, next) => {
    if (!req.user?.role || !allowedRoles.includes(req.user.role)) {
      return res.status(403).json({ success: false, error: "Forbidden" });
    }
    next();
  };
}

Admin-only route

app.delete("/api/admin/users/:id",
  requireAuth,
  requireRole("admin"),
  async (req, res) => {
    // delete user logic
    res.json({ success: true });
  }
);

---

Session Management and Cookies

Cookies basics

Cookies are small key-value data stored in the browser and automatically sent with requests to the same domain.

Types:

• HttpOnly cookies: not accessible via JavaScript (more secure)
• Secure cookies: sent only over HTTPS
• SameSite: controls cross-site sending (CSRF protection)

---

JWT in HttpOnly cookie (recommended for production SPAs)

This combines token auth with cookie security.

Set cookie:

res.cookie("token", token, {
  httpOnly: true,
  secure: false,      // true in production with HTTPS
  sameSite: "lax",
  maxAge: 60 * 60 * 1000
});

Read cookie token:

• Use cookie-parser

Install:

npm i cookie-parser

import cookieParser from "cookie-parser";
app.use(cookieParser());

export function requireAuthCookie(req, res, next) {
  const token = req.cookies.token;
  if (!token) return res.status(401).json({ success: false, error: "Missing token" });

  try {
    req.user = jwt.verify(token, process.env.JWT_SECRET);
    next();
  } catch {
    return res.status(401).json({ success: false, error: "Invalid token" });
  }
}

---

CORS + cookies (important for React + Express on different ports)

If using cookies across origins:

• React must send credentials: "include"
• Express must enable CORS with credentials

React:

fetch("http://localhost:5000/api/profile", {
  credentials: "include"
});

Express:

import cors from "cors";
app.use(cors({
  origin: "http://localhost:3000",
  credentials: true
}));

---

Best Practices (must-follow)

• Never store plain passwords
• Use bcrypt with 10–12+ rounds
• Store secrets in .env
• Use short token expiry + refresh tokens for long sessions (advanced)
• Prefer HttpOnly cookies in production
• Add rate limiting for login endpoints
• Validate inputs (use zod/joi/express-validator)
• Always return generic auth errors (“Invalid credentials”)

---

Summary

• Registration/Login: validate → hash password → store user → authenticate
• Password storage: bcrypt hash in MongoDB (passwordHash)
• Route protection: middleware verifies JWT or session
• RBAC: restrict endpoints by user roles
• Session & cookies: HttpOnly cookies improve security; sessions store state on server

The big picture

• React runs in the browser (frontend UI).
• Express + Node.js runs on a server (backend APIs).
• They communicate over HTTP using JSON (most common).

Typical flow:

1. React calls an Express API (/api/...)
2. Express reads request, talks to DB, returns JSON
3. React updates UI based on response

---

1) Connecting React frontend with Express.js backend

Option A: Run both separately (common in dev)

• React dev server: http://localhost:3000
• Express server: http://localhost:5000
  React sends requests to backend using full URL.

Backend (Express) basic setup

// server.js
import express from "express";

const app = express();
app.use(express.json());

app.get("/api/health", (req, res) => {
  res.json({ ok: true, message: "API is running" });
});

app.listen(5000, () => console.log("Server running on http://localhost:5000"));

Frontend (React) test call

fetch("http://localhost:5000/api/health")
  .then(r => r.json())
  .then(console.log);

---

Option B: Proxy requests in React (recommended for dev)

So you can call /api/... without hardcoding backend URL.

Create React App: add to package.json

{
  "proxy": "http://localhost:5000"
}

Then in React:

fetch("/api/health")

Vite: add proxy in vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": "http://localhost:5000",
    },
  },
});

---

Option C: Serve React build from Express (common in production)

• Build React → static files
• Express serves them

import path from "path";
import express from "express";

const app = express();
app.use(express.json());

app.use(express.static(path.join(process.cwd(), "client/dist"))); // Vite build

app.get("/api/health", (req, res) => res.json({ ok: true }));

app.get("*", (req, res) => {
  res.sendFile(path.join(process.cwd(), "client/dist/index.html"));
});

app.listen(5000);

---

2) Handling CORS issues (Cross-Origin Resource Sharing)

Why CORS happens

If React runs on localhost:3000 and API runs on localhost:5000, that’s different origin, so the browser blocks requests unless backend allows it.

Explain with simple rule

• Browser enforces CORS (server must allow it)
• Fix is done on Express backend

Use cors middleware (recommended)

Install:

npm i cors

Use:

import cors from "cors";

app.use(cors({
  origin: "http://localhost:3000",  // or your deployed frontend URL
  credentials: true
}));

If you only use token in headers (JWT in Authorization), you usually don’t need credentials: true.

Quick dev-only allow all

app.use(cors());

(Use stricter config for production.)

---

3) Making HTTP requests from React to Express APIs

Using fetch (built-in)

const res = await fetch("/api/users");
const data = await res.json();

Sending JSON (POST)

await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Amit" }),
});

Using axios (popular)

Install:

npm i axios

import axios from "axios";
const { data } = await axios.get("/api/users");

POST:

await axios.post("/api/users", { name: "Amit" });

---

4) Passing data between frontend and backend

Frontend → Backend (request)

You pass data via:

• URL params: /api/users/123
• Query string: /api/users?role=admin
• Request body (POST/PUT)
• Headers (Authorization token)

Express example

app.post("/api/tasks", (req, res) => {
  const { title, done } = req.body;
  res.json({ created: true, task: { id: 1, title, done } });
});

Backend → Frontend (response)

Respond with JSON:

res.status(200).json({ ok: true, data: result });

React reads:

const data = await res.json();
setState(data);

Best practice response format

Use consistent response shape:

{ "success": true, "data": {...}, "error": null }

---

5) Authentication and authorization using JWT (JSON Web Tokens)

What JWT does

• User logs in with credentials
• Backend verifies and returns a token
• React stores token (usually memory or localStorage)
• React sends token in Authorization header for protected routes
• Backend verifies token on every request

---

Backend: Generate JWT on login

Install:

npm i jsonwebtoken bcrypt

Login route

import jwt from "jsonwebtoken";

app.post("/api/auth/login", async (req, res) => {
  const { email, password } = req.body;

  // 1) Validate user (example only)
  if (email !== "test@example.com" || password !== "1234") {
    return res.status(401).json({ success: false, error: "Invalid credentials" });
  }

  // 2) Create token payload
  const payload = { userId: 1, role: "user" };

  // 3) Sign token
  const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: "1h" });

  res.json({ success: true, token });
});

Set .env:

JWT_SECRET=supersecretkey

---

Backend: Protect routes using JWT middleware

import jwt from "jsonwebtoken";

function auth(req, res, next) {
  const header = req.headers.authorization;

  if (!header || !header.startsWith("Bearer ")) {
    return res.status(401).json({ success: false, error: "Missing token" });
  }

  const token = header.split(" ")[1];

  try {
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded; // { userId, role, iat, exp }
    next();
  } catch (err) {
    return res.status(401).json({ success: false, error: "Invalid/Expired token" });
  }
}

app.get("/api/profile", auth, (req, res) => {
  res.json({ success: true, user: req.user });
});

---

Frontend: Store token and send it in requests

Login request

async function login(email, password) {
  const res = await fetch("/api/auth/login", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password }),
  });

  const data = await res.json();
  if (!data.success) throw new Error(data.error);

  localStorage.setItem("token", data.token);
}

Use token in protected API calls

async function getProfile() {
  const token = localStorage.getItem("token");

  const res = await fetch("/api/profile", {
    headers: { Authorization: `Bearer ${token}` },
  });

  return res.json();
}

---

Authorization (roles/permissions)

Authentication = “who you are”
Authorization = “what you can do”

Example: Admin-only route

function requireRole(role) {
  return (req, res, next) => {
    if (req.user?.role !== role) {
      return res.status(403).json({ success: false, error: "Forbidden" });
    }
    next();
  };
}

app.delete("/api/admin/users/:id", auth, requireRole("admin"), (req, res) => {
  res.json({ success: true });
});

---

Security best practices (important)

• Prefer HttpOnly cookies for JWT in production (prevents XSS token theft)
• If using localStorage, protect against XSS aggressively
• Use short token expiry + refresh tokens (advanced)
• Always hash passwords with bcrypt
• Use HTTPS in production
• Lock down CORS to only your frontend domain