--- name: provider-id-oauth description: | ขั้นตอนการติดตั้งและตั้งค่า Provider ID OAuth (ผ่าน Health ID / moph.id.th) ด้วย Auth.js (next-auth v5) ใน Next.js App Router — ครอบคลุม: การติดตั้ง package, การสร้างปุ่ม Login, การ redirect ไปยัง OAuth Provider, การรับ callback พร้อม exchange token, การดึง profile จาก provider.id.th, และการสร้าง session ด้วย Auth.js Credentials Provider + JWT Strategy. --- # Provider ID OAuth with Auth.js (Next.js App Router) ## ภาพรวมสถาปัตยกรรม (Architecture Overview) ระบบนี้ใช้ **OAuth Authorization Code Flow** ดังนี้: ``` ┌────────────────┐ ┌─────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │ Login Button │──①──▶│ moph.id.th │──②──▶│ /api/auth/ │──③──▶│ provider.id.th │ │ (Server │ │ OAuth Redirect │ │ healthid │ │ Token + Profile │ │ Action) │ │ │◀──②──│ (Callback) │◀──③──│ │ └────────────────┘ └─────────────────┘ └──────┬───────────┘ └──────────────────┘ │④ ┌──────▼───────────┐ │ Auth.js signIn │ │ (Credentials) │ │ → JWT Session │ └──────────────────┘ ``` **Flow อธิบาย:** 1. ① User กดปุ่ม Login → Server Action ตั้ง cookie แล้ว redirect ไปยัง `moph.id.th/oauth/redirect` 2. ② User ให้สิทธิ์ที่ moph.id.th → redirect กลับมายัง `/api/auth/healthid?code=xxx` 3. ③ Route handler นำ `code` ไป exchange token กับ `moph.id.th/api/v1/token` แล้วใช้ token ดึง profile จาก `provider.id.th` 4. ④ นำ profile ที่ได้มาเรียก `signIn('credentials', ...)` ของ Auth.js เพื่อสร้าง JWT session --- ## ขั้นตอนที่ 1: ติดตั้ง Auth.js (next-auth v5) ### 1.1 ติดตั้ง Package ```bash npm install next-auth@latest ``` > **หมายเหตุ:** Auth.js v5 (ชื่อ package ยังเป็น `next-auth`) รองรับ Next.js App Router โดยตรง > ณ เวลาที่เขียน ใช้เวอร์ชัน `next-auth@5.0.0-beta.28` หรือใหม่กว่า ### 1.2 ตั้งค่า Environment Variables สร้าง/แก้ไขไฟล์ `.env.local`: ```env # ===== Auth.js ===== # สร้างด้วย: openssl rand -base64 32 AUTH_SECRET=your_random_secret_here # ===== Health ID (moph.id.th) ===== HEALTH_CLIENT_ID=your_health_client_id HEALTH_CLIENT_SECRET=your_health_client_secret HEALTH_REDIRECT_URI=http://localhost:3000/api/auth/healthid # ===== Provider ID (provider.id.th) ===== PROVIDER_CLIENT_ID=your_provider_client_id PROVIDER_CLIENT_SECRET=your_provider_client_secret ``` > **สำคัญ:** `HEALTH_REDIRECT_URI` ต้องตรงกับที่ลงทะเบียนไว้กับ moph.id.th > สำหรับ production ให้เปลี่ยนเป็น `https://yourdomain.com/api/auth/healthid` ### 1.3 สร้างไฟล์ Auth Config — `src/authConfig.ts` ```typescript import NextAuth, { type Session, type NextAuthConfig } from "next-auth"; import type { JWT } from "next-auth/jwt"; import CredentialsProvider from "next-auth/providers/credentials"; const authOptions: NextAuthConfig = { session: { strategy: "jwt", maxAge: 60 * 60 * 25, // 25 ชั่วโมง }, providers: [ CredentialsProvider({ async authorize(credentials) { // รองรับ login จาก Health ID (OAuth callback) if (credentials["cred-way"] === "health-id") { return { name: (credentials.username as string) || "health-id", profile: credentials.profile!, }; } // รองรับ login แบบ username/password (ถ้าต้องการ) if (credentials["cred-way"] === "user-pass") { // TODO: ตรวจสอบ username/password กับฐานข้อมูล return null; } return null; }, }), // เพิ่ม Provider อื่นได้ตามต้องการ เช่น Google, GitHub, Line ], callbacks: { async jwt({ token, user }: { token: JWT; user?: any }) { if (user) { // เก็บ profile ลง JWT token ตอน login ครั้งแรก token.profile = (user as any).profile; } return token; }, async session({ session, token }: { session: Session; token: JWT }) { if (token && session.user) { // ส่ง profile ไปให้ client ผ่าน session (session.user as any).profile = (token as any).profile; } return session; }, }, }; export const { handlers, auth, signIn, signOut } = NextAuth(authOptions); ``` **หลักการสำคัญ:** - ใช้ `CredentialsProvider` เป็น "ทางเข้า" ของ Auth.js — ไม่ได้หมายความว่า login ด้วย password เท่านั้น - ใช้ค่า `credentials['cred-way']` เพื่อแยกว่า login มาจากทางไหน (health-id, user-pass, ...) - เก็บ `profile` (JSON string) ลงใน JWT token ผ่าน `jwt` callback - ส่ง `profile` ให้ client ผ่าน `session` callback ### 1.4 สร้าง Route Handler — `src/app/api/auth/[...nextauth]/route.ts` ```typescript import { handlers } from "@/authConfig"; export const { GET, POST } = handlers; ``` > ไฟล์นี้ทำหน้าที่ expose GET/POST handlers ของ Auth.js ที่ path `/api/auth/*` --- ## ขั้นตอนที่ 2: สร้างปุ่ม Login (Server Action) ### 2.1 สร้าง Server Action — `src/app/actions/sign-in.ts` ```typescript "use server"; import { redirect } from "next/navigation"; import { cookies } from "next/headers"; export const signInWithHealthId = async (formData: FormData) => { const department = formData.get("department") as string; const redirectTo = (formData.get("redirectTo") as string) || "/home"; // เก็บข้อมูลลง cookie เพื่อใช้หลัง OAuth redirect กลับมา const cookieStore = await cookies(); cookieStore.set("selectedDepartment", department, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "lax", maxAge: 60 * 60 * 24, // 24 ชั่วโมง }); cookieStore.set("redirectTo", redirectTo, { httpOnly: true, secure: process.env.NODE_ENV === "production", sameSite: "lax", maxAge: 60 * 60 * 24, }); // Redirect ไปยัง moph.id.th OAuth page const clientId = process.env.HEALTH_CLIENT_ID; const redirectUri = process.env.HEALTH_REDIRECT_URI; const url = `https://moph.id.th/oauth/redirect?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`; redirect(url); }; ``` **หลักการสำคัญ:** - ใช้ `'use server'` ทำให้เป็น Server Action — ปลอดภัย ไม่เปิดเผย env ให้ client - เก็บ `department` และ `redirectTo` ลง cookie ก่อน redirect เพราะหลัง OAuth callback กลับมาจะไม่มี `formData` แล้ว - Redirect ไปยัง `moph.id.th/oauth/redirect` พร้อม `client_id`, `redirect_uri`, `response_type=code` ### 2.2 สร้างหน้า Login — `src/app/login/page.tsx` ```tsx "use client"; import React, { useEffect } from "react"; import { useRouter } from "next/navigation"; import { LogIn, UserPlus } from "lucide-react"; import { useSession } from "next-auth/react"; import { signInWithHealthId } from "../actions/sign-in"; export default function LoginPage() { const router = useRouter(); const { status } = useSession(); useEffect(() => { // ถ้า login แล้ว redirect ไป /home if (status === "authenticated") { router.replace("/home"); } }, [status, router]); return (

