HadavTech Logo
NextJS•

Xây dựng hệ thống xác thực OTP qua Email (Phần 4): Testing, Deployment & Best Practices

Chào mừng bạn đến với phần cuối cùng của series "Xây dựng hệ thống xác thực OTP qua Email với Next.js".Ở Phần 3, chúng ta đã hoàn thiện giao diện ngườ...

DV

Dai Vo (dev)

11/12/2025

Xây dựng hệ thống xác thực OTP qua Email (Phần 4): Testing, Deployment & Best Practices

Chào mừng bạn đến với phần cuối cùng của series "Xây dựng hệ thống xác thực OTP qua Email với Next.js".

Ở Phần 3, chúng ta đã hoàn thiện giao diện người dùng. Tuy nhiên, một hệ thống xác thực chỉ thực sự "hoàn thành" khi nó hoạt động ổn định, gửi email không bị vào spam, và chịu tải tốt.

Trong phần này, chúng ta sẽ đi sâu vào:

  1. Testing: Kiểm thử toàn diện các trường hợp (kể cả edge cases).

  2. Deployment: Cấu hình môi trường Production và DNS records (SPF, DKIM) để email uy tín hơn.

  3. Best Practices: Tối ưu bảo mật và hiệu năng.

  4. Scaling: Giải pháp khi hệ thống có hàng ngàn user.

1. Chiến lược Testing (Kiểm thử)

Trước khi deploy, hãy chắc chắn hệ thống của bạn vượt qua được các kịch bản sau.

Manual Testing Checklist (Kiểm thử thủ công)

Bạn hãy đóng vai người dùng và thực hiện các thao tác sau:

Quy trình Đăng ký:

  • ✅ Đăng ký với email hợp lệ $\rightarrow$ Phải nhận được email OTP.

  • ✅ Đăng ký với email đã tồn tại $\rightarrow$ Hệ thống báo lỗi "Email đã tồn tại".

  • ✅ Nhập mật khẩu xác nhận không khớp $\rightarrow$ Báo lỗi ngay tại form.

Quy trình Xác thực OTP:

  • ✅ Nhập đúng mã OTP $\rightarrow$ Chuyển hướng trang và báo thành công.

  • ✅ Nhập sai mã OTP $\rightarrow$ Báo lỗi và không chuyển trang.

  • ✅ Paste mã từ clipboard $\rightarrow$ Hệ thống tự động điền và submit (đã làm ở Phần 3).

  • ✅ Rate Limit: Bấm "Gửi lại" liên tục $\rightarrow$ Nút phải bị disable hoặc báo lỗi "Thử lại sau 60s".

  • ✅ Expiration: Chờ 10 phút rồi mới nhập mã $\rightarrow$ Báo lỗi "Mã đã hết hạn".

Quy trình Đăng nhập:

  • ✅ Đăng nhập khi chưa verify email $\rightarrow$ Báo lỗi "Vui lòng xác thực email".

Security Testing (Kiểm thử bảo mật)

Chúng ta cần đảm bảo Hacker không thể spam API của bạn. Hãy mở Terminal và dùng curl để test:

Test Rate Limiting (Chống Spam Request)

Thử gửi 2 request xin OTP liên tiếp:

bash 
curl -X POST http://localhost:3000/api/auth/send-otp \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com"}' && \
curl -X POST http://localhost:3000/api/auth/send-otp \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com"}'

Kết quả mong đợi: Request thứ 2 phải trả về lỗi 429 Too Many Requests.

Test Brute Force (Chống dò mã)

Thử nhập sai OTP liên tục 6 lần:

bash 
for i in {1..6}; do
  echo "Lần thử $i:"
  curl -X POST http://localhost:3000/api/auth/verify-otp \
    -H "Content-Type: application/json" \
    -d '{"email":"test@example.com","otp":"000000"}'
  echo -e "\n---"
done

Kết quả mong đợi: Đến lần thứ 5 hoặc 6, hệ thống phải từ chối verify và yêu cầu gửi mã mới.

2. Deployment & Cấu hình Email (Quan trọng)

Đây là bước quyết định xem email của bạn sẽ vào Inbox hay Spam.

Bước 1: Environment Variables trên Production

Khi deploy lên Vercel (hoặc server khác), hãy thiết lập các biến môi trường trong .env.production:

yaml 
# Dùng App Password của Gmail hoặc API Key của SendGrid/Amazon SES
GMAIL_USER=noreply@yourdomain.com
GMAIL_APP_PASSWORD=your_production_app_password

# URL chính thức của web
NEXT_PUBLIC_APP_URL=https://yourapp.com
NEXTAUTH_URL=https://yourapp.com

# Database Production
MONGODB_URI=mongodb+srv://user:pass@production-cluster...

Bước 2: Cấu hình DNS (SPF, DKIM, DMARC)

