Cara Integrasi Supabase dengan Next.js untuk Auth dan Database

Integrasi Supabase ke Next.js mungkin terlihat sederhana pada awalnya. Namun, kamu bisa saja menghadapi kendala saat mulai mengelola auth callback, API route, atau kebijakan akses data. Masalah ini biasanya muncul karena perbedaan cara kerja antara sisi client dan server.

Kesalahan umum yang sering terjadi adalah mencampuradukkan akses client di sisi browser dan server. Kamu perlu memisahkan client berdasarkan konteks penggunaannya agar keamanan aplikasi tetap terjaga. Pendekatan ini memastikan data sensitif tidak bocor ke publik.

Bayangkan client ini seperti kunci ruangan yang berbeda fungsi. Ada kunci untuk tamu (browser), kunci staf (server), dan kunci utama (service role) yang tidak boleh tertukar. Kamu harus disiplin dalam menempatkan kunci-kunci ini di dalam kode program.

Langkah pertama, kamu harus menyiapkan variabel lingkungan yang tepat. Gunakan NEXT_PUBLIC_SUPABASE_URL untuk akses publik dan simpan SUPABASE_SERVICE_ROLE_KEY hanya di lingkungan server yang aman. Jangan pernah membagikan service role key ke sisi frontend.

Berikut adalah contoh cara membuat helper client untuk sisi server menggunakan library @supabase/ssr. Langkah ini penting untuk memastikan session user tersinkronisasi dengan cookie secara otomatis di Next.js App Router.

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export function createClient() {
  const cookieStore = cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() { return cookieStore.getAll() },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        },
      },
    }
  )
}