Selamat! Jika Anda mengikuti artikel sebelumnya, Anda sudah punya aplikasi ZenFocus yang terhubung ke database Supabase.
Saat ini, aplikasi Anda seperti Papan Tulis Umum di Balai Desa. Siapapun yang membuka link aplikasi Anda bisa melihat tugas "Beli Susu" Anda. Lebih parah lagi, jika orang lain menghapus tugas Anda, data itu hilang selamanya.
Solusinya? Kita butuh Authentication (Login) dan Authorization (Privasi).
Di tutorial ini, kita akan mengubah "Papan Tulis Umum" tadi menjadi "Buku Harian Pribadi". Kita akan menambahkan fitur Login Google dan memastikan setiap user hanya bisa melihat datanya sendiri.
Persiapan: Strategi "Kunci & Gembok"
Sebelum menyuruh AI bekerja, kita (sebagai Arsitek) harus menyiapkan sistem keamanannya dulu di Supabase. Ini disebut RLS (Row Level Security).
Bayangkan RLS seperti sistem kartu akses di apartemen. Semua orang bisa masuk gedung (aplikasi), tapi kartu Anda hanya bisa membuka pintu kamar Anda sendiri (data Anda).
Langkah 1: Aktifkan Fitur Login (Di Supabase)
Lakukan ini secara manual di Dashboard Supabase untuk menghemat kuota chat Lovable.
- Buka project ZenFocus Anda di Supabase.
- Di menu kiri, klik icon Authentication.
Pilih Providers. Cari Google, lalu aktifkan (Enable).
Catatan: Untuk mengaktifkan Google, Anda perlu "Client ID" dari Google Cloud Console. Jika ini terlalu rumit untuk pemula, aktifkan saja "Email" (di menu Providers > Email). Tutorial ini tetap bekerja apapun metode loginnya.
Apabila ingin mengikutinya, anda bisa cek di akhir artikel ini.
- Pastikan statusnya Enabled dan klik Save.
- Uncheck confirm email (khusus untuk latihan saja) lalu klik save changes.
Langkah 2: Pasang "Gembok" di Database (RLS)
Ini langkah terpenting. Kita harus memberitahu tabel tasks bahwa ia milik pribadi.
- Masuk ke Table Editor, pilih tabel
tasks.
- Kita butuh kolom untuk menyimpan ID pemilik. Klik tanda + (New Column).
- Name:
user_id - Type:
uuid - Default Value: Klik icon gear/settings, pilih
auth.uid(). - Klik Save.
- Name:
- Sekarang, lihat bagian atas tabel. Klik tombol RLS is disabled (atau No active RLS policies) -> Klik Enable RLS.
- Klik Add RLS Policy -> Pilih Quick Start (atau templates).
- Pilih template: "Enable users to view their own data only"
- Intinya, kita ingin aturan:
auth.uid() = user_id. - Ulangi untuk kebijakan INSERT, UPDATE, dan DELETE dengan logika yang sama.
- Intinya, kita ingin aturan:
- Save policy tersebut.
Bingung? Tidak masalah. Jika langkah 4 & 5 terlalu teknis, cukup pastikan kolom user_id sudah ada. Kita bisa minta tolong Lovable membereskan sisanya lewat prompt nanti.
Langkah 3: Operasi "Satpam Digital" (Di Lovable)
Kembali ke Lovable. Wajib lanjutkan di Session Chat ZenFocus yang lama!
Kita akan meminta Lovable untuk:
- Membuat halaman Login.
- Memastikan setiap tugas baru ditandai dengan ID pengguna.
- Menyaring data agar hanya tampil milik pengguna yang sedang login.
Copy-paste prompt sakti ini:
- Apabila lovable AI meminta untuk modify database, klik allow.
- Tunggu hingga proses selesai.
Langkah 4: Uji Coba (The Moment of Truth)
Setelah Lovable selesai menulis kode, mari kita buktikan apakah privasi benar-benar terjaga.
Skenario Tes:
- User A: Buka preview aplikasi. Anda akan dihadang halaman Login. Daftar/Login menggunakan email
[email protected]. - Input Data: Buat tugas baru: "Rapat jam 9".
- Logout: Klik tombol logout.
- User B: Login lagi menggunakan email berbeda, misal
[email protected]. - Cek Data: Apakah Anda melihat tugas "Rapat jam 9" milik Andi?
- Jika TIDAK, selamat! Sistem keamanan Anda berhasil. Budi punya ruang kerjanya sendiri.
- Login Ulang User A: Masuk lagi sebagai Andi. Tugas "Rapat jam 9" harusnya muncul kembali.
Langkah Opsional : Mendapatkan Client ID Google OAuth 2.0
- Pergi ke https://console.developers.google.com/
- Buat proyek baru, untuk kali ini kita akan menamainya dengan ZenFocus.
- Klik Create
- Arahkan cursor ke sidebar kiri (di bawah tulisan API) lalu klik credentials.
- Klik OAuth client ID (jika anda diminta untuk permintaan consent, ikuti saja perintahnya)
Konfigurasi Consent Screen (Langkah Tambahan):
- Menu: APIs & Services > OAuth consent screen.
- Pilih External > Create.
- Isi App Name ("ZenFocus") dan Email Developer. Save & Continue sampai selesai.
- Klik Create OAuth client, lalu isikan formnya. Jika sudah klik create
Untuk mendapatkan Authorized redirect URIs, kalian kalian perlu ke Supabase > Authentication > Providers > Lalu klik Google, salin Callback URL
- Salin Client ID dan Client Secret ke Supabase Providers, lalu klik Save
Tips: Jangan Sampai "Bocor"
Dalam dunia software engineering, keamanan data adalah harga mati.
- Peringatan RLS: Langkah 2 (Mengaktifkan RLS di Supabase) adalah kunci mutlak. Jika Anda hanya memfilter lewat kode Lovable (Frontend) tapi lupa mengaktifkan RLS di Supabase (Backend), hacker masih bisa mencuri data orang lain lewat backdoor.
- Prompting Bahasa Inggris: Perhatikan prompt di atas menggunakan istilah spesifik seperti redirect, fetch, dan insert. Ini memastikan Lovable menggunakan fungsi Supabase yang tepat, bukan fungsi buatan sendiri yang rawan bug.
Kesimpulan: Anda Baru Saja Naik Level!
Selamat! "ZenFocus" kini bukan lagi sekadar proyek mainan.
- Part 1: Kita belajar UI/UX (Tampilan).
- Part 2: Kita belajar Database (Memori).
- Part 3: Kita belajar Security (Privasi). (artikel ini)
Aplikasi Anda kini memiliki fitur dasar yang sama dengan aplikasi startup bernilai miliaran rupiah.
Apa Selanjutnya?
Aplikasi sudah canggih, tapi masih berjalan di alamat lovable.app yang panjang. Di artikel berikutnya, kita akan membahas langkah terakhir: "Cara Meng-online-kan Aplikasi Lovable dengan Domain Sendiri (.com) agar Terlihat Profesional".
Siap menjadi founder startup? Lanjut ke Part 4