เข้าสู่ระบบ

{/* ปุ่มเข้าสู่ระบบ */}
{/* ปุ่มลงทะเบียน */}
); } ``` **หลักการสำคัญ:** - ใช้ `form action={signInWithHealthId}` เพื่อ submit ไปที่ Server Action - ส่งค่า `department` และ `redirectTo` เป็น hidden fields - ใช้ `useSession()` ตรวจสอบว่า login แล้วหรือยัง (ต้องมี `SessionProvider` ใน layout) - ปุ่มต่างๆ ส่ง `department` ต่างกัน เพื่อแยก flow (login ปกติ vs ลงทะเบียน) --- ## ขั้นตอนที่ 3: สร้าง OAuth Callback Endpoint ### 3.1 สร้าง Route Handler — `src/app/api/auth/healthid/route.ts` ```typescript import { NextRequest, NextResponse } from "next/server"; import { signIn } from "@/authConfig"; import { cookies } from "next/headers"; export async function GET(request: NextRequest) { const { searchParams } = request.nextUrl; const code = searchParams.get("code"); // อ่าน redirectTo จาก cookie (ตั้งไว้ตอน Server Action) const cookieStore = await cookies(); const redirectTo = cookieStore.get("redirectTo")?.value || "/home"; if (!code) { return NextResponse.json( { error: "Authorization code is missing" }, { status: 400 }, ); } // ────────────────────────────────────── // Step 3.1: Exchange code → Health ID Access Token // ────────────────────────────────────── const tokenResponse = await fetch("https://moph.id.th/api/v1/token", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ grant_type: "authorization_code", code: code, redirect_uri: process.env.HEALTH_REDIRECT_URI, client_id: process.env.HEALTH_CLIENT_ID, client_secret: process.env.HEALTH_CLIENT_SECRET, }), }); const tokenData = await tokenResponse.json(); if (!tokenResponse.ok) { return NextResponse.json( { error: tokenData.error || "Failed to fetch Health ID token" }, { status: tokenResponse.status }, ); } // ────────────────────────────────────── // Step 3.2: ใช้ Health ID token → ขอ Provider ID Access Token // ────────────────────────────────────── const providerTokenResponse = await fetch( "https://provider.id.th/api/v1/services/token", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ client_id: process.env.PROVIDER_CLIENT_ID, secret_key: process.env.PROVIDER_CLIENT_SECRET, token_by: "Health ID", token: tokenData.data.access_token, }), }, ); const providerTokenData = await providerTokenResponse.json(); if (!providerTokenResponse.ok) { return NextResponse.json( { error: providerTokenData.error || "Failed to fetch provider token" }, { status: providerTokenResponse.status }, ); } // ────────────────────────────────────── // Step 3.3: ใช้ Provider ID token → ดึง Profile // ────────────────────────────────────── const profileResponse = await fetch( "https://provider.id.th/api/v1/services/profile?position_type=1", { method: "GET", headers: { "client-id": process.env.PROVIDER_CLIENT_ID!, "secret-key": process.env.PROVIDER_CLIENT_SECRET!, Authorization: `Bearer ${providerTokenData.data.access_token}`, }, }, ); const profileData = await profileResponse.json(); if (!profileResponse.ok) { return NextResponse.json( { error: profileData.error || "Failed to fetch profile data" }, { status: profileResponse.status }, ); } // ────────────────────────────────────── // Step 3.4: สร้าง Auth.js Session ด้วย Credentials signIn // ────────────────────────────────────── const res = await signIn("credentials", { "cred-way": "health-id", profile: JSON.stringify(profileData.data), redirectTo: redirectTo, }); return res; } ``` **หลักการสำคัญ (Token Exchange 3 ขั้นตอน):** | ขั้นตอน | Endpoint | ส่งอะไร | ได้อะไร | | ------- | ---------------------------------------- | ----------------------------------- | -------------------------- | | 3.1 | `moph.id.th/api/v1/token` | `code` (จาก OAuth redirect) | Health ID `access_token` | | 3.2 | `provider.id.th/api/v1/services/token` | Health ID `access_token` | Provider ID `access_token` | | 3.3 | `provider.id.th/api/v1/services/profile` | Provider ID `access_token` (Bearer) | User Profile Data | > **สำคัญ:** ขั้นตอนที่ 3.2 ใช้ field name `secret_key` (ไม่ใช่ `client_secret`) > ขั้นตอนที่ 3.3 ใช้ headers `client-id` และ `secret-key` (kebab-case) --- ## ขั้นตอนที่ 4: Auth.js Session Management ### 4.1 JWT Callbacks (ในไฟล์ authConfig.ts) Auth.js ใช้ JWT strategy ในการจัดการ session: ``` User Login ── authorize() ─┐ ▼ jwt() callback ── เก็บ profile ลง token │ ▼ session() callback ── ส่ง profile ให้ client │ ▼ Session Object ── { user: { name, profile, ... } } ``` **jwt callback** — ถูกเรียกทุกครั้งที่มี token request: - ตอน login ครั้งแรก: `user` object จะมีค่า → เก็บข้อมูลลง `token` - ตอน refresh token: `user` จะเป็น `undefined` → return token เดิม **session callback** — ถูกเรียกทุกครั้งที่ client ขอ session: - คัดลอกข้อมูลจาก `token` → `session.user` ### 4.2 การใช้ Session ฝั่ง Client ```tsx "use client"; import { useSession } from "next-auth/react"; export default function ProfilePage() { const { data: session } = useSession(); if (!session) return
กรุณาเข้าสู่ระบบ
; const profile = JSON.parse((session.user as any).profile || "{}"); return (

ชื่อ: {profile.first_name} {profile.last_name}

Provider ID: {profile.provider_id}

); } ``` ### 4.3 การใช้ Session ฝั่ง Server ```typescript import { auth } from "@/authConfig"; export default async function ServerPage() { const session = await auth(); if (!session) { // redirect หรือ return unauthorized } const profile = JSON.parse((session.user as any).profile || "{}"); // ใช้ profile ได้ตรงนี้ } ``` ### 4.4 SessionProvider (จำเป็นสำหรับ Client Components) ต้องเพิ่ม `SessionProvider` ใน root layout: ```tsx // src/app/layout.tsx import { SessionProvider } from "next-auth/react"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` ### 4.5 Sign Out ```typescript // Server Action import { signOut } from '@/authConfig'; export async function handleSignOut() { await signOut({ redirectTo: '/login' }); } // Client Component import { signOut } from 'next-auth/react'; ``` --- ## ขั้นตอนที่ 5: Protecting Routes (ป้องกัน Route) > **⚠️ Next.js 16 เปลี่ยนชื่อ:** ตั้งแต่ Next.js 16 เป็นต้นไป `middleware.ts` ถูก **deprecated** และเปลี่ยนชื่อเป็น `proxy.ts` > Functionality ทั้งหมดยังเหมือนเดิม แค่เปลี่ยนชื่อไฟล์และ function Auth.js v5 + Next.js 16 มี **4 วิธี** ป้องกันหน้าที่ต้อง login ก่อนเข้าถึง: ``` ┌──────────────────────────────────────────────────────────────────────┐ │ วิธีป้องกัน Route ทั้ง 4 แบบ │ ├───────────────────┬──────────────────────────────────────────────────┤ │ ① Proxy (proxy.ts)│ ป้องกัน ทุกหน้า ก่อน render (แนะนำ) │ │ ② Server Component│ ตรวจสอบ session ในแต่ละ page component │ │ ③ API Route │ ป้องกัน API endpoint │ │ ④ authorized cb │ ตรวจสอบใน authConfig.ts callback │ └───────────────────┴──────────────────────────────────────────────────┘ ``` ### 5.1 วิธีที่ 1: Proxy (แนะนำ — ป้องกันทุก Route) สร้างไฟล์ `src/proxy.ts` (ต้องอยู่ใน root ของ `src/` หรือ root ของ project): #### แบบที่ 1: Simple — redirect ทุกหน้าไป login ```typescript // src/proxy.ts import { auth } from "@/authConfig"; export default auth((req) => { // req.auth มีข้อมูล session (หรือ null ถ้ายังไม่ login) // ถ้าไม่มี session → Auth.js จะ redirect ไปหน้า sign-in อัตโนมัติ }); export const config = { matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"], }; ``` > วิธีนี้จะป้องกันทุกหน้ายกเว้น `api`, `_next/static`, `_next/image`, `favicon.ico` > ถ้าไม่มี session จะ redirect ไปหน้า sign-in อัตโนมัติ #### แบบที่ 2: Custom Logic — เลือกหน้าที่ต้อง protect ```typescript // src/proxy.ts import { auth } from "@/authConfig"; export default auth((req) => { const isLoggedIn = !!req.auth; const { pathname } = req.nextUrl; // หน้าที่ไม่ต้อง login (public routes) const publicRoutes = ["/", "/login", "/register", "/about"]; const isPublicRoute = publicRoutes.includes(pathname); // ถ้าไม่ public และยังไม่ login → redirect ไป /login if (!isPublicRoute && !isLoggedIn) { const loginUrl = new URL("/login", req.nextUrl.origin); loginUrl.searchParams.set("callbackUrl", pathname); return Response.redirect(loginUrl); } // ถ้า login แล้วแต่เข้าหน้า /login → redirect ไป /home if (isLoggedIn && pathname === "/login") { return Response.redirect(new URL("/home", req.nextUrl.origin)); } }); export const config = { matcher: ["/((?!api/auth|_next/static|_next/image|favicon.ico).*)"], }; ``` **หลักการสำคัญ:** - `auth()` wrapper ทำให้ `req.auth` มีข้อมูล session (หรือ `null` ถ้า ยังไม่ login) - `matcher` กำหนดว่า proxy จะทำงานกับ path ไหนบ้าง (ใช้ regex) - **ห้าม** block path `/api/auth/*` เพราะเป็น endpoint ของ Auth.js เอง - สามารถเพิ่ม `callbackUrl` ไว้ใน URL เพื่อ redirect กลับหลัง login #### แบบที่ 3: Protect เฉพาะบาง path patterns ```typescript // src/proxy.ts import { auth } from "@/authConfig"; export default auth((req) => { if (!req.auth) { return Response.redirect(new URL("/login", req.nextUrl.origin)); } }); export const config = { matcher: [ "/dashboard/:path*", // protect ทุกหน้าภายใต้ /dashboard "/profile/:path*", // protect ทุกหน้าภายใต้ /profile "/admin/:path*", // protect ทุกหน้าภายใต้ /admin "/api/protected/:path*", // protect API routes เฉพาะกลุ่ม ], }; ``` > วิธีนี้เหมาะเมื่อมีหลายหน้า public และต้องการ protect เฉพาะบางกลุ่ม ### 5.2 วิธีที่ 2: Server Component — ตรวจ session ในแต่ละ page เหมาะสำหรับ protect เฉพาะบางหน้า หรือแสดงเนื้อหาต่างกันตาม login status: ```typescript // src/app/dashboard/page.tsx import { auth } from "@/authConfig"; import { redirect } from "next/navigation"; export default async function DashboardPage() { const session = await auth(); // ถ้ายังไม่ login → redirect ไป /login if (!session) { redirect("/login"); } const profile = JSON.parse((session.user as any).profile || "{}"); return (

Dashboard

ยินดีต้อนรับ {profile.first_name} {profile.last_name}

); } ``` **ข้อดี:** - ควบคุมได้ละเอียดในแต่ละหน้า - สามารถแสดงเนื้อหาต่างกันสำหรับ logged-in vs guest **ข้อเสีย:** - ต้องเขียนซ้ำทุกหน้าที่ต้องการ protect - หน้าจะ render ก่อนแล้วค่อย redirect (ช้ากว่า proxy) ### 5.3 วิธีที่ 3: API Route Protection ป้องกัน API endpoint ไม่ให้ถูกเรียกโดยไม่ได้ login: ```typescript // src/app/api/protected/data/route.ts import { auth } from "@/authConfig"; import { NextResponse } from "next/server"; export async function GET() { const session = await auth(); if (!session) { return NextResponse.json({ error: "Unauthorized" }, { status: 401 }); } const profile = JSON.parse((session.user as any).profile || "{}"); // ดำเนินการต่อ — user ผ่านการ authenticate แล้ว return NextResponse.json({ message: "Protected data", user: profile.first_name, }); } ``` ### 5.4 วิธีที่ 4: `authorized` Callback (ใน authConfig.ts) เพิ่ม `authorized` callback ใน `authConfig.ts` เพื่อป้องกัน route ระดับ config: ```typescript // src/authConfig.ts — เพิ่มใน callbacks const authOptions: NextAuthConfig = { // ... providers, session, etc. pages: { signIn: "/login", // กำหนดหน้า login custom }, callbacks: { authorized({ auth, request: { nextUrl } }) { const isLoggedIn = !!auth?.user; const isOnProtected = nextUrl.pathname.startsWith("/dashboard") || nextUrl.pathname.startsWith("/profile") || nextUrl.pathname.startsWith("/admin"); if (isOnProtected) { if (isLoggedIn) return true; // อนุญาต return false; // redirect ไป signIn page } return true; // อนุญาตหน้า public }, // ... jwt, session callbacks }, }; ``` > **หมายเหตุ:** วิธีนี้ทำงานร่วมกับ proxy — ต้อง export proxy function ด้วย > `authorized` callback จะถูกเรียกโดย proxy อัตโนมัติ ใช้ร่วมกับ proxy แบบ simple: ```typescript // src/proxy.ts import { auth } from "@/authConfig"; export default auth((req) => { // authorized callback ใน authConfig.ts จะถูกเรียกอัตโนมัติ }); export const config = { matcher: ["/((?!api/auth|_next/static|_next/image|favicon.ico).*)"], }; ``` ### 5.5 ตารางเปรียบเทียบ | วิธี | เมื่อไรใช้ | ข้อดี | ข้อเสีย | | ------------------------- | -------------------------- | ------------------------------ | ----------------------- | | **① Proxy** | ป้องกันทุกหน้า / กลุ่มหน้า | เร็วที่สุด ทำงานก่อน render | จำกัดเฉพาะ Edge Runtime | | **② Server Component** | ป้องกันเฉพาะบางหน้า | ยืดหยุ่นสูง แสดง UI ต่างกันได้ | ต้องเขียนซ้ำทุกหน้า | | **③ API Route** | ป้องกัน API endpoint | เหมาะกับ REST API | ใช้ได้เฉพาะ API routes | | **④ authorized callback** | กำหนด logic รวมศูนย์ | config ที่เดียว ใช้ได้ทั้งระบบ | ต้องใช้คู่กับ proxy | ### 5.6 แนะนำ: ใช้ Proxy + Server Component ร่วมกัน ในทางปฏิบัติ ให้ใช้ **Proxy** เป็น "ด่านแรก" และ **Server Component** เป็น "ด่านที่สอง": ``` Request │ ▼ ┌──────────────────────────────┐ │ Proxy (ด่านที่ 1) │ ← เร็ว, block ก่อน render │ ตรวจ: login แล้วหรือยัง? │ │ ถ้ายัง → redirect /login │ └──────────────┬───────────────┘ │ ผ่าน ▼ ┌──────────────────────────────┐ │ Server Component (ด่านที่ 2) │ ← ละเอียด, ตรวจ role/permission │ ตรวจ: session มี role ที่ │ │ เหมาะสมไหม? │ └──────────────────────────────┘ ``` ตัวอย่าง Role-based protection ใน Server Component: ```typescript // src/app/admin/page.tsx import { auth } from "@/authConfig"; import { redirect } from "next/navigation"; export default async function AdminPage() { const session = await auth(); if (!session) redirect("/login"); const profile = JSON.parse((session.user as any).profile || "{}"); // ตรวจสอบ role — ต้องเป็น admin if (profile.role !== 'admin') { redirect("/unauthorized"); } return
Admin Dashboard
; } ``` --- ## โครงสร้างไฟล์ทั้งหมด ``` src/ ├── authConfig.ts # Auth.js configuration + NextAuth export ├── proxy.ts # Route protection proxy (Next.js 16+) ├── app/ │ ├── layout.tsx # SessionProvider wrapper │ ├── login/ │ │ └── page.tsx # หน้า Login (Client Component) │ ├── actions/ │ │ └── sign-in.ts # Server Action: redirect to OAuth │ └── api/ │ └── auth/ │ ├── [...nextauth]/ │ │ └── route.ts # Auth.js route handler (GET, POST) │ └── healthid/ │ └── route.ts # OAuth callback: token exchange + signIn ``` --- ## Environment Variables อ้างอิง | ชื่อ | คำอธิบาย | ตัวอย่าง | | ------------------------ | ----------------------------- | ----------------------------------------- | | `AUTH_SECRET` | Secret สำหรับ encrypt JWT | `openssl rand -base64 32` | | `HEALTH_CLIENT_ID` | Client ID จาก moph.id.th | - | | `HEALTH_CLIENT_SECRET` | Client Secret จาก moph.id.th | - | | `HEALTH_REDIRECT_URI` | OAuth callback URL | `http://localhost:3000/api/auth/healthid` | | `PROVIDER_CLIENT_ID` | Client ID จาก provider.id.th | - | | `PROVIDER_CLIENT_SECRET` | Secret Key จาก provider.id.th | - | --- ## API Endpoints อ้างอิง ### moph.id.th (Health ID) | Endpoint | Method | คำอธิบาย | | ----------------------------------- | -------------- | -------------------------- | | `https://moph.id.th/oauth/redirect` | GET (redirect) | หน้า OAuth consent | | `https://moph.id.th/api/v1/token` | POST | แลก code เป็น access_token | **Token Request Body:** ```json { "grant_type": "authorization_code", "code": "", "redirect_uri": "", "client_id": "", "client_secret": "" } ``` ### provider.id.th (Provider ID) | Endpoint | Method | คำอธิบาย | | ------------------------------------------------ | ------ | --------------------------------------- | | `https://provider.id.th/api/v1/services/token` | POST | แลก Health ID token เป็น Provider token | | `https://provider.id.th/api/v1/services/profile` | GET | ดึง profile ด้วย Provider token | **Provider Token Request Body:** ```json { "client_id": "", "secret_key": "", "token_by": "Health ID", "token": "" } ``` **Profile Request Headers:** ``` client-id: secret-key: Authorization: Bearer ``` --- ## Troubleshooting ### ปัญหาที่พบบ่อย 1. **`AUTH_SECRET` ไม่ได้ตั้งค่า** - Error: `[auth][error] MissingSecret` - แก้: เพิ่ม `AUTH_SECRET` ใน `.env.local` 2. **Redirect URI ไม่ตรง** - Error: moph.id.th ส่ง error กลับมา - แก้: ตรวจสอบว่า `HEALTH_REDIRECT_URI` ตรงกับที่ลงทะเบียนไว้ทุกตัวอักษร 3. **field name ผิด ใน Provider ID API** - ใช้ `secret_key` (ไม่ใช่ `client_secret`) ใน token request - ใช้ `secret-key` (kebab-case) ใน profile request header 4. **Cookie หายหลัง OAuth redirect** - ตรวจสอบว่า `sameSite: 'lax'` (ไม่ใช่ `strict`) - ตรวจสอบว่า `secure: true` เฉพาะ production 5. **Session ว่าง / profile เป็น undefined** - ตรวจสอบว่ามี `SessionProvider` ใน layout.tsx - ตรวจสอบว่า `jwt` callback เก็บ `token.profile` ถูกต้อง --- ## เพิ่มเติม: ตัวอย่างการเพิ่ม Department ลงใน Session ถ้าต้องการเก็บ `department` ลง session ด้วย: ```typescript // ใน authConfig.ts — jwt callback async jwt({ token, user }) { if (user) { token.profile = (user as any).profile; // อ่าน department จาก cookie const cookieStore = await cookies(); const department = cookieStore.get('selectedDepartment')?.value; if (department) { (token as any).ssj_department = department; cookieStore.delete('selectedDepartment'); // ลบ cookie หลังอ่าน } } return token; }, // ใน authConfig.ts — session callback async session({ session, token }) { if (token && session.user) { (session.user as any).profile = (token as any).profile; (session.user as any).ssj_department = (token as any).ssj_department; } return session; }, ``` --- ## เพิ่มเติม: ตัวอย่างการ Track Login ลงฐานข้อมูล (Prisma) ```typescript // ใน jwt callback — หลังจาก set token.profile try { const profile = typeof (user as any).profile === "string" ? JSON.parse((user as any).profile) : (user as any).profile; const providerId = profile.provider_id || profile.sub || user.name; await prisma.accountUser.updateMany({ where: { provider_id: providerId, active: true }, data: { last_login: new Date(), login_count: { increment: 1 }, }, }); } catch (error) { console.error("Error updating login tracking:", error); } ```