Hướng Dẫn Xác Thực Email với Better-Auth

Chào mừng bạn quay lại với chuỗi bài viết cơ bản về Better-Auth! 🚀 Trong tập đầu tiên, chúng ta đã thiết lập Better-Auth với Drizzle ORM và triển khai chức năng đăng ký và đăng nhập. Tuy nhiên, có một vấn đề lớn:

👉 Bất kỳ ai cũng có thể đăng ký với một email ngẫu nhiên — thậm chí là một email mà họ không sở hữu.

Điều này rõ ràng không an toàn cho môi trường sản xuất. Trong bài viết này, chúng ta sẽ khắc phục điều đó bằng cách thêm Xác Thực Email với Better-Auth.

❌ Vấn Đề Khi Không Có Xác Thực

Hiện tại, một người dùng có thể nhập bất kỳ địa chỉ email nào trên trang đăng ký, và máy chủ sẽ vui vẻ chấp nhận. Điều này dẫn đến những tài khoản giả, spam đăng ký và các rủi ro về bảo mật. Chúng ta cần một cách để đảm bảo rằng người đó thực sự sở hữu email mà họ đang đăng ký.

✅ Xác Thực Email với Better-Auth

Tin tốt là Better-Auth đã có chức năng xác thực email tích hợp cho việc xác thực email/mật khẩu. Chúng ta chỉ cần cấu hình nó. Hãy cùng thực hiện từng bước.

🛠 Bước 1: Cấu Hình Nhà Cung Cấp Email

Để gửi email xác thực, chúng ta sẽ sử dụng dịch vụ Resend.

1. Tạo một tài khoản Resend.

2. Thêm tên miền tùy chỉnh của bạn.

3. Tạo một API key.

4. Lưu nó vào tệp .env của bạn:

   Copy

   RESEND_API_KEY=your-api-key

🛠 Bước 2: Tạo Mẫu Email

Bên trong Resend, cấu hình các mẫu đơn giản cho email xác thực của bạn. Đây là thông điệp mà người dùng sẽ thấy trong hộp thư đến của họ với liên kết xác thực.

🛠 Bước 3: Kích Hoạt Xác Thực Email trong Better-Auth

Trong cấu hình Better-Auth của bạn, hãy kích hoạt các tính năng xác thực:

import { betterAuth } from "better-auth/server";
import { schema } from "../db/schema";

export const auth = betterAuth({
  schema,
  emailAndPassword: {
    enabled: true,
    requireEmailVerification: true,
  },
  emailVerification: {
    sendOnSignUp: true,
    autoSignInAfterVerification: true,
    async sendVerificationEmail({ user, url, token }, request) {
      await sendVerificationEmail({ email: user.email, url, token });
    },
  },
});

🛠 Bước 4: Gửi Email Xác Thực Khi Đăng Ký

Better-Auth sẽ tự động gửi một email xác thực khi một người dùng mới đăng ký.

• Sau khi đăng ký, chuyển hướng người dùng đến trang xác thực trong ứng dụng của bạn.
• Hướng dẫn họ kiểm tra hộp thư đến để tìm liên kết xác thực.

// app/verify/page.tsx
export default function VerifyPage() {
  return (
    <div>
      <h1>Xác Thực Email Của Bạn</h1>
      <p>
        Chúng tôi đã gửi cho bạn một liên kết. Hãy kiểm tra hộp thư đến của bạn và nhấp vào nó để kích hoạt tài khoản của bạn.
      </p>
    </div>
  );
}

🛠 Bước 5: Kiểm Tra Quy Trình

• Đăng ký bằng một địa chỉ email thật.
• Kiểm tra hộp thư đến → bạn sẽ thấy email xác thực.
• Nhấp vào liên kết → máy chủ xác thực nó.
• Bạn sẽ được tự động đăng nhập và chuyển hướng đến trang chủ 🎉

Đây là phản hồi thành công:

{
  "status": 200,
  "message": "Email đã được xác thực và người dùng đã đăng nhập"
}

🎉 Vậy Là Xong!

Chỉ với vài dòng cấu hình, chúng ta đã thêm chức năng xác thực email an toàn vào thiết lập Better-Auth của chúng ta.

Bây giờ:

• Người dùng phải chứng minh họ sở hữu email của họ.
• Các đăng ký giả bị chặn.
• Quy trình onboarding an toàn hơn và sẵn sàng cho sản xuất.

📌 Những Gì Tiếp Theo?

Đây là tập 2 của chuỗi bài viết về Better-Auth. Trong các tập tiếp theo, chúng ta sẽ đề cập đến:

• 👥 Xác thực dựa trên vai trò.
• ⚡ Giới hạn tần suất.
• 🛡 Middleware để bảo vệ các tuyến đường. Hãy theo dõi — chúng ta vẫn còn nhiều điều thú vị phía trước.

🔗 Kết Nối Với Chúng Tôi

• 📽️ Youtube: code_unhinged
• 🐦 Twitter (X): zul_rayat
• 💻 GitHub: devrayat000
• 💼 LinkedIn: zim-rayat
• 📷 Instagram: rayatttttttt
• 📘 Facebook: rayat.ass

💬 Có câu hỏi? Để lại trong phần bình luận — tôi sẽ trả lời từng câu hỏi!
👍 Đừng quên thích, chia sẻ và đăng ký để nhận thêm nội dung dành cho lập trình viên.