Supabase Apple Login - Setup Umum

Ikhtisar

Panduan ini akan membantu Anda mengintegrasikan Apple Sign-In dengan Supabase Authentication. Apple Sign-In menyediakan metode autentikasi yang aman dan berfokus pada privasi yang bekerja di platform iOS, Android, dan Web.

Prerequisites

Sebelum memulai, pastikan Anda sudah:

1. Membuat proyek Supabase

2. Baca Setup Umum Apple Login panduan untuk setup kredensial Apple OAuth

3. Ikuti panduan khusus platform untuk setup kredensial Apple OAuth di platform target Anda:

   • Setup Android
   • Setup iOS
   • Setup Web

   Catatan

   Sebelum memulai tutorial Supabase, Anda perlu membuat client ID untuk platform yang akan digunakan.

   Untuk iOS, client ID sama dengan app ID Anda. Untuk Android dan Web, client ID sama dengan service ID Anda. Anda akan menggunakannya di langkah 7 panduan ini.

Mengaktifkan provider Apple OAuth di Supabase

1. Buka Dashboard Supabase

2. Klik proyek Anda

   

3. Silakan buka Authentication menu

   

4. Klik pada Providers tab

   

5. Temukan Apple provider

   

6. Aktifkan Apple provider

   

7. Isi konfigurasi client ID:

   Catatan

   Jika Anda menggunakan Apple login untuk iOS, client ID-nya sama dengan app ID Anda. Jika Anda menggunakan Apple login untuk Android atau Web, client ID-nya sama dengan service ID Anda. Jika Anda menggunakan keduanya, Anda harus menyediakan app ID dan service ID.

   

8. Klik pada Save tombol

   

   Catatan

   Anda TIDAK PERLU setup Secret key (for OAuth). Kami akan melakukan implementasi backend kustom untuk menangani Apple login.

Selesai! Anda sudah mengaktifkan Apple Sign-In dengan Supabase Authentication 🎉

Menggunakan Authentication Helper

Implementasi lengkapnya mencakup sebuah helper function authenticateWithAppleSupabase() yang menangani seluruh alur Apple Sign-In dengan Supabase. Fungsi ini:

• Menginisialisasi Apple Sign-In dengan konfigurasi spesifik platform
• Menangani alur autentikasi (native di iOS, OAuth redirect di Android/Web)
• Mengekstrak identity token dari Apple
• Login ke Supabase menggunakan identity token

Implementasi Lengkap

Implementasi lengkapnya tersedia di aplikasi contoh supabaseAuthUtils.ts Anda.

Penggunaan Dasar

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

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

Cara Kerjanya

Fungsi helper secara otomatis menangani perbedaan antar platform:

• iOS: Menggunakan native Apple Sign-In (tidak butuh redirect URL, menggunakan bundle ID secara otomatis)
• Android: Menggunakan alur OAuth redirect dengan backend edge function (butuh Service ID)
• Web: Menggunakan alur popup OAuth (memerlukan Service ID dan URL halaman saat ini sebagai redirect)

Fungsi ini mengembalikan identity token dari Apple, yang kemudian digunakan untuk autentikasi dengan Supabase menggunakan supabase.auth.signInWithIdToken().

Lanjutkan dari Supabase Apple Login - General Setup

Jika Anda menggunakan Supabase Apple Login - Setup Umum 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.