วิธีใช้ Auth0 กับ Next.js แบบเข้าใจง่าย

ถ้าขี้เกียจทำระบบล็อกอินเอง ให้ Auth0 จัดการให้เถอะ!

Auth0 เป็นแพลตฟอร์มจัดการการยืนยันตัวตน (Authentication) ที่ช่วยให้เราทำระบบล็อกอินได้เร็วขึ้น โดยไม่ต้องมานั่งเขียนโค้ดยาวๆ ทำให้เว็บปลอดภัยขึ้นแบบไม่ต้องปวดหัว

ในบทความนี้ เราจะมาใช้ Auth0 กับ Next.js เพื่อทำระบบล็อกอินที่รองรับ OAuth (Google, Facebook ฯลฯ) และ Email/Password ได้ง่ายๆ

🚀 ทำไมต้องใช้ Auth0?

✅ ลดเวลาพัฒนา

•     ไม่ต้องสร้างระบบยืนยันตัวตนเอง
•     มี UI สำเร็จรูปให้ใช้เลย

✅ รองรับหลายวิธี

•     ล็อกอินด้วย Google, Facebook, Apple, GitHub ฯลฯ
•     ใช้ Magic Link หรือ OTP ก็ได้
•     ใช้ Username/Password แบบปกติก็ได้

✅ ปลอดภัยกว่า

•     มีการเข้ารหัสและป้องกันแฮก
•     รองรับ MFA (Multi-Factor Authentication)

สรุปง่ายๆ Auth0 = เร็ว + ปลอดภัย + ใช้งานง่าย

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

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

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

npx create-next-app@latest auth0-demo
cd auth0-demo
npm install

2️⃣ สมัครและตั้งค่า Auth0

1.     ไปที่ Auth0 Dashboard แล้วสมัครบัญชี
2.     สร้าง Application ใหม่
• เลือก Single Page Application
• ใส่ Callback URL: http://localhost:3000/api/auth/callback/auth0
• ใส่ Logout URL: http://localhost:3000/
  
3. คัดลอก Client ID และ Client Secret

3️⃣ ติดตั้ง NextAuth.js (ใช้ Auth0 เป็น Provider)

ติดตั้งแพ็กเกจที่ต้องใช้

npm install next-auth @auth0/nextjs-auth0

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

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

import NextAuth from "next-auth";
import Auth0Provider from "next-auth/providers/auth0";

export default NextAuth({
  providers: [
    Auth0Provider({
      clientId: process.env.AUTH0_CLIENT_ID,
      clientSecret: process.env.AUTH0_CLIENT_SECRET,
      issuer: process.env.AUTH0_ISSUER,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

5️⃣ ตั้งค่า ENV

สร้างไฟล์ .env.local แล้วใส่ค่าเหล่านี้

AUTH0_CLIENT_ID=your-client-id
AUTH0_CLIENT_SECRET=your-client-secret
AUTH0_ISSUER=https://your-auth0-domain/
NEXTAUTH_SECRET=your-random-secret
NEXTAUTH_URL=http://localhost:3000

💡 Tip: ค่า NEXTAUTH_SECRET ใช้คำสั่งนี้สร้างแบบสุ่มได้

openssl rand -base64 32

6️⃣ สร้างปุ่ม Login / Logout

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

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

export default function Home() {
  const { data: session } = useSession();

  return (
    <div>
      <h1>Next.js + Auth0</h1>
      {session ? (
        <>
          <p>Welcome, {session.user.name}!</p>
          <button onClick={() => signOut()}>Logout</button>
        </>
      ) : (
        <button onClick={() => signIn("auth0")}>Login with Auth0</button>
      )}
    </div>
  );
}

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

•     ใช้ useSession() เช็กว่าผู้ใช้ล็อกอินหรือยัง
•     ถ้าล็อกอินแล้ว แสดงชื่อ + ปุ่ม Logout
•     ถ้ายังไม่ล็อกอิน แสดงปุ่ม Login

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

1.     รันเซิร์ฟเวอร์ npm run dev
2.     เข้าไปที่หน้าเว็บ http://localhost:3000
3.     กดปุ่ม "Login with Auth0"
4.     ล็อกอินผ่าน Google หรือ Email/Password
5.     ถ้าสำเร็จจะกลับมาหน้าเว็บและแสดงชื่อ! 🎉

🎨 ทำหน้า Profile

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

import { useUser } from "@auth0/nextjs-auth0/client";

export default function Profile() {
  const { user, error, isLoading } = useUser();

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    user && (
      <div>
        <h1>{user.name}</h1>
        <p>Email: {user.email}</p>
        <img src={user.picture} alt={user.name} width={100} />
      </div>
    )
  );
}

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

•     ใช้ useUser() ดึงข้อมูลผู้ใช้จาก Auth0
•     แสดง ชื่อ, อีเมล, รูปโปรไฟล์

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

1️⃣ Auth0 ใช้ฟรีไหม?

ใช่! แต่แผนฟรีจำกัด 7,000 ล็อกอินต่อเดือน ถ้าใช้เยอะกว่านี้ต้องอัปเกรด

2️⃣ รองรับ Social Login อะไรบ้าง?

Google, Facebook, Apple, GitHub, Twitter ฯลฯ

3️⃣ ถ้าอยากใช้ Magic Link ต้องทำไง?

Auth0 รองรับ Passwordless Login (Magic Link, OTP) แค่เปิดใช้งานใน Dashboard

🎉 สรุป

•     Auth0 ช่วยให้ทำระบบล็อกอินได้เร็วขึ้น
•     ใช้ NextAuth.js เชื่อม Auth0 กับ Next.js
•     รองรับ Social Login, Email/Password, Magic Link
•     ปลอดภัย ไม่ต้องจัดการรหัสผ่านเอง

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

วิธีใช้ 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 จะจัดการส่งอีเมลให้เอง

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

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

🔥 เพิ่มเติม: ตั้งค่า 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 ดีขึ้น ปลอดภัยขึ้น และลดปัญหาลืมรหัสผ่าน

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