Pengenalan Integrasi Supabase

Ringkasan

Tutorial ini akan mengantumkan Anda melalui pengaturan Supabase Authentication dengan plugin Capacitor Login Sosial. Integrasi ini memungkinkan Anda menggunakan penyedia login sosial asli (Google, Apple, Facebook, Twitter) pada platform mobile sambil memanfaatkan Supabase Auth untuk autentikasi backend dan PostgreSQL untuk penyimpanan data.

Apa yang Anda Pelajari

• Cara mengatur Supabase Authentication
• Cara mengintegrasikan Capacitor plugin Login Sosial dengan Supabase Auth
• Pengaturan spesifik platform untuk Android, iOS, dan Web
• Cara menghandle nonce dengan aman untuk Supabase

Apa yang Anda Butuhkan

Sebelum Anda memulai, pastikan Anda memiliki:

1. Proyek Supabase

   • Buat proyek di Dashboard Supabase
   • Aktifkan penyedia OAuth Google
   • Ambil URL proyek Supabase dan kunci anonim Anda

2. Supabase JS SDK

   • Pasang Supabase di proyek Anda:

     npm install @supabase/supabase-js

3. Proyek Capacitor

   • Aplikasi Capacitor yang sudah ada
   • Plugin Login Sosial Capacitor terpasang:

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

4. Pengaturan Google untuk Platform-Spesifik:

   • Lakukan pengaturan Sign-In Google untuk platform target Anda:
     • Pengaturan Login Google untuk Android
     • Pengaturan Login Google untuk iOS
     • Pengaturan Login Google untuk Web

Contoh Aplikasi

Aplikasi contoh yang lengkap tersedia di repository:

Code Repository: Anda dapat menemukan repository code di sini

Contoh aplikasi menunjukkan:

• Autentikasi email/password dengan Supabase
• Pengintegrasian Sign-In Google (Android, iOS, dan Web)
• Penyimpanan nilai sederhana menggunakan tabel PostgreSQL Supabase
• Penggunaan penyimpanan data spesifik pengguna dengan RLS (Row Level Security)

Rincian Implementasi Utama

Pengelolaan Nonce

Supabase memerlukan pengaturan nonce khusus untuk keamanan. Implementasinya mengikuti dokumentasi Google Sign In untuk React Native:

• Buatlah rawNonce string acak yang aman untuk URL
• Hash dengan SHA-256 untuk mendapatkan nonceDigest
• Kirim nonceDigest ke Google Sign-In
• Kirim rawNonce ke Supabase (Supabase menghashinya secara internal untuk perbandingan)

Validasi JWT

Contoh implementasi termasuk validasi JWT untuk memastikan:

• Audien token cocok dengan ID Klien Google yang telah Anda konfigurasi
• Nonce cocok dengan digest yang diharapkan
• Ulangi otomatis pada gagal validasi (terutama penting untuk iOS)

Konsiderasi Platform-Spesifik

• iOS: Masalah nonce dapat disebabkan oleh caching token - implementasi ini menangani hal ini secara otomatis
• Web: Harus dipanggil isLoggedIn() untuk menghandle redirect OAuth pada saat mount
• Android: Implementasi standar dengan konfigurasi fingerprint SHA-1

Langkah-Langkah Selanjutnya

Lanjutkan dengan panduan pengaturan:

• Supabase Google Login - Pengaturan Umum - Ringkasan dan syarat-syarat
• Pengaturan Android - Pengaturan khusus Android
• Pengaturan iOS - Pengaturan khusus iOS
• Pengaturan Web - Pengaturan khusus Web

Apple Sign-In

• Konfigurasi Apple Sign-In - Umum Supabase - Ringkasan dan persyaratan
• Pengaturan iOS - Pengaturan khusus iOS
• Pengaturan Android - Pengaturan khusus Android

Teruskan dari Pengenalan Integrasi Supabase

Jika Anda menggunakan Pengenalan Integrasi Supabase untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-sosial untuk kemampuan asli dalam Menggunakan @capgo/capacitor-login-sosial, @capgo/capacitor-login-sosial untuk detail implementasi dalam @capgo/capacitor-login-sosial, @capgo/capacitor-passkey untuk detail implementasi dalam @capgo/capacitor-passkey, @capgo/capacitor-biometrik-asli untuk detail implementasi dalam @capgo/capacitor-biometrik-asli, dan Autentikasi dua faktor untuk detail implementasi dalam Autentikasi dua faktor.