Setup Autentikasi Supabase dengan Capacitor Plugin Login Sosial

Menyiapkan autentikasi di aplikasi mobile dapat kompleks, tetapi kombinasi Supabase dengan Capgo makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

Mengapa Menggunakan Supabase dengan Login Sosial? Supabase @capgo/capacitor-social-login plugin

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login
menawarkan autentikasi sosial asli di platform iOS, Android, dan web. Bersama-sama, mereka menyediakan:
Kompatibilitas lintas platform
Integrasi basis data waktu nyata
Pengelolaan pengguna bawaan

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

Proyek Capacitor yang telah disetel
Akun dan proyek Supabase
Akun pengembang untuk penyedia jejaring sosial yang dipilih (Google, Apple, Facebook)

Pertama, pasang plugin login sosial Capgo:

npm install @capgo/capacitor-social-login
npx cap sync

Langkah 2: Atur Proyek Supabase

Buat dan Konfigurasi Proyek Supabase Anda

Membuat Proyek Supabase:
- Pergi ke supabase.com dan mendaftar/masuk
- Klik “Proyek Baru”
- Pilih Organisasi Anda
- Masukkan Nama Proyek (misalnya, “Auth MyApp”)
- Atur Kata Sandi Basis Data (simpanlah dengan aman)
- Pilih Wilayah (pilih yang paling dekat dengan pengguna Anda)
- Klik “Buat proyek baru”
Dapatkan kredensial proyek Anda:
- Setelah dibuat, pergi ke Pengaturan > API
- Salin URL Proyek Anda (misal, https://your-project-ref.supabase.co)
- Salin kunci Anda publik anonim API kunci
- Simpanlah untuk digunakan nanti di aplikasi Anda

Konfigurasi Pengaturan Autentikasi

Setup pengaturan autentikasi umum:
- Lihat Autentikasi > Pengaturan
- Di bawah Pengaturan Umum:
  - Atur URL Situs To URL aplikasi Anda (misalnya, https://yourdomain.com atau http://localhost:3000 untuk pengembangan)
  - Tambahkan URL tambahan Jika perlu: Konfigurasi pengaturan email
```
http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)
```
(opsional tetapi disarankan): Bawah
- Pengaturan SMTP , konfigurasi penyedia email AndaIni memungkinkan konfirmasi email dan pengaturan ulang kata sandi
- __CAPGO_KEEP_0__
- Untuk pengembangan, Anda dapat menggunakan layanan email bawaan

Akses bagian penyedia:
- Lihat di Autentikasi > Penyedia di dashboard Supabase Anda
- Anda akan melihat daftar penyedia sosial yang tersedia
- Setiap penyedia memiliki Aktifkan toggle dan opsi pengaturan

Sekarang mari kita konfigurasi setiap penyedia sosial secara rinci:

Mengatur Otentikasi Google di Supabase

Pertama, dapatkan kunci otentikasi Google Anda:

Ikuti panduan pengaturan Google yang komprehensif: Pengaturan Otentikasi Google

Panduan ini mencakup:

Membuat Project Google Cloud
Mengatur kunci otentikasi OAuth 2.0 untuk web, iOS, dan Android
Mengonfigurasi layar persetujuan
Mendapatkan ID dan rahasia klien yang diperlukan

Setelah menyelesaikan pengaturan Google, konfigurasi di Supabase:

Mengaktifkan penyedia Google di Supabase:
- Di dashboard Supabase Anda, pergi ke Autentikasi > Penyedia
- Cari Google dan aktifkan ON
- Isi konfigurasi:
  - ID Klien: OAuth Google Anda Web ID Klien (dari Console Cloud Google)
  - Rahasia Klien: OAuth Google Anda Web Rahasia Klien
  - URL Redirect: https://your-project-ref.supabase.co/auth/v1/callback (diisi secara otomatis)
- Klik “Simpan”

Penting: Gunakan ID Klien Web dan Rahasia Klien Web dalam Supabase, bahkan jika Anda sedang membangun aplikasi mobile. ID klien mobile digunakan secara terpisah dalam pengaturan plugin.

Mengatur Otentikasi Apple di Supabase

Ambil kreditensi Apple:

Ikuti panduan rinci setup Apple: Pengaturan Otentikasi Apple

Panduan ini mencakup:

Mengatur akun Pengembang Apple Anda
Membuat ID Aplikasi dan ID Layanan
Mengonfigurasi kemampuan Sign in dengan Apple
Menghasilkan kunci pribadi yang diperlukan
Pengaturan spesifik platform untuk iOS, Android, dan Web

Setelah menyelesaikan setup Apple, konfigurasinya di Supabase:

Aktifkan penyedia Apple di Supabase:
- Pergi ke Autentikasi > Penyedia dan aktifkan Apple NYATA
- Isi konfigurasi:
  - ID Klien: Identifikasi ID Layanan Anda (misalnya, com.yourapp.signin)
  - Rahasia Klien: Buatlah JWT ini menggunakan kunci pribadi Apple Anda (lihat Dokumen Apple Supabase untuk format JWT)
  - URL Pengalihan: https://your-project-ref.supabase.co/auth/v1/callback (diisi secara otomatis)
- Klik “Simpan”

Pesan: Pengaturan Otentikasi Apple paling kompleks karena persyaratan Apple untuk ID Layanan, kunci pribadi, dan penggabungan JWT. Ikuti dokumentasi kami dengan hati-hati untuk setiap platform.

Pengaturan Otentikasi Facebook di Supabase

Dapatkan kunci akses Facebook:

Ikuti panduan pengaturan Facebook lengkap kami: Pengaturan Otentikasi Facebook

Ringkasan Panduan ini:

Membuat akun pengembang Facebook dan aplikasi
Menambahkan produk Facebook Login
Mengonfigurasi URI Redirect OAuth
Mendapatkan ID Aplikasi, Rahasia Aplikasi, dan Token Klien
Konfigurasi spesifik platform untuk iOS dan Android

Setelah menyelesaikan pengaturan Facebook, konfigurasinya di Supabase:

Mengaktifkan penyedia Facebook di Supabase:
- Bergi ke Autentikasi > Penyedia dan aktifkan Facebook ON
- Isi konfigurasi:
  - ID Klien: ID Aplikasi Facebook Anda
  - Rahasia Klien: Rahasia Aplikasi Facebook Anda
  - URL Redirect: https://your-project-ref.supabase.co/auth/v1/callback (diisi secara otomatis)
- Klik “Simpan”

Penting: Pastikan Anda menambahkan URL panggil balik Supabase (https://your-project-ref.supabase.co/auth/v1/callback) ke aplikasi Facebook Anda’s URIs OAuth yang Dapat Dikirim Pada pengaturan Login Facebook.

Catatan Konfigurasi Supabase yang Penting

Pengamanan Tingkat Baris (RLS):

Setelah mengatur autentikasi, aktifkan RLS pada tabel-tabel Anda
Pergi ke Database > Tabel dan aktifkan Pengamanan Tingkat Baris untuk setiap tabel
Buat kebijakan untuk mengontrol akses data berdasarkan pengguna yang telah diotentikasi

Pengelolaan Pengguna:

Lihat pengguna yang telah diotentikasi Autentikasi > Pengguna
Monitor kejadian autentikasi di Autentikasi > Log
Atur template email di Autentikasi > Template Email

Menguji Konfigurasi:

Gunakan alat uji autentikasi bawaan Supabase
Lihat di Autentikasi > Pengguna dan klik “Undang pengguna” untuk menguji aliran email
Periksa bagian Log untuk kesalahan autentikasi

Sekarang bahwa Supabase telah dikonfigurasi, Anda perlu mengatur plugin Login Sosial dengan kredit yang sesuai. Penting: Plugin memerlukan kredit OAuth dari pengguna asli (bukan dari Supabase), sementara Supabase mengelola autentikasi sisi server.

Bagaimana Alur Autentikasi Berfungsi

Sebelum memasuki konfigurasi, pahami alur:

Plugin melakukan autentikasi dengan penyedia sosial (Google/Apple/Facebook) secara asli
Plugin menerima token (token akses, token ID) dari penyedia
Aplikasi Anda mengirimkan token ini ke Supabase menggunakan signInWithIdToken()
Supabase memvalidasi token dengan penyedia dan membuat sesi pengguna
Supabase mengembalikan token JWT miliknya untuk permintaan autentikasi aplikasi Anda

Konfigurasi Plugin Google

Plugin ini membutuhkan ID Klien Web Anda The plugin needs your Web Client ID __CAPGO_KEEP_0__ untuk semua platform dan secara opsional __CAPGO_KEEP_0__ untuk fitur iOS khusus:

import { SocialLogin } from '@capgo/capacitor-social-login';

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

Poin penting untuk Google:

Gunakan __CAPGO_KEEP_0__ (tidak ID klien Android/iOS) untuk webClientId bidang
Plugin ini akan berfungsi pada semua platform dengan hanya menggunakan
__CAPGO_KEEP_0__ iOSClientId __CAPGO_KEEP_1__

adalah opsional dan hanya digunakan untuk fitur Google iOS khusus

Konfigurasi Apple berbeda antara iOS dan Android:

Untuk iOS (Sign-in Apple native):

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

Untuk Android/Web (memerlukan ID Layanan):

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

Poin penting untuk Apple:

iOS menggunakan Sign in dengan Apple native (tidak perlu konfigurasi tambahan)
Android/Web memerlukan ID Layanan yang Anda buat di Portal Pengembang Apple
ID tersebut harus sesuai dengan apa yang Anda konfigurasi di Portal Pengembang Apple dan Supabase redirectUrl Konfigurasi Plugin Facebook

Facebook memerlukan ID Aplikasi dan Token Klien:

ID Aplikasi dan Token Klien harus sesuai dengan apa yang Anda konfigurasi di Portal Pengembang Apple dan Supabase

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

Poin Utama untuk Facebook:

Gunakan App ID yang sama yang Anda konfigurasi di Supabase
Token Klien ditemukan di Pengaturan Dasar Aplikasi Facebook Anda
limitedLogin: true mengaktifkan fitur Login Terbatas yang difokuskan pada privasi Facebook (hanya iOS)
Penting: Lihat panduan pengaturan Facebook kami untuk informasi rinci tentang Login Terbatas, termasuk pertimbangan ATT Inisialisasi Plugin Selesai

Berikut cara untuk menginisialisasi semua penyedia bersamaan:

Catatan Penting:

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

Panggil

Panggil initialize() sekali ketika aplikasi Anda dimulai, bukan sebelum setiap login
Hanya perlu mengonfigurasi penyedia yang Anda rencanakan untuk gunakan
Kredensial di sini berasal dari penyedia asli bukan dari SupabasePastikan kredensial penyedia sesuai dengan apa yang Anda konfigurasi di Supabase
Langkah 5: Mengatur Klien Supabase

Instal klien Supabase:

Buat layanan Supabase:

npm install @supabase/supabase-js

Langkah 6: Implementasi Alur Autentikasi

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Buat layanan autentikasi yang menggabungkan kedua:

Create an authentication service that combines both: __CAPGO_KEEP_0__

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

Langkah 7: Implementasikan di Aplikasi Anda

Inisialisasi layanan dan tangani autentikasi:

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

Buat tombol login di UI Anda:

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

Langkah 8: Konfigurasi Spesifik Platform

Konfigurasi iOS

Untuk instruksi setup iOS yang lebih rinci, lihat panduan spesifik platform kami:

Setup iOS Google - Konfigurasi URL scheme, Info.plist
Setup iOS Apple - Pengaturan kemampuan Sign in dengan Apple
Setup iOS Facebook (panduan Facebook secara umum) - Konfigurasi Facebook SDK

Ringkasan Cepat - Tambahkan ke ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

Ikuti panduan yang terkait untuk instruksi pengaturan iOS lengkap termasuk pengaturan proyek Xcode.

Pengaturan Android

Untuk instruksi pengaturan Android yang lebih rinci, lihat panduan spesifik platform kami:

Pengaturan Android Google - Jejak fingerprint SHA-1, pengaturan Google Play Services
Pengaturan Android Apple - Pengaturan ID layanan untuk Android
Pengaturan Android Facebook (panduan Facebook secara umum) - Integrasi Facebook SDK

Pengaturan Android Dasar:

1. Dapatkan tanda tangan SHA-1 Anda (diperlukan untuk Google):

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. Konfigurasi AndroidManifest.xml - Tambahkan ke android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. Tambahkan sumber daya Facebook ke android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

Ikuti panduan platform yang terkait untuk pengaturan Android lengkap termasuk pengaturan Google Play Services dan pengaturan nama paket.

Langkah 9: Menggunakan Database Supabase dengan Pengguna Terotentik

Setelah pengguna terotentik, Anda dapat menggunakan database Supabase dengan Keamanan Tingkat Baris (RLS):

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

Konsiderasi Keamanan yang Penting

Jangan terbuka kunci sensitif di klien code
Gunakan variabel lingkungan untuk konfigurasi
Aktifkan Keamanan Tingkat Baris di Supabase
Validasi token di backend jika diperlukan
Tangani ulang autentikasi otomatis dengan Supabase

Pengaturan Umum Masalah

Kesalahan Token Tidak Sesuai

Pastikan konfigurasi OAuth penyedia Anda sesuai antara plugin login sosial dan Supabase
Pastikan URL pengalihan yang benar telah dikonfigurasi

Issues yang Spesifik untuk Platform

iOS: Pastikan ID aplikasi Anda sesuai dengan konfigurasi pengembang Apple
Android: Pastikan tanda tangan SHA1 yang benar telah ditambahkan ke Google Console

Interrupsi Alur Autentikasi

Implementasikan penanganan kesalahan yang tepat untuk masalah jaringan
Tambahkan status pengalihan selama autentikasi

Kesimpulan

Anda telah memiliki sistem autentikasi lengkap yang menggabungkan backend yang kuat dari Supabase dengan kemampuan login sosial native

Setup ini menyediakan:
Autentikasi sosial native yang aman
Integrasi database waktu nyata
Kemampuan kompatibilitas lintas platform

Kombinasi Supabase dan plugin Capgo Login Sosial menawarkan solusi autentikasi kuat, skalabel untuk aplikasi Capacitor Anda.

Untuk fitur-fitur lebih maju seperti autentikasi faktor multi atau klaim kustom, lihat dokumentasi Supabase dan dokumentasi plugin Login Sosial.

If Anda menggunakan Pasang Autentikasi Supabase dengan Plugin Login Sosial Capacitor untuk merencanakan autentikasi dan alur akun, hubungkannya dengan @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, Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor, dan SSO (Enterprise) untuk detail implementasi di SSO (Enterprise).

Setup Autentikasi Supabase dengan Plugin Login Sosial Capacitor

membuatnya lebih mudah. Tutorial ini akan mengantum Anda melalui integrasi autentikasi sosial (Google, Apple, Facebook) dengan Supabase di aplikasi Anda.