วิธีใช้ OAuth (Google, Facebook, GitHub) กับ NextAuth.js

ถ้าพูดถึงการทำระบบล็อกอินแบบ Single Sign-On (SSO) ในแอปพลิเคชันเว็บที่ใช้ Next.js ก็คงหนีไม่พ้น NextAuth.js ที่เป็นไลบรารีสุดเทพ ช่วยให้เราสามารถจัดการเรื่องการยืนยันตัวตน (Authentication) ได้ง่ายมาก ๆ แถมยังรองรับ OAuth จากหลายแพลตฟอร์ม เช่น Google, Facebook, GitHub แบบไม่ต้องปวดหัวกับการเขียนโค้ดเยอะ

บทความนี้จะพาไปดูวิธีใช้งาน OAuth กับ NextAuth.js ตั้งแต่ต้นจนจบ รับรองว่าทำตามได้ง่าย ไม่งงแน่นอน! 🚀

🧐 NextAuth.js คืออะไร?

NextAuth.js เป็นไลบรารีที่ช่วยจัดการ Authentication บน Next.js โดยรองรับทั้ง

✅ Email-based login
✅ Credentials-based login
✅ OAuth (เช่น Google, Facebook, GitHub)
✅ JWT และ Database sessions

ความเจ๋งคือ ไม่ต้องเซ็ต Backend เอง เพราะมันจัดการให้หมดแล้ว แค่ติดตั้งและคอนฟิกให้ถูกต้องก็ใช้งานได้เลย!

🛠️ ติดตั้ง NextAuth.js

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

npx create-next-app@latest my-auth-app
cd my-auth-app
npm install next-auth

จากนั้นก็เปิดไฟล์ .env.local แล้วตั้งค่าตัวแปรแวดล้อมที่เกี่ยวข้องกับ OAuth ที่เราจะใช้ (เช่น Google, Facebook, GitHub)

🔑 การตั้งค่า OAuth Provider

1️⃣ ตั้งค่า Google OAuth

ไปที่ Google Cloud Console (https://console.cloud.google.com/) แล้วทำตามนี้:

1. สร้างโปรเจกต์ใหม่
2. ไปที่ APIs & Services > Credentials
3. กด Create Credentials > OAuth Client ID
4. ตั้งค่า Authorized redirect URIs เป็น: http://localhost:3000/api/auth/callback/google
5. ก๊อบปี้ Client ID และ Client Secret มาใส่ใน .env.local

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

2️⃣ ตั้งค่า Facebook OAuth

ไปที่ Meta for Developers (https://developers.facebook.com/) แล้วทำตามนี้:

1. สร้างแอปใหม่
2. ไปที่ Settings > Basic แล้วจด App ID และ App Secret
3. ไปที่ Facebook Login > Settings แล้วตั้งค่า Valid OAuth Redirect URIs เป็น: http://localhost:3000/api/auth/callback/facebook
4. เพิ่มค่าเหล่านี้ใน .env.local

FACEBOOK_CLIENT_ID=your-facebook-app-id
FACEBOOK_CLIENT_SECRET=your-facebook-app-secret

3️⃣ ตั้งค่า GitHub OAuth

ไปที่ GitHub Developer Settings (https://github.com/settings/developers) แล้วทำตามนี้:

1. กด New OAuth App
2. ตั้งค่า Authorization callback URL เป็น: http://localhost:3000/api/auth/callback/github
3. ก๊อบปี้ Client ID และ Client Secret มาใส่ใน .env.local

GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret

🔌 คอนฟิก NextAuth.js

สร้างไฟล์ pages/api/auth/[...nextauth].js แล้วใส่โค้ดนี้:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
import GitHubProvider from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
});

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

• เรา import NextAuth และเพิ่ม Google, Facebook, GitHub เป็น OAuth Providers
• ใช้ Environment Variables (process.env...) เพื่อความปลอดภัย
• เพิ่ม Callback function เพื่อให้ Session มีค่า user.id

🎨 สร้าง UI สำหรับล็อกอิน

ไปที่ pages/index.js แล้วเพิ่มปุ่มล็อกอิน / ออกจากระบบ

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

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

  return (
    <div>
      <h1>NextAuth.js OAuth Demo</h1>
      {session ? (
        <div>
          <p>Welcome, {session.user.name}</p>
          <button onClick={() => signOut()}>Sign Out</button>
        </div>
      ) : (
        <button onClick={() => signIn()}>Sign In</button>
      )}
    </div>
  );
}

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

• ใช้ useSession() เช็กสถานะล็อกอิน
• ถ้าล็อกอินแล้ว แสดงชื่อและปุ่ม Sign Out
• ถ้ายังไม่ล็อกอิน แสดงปุ่ม Sign In

🚀 ทดสอบการล็อกอิน

    รันเซิร์ฟเวอร์:

    npm run dev

    เปิด http://localhost:3000 แล้วลองกด Sign In
    เลือกล็อกอินผ่าน Google, Facebook หรือ GitHub

🎯 สรุป

NextAuth.js ทำให้การเพิ่ม OAuth Login เป็นเรื่องง่ายมาก 🔥
แค่ติดตั้ง, คอนฟิก Providers, สร้าง UI แล้วก็ใช้งานได้เลย!

✅ รองรับหลายแพลตฟอร์ม
✅ ไม่ต้องเขียน Backend เอง
✅ ใช้กับ Next.js ได้แบบ Native

ใครกำลังหาโซลูชัน Authentication สำหรับ Next.js นี่คือทางเลือกที่ดีที่สุด! 🚀