🔐 MERN Auth Pro — Complete Authentication System

A production-ready authentication system built using the MERN Stack, featuring secure JWT-based login, OTP verification via email and phone, password reset workflows, and structured backend architecture.

🚀 Key Features • 📸 Screenshots • 💻 Tech Stack • 📦 Installation Guide

---

🎯 Project Overview

• MERN Auth Pro is a comprehensive authentication project designed to demonstrate real-world user management and security practices.
• This system is built from scratch using React, Node.js, Express, and MongoDB, and covers the entire authentication lifecycle. It includes advanced features such as:
  • JWT-based authentication
  • Email OTP verification
  • Phone OTP verification
  • Forgot & Reset Password

---

🚀 Key Features Implemented

• 🔐 JWT-based Authentication
  Login, logout, registration, profile managementSecure token-based authentication system for protected API access.

• 📝 User Registration & Login
  Complete signup and login flow with credential validation.

• 📲 OTP Verification System
  Account verification via:

  • Email (NodeMailer)
  • Phone Call (Twilio)

• 🔁 Forgot & Reset Password
  Secure password recovery using OTP/token validation.

• 🛡️ Protected Routes & Middleware
  Authentication middleware to restrict unauthorized access.

• 🔒 Password Security
  bcrypt-based password hashing before storing in database.

• ⚡ Automation Features
  Automatic OTP generation, token creation, and verification handling.

• 🌐 RESTful Backend Architecture
  Structured API design with centralized error handling.

  ---

📸 Screenshots

Screenshot 1	Screenshot 2
Login	Register

Screenshot 3	Screenshot 4
OTP Verification	OTP Mail

Screenshot 5	Screenshot 6
Forgot Password	Reset Password Mail

---

💻 Tech Stack

🎨 Frontend

⚙️ Backend

🗄️ Database

🔐 Authentication & Services

---

🔄 User Workflow

• 1. Register – User signs up with email & phone number.

• 2. OTP Verification – System generates a secure OTP and sends it via Email (NodeMailer) or Phone (Twilio). Account is activated after successful verification.

• 3. Login – User logs in with credentials. Server validates data and issues a JWT token.

• 4. Access Protected Routes – JWT is verified by authentication middleware to securely access user-specific data.

• 5. Forgot / Reset Password – User requests password reset, verifies via OTP/token, and sets a new password securely.

• 6. Logout – Token is cleared and session ends safely.

  ---

📁 Detailed Project Structure

