Supabase adalah platform backend-as-a-service berbasis PostgreSQL yang menyediakan database, autentikasi, storage, realtime, dan API secara langsung. Tutorial ini membahas setup Supabase dari nol sampai terhubung ke aplikasi Next.js.

1. Membuat project Supabase

Buka supabase.com, login, lalu pilih New project. Pilih organisasi, isi nama project, buat database password yang kuat, dan tentukan region terdekat dengan mayoritas pengguna aplikasi. Simpan database password di password manager karena password ini tidak dapat ditampilkan kembali.

Tunggu hingga provisioning selesai. Setelah project aktif, dashboard Supabase akan menyediakan URL project, API key, SQL Editor, Table Editor, Authentication, Storage, dan pengaturan lainnya.

2. Membuat tabel dengan SQL Editor

Gunakan SQL Editor agar struktur database dapat dicatat dan diulang. Sebagai contoh, buat tabel profil pengguna berikut:

create table public.profiles (
  id uuid primary key references auth.users(id) on delete cascade,
  display_name text,
  created_at timestamptz not null default now()
);

alter table public.profiles enable row level security;

Row Level Security (RLS) wajib diperhatikan. Tanpa policy yang tepat, akses dari client dapat ditolak atau—lebih buruk—data dapat terbuka terlalu luas.

3. Menambahkan policy RLS

Policy berikut mengizinkan pengguna login membaca dan mengubah profilnya sendiri:

create policy "Users can read their own profile"
on public.profiles for select
to authenticated
using (auth.uid() = id);

create policy "Users can update their own profile"
on public.profiles for update
to authenticated
using (auth.uid() = id)
with check (auth.uid() = id);

Gunakan policy yang paling sempit sesuai kebutuhan. Hindari policy global seperti using (true) pada data yang berisi informasi pribadi.

4. Memasang Supabase client di Next.js

Di project Next.js, pasang library resmi:

npm install @supabase/supabase-js

Tambahkan variabel berikut ke file .env.local:

NEXT_PUBLIC_SUPABASE_URL=https://project-ref.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=your-publishable-key

Nilai URL dan publishable key dapat ditemukan di menu Project Settings, API. Publishable key boleh digunakan di browser, tetapi service role key harus dirahasiakan dan hanya boleh dipakai di server yang aman.

5. Membuat helper client

Buat file lib/supabase/client.ts untuk penggunaan di browser:

import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
);

Untuk operasi server-side dan autentikasi berbasis cookie, gunakan pola SSR resmi Supabase agar session dapat dibaca dan diperbarui dengan benar pada Server Components, Server Actions, dan middleware.

6. Menguji query dan autentikasi

Setelah membuat akun melalui Authentication, ambil user yang sedang login lalu gunakan ID tersebut saat membuat profil:

const { data: { user } } = await supabase.auth.getUser();

if (user) {
  await supabase.from('profiles').upsert({
    id: user.id,
    display_name: 'Pengguna Baru'
  });
}

Jika query gagal dengan error permission denied, periksa tiga hal: user benar-benar login, RLS aktif, dan policy mencocokkan auth.uid() dengan kolom pemilik data.

7. Mengatur Storage

Untuk menyimpan gambar atau dokumen, buat bucket di menu Storage. Tentukan apakah bucket bersifat public atau private. Bucket private lebih aman untuk dokumen pengguna karena file hanya dapat diakses melalui signed URL dan policy yang sesuai.

Jangan mengandalkan nama file sebagai mekanisme keamanan. Atur policy Storage berdasarkan user ID, folder, dan jenis operasi yang diizinkan.

8. Checklist sebelum production

  • Aktifkan RLS pada seluruh tabel yang diakses client.
  • Pastikan tidak ada service role key di repository atau bundle browser.
  • Simpan migration SQL di version control.
  • Batasi ukuran dan tipe file pada Storage.
  • Uji policy dengan user berbeda, bukan hanya dengan akun admin.
  • Siapkan backup, monitoring, dan batas penggunaan sesuai kebutuhan.

Kesimpulan

Setup Supabase relatif cepat, tetapi keamanan tetap harus dirancang sejak awal. Mulailah dari schema yang jelas, aktifkan RLS, gunakan publishable key di client, simpan secret hanya di server, dan uji policy menggunakan skenario pengguna nyata. Dengan fondasi tersebut, Supabase dapat menjadi backend yang praktis untuk aplikasi web modern.