Pengenalan Integrasi Supabase

Siap untuk dipasang dengan AI

Tutorial ini akan membantu Anda mengatur Supabase Authentication dengan plugin Login Sosial Capacitor. 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

• Bagaimana mengatur Supabase Authentication
• Bagaimana mengintegrasikan plugin Login Sosial Capacitor dengan Supabase Auth
• Pengaturan platform khusus untuk Android, iOS, dan Web
• Bagaimana menghandle nonces secara 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
   • Dapatkan URL proyek Supabase dan kunci anonim

2. Supabase JS SDK

   • Pasang Supabase di proyek Anda:

     npm install @supabase/supabase-js

3. Proyek Capacitor

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

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

4. Pengaturan Google untuk Platform-Spesifik

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

Aplikasi Contoh

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 sederhana menggunakan tabel PostgreSQL Supabase
• Penyimpanan data spesifik pengguna dengan RLS (Row Level Security)

Rincian Implementasi Utama

Pengelolaan Nonce

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

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

Pengujian JWT

Contoh implementasi termasuk pengujian JWT untuk memastikan:

• Token audiens sesuai dengan ID Klien Google yang telah dikonfigurasi
• Nonce sesuai dengan digest yang diharapkan
• Ulang coba otomatis pada gagal pengujian (terutama penting untuk iOS)

Pertimbangan Spesifik Platform

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

Langkah-Langkah Selanjutnya

Lanjutkan dengan panduan pengaturan:

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

Sign-In Apple

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