Supabase Apple Login di Android

Prerequisites

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

• halaman Supabase Apple Login - Setup Umum.

Penting

Apple Sign-In di Android memerlukan backend server karena Apple tidak menyediakan dukungan native Android. Kita akan menggunakan Supabase Edge Function sebagai backend.

Langkah 1: Deploy Backend Edge Function

Pertama, kita perlu deploy Supabase Edge Function yang akan menangani callback OAuth Apple.

1. Buka direktori proyek Supabase Anda

   cd your-project/supabase

2. Buat edge function (jika belum ada)

   supabase functions new apple-signin-callback

3. Salin edge function code

   Implementasi lengkap edge function tersedia di aplikasi contoh.

   Salin file berikut ke proyek Anda:

   • supabase/functions/apple-signin-callback/index.ts - Edge function utama code
   • supabase/functions/apple-signin-callback/deno.json - Import map untuk dependensi (termasuk jose library untuk penandatanganan JWT)

4. Konfigurasi verifikasi JWT

   Endpoint callback OAuth Apple harus bersifat publik (tanpa autentikasi) karena Apple akan melakukan redirect ke endpoint tersebut. Perbarui supabase/config.toml file Anda:

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   Penting

   Pengaturan verify_jwt = false membuat endpoint ini publik. Ini diperlukan karena redirect OAuth Apple tidak menyertakan header autentikasi Supabase. Endpoint ini memvalidasi alur OAuth itu sendiri.

5. Deploy the function

   supabase functions deploy apple-signin-callback

6. Dapatkan URL fungsi Anda

   Setelah deployment, Anda akan mendapatkan URL seperti:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Jika tidak menemukannya, Anda dapat melakukan hal berikut:

   1. Buka https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. Klik pada apple-signin-callback URL fungsi untuk menyalinnya.

   Simpan URL ini

   Anda akan memerlukan URL ini di langkah berikutnya saat mengonfigurasi Apple Developer Portal.

Langkah 2: Konfigurasi Apple Developer Portal

Sekarang kita perlu mengonfigurasi Apple Developer Portal dengan URL backend dan mendapatkan semua nilai yang diperlukan.

URL fungsi

Pastikan Anda sudah memiliki URL Supabase Edge Function dari Langkah 1 sebelum melanjutkan. URL ini diperlukan untuk mengatur Return URL di Apple Developer Portal.

1. Ikuti Panduan Setup Apple Login untuk Android

   Selesaikan panduan Apple Login Android Setup ke:

   • Buat Service ID
   • Buat private key (file .p8)
   • Dapatkan Team ID dan Key ID Anda
   • Konfigurasi Return URL

2. Atur Return URL di Apple Developer Portal

   Saat mengonfigurasi Return URL di Apple Developer Portal (langkah 6.9 dari panduan Apple), gunakan URL Supabase Edge Function Anda:

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Penting: Gunakan URL Supabase Edge Function

   JANGAN gunakan redirect URL dari panduan Apple Login Android Setup. Panduan tersebut menggunakan URL server backend kustom. Untuk integrasi Supabase, Anda harus gunakan URL Supabase Edge Function Anda sebagai gantinya.

   Harus Cocok Persis

   Return URL harus sesuai persis dengan konfigurasi Anda di sini. Apple sangat ketat dalam mencocokkan redirect URI.

