bff-auth

Alasan ada: menyimpan token backend di tempat yang tidak bisa dibaca JavaScript browser, dan memproteksi halaman tanpa menulis ulang logika sesi di setiap fitur.

Mode: frontend. Otomatis memasang api-client.

npm create nextjs-kit@latest my-app -- --mode frontend --modules bff-auth

Cara kerja

Form login memanggil Server Action login, yang memvalidasi input dengan Zod.
Action meneruskan kredensial ke backend lewat api-client.
Token dari backend disimpan di cookie httpOnly (secure di production, sameSite=lax).
Setiap request ke backend otomatis membawa Authorization: Bearer <token>.
src/proxy.ts mengarahkan pengguna yang belum login dari route terproteksi ke /login.

Kontrak backend

Backend diharapkan menerima POST /auth/login dengan { email, password } dan membalas { accessToken: string, expiresIn?: number } (detik). Sesuaikan di src/config/auth.ts:

export const authConfig = {
  cookieName: "session",
  loginPath: "/login",
  afterLoginPath: "/dashboard",
  backendLoginPath: "/auth/login",
  defaultMaxAge: 60 * 60 * 24 * 7,
  protectedPrefixes: ["/dashboard"],
} as const;

Melindungi halaman

Tambahkan prefix route ke protectedPrefixes. Di halaman atau action yang membaca data sensitif, panggil juga requireSession() sebagai pagar kedua:

import { requireSession } from "@/server/auth/session";

export default async function Page() {
  await requireSession();
  // ...
}

Test E2E

Modul ini menambahkan e2e/auth.spec.ts dan backend tiruan e2e/mock-backend.mjs. Playwright menyalakan keduanya lewat webServer di playwright.config.ts, dengan API_BASE_URL diarahkan ke http://localhost:4010. Yang diuji: redirect ke login, pesan error dari backend, login dan logout, cookie httpOnly, dan penolakan next eksternal. Kredensial uji: user@example.com / secret.

Kalau kontrak login backend Anda berbeda, ubah authConfig dan mock-backend.mjs bersamaan.

Parameter next hanya menerima path internal. URL absolut, //host, backslash, dan karakter kontrol ditolak, supaya tidak bisa dipakai untuk open redirect.