Pengenalan Integrasi Supabase

Ikhtisar

Tutorial ini akan memandu Anda melakukan setup Supabase Authentication dengan plugin Capacitor Social Login. Integrasi ini memungkinkan Anda menggunakan provider social login native (Google, Apple, Facebook, Twitter) di platform mobile sambil memanfaatkan Supabase Auth untuk autentikasi backend dan PostgreSQL untuk penyimpanan data.

Apa yang Akan Anda Pelajari

• Cara mengonfigurasi Supabase Authentication
• Cara mengintegrasikan plugin Capacitor Social Login dengan Supabase Auth
• Setup khusus platform untuk Android, iOS, dan Web
• Cara menangani nonce secara aman untuk Supabase

Yang Anda Butuhkan

Sebelum memulai, pastikan Anda sudah memiliki:

1. Proyek Supabase

   • Buat proyek di Dashboard Supabase
   • Aktifkan provider Google OAuth
   • Dapatkan URL proyek Supabase dan anon key Anda

2. Supabase JS SDK

   • Install Supabase di proyek Anda:

     npm install @supabase/supabase-js

3. Proyek Capacitor

   • Aplikasi Capacitor yang sudah ada
   • Plugin Capacitor Social Login sudah terinstal:

     npm install @capgo/capacitor-social-login
     npx cap sync

4. Setup Google per Platform

   • Selesaikan setup Google Sign-In untuk platform target Anda:
     • Setup Google Login Android
     • Setup Google Login iOS
     • Setup Web Google Login

Aplikasi Contoh

Contoh aplikasi lengkap tersedia di repositori:

Repositori Code: Anda bisa cek repositori code di sini

Aplikasi contoh ini mendemonstrasikan:

• Autentikasi email/password dengan Supabase
• Integrasi Google Sign-In (Android, iOS, dan Web)
• Key-value store sederhana menggunakan tabel Supabase PostgreSQL
• Penyimpanan data spesifik user dengan Row Level Security (RLS)

Detail Implementasi Utama

Penanganan Nonce

Supabase memerlukan penanganan nonce khusus demi keamanan. Implementasinya mengikuti dokumentasi React Native Google Sign In:

• Buat sebuah rawNonce (string acak yang aman untuk URL)
• Hash dengan SHA-256 untuk mendapatkan nonceDigest
• Gunakan nonceDigest ke Google Sign-In
• Gunakan rawNonce ke Supabase (Supabase melakukan hashing secara internal untuk perbandingan)

Validasi JWT

Implementasi contoh ini menyertakan validasi JWT untuk memastikan:

• Audience token sesuai dengan Google Client ID yang dikonfigurasi
• Nonce sesuai dengan digest yang diharapkan
• Retry otomatis saat validasi gagal (sangat penting untuk iOS)

Pertimbangan Spesifik Platform

• iOS: Caching token dapat menyebabkan masalah nonce - implementasi ini menanganinya secara otomatis
• Web: Wajib memanggil isLoggedIn() saat mount untuk menangani redirect OAuth
• Android: Implementasi standar dengan konfigurasi fingerprint SHA-1

Langkah Berikutnya

Lanjutkan dengan panduan setup:

• Supabase Google Login - Setup Umum - Ringkasan dan prasyarat
• Setup Android - Konfigurasi khusus Android
• Setup iOS - Konfigurasi khusus iOS
• Setup Web - Konfigurasi khusus Web

Apple Sign-In

• Supabase Apple Login - Setup Umum - Ringkasan dan prasyarat
• Setup iOS - Konfigurasi khusus iOS
• Setup Android - Konfigurasi khusus Android

Lanjutkan dari Pengenalan Integrasi Supabase

Jika Anda menggunakan Pengenalan Integrasi Supabase untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-social-login untuk kapabilitas native di Menggunakan @capgo/capacitor-social-login, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.