Autentikasi adalah gerbang utama dari setiap aplikasi SaaS. Bersama Next.js 16 App Router dan paket Supabase SSR (`@supabase/ssr`), kita dapat merancang sistem keamanan berbasis cookie yang tersinkronisasi di Server Components, Client Components, dan Middleware.

1. Menginisiasi Client Sisi Server

Berbeda dari model lama, Supabase SSR memungkinkan klien membaca dan menulis cookie sesi langsung kembali ke browser pengguna untuk menjaga masa aktif token tetap sinkron. Fungsi `createServerClient` dari `@supabase/ssr` menangani serialisasi cookie dengan mulus.

// Inisiasi Server Client di Server Components
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();
  return createServerClient(URL, KEY, {
    cookies: {
      getAll: () => cookieStore.getAll(),
      setAll: (cookiesToSet) => { ... }
    }
  });
}

2. Melindungi Rute Melalui Middleware

Proteksi rute harus dipusatkan pada file `middleware.ts`. Ini memastikan status sesi divalidasi sebelum file layout dikirim ke browser pengguna, memberikan respons situs yang lebih cepat dan aman. Pola middleware juga memungkinkan kita mengarahkan pengguna yang belum login ke halaman login sambil menyimpan URL asli untuk pengalihan setelah autentikasi berhasil.

3. Peran Kontrol Akses (RBAC)

Untuk dasbor admin portofolio atau SaaS, kita memvalidasi status admin pengguna dengan membandingkan kecocokan email/ID pengguna dengan tabel `public.admins` di database Supabase. Dalam proyek portofolio saya, saya memelihara tabel `admins` terpisah yang memetakan ID pengguna ke hak istimewa admin, memastikan hanya personel yang berwenang yang dapat membuat, memperbarui, atau menghapus entri proyek.

4. Menangani Penyegaran Sesi dan Siklus Hidup Token

Salah satu aspek paling rumit dari autentikasi adalah mengelola kedaluwarsa token dan siklus penyegaran. Supabase SSR menangani ini secara otomatis dengan mendeteksi token akses yang kedaluwarsa dan menggunakan token penyegar yang disimpan di cookie untuk mendapatkan yang baru. Namun, Anda harus memastikan bahwa middleware Anda menyegarkan sesi dengan benar pada setiap permintaan dengan memanggil `supabase.auth.getUser()`, yang memicu alur penyegaran saat diperlukan.

Kesalahan umum adalah lupa memanggil `getUser()` di middleware — tanpa itu, sesi yang kedaluwarsa tidak akan disegarkan, dan pengguna akan tiba-tiba logout meskipun token penyegar mereka masih valid. Selalu panggil fungsi ini di fungsi `updateSession` Anda untuk menjaga sesi tetap aktif.

5. Praktik Terbaik untuk Produksi

Saat menerapkan autentikasi di produksi, selalu gunakan variabel lingkungan untuk kunci sensitif, aktifkan Row Level Security (RLS) di semua tabel database, dan terapkan pembatasan laju (rate limiting) pada titik akhir login untuk mencegah serangan brute-force. Selain itu, pertimbangkan untuk mengatur konfirmasi email untuk pendaftaran pengguna baru dan menggunakan perlindungan CAPTCHA bawaan Supabase untuk formulir yang menghadap publik.

Untuk dasbor admin, saya sarankan menambahkan tabel log audit untuk melacak siapa yang melakukan perubahan dan kapan. Ini tidak hanya meningkatkan keamanan tetapi juga memberikan akuntabilitas untuk operasi manajemen konten. Langganan real-time Supabase juga dapat digunakan untuk memberi tahu administrator tentang upaya login yang mencurigakan atau pola akses yang tidak sah.