Pengenalan Autentikasi di Next.js

Konsep dasar

Autentikasi di Next.js umumnya memakai sesi berbasis cookie: setelah login sukses, server membuat sesi dan menyimpan ID-nya di cookie httpOnly. Setiap request berikutnya membawa cookie itu, dan server memverifikasinya.

Kenapa httpOnly? Cookie jenis ini tidak bisa dibaca JavaScript di browser, jadi aman dari serangan XSS yang mencuri token dari localStorage.

Alur login dengan Server Action

// app/login/actions.ts
"use server";

import { cookies } from "next/headers";
import { redirect } from "next/navigation";

export async function login(formData: FormData) {
  const email = formData.get("email") as string;
  const password = formData.get("password") as string;

  const user = await verifikasiKredensial(email, password);
  if (!user) return { sukses: false, error: "Email atau password salah" };

  const sesi = await buatSesi(user.id);
  (await cookies()).set("sesi", sesi.id, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    sameSite: "lax",
    maxAge: 60 * 60 * 24 * 7, // 7 hari
  });

  redirect("/dashboard");
}

Membaca sesi di Server Component

// app/dashboard/page.tsx
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

export default async function Dashboard() {
  const sesiId = (await cookies()).get("sesi")?.value;
  const user = await getUserDariSesi(sesiId);
  if (!user) redirect("/login");

  return <h1>Halo, {user.nama}</h1>;
}

Logout

Hapus cookie sesi lewat Server Action, lalu redirect ke halaman publik.

Kesalahan umum pemula

• Menyimpan token di localStorage. Rentan dicuri lewat XSS. Pakai cookie httpOnly yang tidak bisa dibaca JavaScript.
• Cookie tanpa secure dan sameSite di production. Tanpa ini, cookie bisa bocor lewat HTTP atau disalahgunakan situs lain (CSRF).
• Membangun auth sendiri untuk production serius. Kriptografi sesi, rotasi token, dan rate limiting itu rumit. Untuk project nyata, pakai Auth.js atau Clerk.

Latihan singkat

1. Implementasikan alur login dummy: form -> Server Action -> set cookie httpOnly -> redirect ke /dashboard.
2. Buat halaman /dashboard yang membaca cookie dan me-redirect ke /login kalau tidak ada sesi. Uji dengan incognito.

Rangkuman

• Autentikasi umum memakai sesi berbasis cookie httpOnly yang aman dari XSS.
• Login via Server Action: verifikasi kredensial, buat sesi, set cookie, redirect.
• Halaman proteksi membaca cookie di Server Component dan redirect kalau tidak ada sesi.
• Untuk production serius, pertimbangkan Auth.js atau Clerk daripada membangun sendiri.

Catatan teknis: Untuk production, pertimbangkan library terautamakan seperti Auth.js (NextAuth) atau Clerk daripada membangun sendiri. Autentikasi buatan sendiri rawan celah (session fixation, timing attack) kalau tidak hati-hati. Pahami konsepnya di sini, lalu pakai library matang untuk project serius.