Supabase Google Login di iOS

Pendahuluan

Panduan ini akan membantu Anda mengintegrasikan Google Sign-In dengan Supabase Authentication di iOS. Kami mengasumsikan Anda sudah menyelesaikan:

• pengaturan Google Login iOS
• pengaturan Supabase Google Login - Setup Umum.

Implementasi

Implementasi lengkapnya tersedia di aplikasi contoh pada file supabaseAuthUtils.ts file. Panduan ini menjelaskan konsep utama dan cara menggunakannya.

Menggunakan Authentication Helper

Panduan authenticateWithGoogleSupabase function menangani seluruh alur autentikasi:

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithGoogleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Cara Kerjanya

Untuk penjelasan detail mengenai alur autentikasi, termasuk pembuatan nonce, validasi JWT, dan login Supabase, lihat “Cara Kerja” di panduan General Setup.

Catatan Penting

Masalah Nonce dan Caching Token iOS

Masalah Caching Nonce pada iOS

Di iOS, Google Sign-In bisa meng-cache token, yang dapat menyebabkan validasi nonce gagal. Fungsi ini validateJWTToken akan mendeteksi hal tersebut dan menanganinya secara otomatis:

1. Deteksi Otomatis: Fungsi akan mengecek apakah nonce di dalam token sesuai dengan yang diharapkan nonceDigest
2. Retry Otomatis: Jika validasi gagal, sistem akan otomatis logout dari Google dan mencoba kembali satu kali
3. Penanganan error: Jika retry juga gagal, maka error akan dikembalikan

Mengapa hal ini terjadi: SDK iOS Google Sign-In melakukan cache token demi performa. Saat token yang di-cache dikembalikan, token tersebut mungkin dibuat dengan nonce yang berbeda (atau tanpa nonce), sehingga menyebabkan mismatch.

Solusinya: Implementasi ini menangani masalah tersebut secara otomatis dengan melakukan logout dan retry, yang memaksa Google membuat token baru dengan nonce yang benar.

Solusi Manual (jika retry otomatis tidak berhasil):

// Logout first to clear cached tokens
await SocialLogin.logout({ provider: 'google' });

// Then authenticate
const result = await authenticateWithGoogleSupabase();

Ini memastikan token baru didapatkan dengan nonce yang benar.

Untuk referensi code lengkap, lihat bagian Referensi Code Lengkap di panduan General Setup.

Catatan Penting

Penanganan Nonce

Implementasi nonce mengikuti pola dari dokumentasi React Native Google Sign In:

• rawNonce dikirim ke Supabase signInWithIdToken()
• Supabase membuat hash dari rawNonce dan membandingkannya dengan nonceDigest yang disertakan dalam ID token dari Google Sign-In
• nonceDigest (hash SHA-256, hex-encoded) dikirim ke nonce parameter di Google Sign-In API

Mekanisme Retry Otomatis

Panduan authenticateWithGoogleSupabase fungsi menyertakan retry parameter:

• Panggilan pertama (retry=false): Jika validasi gagal, otomatis logout dan mencoba sekali lagi
• Panggilan retry (retry=true): Jika validasi gagal lagi, langsung mengembalikan error

Ini menangani masalah caching token iOS secara otomatis.

Pemecahan Masalah

Jika autentikasi gagal:

• Nonce tidak cocok: Fungsi akan mencoba otomatis - cek console logs untuk detailnya. Jika tetap gagal, silakan logout manual terlebih dahulu
• Audience tidak valid: Pastikan Google Client IDs Anda sudah sesuai di Google Cloud Console dan Supabase (baik iOS maupun Web client IDs)
• Validasi token gagal: Pastikan Anda menggunakan mode: 'online' pada pemanggilan initialize untuk mendapatkan idToken
• Konfigurasi Info.plist: Pastikan Info.plist memiliki URL schemes dan GIDClientID yang benar
• Tinjau aplikasi contoh code sebagai referensi

Lanjutkan Supabase Google Login di iOS

Jika Anda menggunakan Supabase Google Login di iOS 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.