A complete authentication system built with the MERN Stack featuring secure JWT-based authentication, email verification using OTP, password reset flow, and protected routes.
This project demonstrates real-world authentication architecture used in production applications.

• 🌐 Frontend (Vercel)
  👉 https://authentication-system-kohl.vercel.app

• ⚙️ Backend API (Render)
  👉 https://authenticationsystem-illr.onrender.com

📌 Add images inside a screenshots/ folder

• 🏠 Home Page
  

• 🔑 Login Page
  

• 📝 Register Page
  

• 🔁 Password Reset
  

• ✅ User Registration with Email & Password
• ✅ Secure Login using JWT Authentication
• ✅ Email Verification via OTP (NodeMailer + Brevo SMTP)
• ✅ Forgot Password & Reset Password using OTP
• ✅ HTTP-Only Cookies for JWT (XSS Protection)
• ✅ Protected Routes (Backend Middleware)
• ✅ Context API for Global Auth State
• ✅ Fully Responsive UI (Tailwind CSS)
• ✅ Production-ready deployment (Render + Vercel)

• ⚛️ React (Vite)
• 🌐 Axios
• 🧠 Context API
• 🎨 Tailwind CSS
• 🔔 React Toastify

• 🟢 Node.js
• 🚀 Express.js
• 🍃 MongoDB + Mongoose
• 🔐 JWT Authentication
• 🔑 bcrypt.js (Password Hashing)
• ✉️ NodeMailer (Email OTP)
• 🍪 Cookie Parser
• 🌍 CORS Configuration

• Frontend → Vercel
• Backend → Render
• Database → MongoDB Atlas

1. User signs up with name, email, password
2. Password hashed using bcrypt
3. JWT generated and stored in HTTP-only cookie
4. Verification OTP sent via email

1. OTP sent to registered email
2. OTP validated with expiry check
3. Account marked as verified

1. Credentials validated
2. JWT generated and stored securely
3. User session maintained via cookies

1. User requests reset via email
2. OTP sent to email
3. OTP verified
4. Password updated securely

AuthenticationSystem/
│
├── backend/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── config/
│   └── server.js
│
├── frontend/
│   ├── src/
│   │   ├── pages/
│   │   ├── context/
│   │   ├── components/
│   │   └── assets/
│   └── main.jsx
│
└── README.md

MONGODB_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret
NODE_ENV=production

SMTP_USER=your_smtp_user
SMTP_PASS=your_smtp_password
SENDER_EMAIL=your_email

VITE_BACKEND_URL=https://authenticationsystem-illr.onrender.com

git clone https://github.com/amit77t/AuthenticationSystem.git cd AuthenticationSystem

cd backend
npm install
npm run server

cd frontend
npm install
npm run dev

• 🔐 Password hashing with bcrypt

• 🍪 HTTP-only JWT cookies

• 🌍 Strict CORS configuration

• ⏱ OTP expiration handling

• 🚫 Sensitive data stored in environment variables

• 🔄 Refresh Token implementation

• 📱 Google / GitHub OAuth

• 🧑‍💼 User Dashboard

• 🧪 Unit & Integration Testing

• 🔐 Role-based Authorization

Amit Chaurasia

• GitHub: https://github.com/amit77t

• LinkedIn: https://www.linkedin.com/in/amit-chaurasia-0b9976290

• If you like this project:

• ⭐ Star the repository

• 🍴 Fork it

• 📢 Share it