Belajar Next.js - Authentication & Authorization

#Pendahuluan

Setiap aplikasi yang menyimpan data pengguna butuh jawaban atas dua pertanyaan: siapa yang sedang memakai aplikasi, dan apa yang boleh mereka lakukan. Dua hal ini adalah authentication dan authorization.

Episode 12 membahas pola autentikasi di Next.js, integrasi Auth.js (NextAuth.js), melindungi route dengan middleware dan session management, serta role-based access control dan secure redirect.

#Authentication Patterns untuk Next.js

#Pilihan Arsitektur

Ada beberapa pola autentikasi yang umum dipakai: session-based yang menyimpan data sesi di cookie, JWT yang menandatangani klaim di token, dan OAuth yang menyerahkan login ke provider seperti Google atau GitHub. Pemilihan bergantung pada jenis aplikasi: aplikasi server-rendered cocok dengan session dan cookie, sementara API-only memakai JWT.

#Auth.js sebagai Solusi Terpadu

Auth.js (dulunya NextAuth.js) adalah library autentikasi standar de facto untuk Next.js: mendukung banyak provider OAuth, credentials, database session, dan integrasi erat dengan App Router. Mulai dengan menginstall dan mengonfigurasi route handler:

npm install next-auth@beta

Versi beta adalah Auth.js v5 yang dirancang untuk App Router. Setelah install, buat route handler berikut:

import { handlers } from "@/auth"
 
export const { GET, POST } = handlers

File app/api/auth/[...nextauth]/route.ts di atas mengekspor handler GET dan POST yang menangani seluruh alur login dan callback.

#Integrasi NextAuth.js dan Session Management

#Konfigurasi AuthOptions

Pusat konfigurasi Auth.js adalah file auth.ts di root project:

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Google],
  session: { strategy: "jwt" },
})

providers: [Google] mengaktifkan login dengan akun Google. Opsi session: { strategy: "jwt" } menyimpan sesi di JWT — ringan dan cocok tanpa database.

#Membaca Session di Server

Untuk membaca status login di server component, panggil fungsi auth():

import { auth } from "@/auth"
 
export default async function Dashboard() {
  const session = await auth()
 
  if (!session) {
    return <p>Silakan login terlebih dahulu.</p>
  }
 
  return <h1>Selamat datang, {session.user.name}</h1>
}

session.user.name menampilkan nama pengguna yang login. Cek session di awal komponen server adalah pola dasar untuk melindungi halaman di level rendering.

#Protecting Routes dengan Middleware dan Session

#Middleware untuk Perlindungan Route

Untuk melindungi banyak route sekaligus, pakai middleware.ts. Middleware berjalan sebelum request sampai ke halaman, jadi bisa me-redirect pengguna yang belum login:

import { auth } from "@/auth"
 
export default auth((req) => {
  if (!req.auth && req.nextUrl.pathname.startsWith("/dashboard")) {
    const url = req.nextUrl.clone()
    url.pathname = "/login"
    return Response.redirect(url)
  }
})
 
export const config = {
  matcher: ["/dashboard/:path*", "/admin/:path*"],
}

Middleware di atas me-redirect pengguna yang belum login dari /dashboard dan /admin ke /login. Redirect dilakukan di sisi server sebelum halaman dirender, mencegah konten terproteksi terkirim.

#Role-Based Access Control dan Secure Redirect

#Membatasi Berdasarkan Role

Authorization adalah lapisan di atas autentikasi: setelah tahu siapa pengguna, tentukan apa yang boleh mereka akses. Periksa role dari session:

const session = await auth()
const role = session?.user?.role
 
if (role !== "admin") {
  return <p>Anda tidak memiliki akses.</p>
}

Cek role pada komponen server di atas membatasi akses halaman admin. Untuk aplikasi besar, pertimbangkan library seperti Permit atau Casper untuk kebijakan akses yang terpusat.

#Secure Redirect

Hindari open redirect: jangan pernah menyalin URL tujuan langsung dari query parameter tanpa validasi. Redirect hanya ke path yang diizinkan. Setelah login berhasil, arahkan pengguna ke halaman yang sebelumnya diminta, dan setelah logout kembalikan ke halaman publik — semua tujuan redirect harus dari daftar yang aman.

#Penutup

Inti yang harus dibawa pulang:

• Session, JWT, dan OAuth adalah tiga pola autentikasi utama.
• Auth.js menyatukan banyak provider dengan konfigurasi sederhana.
• Route handler [...nextauth] menangani seluruh alur login.
• Fungsi auth() membaca session di server component.
• Middleware melindungi route secara terpusat sebelum render.
• RBAC memeriksa role, dan redirect selalu divalidasi.

Di episode 13 selanjutnya kita akan membahas API security dan data protection — mengamankan route handler dan validasi request, CORS dan CSRF dengan secure headers, penanganan data sensitif dan secrets, serta rate limiting dan pencegahan penyalahgunaan. Backend aplikasi kalian akan dibentengi.