NextJS: วิธีใช้ Magic Link Authentication ใน Next.js แบบเข้าใจง่าย

วันอาทิตย์ที่ 23 มีนาคม พ.ศ. 2568

วิธีใช้ Magic Link Authentication ใน Next.js แบบเข้าใจง่าย

ถ้าเบื่อรหัสผ่าน มาลอง Magic Link กันเถอะ!

Magic Link Authentication เป็นวิธีล็อกอินที่ไม่ต้องใช้รหัสผ่าน ผู้ใช้แค่ใส่อีเมล แล้วระบบจะส่งลิงก์ให้คลิกเพื่อเข้าสู่ระบบ ง่าย สะดวก และปลอดภัยกว่าการจำรหัสผ่านเยอะ

ในบทความนี้ เราจะมาดูกันว่า Next.js ใช้ Magic Link ได้ยังไง โดยใช้ NextAuth.js (ตัวช่วยจัดการการยืนยันตัวตนใน Next.js) พร้อมกับ Resend (บริการส่งอีเมลที่ใช้ง่ายและเร็ว)

🎩 ทำไมต้อง Magic Link?

✅ ไม่ต้องจำรหัสผ่าน

ชีวิตเรามีรหัสผ่านเยอะเกินไปแล้ว! Magic Link ตัดปัญหานี้ออกไป

✅ ปลอดภัยกว่ารหัสผ่านปกติ

ไม่มีรหัสผ่านให้แฮก (เพราะไม่มีเลย 🤣)
ใช้ one-time link (ลิงก์ใช้ได้ครั้งเดียว) ลดความเสี่ยง

✅ UX ดีขึ้น

ล็อกอินง่าย ไม่ต้องพิมพ์อะไรเยอะ
ลดปัญหา "ลืมรหัสผ่าน"

สรุป: Magic Link = ง่าย + ปลอดภัย + ดีต่อผู้ใช้

🚀 มาเริ่มกันเลย!

1️⃣ สร้างโปรเจ็กต์ Next.js

ถ้ายังไม่มีโปรเจ็กต์ Next.js ให้สร้างใหม่ก่อน

npx create-next-app@latest magic-link-demo
cd magic-link-demo
npm install

2️⃣ ติดตั้ง NextAuth.js และ Resend

npm install next-auth resend

3️⃣ ตั้งค่า NextAuth.js

สร้างไฟล์ pages/api/auth/[...nextauth].js

import NextAuth from "next-auth";
import EmailProvider from "next-auth/providers/email";
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export default NextAuth({
providers: [
    EmailProvider({
      async sendVerificationRequest({ identifier: email, url }) {
        await resend.emails.send({
          from: "no-reply@yourdomain.com",
          to: email,
          subject: "Magic Link Login",
          html: `<p>Click <a href="${url}">here</a> to log in.</p>`,
        });
      },
    }),
],
secret: process.env.NEXTAUTH_SECRET,
});

🔹 อธิบายโค้ด:

ใช้ EmailProvider จาก NextAuth.js
เมื่อผู้ใช้ใส่อีเมล ระบบจะส่ง Magic Link ไปที่อีเมลนั้น
ใช้ Resend เป็นตัวช่วยส่งอีเมล
ลิงก์ที่ส่งไปเป็นแบบ one-time link

🎨 สร้างหน้า Login

สร้างไฟล์ pages/login.js

import { signIn } from "next-auth/react";

export default function Login() {
const handleLogin = async (e) => {
    e.preventDefault();
    const email = e.target.email.value;
    await signIn("email", { email });
};

return (
    <div>
      <h1>Magic Link Login</h1>
      <form onSubmit={handleLogin}>
        <input type="email" name="email" placeholder="Enter your email" required />
        <button type="submit">Send Magic Link</button>
      </form>
    </div>
);
}

🔹 อธิบายโค้ด:

มีฟอร์มให้ผู้ใช้กรอกอีเมล
กดปุ่มแล้วระบบจะเรียก signIn("email", { email }) เพื่อขอ Magic Link
NextAuth.js จะจัดการส่งอีเมลให้เอง

🎯 ทดสอบใช้งาน

รันเซิร์ฟเวอร์ npm run dev
เข้าไปที่ /login
ใส่อีเมล แล้วกดส่ง
เปิดอีเมล กดลิงก์ แล้วเข้าสู่ระบบ! 🎉

🔥 เพิ่มเติม: ตั้งค่า ENV

สร้างไฟล์ .env.local

NEXTAUTH_SECRET=your-secret-key
RESEND_API_KEY=your-resend-api-key
NEXTAUTH_URL=http://localhost:3000

❓ คำถามที่พบบ่อย

1️⃣ ถ้าไม่มีอีเมล จะล็อกอินยังไง?

Magic Link ต้องใช้อีเมลเท่านั้น ถ้าผู้ใช้ไม่มีอีเมล อาจต้องใช้ OAuth (เช่น Google, Facebook)

2️⃣ Magic Link ปลอดภัยจริงไหม?

ค่อนข้างปลอดภัย แต่ควร:

ใช้ one-time link
ลิงก์ควรหมดอายุเร็ว (เช่น 10 นาที)
ใช้ HTTPS เสมอ

3️⃣ ถ้าอีเมลไปไม่ถึงทำไง?

เช็กโฟลเดอร์ Spam
ใช้อีเมลจากผู้ให้บริการที่น่าเชื่อถือ
ลองเปลี่ยนไปใช้ SMTP แทน Resend

🎉 สรุป

Magic Link คือการล็อกอินแบบไม่ใช้รหัสผ่าน
NextAuth.js + Resend ช่วยให้ใช้งาน Magic Link ได้ง่าย
UX ดีขึ้น ปลอดภัยขึ้น และลดปัญหาลืมรหัสผ่าน

ลองทำกันดู แล้วจะติดใจ! 😉

NextJS