3. Kumpulkan semua nilai yang diperlukan

   Setelah menyelesaikan panduan setup Apple, Anda seharusnya memiliki:

   • APPLE_TEAM_ID: Apple Developer Team ID Anda
   • APPLE_KEY_ID: Key ID dari Apple Developer Portal
   • APPLE_PRIVATE_KEY: File private key .p8 Anda (perlu di-encode base64)
   • ANDROID_SERVICE_ID: Apple Service ID Anda (contoh: com.example.app.service)
   • BASE_REDIRECT_URL: URL deep link Anda (mis., capgo-demo-app://path)

   URL Deep Link

   Panduan BASE_REDIRECT_URL adalah skema deep link yang dikonfigurasi di AndroidManifest.xml. Di sinilah backend akan mengalihkan setelah autentikasi.

   Nilai deep link Anda bergantung pada android:scheme="capgo-demo-app" code. Jika Anda telah mengatur android:scheme="capgo-demo-app" di file AndroidManifest.xml, maka deep link Anda akan menjadi capgo-demo-app://path.

Langkah 3: Atur Supabase Secrets

Sekarang kita perlu mengatur variabel lingkungan (secrets) untuk Supabase Edge Function.

1. Enkode kunci privat Anda

   Pertama, enkode kunci privat Apple Anda (file .p8) ke base64:

   base64 -i AuthKey_XXXXX.p8

   Salin seluruh output (ini adalah satu string panjang).

2. Atur secrets menggunakan Supabase CLI

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   Ganti Placeholder

   Ganti semua nilai placeholder dengan nilai aktual Anda dari Langkah 2.

3. Alternatif: Atur secrets di Supabase Dashboard

   Jika Anda lebih suka menggunakan dashboard:

   1. Buka dashboard proyek Supabase Anda
   2. Buka Edge Functions → Pengaturan → Secrets
   3. Tambahkan setiap variabel secret beserta nilainya

Konfigurasi Aplikasi Android

Panduan panduan Apple Login Android Setup sudah mencakup konfigurasi aplikasi Android Anda:

• Menambahkan deep link intent filter ke AndroidManifest.xml
• Menambahkan onNewIntent handler ke MainActivity.java

Pastikan Anda telah menyelesaikan langkah-langkah tersebut sebelum melanjutkan. Deep link scheme yang Anda konfigurasikan di sana akan menjadi BASE_REDIRECT_URL di Langkah 3.

Langkah 4: Gunakan Authentication Helper

Sekarang Anda dapat menggunakan authentication helper di aplikasi Anda code.

Implementasi

Implementasi lengkapnya tersedia di aplikasi contoh supabaseAuthUtils.ts Anda.

Menggunakan Authentication Helper

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

Perbarui Helper Function

Saat menggunakan authenticateWithAppleSupabase helper function, Anda harus perbarui nilai-nilai berikut agar sesuai dengan konfigurasi Anda:

1. Update redirectUrl - Setel ini ke URL Supabase Edge Function Anda:

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. Update clientId - Atur ini ke Apple Service ID Anda:

   await SocialLogin.initialize({
     apple: {
       clientId: isIOS
         ? undefined // iOS uses bundle ID automatically
         : 'your.service.id.here', // Your Apple Service ID for Android
       redirectUrl: redirectUrl,
     },
   });

   Penting

   Ganti 'your.service.id.here' dengan Apple Service ID asli Anda (nilai yang sama yang Anda gunakan untuk ANDROID_SERVICE_ID di Langkah 3).

Lihat implementasi lengkap sebagai referensi.

Langkah 5: Tes Integrasi

1. Build dan jalankan aplikasi Android Anda

   npx cap sync android
   npx cap run android

2. Tes alur autentikasi

   • Ketuk tombol “Sign in with Apple”
   • Anda seharusnya melihat halaman Apple OAuth di browser
   • Setelah autentikasi, Anda akan diarahkan kembali ke aplikasi Anda
   • Cek log console untuk melihat apakah ada error

3. Verifikasi alurnya

   Alur lengkapnya adalah:

   1. Pengguna mengetuk “Sign in with Apple”
   2. App membuka browser dengan Apple OAuth
   3. Pengguna melakukan autentikasi dengan Apple
   4. Apple mengalihkan ke: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Edge function menukar code dengan token
   6. Edge function mengalihkan ke: your-app://path?id_token=...&access_token=...
   7. App Android menerima deep link dan memproses identity token
   8. App login ke Supabase menggunakan identity token

Pemecahan Masalah

Jika autentikasi gagal:

• Redirect URI tidak cocok: Pastikan Return URL di Apple Developer Portal sama persis dengan APPLE_REDIRECT_URI secret
• Deep link tidak berfungsi: Periksa apakah AndroidManifest.xml intent filter sudah sesuai dengan BASE_REDIRECT_URL
• Secret tidak ditemukan: Pastikan semua secret sudah diatur dengan benar menggunakan supabase secrets list
• Token exchange gagal: Periksa log edge function di Supabase Dashboard untuk pesan error detail
• App tidak menerima callback: Pastikan onNewIntent sudah diimplementasikan dengan benar di MainActivity
• Tinjau aplikasi contoh code sebagai referensi

Cara Kerjanya

Di Android, Apple Sign-In menggunakan alur redirect OAuth:

1. Inisialisasi: Plugin diinisialisasi dengan Service ID dan URL redirect backend Anda
2. Alur OAuth: Membuka browser/Chrome Custom Tab dengan halaman OAuth Apple
3. Callback Backend: Apple mengarahkan ke Supabase Edge Function Anda dengan code otorisasi
4. Pertukaran token: Edge function menukar code dengan token menggunakan endpoint token Apple
5. Redirect deep link: Edge function mengarahkan kembali ke aplikasi Anda dengan identity token
6. Autentikasi Supabase: Aplikasi menerima token dan melakukan sign in ke Supabase

Alur ini diperlukan karena Apple tidak menyediakan dukungan native Android untuk Sign in with Apple.

Lanjutkan dari Supabase Apple Login di Android

Jika Anda menggunakan Supabase Apple Login di Android 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.