ถ้าขี้เกียจทำระบบล็อกอินเอง ให้ 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
- ไปที่ Auth0 Dashboard แล้วสมัครบัญชี
- สร้าง Application ใหม่
- เลือก Single Page Application
- ใส่ Callback URL: http://localhost:3000/api/auth/callback/auth0
- ใส่ Logout URL: http://localhost:3000/
- คัดลอก 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
🔥 ทดสอบใช้งาน
- รันเซิร์ฟเวอร์ npm run dev
- เข้าไปที่หน้าเว็บ http://localhost:3000
- กดปุ่ม "Login with Auth0"
- ล็อกอินผ่าน Google หรือ Email/Password
- ถ้าสำเร็จจะกลับมาหน้าเว็บและแสดงชื่อ! 🎉
🎨 ทำหน้า 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
- ปลอดภัย ไม่ต้องจัดการรหัสผ่านเอง
ลองทำดู แล้วจะติดใจ! 😉
