ถ้าคุณกำลังพัฒนาเว็บแอปด้วย Next.js แล้วอยากเพิ่มระบบล็อกอินที่ปลอดภัยโดยไม่ต้องปวดหัวกับการจัดการ JWT, OAuth, หรือ Session เอง NextAuth.js คือคำตอบที่คุณต้องการ!
NextAuth.js คืออะไร?
NextAuth.js เป็น authentication library สำหรับ Next.js ที่ทำให้การเพิ่มระบบล็อกอินเป็นเรื่องง่าย รองรับหลาย ๆ provider เช่น Google, Facebook, GitHub, Twitter หรือแม้กระทั่ง credentials-based login (อีเมล/รหัสผ่าน)
จุดเด่นของ NextAuth.js คือ ไม่ต้องเขียน backend เอง เพราะมันใช้ API routes ของ Next.js จัดการ authentication ให้เสร็จสรรพ
ติดตั้ง NextAuth.js
ก่อนอื่น ไปที่โปรเจกต์ Next.js ของคุณ แล้วติดตั้ง NextAuth.js ด้วยคำสั่งนี้:
npm install next-auth
# หรือใช้ yarn
yarn add next-auth
ตั้งค่า NextAuth.js
NextAuth ต้องใช้ API Route ในการจัดการ authentication ดังนั้นเราจะสร้างไฟล์ pages/api/auth/[...nextauth].js (หรือ .ts ถ้าใช้ TypeScript)
ตัวอย่างการตั้งค่า NextAuth.js
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
💡 อธิบายโค้ดนี้:
- เราใช้ GoogleProvider เป็น provider สำหรับล็อกอินผ่าน Google
- ค่า clientId และ clientSecret จะถูกเก็บไว้ในไฟล์ .env.local เพื่อความปลอดภัย
- NEXTAUTH_SECRET เป็นคีย์สำหรับเข้ารหัส session tokens
ตั้งค่า Environment Variables
สร้างไฟล์ .env.local แล้วใส่ค่าต่อไปนี้ (อย่าลืมเปลี่ยนค่าให้ตรงกับของจริงจาก Google API Console)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=your-random-secret-key
📌 TIP: ใช้คำสั่งนี้ใน Terminal เพื่อสร้างค่า NEXTAUTH_SECRET แบบสุ่ม
openssl rand -base64 32
เพิ่มปุ่มล็อกอิน/ล็อกเอาต์ในหน้าเว็บ
NextAuth.js มี React Hooks ที่ให้เราดึงสถานะล็อกอินของผู้ใช้มาแสดงผลได้ง่าย ๆ
แก้ไข pages/index.js เพื่อเพิ่มปุ่มล็อกอิน
import { signIn, signOut, useSession } from "next-auth/react";
export default function Home() {
const { data: session } = useSession();
return (
<div>
{session ? (
<>
<p>Welcome, {session.user.name}!</p>
<img src={session.user.image} alt="Profile" width={50} height={50} />
<button onClick={() => signOut()}>Sign Out</button>
</>
) : (
<>
<p>You are not logged in.</p>
<button onClick={() => signIn("google")}>Sign in with Google</button>
</>
)}
</div>
);
}
🔹 อธิบายโค้ดนี้:
- useSession() ใช้ดึงข้อมูล session ของผู้ใช้
- ถ้าผู้ใช้ล็อกอินอยู่ จะแสดง ชื่อ และ รูปโปรไฟล์
- ถ้ายังไม่ได้ล็อกอิน จะแสดงปุ่มให้กดล็อกอินผ่าน Google
- signIn("google") และ signOut() เป็นฟังก์ชันสำหรับล็อกอินและล็อกเอาต์
ปรับแต่ง NextAuth.js
ถ้าคุณต้องการเพิ่ม database หรือเปลี่ยนแปลง behavior ของ NextAuth.js สามารถแก้ไข pages/api/auth/[...nextauth].js ได้ เช่น
ใช้ Credentials Login (อีเมล/รหัสผ่าน)
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
export default NextAuth({
providers: [
CredentialsProvider({
name: "Credentials",
credentials: {
email: { label: "Email", type: "email" },
password: { label: "Password", type: "password" },
},
async authorize(credentials) {
if (credentials.email === "test@example.com" && credentials.password === "password123") {
return { id: 1, name: "Test User", email: credentials.email };
}
return null;
},
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
💡 สิ่งที่เพิ่มเข้ามา:
- CredentialsProvider ให้ผู้ใช้ล็อกอินด้วยอีเมล/รหัสผ่าน
- ฟังก์ชัน authorize(credentials) ใช้ตรวจสอบข้อมูลผู้ใช้
- ตอนนี้ใช้เงื่อนไขแบบง่าย ๆ (เช็คอีเมลกับรหัสผ่านตรงกัน) แต่ในโปรดักชันควรใช้ database หรือ hashed password
ใช้ Middleware เพื่อป้องกันหน้าเว็บที่ต้องล็อกอิน
ถ้าคุณต้องการป้องกันบางหน้าให้เฉพาะผู้ใช้ที่ล็อกอินแล้วเข้าถึงได้ สามารถใช้ Middleware ของ Next.js
สร้างไฟล์ middleware.js ที่ root ของโปรเจกต์
import { withAuth } from "next-auth/middleware";
export default withAuth({
pages: {
signIn: "/",
},
});
📌 สิ่งที่ทำได้:
- ถ้าผู้ใช้ไม่ได้ล็อกอิน จะถูก redirect ไปที่หน้า /
- ใช้กับ server-side protection ได้ โดยใส่ใน API Routes
สรุป
✅ ติดตั้ง NextAuth.js และเพิ่ม API Route
✅ ตั้งค่า Google OAuth หรือใช้ Credentials Login
✅ เพิ่มปุ่มล็อกอิน/ล็อกเอาต์ ในหน้าเว็บ
✅ ใช้ Middleware เพื่อป้องกันหน้าที่ต้องล็อกอิน
NextAuth.js ทำให้การเพิ่มระบบล็อกอินใน Next.js ง่ายขึ้นมาก! ถ้าคุณต้องการระบบล็อกอินที่ ปลอดภัย, ยืดหยุ่น, และขยายต่อได้ง่าย NextAuth.js คือตัวเลือกที่ดีมากสำหรับคุณ 🚀