1-JWT/
│
├── 🎨 client/                              # React frontend (Vite-based UI)
│   │
│   ├── 📦 dist/                            # Production build output
│   │   ├── assets/                         # Optimized CSS & JS bundles
│   │   └── index.html                      # Production entry HTML
│   │
│   ├── 🌐 public/                          # Static public assets
│   │   └── vite.svg                        # Vite logo
│   │
│   ├── 🧠 src/                             # Main frontend source code
│   │   │
│   │   ├── assets/                         # Static images & icons
│   │   │   └── react.svg
│   │   │
│   │   ├── 🧩 components/                  # Reusable UI components
│   │   │   ├── Login.jsx                   # Login form component
│   │   │   └── Register.jsx                # Registration form component
│   │   │
│   │   ├── 📄 pages/                       # Page-level components
│   │   │   ├── Auth.jsx                    # Combined auth layout
│   │   │   ├── Home.jsx                    # Home page
│   │   │   ├── OtpVerification.jsx         # OTP verification screen
│   │   │   ├── ForgotPassword.jsx          # Forgot password page
│   │   │   └── ResetPassword.jsx           # Reset password UI
│   │   │
│   │   ├── 🎨 styles/                      # Modular CSS styling
│   │   │   ├── Auth.css
│   │   │   ├── Home.css
│   │   │   ├── OtpVerification.css
│   │   │   ├── ForgotPassword.css
│   │   │   ├── ResetPassword.css
│   │   │   └── (Other UI styles)
│   │   │
│   │   ├── 📸 screenshots/                 # Demo screenshots for README
│   │   │   ├── 1-Login.jpg
│   │   │   ├── 2-Signup.jpg
│   │   │   ├── 3-OTP-Verification.jpg
│   │   │   ├── 4-OTP-Verification-Mail.jpg
│   │   │   ├── 5-Forgot-Password.jpg
│   │   │   ├── 6-Reset-Password-Mail.jpg
│   │   │   └── 7-Reset-Password.jpg
│   │   │
│   │   ├── App.jsx                         # Root React component
│   │   ├── main.jsx                        # React entry point
│   │   └── App.css                         # Global styles
│   │
│   ├── vite.config.js                      # Vite configuration
│   ├── package.json                        # Frontend dependencies
│   └── README.md                           # Frontend documentation
│
├── ⚙️ server/                              # Node.js + Express backend
│   │
│   ├── 🎮 controllers/                     # Core authentication logic
│   │   └── userControllers.js              # Register, Login, OTP, Reset logic
│   │
│   ├── 🧱 models/                          # Mongoose schemas
│   │   └── userModel.js                    # User schema (auth fields + OTP)
│   │
│   ├── 🚏 routes/                          # API route definitions
│   │   └── userRouter.js                   # User authentication routes
│   │
│   ├── 🛡️ middleware/                      # Custom middleware
│   │   ├── isAuthenticated.js              # JWT verification middleware
│   │   ├── error.js                        # Central error handler
│   │   └── wrapAsync.js                    # Async error wrapper
│   │
│   ├── 🗄️ database/                        # Database configuration
│   │   └── dbConnection.js                 # MongoDB connection setup
│   │
│   ├── 🛠️ utils/                           # Helper utilities
│   │   ├── sendEmail.js                    # Send OTP via NodeMailer
│   │   └── sendToken.js                    # Generate & send JWT token
│   │
│   ├── app.js                              # Express app configuration
│   ├── server.js                           # Server entry point
│   ├── .env                                # Environment variables
│   └── package.json                        # Backend dependencies
│
└── 🔧 Root Files
    ├── .gitignore                          # Ignored files

---

🏗️ Architecture Summary

🎨 Frontend (React + Vite) → Handles UI, forms, API requests

⚙️ Backend (Express.js) → Handles authentication & business logic

🗄️ MongoDB → Stores user data securely

🔐 JWT → Token-based authentication

📲 Twilio + NodeMailer → OTP verification system

---

📦 Installation Guide

1️⃣ Clone the Repository

git clone https://github.com/nikhilyadav-dev/multi-authentication-node.git
cd 1-JWT

2️⃣ Setup Backend (Server)

cd server
npm install

🔐 Create .env File Inside server/

# Server Configuration
PORT=8000
FRONTEND_URL=http://localhost:5173

# Database Configuration
MONGO_URL=mongodb://127.0.0.1:27017/your_database_name

# JWT Configuration
JWT_SECRET_KEY=your_super_secret_key
JWT_EXPIRE=7d
COOKIE_EXPIRE=7

# Email Configuration (NodeMailer)
SMTP_SERVICE=gmail
SMTP_HOST=smtp.gmail.com
SMTP_PORT=465
SMTP_MAIL=your_email@gmail.com
SMTP_PASSWORD=your_app_password

# Twilio Configuration (OTP via Phone)
TWILIO_SID=your_twilio_account_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_PHONE_NUMBER=your_twilio_phone_number


👉 Replace the values with your actual credentials.

▶️ Run Backend Server

npm run dev

3️⃣ Setup Frontend (Client)

Open a new terminal:

cd client
npm install

▶️ Run Frontend

npm run dev

4️⃣ Access the Application Open your browser and visit:

http://localhost:5173

---

💼 Connect with Me

⭐ If you found this project helpful, consider giving it a star!