"Satpam" Digital Buat Toko Kue: Kenalan Sama Supabase Auth!

Udah bisa nyimpen dan ngambil data produk kue pake Supabase? Keren! Tapi, Toko Kue kita bakal makin canggih kalau kita bisa:

• Ngenalin siapa aja pengunjung kita.
• Ngasih mereka "akun" pribadi.
• Mungkin nanti, nyimpen riwayat pesanan mereka atau ngasih fitur khusus buat member.
• Dan yang pasti, ngamanin halaman tertentu (kayak halaman checkout atau profil) biar cuma bisa diakses sama pengguna yang udah login.

Nah, buat semua urusan "identitas" dan "izin masuk" ini, Supabase nyediain fitur super keren namanya Supabase Auth!

Apa Itu Supabase Auth?

Supabase Auth adalah layanan autentikasi pengguna yang udah terintegrasi penuh di dalem platform Supabase. Dia ngurusin semua keribetan di balik layar soal:

• Pendaftaran pengguna baru (Sign Up).
• Login pengguna yang udah ada (Sign In).
• Logout pengguna.
• Reset password.
• Konfirmasi email.
• Login pake akun media sosial (Google, GitHub, Facebook, dll. - ini namanya OAuth).
• Manajemen sesi pengguna (biar pengguna tetep login pas pindah halaman atau balik lagi nanti).
• Dan keamanan terkait autentikasi.

Dengan Supabase Auth, kamu gak perlu pusing bikin sistem login sendiri dari nol, yang mana itu proses yang rumit dan rawan celah keamanan kalau gak hati-hati. Supabase udah nyiapin semuanya buat kamu!

Kenapa Autentikasi Itu Penting di Aplikasi Web?

• Personalisasi: Kamu bisa nyapa pengguna dengan namanya, nampilin konten yang relevan buat dia.
• Keamanan Data: Ngelindungin data atau fitur tertentu biar cuma bisa diakses sama orang yang berhak.
• Pelacakan Aktivitas: Kamu bisa tau histori aktivitas pengguna (misal, produk apa aja yang dia liat atau beli).
• Fitur Spesifik Pengguna: Kayak keranjang belanja pribadi, daftar wishlist, riwayat pesanan.
• Membangun Komunitas: Kalau ada fitur interaksi, autentikasi jadi dasar buat identitas pengguna.

Langkah 1: Mengaktifkan Provider Autentikasi di Dashboard Supabase

Secara default, Supabase Auth itu udah "siap" tapi kamu perlu ngasih tau dia metode login apa aja yang mau kamu dukung di aplikasimu.

1. Buka Dashboard Supabase Proyekmu.

2. Di sidebar kiri, cari dan klik ikon Authentication (biasanya ikon kunci 🔑 atau perisai).

3. Kamu bakal liat halaman Authentication. Klik tab Providers.

   

4. Di sini kamu bakal liat daftar banyak banget provider login:

   • Email: Ini buat login klasik pake email dan password. Ini yang bakal kita aktifin dulu buat contoh dasar.
   • Phone (SMS): Login pake nomor HP dan kode OTP.
   • OAuth Providers: Google, GitHub, Facebook, Twitter, Apple, dll. Ini ngebolehin pengguna login pake akun mereka yang udah ada di layanan itu.
   • Dan lainnya.

5. Mengaktifkan Provider Email/Password:

   • Cari bagian Email. Biasanya dia udah aktif secara default, tapi pastiin aja toggle-nya Enabled.
   • Ada beberapa settingan di bawahnya yang bisa kamu atur (tapi buat awal, default biasanya oke):
     • Enable email confirmations?: Kalau dicentang, pengguna baru harus ngeklik link konfirmasi di email mereka sebelum akunnya aktif. Ini bagus buat mastiin emailnya valid.
     • Enable secure email change?: Pengaturan keamanan kalau pengguna mau ganti email.
     • Enable manual sign ups?: Izinkan pendaftaran baru.
     • Enable manual sign ins?: Izinkan login.
   • Jangan lupa klik Save kalau ada perubahan.

   

6. (Opsional) Mengaktifkan OAuth Provider (Contoh: Google):

   • Kalau kamu mau nambahin login pake Google:
     1. Klik provider Google.
     2. Dia bakal minta Client ID dan Client Secret. Kamu perlu dapet dua ini dari Google Cloud Console dengan cara bikin "OAuth 2.0 Client ID" buat aplikasimu. Proses ini agak panjang dan di luar cakupan panduan dasar ini, tapi Supabase ngasih link ke dokumentasi cara setup-nya.
     3. Kamu juga perlu ngopi Redirect URI (Callback URL) yang dikasih Supabase, terus masukin ke settingan OAuth Client ID-mu di Google Cloud Console.
     4. Setelah dapet Client ID dan Secret dari Google, masukin ke Supabase, terus centang Enabled dan Save.
   • Prosesnya mirip buat provider OAuth lain (GitHub, Facebook, dll.), masing-masing punya cara sendiri buat dapet Client ID/Secret dari platform mereka.

