Pengenalan Integrasi Supabase

Ringkasan

Panduan 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.

Apakah yang Anda Pelajari

• Bagaimana mengonfigurasi Supabase Authentication
• Bagaimana mengintegrasikan plugin Capacitor Login Sosial dengan Supabase Auth
• Pengaturan Platform yang Spesifik untuk Android, iOS, dan Web
• Bagaimana menghandle nonces secara aman untuk Supabase

Apakah yang Anda Butuhkan

Sebelum Anda memulai, pastikan Anda telah memiliki:

1. Proyek Supabase

   • Membuat proyek di Dashboard Supabase
   • Mengaktifkan penyedia autentikasi Google
   • Mendapatkan URL proyek Supabase dan kunci anonim

2. Supabase JS SDK

   • Instal Supabase di proyek Anda:

     npm install @supabase/supabase-js

3. Membuat Capacitor Project

   • Menggunakan aplikasi Capacitor yang sudah ada
   • Plugin autentikasi sosial Capacitor terinstal:

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

4. Pengaturan Google yang Spesifik untuk Platform

   • Lengkapi pengaturan masuk Google untuk platform-target Anda:
     • Pengaturan Masuk Google untuk Android
     • Pengaturan Masuk Google untuk iOS
     • Pengaturan Masuk Google untuk Web

Contoh Aplikasi

Contoh aplikasi yang lengkap tersedia di repository:

Code Repository: Anda dapat menemukan repository code di sini

Aplikasi contoh menunjukkan:

• Autentikasi email/password dengan Supabase
• Integrasi Sign-In Google (Android, iOS, dan Web)
• Penyimpanan nilai kunci dengan menggunakan tabel PostgreSQL Supabase
• Penggunaan penyimpanan data spesifik pengguna dengan Level Keamanan Baris (RLS)

Rincian Implementasi Utama

Pengelolaan Nonce

Supabase memerlukan pengelolaan nonce khusus untuk keamanan. Implementasi mengikuti dokumentasi Sign In Google React Native Buat sebuah:

• (string acak aman URL) rawNonce email/password authentication with Supabase
• Hash dengan SHA-256 untuk mendapatkan nonceDigest
• Pass nonceDigest ke Google Sign-In
• Pass rawNonce ke Supabase (Supabase menghashinya secara internal untuk perbandingan)

Validasi JWT

Contoh implementasi termasuk validasi JWT untuk memastikan:

• Token audiens sesuai dengan ID Klien Google yang telah dikonfigurasi
• Nonce sesuai dengan digest yang diharapkan
• Ulangi secara otomatis pada gagal validasi (terutama penting untuk iOS)

Pertimbangan Spesifik Platform

• iOS: Token caching dapat menyebabkan masalah nonce - implementasi ini menangani hal ini secara otomatis
• Web: Harus dipanggil isLoggedIn() On mount untuk menghandle redirect OAuth
• Android: Implementasi standar dengan konfigurasi fingerprint SHA-1

Langkah Selanjutnya

Teruskan dengan panduan pengaturan:

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

Pengaturan Tanda Tangan Apple

• Pengaturan Login Apple Supabase - Pengaturan Umum - Ringkasan dan persyaratan sebelumnya
• Pengaturan iOS - Konfigurasi iOS khusus
• Android Setup - Konfigurasi Android khusus

Teruskan dari Pengenalan Integrasi Supabase

Jika Anda menggunakan Pengenalan Integrasi Supabase untuk merencanakan autentikasi dan alur akun, hubungkannya dengan Menggunakan @capgo/capacitor-login-social untuk kemampuan native di Menggunakan @capgo/capacitor-login-social Menggunakan @capgo/capacitor-login-social untuk detail implementasi di @capgo/capacitor-login-social @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.