Xây dựng hệ thống xác thực OTP qua Email với Next.js - Phần 1: Thiết lập và cấu hình

400">npm install nodemailer
400">npm install --save-dev @types/nodemailer

# Gmail SMTP Configuration
GMAIL_USER=your-email@gmail.com
GMAIL_APP_PASSWORD=xxxx xxxx xxxx xxxx

# Site Configuration
NEXT_PUBLIC_SITE_NAME=Your App Name

# Database (nếu chưa có)
MONGODB_URI=your_mongodb_connection_string

declare module 'nodemailer' {
  export interface TransportOptions {
    host: string;
    port: number;
    secure: boolean;
    auth: {
      user: string | undefined;
      pass: string | undefined;
    };
  }

  export interface MailOptions {
    from: {
      name: string;
      address: string;
    };
    to: string;
    subject: string;
    html: string;
    text: string;
  }

  export interface SendMailResult {
    messageId: string;
  }

  export interface Transporter {
    sendMail(mailOptions: MailOptions): Promise<SendMailResult>;
    verify(): Promise<boolean>;
  }

  export function createTransport(options: TransportOptions): Transporter;
}

import mongoose, { Schema, Document, Model } from "mongoose";

export interface IOTPVerification extends Document {
  email: string;
  otp: string;
  createdAt: Date;
  expiresAt: Date;
  verified: boolean;
  attempts: number;
}

const OTPVerificationSchema = new Schema<IOTPVerification>({
  email: {
    type: String,
    required: true,
    lowercase: true,
    trim: true,
  },
  otp: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
  expiresAt: {
    type: Date,
    required: true,
  },
  verified: {
    type: Boolean,
    default: false,
  },
  attempts: {
    type: Number,
    default: 0,
  },
});

// Index for automatic cleanup of expired OTPs
OTPVerificationSchema.index({ expiresAt: 1 }, { expireAfterSeconds: 0 });

// Index for faster lookups
OTPVerificationSchema.index({ email: 1, verified: 1 });

const OTPVerification: Model<IOTPVerification> =
  mongoose.models.OTPVerification ||
  mongoose.model<IOTPVerification>("OTPVerification", OTPVerificationSchema);

export default OTPVerification;

// src/models/User.ts
const UserSchema: Schema<IUser> = new Schema(
  {
    // ... các fields khác

    emailVerified: {
      type: Boolean,
      default: false,
      index: true,
    },

    provider: {
      type: String,
      enum: ['credentials', 'google'],
      default: 'credentials',
    },

    // ... các fields khác
  },
  {
    timestamps: true,
  }
);

┌─────────────────────────────────────────────────────────┐
│                     User Registration                    │
└──────────────────────┬──────────────────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────┐
│  POST /api/auth/register                                │
│  - Tạo user với emailVerified: false                    │
│  - Return requireVerification: true                      │
└──────────────────────┬──────────────────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────┐
│  OTPVerification Component Mount                         │
│  - Auto gửi OTP đến email                               │
└──────────────────────┬──────────────────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────┐
│  POST /api/auth/send-otp                                │
│  1. Validate email                                       │
│  2. Check rate limiting (60s)                           │
│  3. Generate 6-digit OTP                                │
│s 4. Save to OTPVerification model (TTL 10 min)          │
│  5. Send email via Gmail SMTP                           │
└──────────────────────┬──────────────────────────────────┘
                       │
                    E  ▼
┌─────────────────────────────────────────────────────────┐
│  User nhập OTP (6 digits)                               │
└──────────────────────┬──────────────────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────┐
│  POST /api/auth/verify-otp                              │
│  1. Tìm OTP record                                       │
│  2. Check expiration                                     │
│  3. Check attempts (max 5)                              │
│s 4. Verify OTP                                           │
│  5. Update user.emailVerified = true                    │
│  6. Delete OTP record                      TA             │
└──────────────────────┬──────────────────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────┐
│  Redirect to Login Page                                  │
│  User có thể đăng nhập                                  │
└─────────────────────────────────────────────────────────┘