Next.js Authentication System

A full-stack authentication system built with Next.js App Router, TypeScript, MongoDB, JWT, and Nodemailer.

This project demonstrates a complete authentication workflow including user registration, login, email verification, password reset, route protection, JWT-based authentication, and secure password storage.

---

Features

Authentication

• User Signup
• User Login
• User Logout
• JWT-based Authentication
• Protected Routes
• HTTP-Only Authentication Cookies

Email Verification

• Verification email sent after signup
• Secure token generation using Node.js Crypto
• Token hashing before database storage
• Expiring verification links

Password Recovery

• Forgot Password flow
• Password reset via email link
• Secure reset tokens
• Token expiration handling

Security Features

• Password hashing using bcrypt
• JWT authentication tokens
• HTTP-only cookies
• Route-level access control using Next.js Proxy
• SHA-256 token hashing
• Expiring verification and reset tokens

---

Tech Stack

Frontend

• Next.js 16 (App Router)
• React 19
• TypeScript
• Tailwind CSS

Backend

• Next.js Route Handlers
• MongoDB
• Mongoose

Authentication & Security

• JWT (jsonwebtoken)
• bcryptjs
• crypto

Email Service

• Nodemailer
• Mailtrap SMTP

---

Project Structure

src/
│
├── app/
│   ├── api/users/
│   │   ├── signup/
│   │   ├── login/
│   │   ├── logout/
│   │   ├── me/
│   │   ├── verifyemail/
│   │   ├── forgotpasswd/
│   │   └── confirmpasswd/
│   │
│   ├── signup/
│   ├── login/
│   ├── profile/
│   ├── verifyemail/
│   ├── forgotpasswd/
│   └── confirmpasswd/
│
├── dbConfig/
│   └── dbConfig.ts
│
├── helpers/
│   ├── mailer.ts
│   └── getDataFromToken.ts
│
├── models/
│   └── userModel.js
│
└── proxy.ts

---

Authentication Flow

Signup

1. User submits username, email, and password.
2. Password is hashed using bcrypt.
3. User is saved to MongoDB.
4. Verification email is sent.
5. Verification token is stored in hashed form.

Email Verification

1. User clicks verification link.
2. Token is sent to the backend.
3. Backend hashes the token.
4. Hashed token is matched against the database.
5. Account is marked as verified.

Login

1. User submits email and password.
2. Password is verified using bcrypt.
3. JWT token is generated.
4. JWT is stored inside an HTTP-only cookie.
5. User gains access to protected routes.

Password Reset

1. User requests password reset.
2. Reset email is sent.
3. Secure reset token is generated.
4. User opens reset link.
5. New password is hashed and stored.
6. Reset token is removed from the database.

---

Route Protection

The application uses a Next.js Proxy (src/proxy.ts) to protect routes.

Public Routes

/
/login
/signup
/verifyemail
/forgotpasswd
/confirmpasswd

Protected Routes

/profile

Behavior:

• Unauthenticated users trying to access protected routes are redirected to /login.
• Authenticated users trying to access /login or /signup are redirected to /profile.

---

User Schema

{
  username: String,
  email: String,
  password: String,

  isVerified: Boolean,
  isAdmin: Boolean,

  verifyToken: String,
  verifyTokenExpiry: Date,

  forgotPasswordToken: String,
  forgotPasswordTokenExpiry: Date
}

---

Environment Variables

Create a .env file in the root directory.

MONGO_URI=your_mongodb_connection_string

TOKEN_SECRET=your_jwt_secret

DOMAIN=http://localhost:3000

MAILTRAP_SMTP_HOST=your_mailtrap_host
MAILTRAP_SMTP_PORT=your_mailtrap_port
MAILTRAP_SMTP_USER=your_mailtrap_username
MAILTRAP_SMTP_PASS=your_mailtrap_password

---

Installation

Clone the Repository

git clone <your-repository-url>
cd nextjs_auth

Install Dependencies

npm install

Configure Environment Variables

Create a .env file and add all required variables.

Run Development Server

npm run dev

Application will start at:

http://localhost:3000

---

Available API Endpoints

Method	Endpoint	Description
POST	/api/users/signup	Register new user
POST	/api/users/login	Login user
GET	/api/users/logout	Logout user
GET	/api/users/me	Get current user
POST	/api/users/verifyemail	Verify email
POST	/api/users/forgotpasswd	Send password reset email
POST	/api/users/confirmpasswd	Update password

---

Learning Concepts Covered

This project is useful for understanding:

• Next.js App Router
• Route Handlers
• MongoDB with Mongoose
• JWT Authentication
• Password Hashing with bcrypt
• Email Verification Systems
• Password Reset Workflows
• HTTP-only Cookies
• Route Protection using Proxy/Middleware
• Secure Token Generation using Crypto
• Authentication Best Practices

---

Future Improvements

• Refresh Tokens
• Role-Based Access Control (RBAC)
• OAuth Login (Google/GitHub)
• Email Templates
• Rate Limiting
• Account Lockout Protection
• Two-Factor Authentication (2FA)
• Session Management Dashboard

---

Author

Built as a learning project to understand full-stack authentication using Next.js and MongoDB.