src/app/login/page.tsx
src/components/LoginForm.tsx
src/app/actions.ts
src/lib/auth.ts
src/app/issues/new/page.tsx
src/components/AppNav.tsx
src/app/layout.tsx

user@example.com   role USER
admin@example.com  role ADMIN

user@example.com
admin@example.com

src/app/login/page.tsx

import { LoginForm } from "@/components/LoginForm";
 
export default function LoginPage() {
  return (
  <main className="mx-auto max-w-md px-6 py-12">
    <section className="rounded-lg border border-slate-200 bg-white p-6">
      <h1 className="text-2xl font-bold text-slate-950">เข้าสู่ระบบ</h1>
      <p className="mt-2 text-sm text-slate-600">
        ใช้ account ที่ผู้สอนเตรียมไว้เพื่อแจ้งและติดตามปัญหา
      </p>
 
      <LoginForm />
    </section>
  </main>
  );
}

src/components/LoginForm.tsx

import { signInAction } from "@/app/actions";
 
export function LoginForm() {
  return (
  <form action={signInAction} className="mt-6 grid gap-4">
    <div className="grid gap-2">
      <label htmlFor="email" className="text-sm font-semibold text-slate-800">
        Email
      </label>
      <input
        id="email"
        name="email"
        type="email"
        required
        className="rounded-md border border-slate-300 px-3 py-2 text-sm"
      />
    </div>
 
    <div className="grid gap-2">
      <label
        htmlFor="password"
        className="text-sm font-semibold text-slate-800"
      >
        Password
      </label>
      <input
        id="password"
        name="password"
        type="password"
        required
        className="rounded-md border border-slate-300 px-3 py-2 text-sm"
      />
    </div>
 
    <button className="rounded-md bg-teal-700 px-4 py-3 text-sm font-bold text-white">
      เข้าสู่ระบบ
    </button>
  </form>
  );
}

src/app/actions.ts

"use server";
 
import { redirect } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
 
export async function signInAction(formData: FormData) {
  const email = String(formData.get("email") ?? "").trim();
  const password = String(formData.get("password") ?? "");
 
  if (!email || !password) {
  throw new Error("Email and password are required");
  }
 
  const supabase = await createClient();
  const { error } = await supabase.auth.signInWithPassword({
  email,
  password,
  });
 
  if (error) {
  throw new Error("Invalid email or password");
  }
 
  redirect("/issues");
}

src/app/actions.ts

export async function signOutAction() {
  const supabase = await createClient();
  await supabase.auth.signOut();
  redirect("/login");
}

<form action={signOutAction}>
  <button type="submit">ออกจากระบบ</button>
</form>

src/lib/auth.ts

import { redirect } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
 
export async function getCurrentUser() {
  const supabase = await createClient();
  const { data, error } = await supabase.auth.getUser();
 
  if (error || !data.user) {
  return null;
  }
 
  return data.user;
}
 
export async function requireUser() {
  const user = await getCurrentUser();
 
  if (!user) {
  redirect("/login");
  }
 
  return user;
}

src/app/issues/new/page.tsx

import { IssueForm } from "@/components/IssueForm";
import { requireUser } from "@/lib/auth";
 
export default async function NewIssuePage() {
  await requireUser();
 
  return (
  <main className="mx-auto max-w-3xl px-6 py-8">
    <IssueForm />
  </main>
  );
}

src/components/AppNav.tsx

import Link from "next/link";
import { signOutAction } from "@/app/actions";
import { getCurrentUser } from "@/lib/auth";
 
export async function AppNav() {
  const user = await getCurrentUser();
 
  return (
  <nav className="flex items-center justify-between border-b border-slate-200 px-6 py-3">
    <div className="flex gap-4 text-sm font-semibold">
      <Link href="/issues">Issues</Link>
      <Link href="/issues/new">New Issue</Link>
    </div>
 
    {user ? (
      <form action={signOutAction} className="flex items-center gap-3">
        <span className="text-sm text-slate-600">{user.email}</span>
        <button type="submit" className="text-sm font-semibold text-teal-700">
          Logout
        </button>
      </form>
    ) : (
      <Link href="/login" className="text-sm font-semibold text-teal-700">
        Login
      </Link>
    )}
  </nav>
  );
}

src/app/layout.tsx

import { AppNav } from "@/components/AppNav";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
  <html lang="th">
    <body>
      <AppNav />
      {children}
    </body>
  </html>
  );
}

src/app/login/page.tsx
src/components/LoginForm.tsx
src/app/auth/actions.ts
src/lib/auth.ts
src/components/AppNav.tsx

"use server";
 
import { redirect } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
 
export async function signInAction(formData: FormData) {
  const supabase = await createClient();
  const email = String(formData.get("email") ?? "");
  const password = String(formData.get("password") ?? "");
 
  const { error } = await supabase.auth.signInWithPassword({ email, password });
 
  if (error) {
  redirect("/login?error=invalid-credentials");
  }
 
  redirect("/issues");
}
 
export async function signOutAction() {
  const supabase = await createClient();
  await supabase.auth.signOut();
  redirect("/login");
}

import { redirect } from "next/navigation";
import { createClient } from "@/lib/supabase/server";
 
export async function requireUser() {
  const supabase = await createClient();
  const { data } = await supabase.auth.getUser();
 
  if (!data.user) {
  redirect("/login");
  }
 
  return data.user;
}

export default async function NewIssuePage() {
  await requireUser();
 
  return <IssueForm />;
}