Project Overview

This project is a secure OTP-based user authentication system built with the MERN (MongoDB, Express, React, Node.js) stack. It enhances login security by sending a 4-digit One-Time Password (OTP) to the user’s registered email using Nodemailer.
Once the user logs in with valid credentials, an OTP is generated and sent to the email.
The OTP must be entered within 30 seconds to access the dashboard, and the authenticated session remains valid for 10 minutes using JWT tokens.
This system mimics real-world secure login practices, ensuring strong two-step verification and token-based session control.

Screenshots

Key Features

• User Registration:
  • Users can register using name, email, and password.
  • Passwords are hashed and securely stored in MongoDB.
• Secure Login with OTP:
  • On login, credentials are verified.
  • A random 4-digit OTP is generated and sent via email using Nodemailer.
  • User must verify OTP within 30 seconds.
• OTP Verification:
  • OTP input page validates the code.
  • If OTP matches and not expired, user gets access to the dashboard.
  • OTP automatically expires after 30 seconds.
• JWT Authentication:
  • A JSON Web Token (JWT) is generated after OTP verification.
  • The token remains valid for 10 minutes.
  • After expiry, user must log in again to receive a new OTP.
• Token Expiry Handling:
  • When token expires, user is automatically logged out.
  • Requires re-login and new OTP verification.
• Email Integration with Nodemailer:
  • OTP is sent instantly to registered email.
  • Uses SMTP-based configuration (e.g., Gmail SMTP).
• Responsive Frontend:
  • Built with React and React Router.
  • Includes pages for Registration, Login, OTP Verification, and Dashboard.

Functionality

• User Registration: data stored in MongoDB.
• Login: verify email & password → generate 4-digit OTP.
• Send OTP: via Nodemailer to user’s email.
• OTP Verification Page: user enters OTP.
• If valid & not expired: issue JWT token (10-minute expiry).
• Access Dashboard: only with valid JWT token.
• After 10 minutes: token expires → user must log in again.

Technology Used

•  Frontend:
  • React.js: UI and component structure
  • Axios: for API communication
  • React Router DOM: for page navigation
• Backend:
  • Node.js & Express.js: server setup and routing
  • Nodemailer: sending OTP emails
  • jsonwebtoken (JWT): secure token-based authentication
  • bcrypt.js: password hashing
  • dotenv: environment variable management
• Database:
  • MongoDB (Mongoose): stores user details, OTPs, and expiry times

Why This Project Is Useful

• Enhances Security: Two-layer authentication system prevents unauthorized access.
• Temporary OTPs: Time-limited OTPs (30 seconds) add real-world security practices.
• Session Management: JWT ensures limited, token-based login validity (10 minutes).
• Practical Real-World Use: Common in apps like banking, e-commerce, and verification portals.
• Learning Purpose: Covers full MERN stack development, API creation, authentication, and email integration — perfect for portfolios and real-life implementation.

Deployment and Environment Setup

1. Environment Variables Setup:
   • backend/.env
     • PORT: 3000
     • MONGO_URI: mongodb_url_string
     • JWT_SECRET: your_jwt_secret_key_here (if needed)
   • frontend/.env
     • VITE_API_URL: backend_url
2. Deployment Overview:
   • Render or Railway for backend hosting
   • Vercel or Netlify for frontend hosting
   • MongoDB Atlas for the database
3. Backend Deployment:
   • Push your code to GitHub.
   • Go to Render.com or Railway.app.
   • Create a new Web Service and connect your GitHub repository.
   • Choose “backend/” as the root directory.
   • Add the following environment variables on Render:
   • PORT=10000
   • MONGO_URI=your MongoDB Atlas URI
   • JWT_SECRET=your JWT secret
   • Start command: npm start (Ensure your backend/package.json includes “start”: “node server.js”)
   • After deployment, note your backend URL, e.g. https://your-backend-name.onrender.com
4. Frontend Deployment:
   • Go to Vercel.com or Netlify.com.
   • Create a new project and connect the GitHub repo.
   • Select the “frontend/” folder as root.
   • In environment variables, set:
   • VITE_API_URL=https://your-backend-domain.com/api (or REACT_APP_API_URL if using CRA)
   • Deploy.
5. MongoDB Atlas Setup:
   • Go to https://cloud.mongodb.com
   • Create a free cluster.
   • Add your current IP address in Network Access.
   • Create a database user and password.
   • Copy the connection string and replace username, password, and database name in MONGO_URI in backend/.env

Download Source Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.