S
Web App2026CompletedFeatured Project

Mern Auth Template

React + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - @vitejs/plugin-rea...

RoleSole Developer
Classificationhigh
Client / ContextOpen Source Project
Development TimelineCompleted

Technical Architecture & Engineering Overview

Detailed system design and core implementation

Core System Architecture The application is split into two independent runtimes: a backend folder exposing an Express.js API on http://localhost:5000/api and a frontend folder serving a React SPA on http://localhost:3000. The backend uses Mongoose models to interact with MongoDB, while the frontend consumes the API through Axios calls wrapped in a Context API for global auth state.

Data Ingestion & Persistence User registration triggers a controller that validates input, hashes the password with bcrypt, stores the user document, and sends a verification email via Nodemailer. Password reset flows generate a one‑time OTP stored temporarily in the user record and emailed to the user. All mutable operations are protected by rate limiting and Helmet headers to mitigate abuse.

Execution Flow Authentication routes (/register, /login, /logout, /send-verify-otp, /verify-account, /reset-password) are defined in server/routes/authRoutes.js and guarded by the userAuth middleware where needed. After successful login, a JWT is issued and stored in an HTTP‑only cookie, enabling the protected /profile and /data endpoints to verify the user via the isAuthenticated controller.

Security Guardrails The stack employs input sanitization, Joi schema validation (as referenced in project learnings), rate limiting, and Helmet for HTTP security headers. Tokens are kept in HTTP‑only cookies to prevent XSS, and all password handling uses salted hashing. Email verification and OTP checks add an extra layer of identity assurance.

Build & Deployment Topology Development scripts run the backend with npm run dev (nodemon) and the frontend with npm start (Vite). Environment variables are managed via .env files in each folder, separating concerns for database URIs, JWT secrets, SMTP credentials, and client URLs. The codebase is linted with ESLint to enforce code quality across both sides.

System Diagrams & Flow Visualizations

Interactive Mermaid architecture & execution flows

Architectural Visualizer · System Architecture

Core System Features

Key capabilities & architectural features

FEATURE 01

User registration with email verification

User registration with email verification

FEATURE 02

Login with JWT token stored in HTTP‑only cookie

Login with JWT token stored in HTTP‑only cookie

FEATURE 03

Password reset workflow with OTP verification

Password reset workflow with OTP verification

FEATURE 04

Protected dashboard accessible only to authenticated users

Protected dashboard accessible only to authenticated users

FEATURE 05

Rate‑limited API endpoints to prevent brute‑force attacks

Rate‑limited API endpoints to prevent brute‑force attacks

FEATURE 06

Input validation and sanitization using Joi and custom middleware

Input validation and sanitization using Joi and custom middleware

FEATURE 07

Secure HTTP headers via Helmet

Secure HTTP headers via Helmet

FEATURE 08

Rich text editing support with Tiptap (sanitized storage)

Rich text editing support with Tiptap (sanitized storage)

FEATURE 09

Drag‑and‑drop ordering of items using dnd‑kit

Drag‑and‑drop ordering of items using dnd‑kit

FEATURE 010

Responsive design powered by TailwindCSS

Responsive design powered by TailwindCSS

Engineering Challenges & Solutions

Problem statements & resolution strategies

Challenge #1

Balancing security (rate limiting, Helmet) with developer ergonomics during local testing

Balancing security (rate limiting, Helmet) with developer ergonomics during local testing

Challenge #2

Ensuring OTP race conditions are handled when multiple reset requests occur

Ensuring OTP race conditions are handled when multiple reset requests occur

Challenge #3

Managing JWT expiration and refresh without exposing tokens to XSS

Managing JWT expiration and refresh without exposing tokens to XSS

Challenge #4

Synchronizing drag‑and‑drop UI state with MongoDB sequence indices in real time

Synchronizing drag‑and‑drop UI state with MongoDB sequence indices in real time

Challenge #5

Preventing XSS while storing rich HTML content from Tiptap

Preventing XSS while storing rich HTML content from Tiptap

API Reference & Endpoints

REST API surface & route documentation

METHODENDPOINT PATHDESCRIPTIONCOPY
POST/registerEndpoint defined in server/routes/authRoutes.js
POST/loginEndpoint defined in server/routes/authRoutes.js
POST/logoutEndpoint defined in server/routes/authRoutes.js
POST/send-verify-otpEndpoint defined in server/routes/authRoutes.js
POST/verify-accountEndpoint defined in server/routes/authRoutes.js
GET/is-authEndpoint defined in server/routes/authRoutes.js
POST/send-reset-otpEndpoint defined in server/routes/authRoutes.js
POST/reset-passwordEndpoint defined in server/routes/authRoutes.js
GET/dataEndpoint defined in server/routes/userRoutes.js
GET/Endpoint defined in server/server.js

Key Code Modules & Architecture

Core file entrypoints and service responsibilities

ClientMODULE 01
client

Module component managing client source logic

SrcMODULE 02
client/src

Module component managing src source logic

ComponentsMODULE 03
client/src/components

Module component managing components source logic

PagesMODULE 04
client/src/pages

Module component managing pages source logic

ServerMODULE 05
server

Module component managing server source logic

ConfigMODULE 06
server/config

Module component managing config source logic

ControllersMODULE 07
server/controllers

Module component managing controllers source logic

MiddlewareMODULE 08
server/middleware

Module component managing middleware source logic

ModelsMODULE 09
server/models

Module component managing models source logic

RoutesMODULE 010
server/routes

Module component managing routes source logic

User Journey Pipeline

  1. 1User accesses application user interface via browser
  2. 2User triggers action invoking HTTP/WebSocket API endpoints
  3. 3Data persisted or retrieved from database storage layer

Execution Code Flow

  1. 1Client or caller initiates request to application entrypoint
  2. 2Backend router validates request parameters and applies middleware
  3. 3Database ORM/client executes storage query
  4. 4Application serializes JSON/audio/data response back to client

System FAQ & Technical Specifications

Frequently asked questions and core architecture details

Q: What technologies are used in Mern Auth Template?

Mern Auth Template is engineered using modern full-stack frameworks.

Q: What core engineering problem does Mern Auth Template solve?

React + Vite This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available: - @vitejs/plugin-rea...

Q: How is 'Balancing security (rate limiting, Helmet) with developer ergonomics during local testing' resolved in Mern Auth Template?

Resolved through specialized system architecture and resilient state handling.

Related Systems & Case Studies

Explore similar technical architectures and projects

View All Systems