🔐 MFA MERN App (Multi-Factor Authentication)

I built this project to implement a secure login system with Multi-Factor Authentication (MFA) using the MERN stack.
The app requires users to log in with email + password and then verify a 6-digit OTP sent to their email.

👉 Backend is deployed on Render
👉 Frontend is deployed on Vercel
👉 Database is hosted on MongoDB Atlas

---

🚀 Features

• User authentication with email + password
• Email-based OTP verification (6 digits)
• Resend OTP option with a countdown timer
• Protected dashboard with session handling
• Logout that also prevents back/forward navigation into dashboard
• Cloud-hosted MongoDB for persistence

---

🛠️ Tech Stack I Used

• Frontend: React, React Router, Vercel
• Backend: Node.js, Express, Mongoose
• Database: MongoDB Atlas
• Auth/Email Service: Mailtrap SMTP
• Deployment: Render (backend) + Vercel (frontend)

---

📂 Project Structure

mfa-mern/
│── client/       # React frontend (Vercel)
│   └── src/
│       ├── components/   # Login, Dashboard, etc.
│       ├── config.js     # API base URL
│       └── App.js
│
│── server/       # Express backend (Render)
│   ├── routes/   # Authentication routes
│   ├── models/   # User model
│   ├── server.js # Main server file
│   └── .env      # Environment variables
│
│── README.md

---

⚙️ How I Set It Up

1. Clone the repo

git clone https://github.com/<my-username>/mfa-mern.git
cd mfa-mern

2. Backend Setup

cd server
npm install

I created a .env file inside server/:

PORT=5000
MONGO_URI=your_mongodb_atlas_uri
MAILTRAP_USER=your_mailtrap_username
MAILTRAP_PASS=your_mailtrap_password

Run backend locally:

npm start

➡️ Runs on http://localhost:5000

---

3. Frontend Setup

cd client
npm install

I created a .env file inside client/:

REACT_APP_API_BASE_URL=http://localhost:5000

Run frontend locally:

npm start

➡️ Runs on http://localhost:3000

---

🌍 Deployment Steps

Backend (Render)

1. Pushed repo to GitHub
2. On Render, created a Web Service
3. Connected GitHub → selected server/
4. Added environment variables from .env
5. Deployed → got live API URL like:

   https://mfa-mern-xxxxx.onrender.com
   

---

Frontend (Vercel)

1. Went to Vercel
2. Imported project → selected client/
3. Added environment variable:

   REACT_APP_API_BASE_URL=https://mfa-mern-xxxxx.onrender.com

4. Deployed → got live frontend URL like:

   https://mfa-mern.vercel.app
   

---

🔑 Environment Variables

Server (server/.env)

PORT=5000
MONGO_URI=your_mongodb_atlas_uri
MAILTRAP_USER=your_mailtrap_username
MAILTRAP_PASS=your_mailtrap_password

Client (client/.env)

REACT_APP_API_BASE_URL=https://mfa-mern-xxxxx.onrender.com

---

📸 Demo Flow

1. Enter Email + Password
2. Receive OTP in email
3. Enter 6-digit OTP
4. Redirected to Dashboard ✅
5. If logged out or going back/forward → redirected to Login

---

📬 API Testing (Postman)

Register User

POST /auth/register

{
  "email": "test@example.com",
  "password": "123456"
}

Login

POST /auth/login

{
  "email": "test@example.com",
  "password": "123456"
}

Verify OTP

POST /auth/verify-otp

{
  "email": "test@example.com",
  "otp": "123456"
}

---

🤝 Contributing

If anyone wants to extend this project (e.g., JWT, Google Authenticator, SMS OTP), feel free to fork and PR!

---

📜 License

MIT License © 2025 — Built by Surya Panduri 🙂