┌────────────────┐       ┌─────────────────┐       ┌──────────────────┐       ┌──────────────────┐
│  Login Button  │──①──▶│  moph.id.th     │──②──▶│  /api/auth/      │──③──▶│  provider.id.th  │
│  (Server       │       │  OAuth Redirect  │       │  healthid        │       │  Token + Profile │
│   Action)      │       │                  │◀──②──│  (Callback)      │◀──③──│                  │
└────────────────┘       └─────────────────┘       └──────┬───────────┘       └──────────────────┘
                                                          │④
                                                   ┌──────▼───────────┐
                                                   │  Auth.js signIn  │
                                                   │  (Credentials)   │
                                                   │  → JWT Session   │
                                                   └──────────────────┘

npm install next-auth@latest

# ===== 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

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);

import { handlers } from "@/authConfig";

export const { GET, POST } = handlers;

"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 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 (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
      <div className="bg-white p-8 rounded-2xl shadow-lg w-full max-w-md">
        <h2 className="text-2xl font-bold text-center mb-8">เข้าสู่ระบบ</h2>

        <div className="space-y-4">
          {/* ปุ่มเข้าสู่ระบบ */}
          <form action={signInWithHealthId}>
            <input type="hidden" name="department" value="" />
            <input type="hidden" name="redirectTo" value="/home" />
            <button
              type="submit"
              className="w-full px-6 py-4 bg-green-600 text-white rounded-xl 
                         hover:bg-green-700 transition-all flex items-center 
                         justify-center gap-3 font-semibold text-lg shadow-md 
                         hover:shadow-lg cursor-pointer"
            >
              <LogIn size={24} />
              เข้าสู่ระบบ
            </button>
          </form>

          {/* ปุ่มลงทะเบียน */}
          <form action={signInWithHealthId}>
            <input type="hidden" name="department" value="register" />
            <input type="hidden" name="redirectTo" value="/profile" />
            <button
              type="submit"
              className="w-full px-6 py-4 bg-blue-600 text-white rounded-xl 
                         hover:bg-blue-700 transition-all flex items-center 
                         justify-center gap-3 font-semibold text-lg shadow-md 
                         hover:shadow-lg cursor-pointer"
            >
              <UserPlus size={24} />
              ลงทะเบียนผู้ใช้งาน
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

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;
}

User Login ── authorize() ─┐
                            ▼
                     jwt() callback ── เก็บ profile ลง token
                            │
                            ▼
                     session() callback ── ส่ง profile ให้ client
                            │
                            ▼
                     Session Object ── { user: { name, profile, ... } }

"use client";
import { useSession } from "next-auth/react";

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

  if (!session) return <div>กรุณาเข้าสู่ระบบ</div>;

  const profile = JSON.parse((session.user as any).profile || "{}");

  return (
    <div>
      <p>
        ชื่อ: {profile.first_name} {profile.last_name}
      </p>
      <p>Provider ID: {profile.provider_id}</p>
    </div>
  );
}

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 ได้ตรงนี้
}

// src/app/layout.tsx
import { SessionProvider } from "next-auth/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

// Server Action
import { signOut } from '@/authConfig';

export async function handleSignOut() {
  await signOut({ redirectTo: '/login' });
}

// Client Component
import { signOut } from 'next-auth/react';

<button onClick={() => signOut({ callbackUrl: '/login' })}>
  ออกจากระบบ
</button>

┌──────────────────────────────────────────────────────────────────────┐
│                    วิธีป้องกัน Route ทั้ง 4 แบบ                      │
├───────────────────┬──────────────────────────────────────────────────┤
│  ① Proxy (proxy.ts)│  ป้องกัน ทุกหน้า ก่อน render (แนะนำ)           │
│  ② Server Component│  ตรวจสอบ session ในแต่ละ page component        │
│  ③ API Route       │  ป้องกัน API endpoint                           │
│  ④ authorized cb   │  ตรวจสอบใน authConfig.ts callback               │
└───────────────────┴──────────────────────────────────────────────────┘

// 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).*)"],
};

// 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).*)"],
};

// 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 เฉพาะกลุ่ม
  ],
};

// 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 (
    <div>
      <h1>Dashboard</h1>
      <p>ยินดีต้อนรับ {profile.first_name} {profile.last_name}</p>
    </div>
  );
}

// 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,
  });
}

// 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
  },
};

// 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).*)"],
};

Request
  │
  ▼
┌──────────────────────────────┐
│  Proxy (ด่านที่ 1)            │  ← เร็ว, block ก่อน render
│  ตรวจ: login แล้วหรือยัง?     │
│  ถ้ายัง → redirect /login     │
└──────────────┬───────────────┘
               │ ผ่าน
               ▼
┌──────────────────────────────┐
│  Server Component (ด่านที่ 2) │  ← ละเอียด, ตรวจ role/permission
│  ตรวจ: session มี role ที่     │
│  เหมาะสมไหม?                  │
└──────────────────────────────┘

// 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 <div>Admin Dashboard</div>;
}

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

{
  "grant_type": "authorization_code",
  "code": "<authorization_code>",
  "redirect_uri": "<HEALTH_REDIRECT_URI>",
  "client_id": "<HEALTH_CLIENT_ID>",
  "client_secret": "<HEALTH_CLIENT_SECRET>"
}

{
  "client_id": "<PROVIDER_CLIENT_ID>",
  "secret_key": "<PROVIDER_CLIENT_SECRET>",
  "token_by": "Health ID",
  "token": "<health_id_access_token>"
}

client-id: <PROVIDER_CLIENT_ID>
secret-key: <PROVIDER_CLIENT_SECRET>
Authorization: Bearer <provider_access_token>

// ใน 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;
},

// ใน 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);
}