NextJS: Social Login

วันจันทร์ที่ 24 มีนาคม พ.ศ. 2568

วิธีใช้ 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

ไปที่ 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
ปลอดภัย ไม่ต้องจัดการรหัสผ่านเอง

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

NextJS