Full Stack Framework ยอดฮิตอย่าง Next.js ที่สามารถทำได้ทั้งหน้าบ้าน และหลังบ้าน ต่างได้รับความนิยมเนื่องจากมีข้อดีและประสิทธิภาพในการทำเว็บแอปที่หลาย ๆ องค์กรเลือกใช้ แต่มีหนึ่งฟีเจอร์เด็ดที่ทำให้การจัดการเรื่อง Authentication หรือการยืนยันตัวตน เป็นเรื่องง่าย ๆ ไม่ว่าเราจะอยากทำระบบ Login ผ่านผู้บริการต่าง ๆ อย่าง Google, Meta, GitHub หรือจะเป็นการ Login แบบใช้ Credentials ก็สามารถทำได้ง่าย ๆ ด้วยไลบรารีชื่อว่า “NextAuth.js” ซึ่งจะมีวิธีการใช้งานยังไง มาดูกัน!
Authentication เป็นหนึ่งในขั้นตอนสำคัญที่แอปส่วนใหญ่จะต้องมี เพื่อป้องกันเรื่องการเข้าถึงจากคนไม่ได้ได้รับอนุญาต ก่อนที่เราจะอนุญาตเราต้องระบุ หรือยืนยันให้ได้ก่อนว่าคนที่มาใช้งาน หรือระบบที่เจ้ามาใช้งานเป็นใครมีสิทธิ์เข้าถึงจริง ๆ หรือป่าว
NextAuth.js เป็นไลบรารีสำหรับจัดการ Authentication ใน Next.js ที่ช่วยให้
- จัดการการล็อกอินผ่านผู้ให้บริการ (Providers) เช่น Google, Facebook, GitHub, และอื่นๆ
- จัดการ Session ของผู้ใช้
- ป้องกัน Route หรือหน้าที่ต้องล็อกอินก่อนเข้าใช้งาน
Providers คือผู้ให้บริการ Authentication เช่น
- OAuth Providers: Google, Facebook, GitHub, Twitter
- Credentials Provider: สำหรับการล็อกอินด้วยอีเมลและรหัสผ่าน
- Custom Provider: เราสามารถสร้าง Provider ของเราเองได้
NextAuth.js จะใช้ Session ในการเก็บสถานะของ user
- Client-Side: ดึงข้อมูล Session ด้วย useSession() (สำหรับ UI)
- Server-Side: ใช้ getServerSession() หรือ getSession() เพื่อดึงข้อมูลบนเซิร์ฟเวอร์
- เราสามารถ custom ข้อมูลใน Session ได้ เช่น เพิ่มข้อมูลจากฐานข้อมูล
การใช้ API ของ NextAuth.js โดย API Endpoint เราจะต้องกำหนด Path ไว้ดังนี้ หากใช้รูปแบบการจัดการไฟล์แบบ Page Router จะเป็น pages/api/auth/[…nextauth].js หรือ หากเป็น App Router จะเป็นดังนี้ app/api/auth/[…nextauth]/route.js เพื่อให้เห็นภาพขึ้น เรามาดูตัวอย่างกันงับ
การทำระบบ Authentication ด้วย NextAuth.js
โดยตัวอย่างนี้เราจะมาสร้างระบบ Login แบบง่าย ๆ ด้วย Google OAuth จัดการโฟลเดอร์แบบ App Router เมื่อ Login สำเร็จก็จะแสดงชื่อและอีเมลผู้ใช้เมื่อเข้าสู่ระบบ เอาง่าย ๆ แค่นี้ก่อนงับ
ก่อนอื่นเราต้องมี Node.js ในเครื่องก่อนนะ เมื่อมีแล้วก็สามารถสร้างโปรเจกต์ Next.js ด้วยคำสั่ง npx create-next-app@latest ชื่อโปรเจกต์ แล้วติดตั้ง next-auth ตามคำสั่งด้านล่างได้เลย
npx create-next-app@latest nextauth-app-router
cd nextauth-app-router
npm install next-auth
แล้วลองรัน Next.js project ขึ้นมาหน่อยด้วยคำสั่ง npm run dev แล้วเข้าไปที่ localhost:3000 ก็จะได้หน้าตาเว็บประมาณนี้มา
ต่อมาหากเราต้องการจะต่อกับ Google OAuth เราก็จะต้องไปตั้งค่าที่ Google Cloud Console ก่อนที่ลิงก์นี้ https://console.cloud.google.com/ แล้วก็ทำการสร้างโปรเจกต์ใหม่ ไปที่ API & Services
เลือก Credentials
และคลิก Create Credentials
ตั้งค่า: Web application
Authorized redirect URIs: http://localhost:3000/api/auth/callback/google แล้วกด CREATE
หลังจากนั้นให้ทำการคัดลอก Client ID และ Client Secret ไว้
ตั้งค่า Environment Variables
สร้างไฟล์ .env.local ใน root ของโปรเจกต์ และเพิ่มค่าดังนี้
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=your-random-secret
สร้าง API สำหรับ Authentication
ใน App Router, ไฟล์ API จะอยู่ใน app/api/auth/[…nextauth]/route.js
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
const handler = NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
export { handler as GET, handler as POST };สร้างหน้า UI
สร้างโฟลเดอร์ app และเพิ่มไฟล์ layout.js และ page.js
layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}page.js
"use client";
import { useSession, signIn, signOut } from "next-auth/react";
export default function Home() {
const { data: session } = useSession();
return (
<div style={{ textAlign: "center", marginTop: "50px" }}>
<h1>NextAuth.js with App Router</h1>
{!session ? (
<>
<p>You are not signed in</p>
<button onClick={() => signIn("google")}>Sign In with Google</button>
</>
) : (
<>
<p>Welcome, {session.user.name}!</p>
<p>Email: {session.user.email}</p>
<button onClick={() => signOut()}>Sign Out</button>
</>
)}
</div>
);
}เพิ่ม Provider ใน Root Layout
สร้างโฟลเดอร์ app และเพิ่มไฟล์ session-provider.js
"use client";
import { SessionProvider } from "next-auth/react";
export default function Providers({ children }) {
return <SessionProvider>{children}</SessionProvider>;
}
แก้ไข layout.js ให้รวม Providers
import Providers from "./session-provider";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}เมื่อเสร็จเราเราก็ลองสั่งรันเซิร์ฟเวอร์ npm run dev
เมื่อเราเปิดหน้าเว็บที่ localhost:3000 มาก็จะพบกับหน้าเว็บที่เราเขียนไว้ในไฟล์ page.js
และใน API ของเราที่อยู่ใน Path : app/api/auth/[…nextauth]/route.js
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
const handler = NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
});
export { handler as GET, handler as POST };จะเป็นการตั้งค่า NextAuth.js เพื่อใช้งานการล็อกอินผ่าน Google OAuth ในแอป Next.js โดย
- เรียกใช้ NextAuth และ GoogleProvider
- ใช้ GoogleProvider พร้อมกับ clientId และ clientSecret ที่เก็บไว้ในตัวแปร env ในไฟล์ .env.local เพื่อความปลอดภัย
- ระบุ secret เพื่อเข้ารหัสข้อมูลสำคัญในระบบ
- ทำการ export ฟังก์ชัน handler ให้รองรับทั้ง GET และ POST เพื่อให้ระบบ Authentication ทำงานได้สมบูรณ์ใน API Endpoint นี้
ระบบก็จะให้เรา Login ด้วย Google Account
เมื่อ Account เราได้มีการอนุญาตไว้แล้วก็จะสามารถเข้าสู่ระบบได้นั่นเอง
และนี่ก็จะเป็นตัวอย่างง่าย ๆ สำหรับการเริ่มต้นใช้งาน NextAuth.js สำหรับการจัดการกับระบบ Authentication แบบง่าย ๆ สำหรับใครต้องการต่อยอดก็สามารถลองสร้าง Middleware ใน App Router มาแล้วใช้กับ Route ที่เราต้องการป้องกัน หรือต้อง Authen ก่อนหรือจะลองต่อกับฐานข้อมูลเพิ่มเติมก็จะช่วยให้ระบบสมบูรณ์มากยิ่งขึ้นนะคร้าบบบ แอดหวังว่าบทความนี้จะมีประโยชน์สำหรับชาว Next.js กันนะครับ 😊
