Login Apple Supabase - Pengaturan Umum

Ringkasan

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

Prasyarat

Pastikan Anda telah memiliki:

1. Buat proyek Supabase

2. Baca panduan Pengaturan Umum Login Apple Baca panduan untuk mengatur kredential OAuth Apple

3. Ikuti panduan spesifik platform untuk mengatur kredential OAuth Apple untuk platform target Anda:

   • Pengaturan Android
   • Pengaturan iOS
   • Pengaturan Web

   Peringatan

   Sebelum memulai tutorial Supabase, Anda perlu mengenerate ID klien untuk platform yang Anda rencanakan untuk digunakan.

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

Mengaktifkan penyedia OAuth Apple di Supabase

1. Dashboard Supabase Klik pada proyek Anda

2. Pilih Proyek Supabase

   

3. Menu Autentikasi Supabase Authentication Klik pada tab

   

4. Pilih Tab Supabase Providers Pilih Menu Autentikasi Supabase

   

5. Cari Apple provider

   

6. Aktifkan Apple provider

   

7. Isi konfigurasi ID klien:

   Perlu diingat

   Jika Anda menggunakan login Apple untuk iOS, ID klien adalah sama dengan ID aplikasi Anda. Jika Anda menggunakan login Apple untuk Android atau Web, ID klien adalah sama dengan ID layanan Anda. Jika Anda menggunakan kedua-duanya, Anda perlu menyediakan baik ID aplikasi maupun ID layanan.

   

8. Klik pada tombol Save button

   

   Catatan

   Anda TIDAK PERLU MENGATURKAN setup Secret key (for OAuth)Kami akan melakukan implementasi backend khusus untuk menghandle login Apple.

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

Menggunakan Bantuan Autentikasi

Implementasi lengkap termasuk fungsi bantuan authenticateWithAppleSupabase() yang mengelola seluruh alur Sign-In Apple dengan Supabase. Fungsi ini:

• Menginisialisasi Sign-In Apple dengan konfigurasi spesifik platform
• Mengelola alur autentikasi (native pada iOS, redirect OAuth pada Android/Web)
• Mengambil token identitas dari Apple
• Menginisialisasi Sign-In ke Supabase dengan token identitas

Implementasi Lengkap

Implementasi lengkap tersedia dalam file aplikasi contoh. supabaseAuthUtils.ts Penggunaan Dasar

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);
}

Bagaimana Cara Kerjanya

Fungsi bantuan secara otomatis mengatasi perbedaan spesifik platform:

• iOS: Menggunakan Sign-In Apple Asli (tidak perlu URL redirect, menggunakan ID aplikasi secara otomatis)
• Android: Menggunakan alur arus OAuth dengan fungsi edge belakang (memerlukan ID Layanan)
• Web: Menggunakan alur arus popup OAuth (memerlukan ID Layanan dan URL halaman saat ini sebagai redirect)

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