Pengaturan Umum Supabase Apple Login

Ringkasan

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 seluruh platform iOS, Android, dan Web.

Prasyarat

Sebelum memulai, pastikan Anda telah:

1. Membuat proyek Supabase

2. Membaca panduan Pengaturan Umum Apple Login untuk menyiapkan kredensial OAuth Apple

3. Mengikuti panduan khusus platform masing-masing untuk menyiapkan kredensial OAuth Apple untuk platform target Anda:

   • Pengaturan Android
   • Pengaturan iOS
   • Pengaturan Web

   Note

   Sebelum memulai tutorial Supabase, Anda perlu membuat ID klien untuk platform yang berencana Anda gunakan.

   Untuk iOS, ID klien sama dengan ID aplikasi Anda. Untuk Android dan Web, ID klien sama dengan ID layanan Anda. Anda akan menggunakannya di langkah 7 panduan ini.

Mengaktifkan penyedia OAuth Apple di Supabase

1. Buka Dasbor Supabase Anda

2. Klik pada proyek Anda

   

3. Buka menu Authentication

   

4. Klik tab Providers

   

5. Temukan penyedia Apple

   

6. Aktifkan penyedia Apple

   

7. Isi konfigurasi ID klien:

   Note

   Jika Anda menggunakan Apple login untuk iOS, ID klien sama dengan ID aplikasi Anda. Jika Anda menggunakan Apple login untuk Android atau Web, ID klien sama dengan ID layanan Anda. Jika Anda menggunakan keduanya, Anda perlu menyediakan ID aplikasi dan ID layanan.

   

8. Klik tombol Save

   

   Note

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

Voilà, Anda sekarang telah mengaktifkan Apple Sign-In dengan Supabase Authentication 🎉

Menggunakan Authentication Helper

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

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

Implementasi Lengkap

Implementasi lengkap tersedia di file supabaseAuthUtils.ts contoh aplikasi.

Penggunaan Dasar

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Masuk:', result.user);
  // Navigasi ke area yang sudah diautentikasi
} else {
  console.error('Kesalahan:', result.error);
}

Cara Kerjanya

Fungsi helper secara otomatis menangani perbedaan khusus platform:

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

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