การใช้ NextAuth.js สำหรับการล็อกอินในแอป Next.js

ถ้าคุณกำลังพัฒนาเว็บแอปด้วย 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 คือตัวเลือกที่ดีมากสำหรับคุณ 🚀