Nếu bạn gửi email từ domain riêng (ví dụ: noreply@hadavtech.com), bạn bắt buộc phải cấu hình DNS records để các nhà cung cấp email (Gmail, Outlook) tin tưởng bạn.

  1. SPF (Sender Policy Framework): Khai báo IP nào được phép gửi email thay mặt domain của bạn.

    • Record Type: TXT

    • Value: v=spf1 include:_spf.google.com ~all (Nếu dùng Google Workspace)

  2. DKIM (DomainKeys Identified Mail): Chữ ký số để đảm bảo email không bị sửa đổi trên đường đi.

    • Vào Admin Console của trình gửi mail (Google Admin/SendGrid) để lấy key.

    • Thêm vào DNS record dạng TXT.

  3. DMARC: Quy định cách xử lý khi email rớt 2 bài test trên.

    • Record Type: TXT

    • Host: _dmarc

    • Value: v=DMARC1; p=quarantine; rua=mailto:admin@yourdomain.com

Lưu ý: Nếu bạn dùng Gmail cá nhân (@gmail.com) để gửi, bạn không cần cấu hình DNS, nhưng giới hạn gửi rất thấp (500 mail/ngày) và không chuyên nghiệp.

3. Best Practices & Tối ưu hóa

Security (Bảo mật)

  1. Không log thông tin nhạy cảm:

    typescript 
    // ❌ KHÔNG BAO GIỜ LÀM:
console.log("OTP của user là:", otp); 

// ✅ NÊN LÀM:
console.log("Đã gửi OTP thành công tới:", email);

  2. Hash OTP (Nâng cao): Để an toàn tuyệt đối, bạn có thể hash mã OTP trước khi lưu vào DB (giống như hash password). Khi verify, hash input của user rồi so sánh.

Performance (Hiệu năng)

  1. MongoDB Indexes: Đảm bảo bạn đã tạo index, đặc biệt là TTL index để tự xóa OTP cũ.

    javascript 
    // Kiểm tra trong MongoDB Shell hoặc Compass
db.otpverifications.getIndexes();
// Phải thấy index có "expireAfterSeconds: 0"

  2. Connection Pooling: Nodemailer mặc định đã hỗ trợ, nhưng nếu tải cao, hãy dùng dịch vụ chuyên nghiệp (SendGrid/SES) qua HTTP API thay vì SMTP để nhanh hơn.

Monitoring (Theo dõi lỗi)

Cài đặt Sentry để nhận thông báo ngay khi người dùng không nhận được email hoặc lỗi hệ thống.

bash 
npm install @sentry/nextjs

Trong file gửi email src/lib/email.ts:

typescript 
import * as Sentry from '@sentry/nextjs';

export async function sendOTPEmail(email: string, otp: string) {
  try {
    // ... code gửi mail
  } catch (error) {
    // Ghi lại lỗi để dev sửa
    Sentry.captureException(error, {
      tags: { feature: 'otp-email' },
      extra: { emailRecipient: email },
    });
    throw error;
  }
}

4. Scalability: Khi hệ thống lớn lên

Khi app của bạn đạt 1,000+ người dùng, Gmail SMTP sẽ không còn phù hợp (chậm và giới hạn số lượng). Lúc này hãy nâng cấp:

Chuyển sang Email Service Provider (ESP)

Sử dụng SendGrid, Amazon SES, hoặc Resend. Ví dụ chuyển sang SendGrid:

typescript 
import sgMail from '@sendgrid/mail';
sgMail.setApiKey(process.env.SENDGRID_API_KEY);

export async function sendOTPEmail(email: string, otp: string) {
  await sgMail.send({
    to: email,
    from: 'noreply@yourdomain.com',
    templateId: 'd-xxxxxxxxx', // Dùng template design sẵn trên SendGrid
    dynamicTemplateData: { otp, name: 'User' },
  });
}

Sử dụng Queue (Hàng đợi)

Nếu bạn cần gửi email Marketing tới 10,000 người, không được gửi trực tiếp trong API request. Hãy dùng Redis và BullMQ:

  1. API nhận request -> Đẩy job vào Redis Queue -> Trả về kết quả ngay cho User.

  2. Worker (chạy nền) -> Lấy job từ Queue -> Gửi email từ từ.

5. Troubleshooting (Gỡ lỗi thường gặp)

Q: Tại sao tôi nhận được 2 email cùng lúc? A: Trong môi trường dev, React 18 bật StrictMode khiến useEffect chạy 2 lần. Chúng ta đã fix ở Phần 3 bằng cách dùng useRef. Trên Production sẽ không bị.

Q: Email gửi đi nhưng không thấy trong Inbox? A: Kiểm tra hộp thư Spam. Nếu dùng Gmail cá nhân, Google thường chặn các ứng dụng lạ ("Less secure apps"). Hãy dùng "App Password" thay vì mật khẩu đăng nhập thật.

Q: Mã OTP không hết hạn? A: Kiểm tra lại MongoDB xem trường expiresAt có đúng định dạng Date không và Index TTL đã được tạo chưa.

Tổng kết Series

Chúc mừng bạn! 🎉 Qua 4 phần của series này, bạn đã tự tay xây dựng được một hệ thống xác thực hoàn chỉnh:

Hệ thống này hoàn toàn có thể sử dụng cho các dự án thực tế, đồ án tốt nghiệp hoặc làm nền tảng cho các tính năng phức tạp hơn như 2FA (Two-Factor Authentication).

Tags

nextjsemailverifyotpemailsender
👁️11 lượt xem
❤️0 lượt thích