Buat panduan ini, kita bakal fokus pake provider Email/Password dulu biar simpel.

Langkah 2: Mengatur Template Email (Opsional tapi Bagus)

Supabase Auth bakal ngirim beberapa email otomatis ke pengguna (misal, email konfirmasi, email reset password). Kamu bisa ngustomisasi template email ini biar lebih sesuai sama brand aplikasimu.

1. Di halaman Authentication dashboard Supabase, klik tab Templates.
2. Kamu bisa ngedit template buat:
   • Confirm signup
   • Reset password
   • Change email address
   • Magic Link (login tanpa password)
   • Invite user
3. Kamu bisa ngubah subjek, isi email (pake variabel kayak {{ .SiteURL }}, {{ .Token }}), dan bahkan ngeset URL redirect setelah aksi di email dilakuin.

Buat awal, template default juga udah oke kok.

Langkah 3: (PENTING!) Memahami Tabel auth.users dan Kebijakannya

Pas kamu ngaktifin Supabase Auth, Supabase otomatis bikinin beberapa tabel khusus di skema auth di database PostgreSQL-mu. Yang paling penting adalah tabel auth.users.

• Tabel auth.users ini nyimpen semua informasi pengguna yang daftar ke aplikasimu (ID unik pengguna, email, kapan terakhir login, dll.). Password pengguna disimpen di sini dalam bentuk yang udah di-hash dengan aman, jadi kamu (atau siapa pun) gak bisa liat password aslinya.
• Kamu sebaiknya JANGAN ngubah atau ngakses tabel auth.users ini secara langsung pake query SQL atau Prisma Client (kecuali buat kasus yang sangat spesifik dan kamu tau persis apa yang kamu lakuin). Supabase Auth udah punya API dan mekanisme sendiri buat ngelola data di tabel ini dengan aman.
• Row Level Security (RLS) di auth.users: Secara default, tabel auth.users ini udah diproteksi ketat sama RLS. Pengguna biasa (anon key) gak bisa baca semua data user. Pengguna yang udah login pun biasanya cuma bisa baca data dirinya sendiri (tergantung policy). Ini penting buat privasi.

Gimana kalau aku butuh nyimpen info tambahan soal user (kayak nama lengkap, alamat, foto profil) yang gak ada di auth.users? Nah, praktik terbaiknya adalah bikin tabel sendiri (misal, tabel profiles atau pengguna_detail) yang punya relasi one-to-one ke tabel auth.users pake ID user sebagai foreign key. Di tabel profiles inilah kamu simpen semua info tambahan itu.

Kita bisa bikin tabel profiles ini nanti pake Table Editor atau Prisma Migrate, dan ngeset RLS-nya biar cuma user yang bersangkutan yang bisa ngedit profilnya sendiri, tapi mungkin user lain bisa liat beberapa info publiknya.

Langkah 4: (Jika Menggunakan Prisma) Sinkronisasi Skema auth (Opsional Lanjutan)

Kalau kamu pake Prisma dan pengen Prisma Client-mu juga "tau" soal tabel-tabel di skema auth (meskipun kita gak akan banyak manipulasi langsung), kamu bisa jalanin npx prisma db pull setelah Auth diaktifin. Ini bakal nyoba ngebaca struktur tabel auth.users dll. dari database Supabase dan nambahin modelnya ke schema.prisma-mu.

Tapi, ini langkah advance dan perlu hati-hati. Seringkali, kita cukup ngandelin Supabase JS Client buat semua urusan autentikasi dan gak perlu Prisma Client ngakses tabel auth secara langsung. Kita bisa fokus pake Prisma Client buat tabel data aplikasi kita sendiri (kayak tabel kue atau profiles).

Setup dasar Supabase Auth kita udah beres! Kita udah ngaktifin provider login Email/Password, dan udah tau sedikit soal tabel auth.users yang penting.

Di bagian berikutnya, kita bakal mulai ngoding frontend-nya: bikin halaman dan komponen React buat Registrasi dan Login pengguna pake Supabase JS Client! Ini bakal seru karena aplikasi Toko Kue kita bakal punya "pintu masuk" yang beneran!