Setup Autentikasi Supabase dengan Plugin Login Sosial Capacitor

Mengatur autentikasi di aplikasi mobile dapat kompleks, tetapi menggabungkan Supabase dengan Capgo Plugin Login Sosial membuatnya lebih mudah. Tutorial ini akan mengantumkan Anda melalui integrasi autentikasi sosial (Google, Apple, Facebook) dengan Supabase di aplikasi Capacitor Anda.

Mengapa Menggunakan Supabase dengan Login Sosial?

Supabase menawarkan backend-as-a-service yang kuat dengan autentikasi bawaan, sementara plugin @capgo/capacitor-social-login menawarkan autentikasi sosial asli di platform iOS, Android, dan web. Untuk integrasi Supabase yang lebih erat, @capgo/capacitor-supabase menambahkan bantuan autentikasi asli dan akses JWT. Bersama-sama, mereka menyediakan:

• Autentikasi sosial yang lancar
• Pengelolaan token yang aman
• Kompatibilitas lintas platform
• Pengintegrasian 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 sosial yang dipilih (Google, Apple, Facebook)

Langkah 1: Pasang dan Konfigurasi Plugin Login Sosial

Pertama, pasang plugin login sosial Capgo:

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

Lihat halaman pengaturan platform khusus untuk Login Sosial dan Supabase .

Langkah 2: Pengaturan Proyek Supabase

Buat dan Konfigurasi Proyek Supabase Anda

1. Buat proyek Supabase:

   • Klik ke supabase.com dan daftar/masuk
   • Klik “Proyek Baru”
   • Pilih organisasi Anda
   • Masukkan Nama Proyek (misalnya “Auth MyApp”)
   • Tetapkan Kata Sandi Basis Data (simpan dengan aman)
   • Pilih wilayah (pilih yang paling dekat dengan pengguna Anda) Klik
   • (pilih yang paling dekat dengan pengguna Anda) Buat Projek Baru

2. Dapatkan Kredensial Projek Anda:

   • Setelah dibuat, pergi ke Pengaturan > API
   • Salin URL URL Projek Anda (misalnya https://your-project-ref.supabase.co)
   • Salin Publik Anonim API Kunci
   • Simpanlah untuk digunakan nanti di aplikasi Anda

Konfigurasi Pengaturan Otentikasi

3. Pengaturan autentikasi umum:

   • Pergi ke Autentikasi > Pengaturan
   • Di bawah Pengaturan umum:
     • Atur URL Situs ke URL aplikasi Anda (misalnya https://yourdomain.com atau http://localhost:3000 untuk pengembangan)
     • Tambahkan URL Redirect tambahan __CAPGO_KEEP_0__ jika diperlukan:

       http://localhost:3000
       https://yourdomain.com
       capacitor://localhost (for mobile apps)

4. Konfigurasi pengaturan email (opsional tetapi disarankan):

   • Bawah Pengaturan SMTP, konfigurasi penyedia email Anda
   • Ini memungkinkan konfirmasi email dan pengaturan ulang kata sandi
   • Untuk pengembangan, Anda dapat menggunakan layanan email bawaan

Aktifkan Penyedia Otorisasi Sosial

5. Akses bagian penyedia:
   • Pergi ke Autentikasi > Penyedia di dashboard Supabase Anda
   • Anda akan melihat daftar penyedia sosial yang tersedia
   • Setiap penyedia memiliki Aktifkan pilihan toggle dan pengaturan

Sekarang mari kita konfigurasi setiap penyedia sosial secara detail:

Langkah 3: Konfigurasi Penyedia Sosial di Supabase

Mengatur Autentikasi Google di Supabase

Pertama, dapatkan kunci autentikasi OAuth Google Anda:

Ikuti panduan pengaturan Google yang komprehensif kami: Pengaturan Autentikasi Google

Panduan ini mencakup:

• Membuat Projek Google Cloud
• Mengatur kunci akses 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:

1. 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 Google Cloud Console)
     • 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 di Supabase, bahkan jika Anda sedang membangun aplikasi mobile. ID klien mobile digunakan terpisah dalam pengaturan plugin.

Mengatur Autentikasi Apple di Supabase

Dapatkan kredential Apple:

Ikuti panduan setup Apple yang rinci kami: Pengaturan Autentikasi Apple

Panduan ini mencakup:

• Konfigurasi Akun Pengembang Apple Anda
• Membuat ID Aplikasi dan ID Layanan
• Mengonfigurasi Kemampuan Masuk dengan Apple
• Menghasilkan Kunci Pribadi yang Diperlukan
• Pengaturan Platform yang Spesifik untuk iOS, Android, dan Web

Setelah menyelesaikan pengaturan Apple, konfigurasinya di Supabase:

1. Mengaktifkan Pemasok Apple di Supabase:
   • Pergi ke Autentikasi > Pemasok dan aktifkan Apple ON
   • 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”

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

Pengaturan Autentikasi Facebook di Supabase

Ambil kredential Facebook:

Ikuti panduan pengaturan Facebook lengkap kami: Pengaturan Autentikasi Facebook

Guider ini mencakup:

• Membuat akun pengembang Facebook dan aplikasi
• Mengambahkan produk Login Facebook
• Mengkonfigurasi URI Redirect OAuth
• Mendapatkan ID Aplikasi, Rahasia Aplikasi, dan Token Klien
• Pengaturan khusus platform untuk iOS dan Android

Setelah menyelesaikan pengaturan Facebook, konfigurasi di Supabase:

1. Aktifkan penyedia Facebook di Supabase:
   • Klik 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. Valid OAuth Redirect URIs di pengaturan Login Facebook.

Penting Catatan Konfigurasi Supabase

Level Keamanan Baris (RLS):

• Setelah mengatur autentikasi, aktifkan RLS pada tabel Anda
• Pergi ke Database > Meja dan toggle Aktifkan RLS untuk setiap meja
• Buat kebijakan untuk mengontrol akses data berdasarkan pengguna yang terautentik

Pengelolaan Pengguna:

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

Menguji Konfigurasi:

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

Langkah 4: Konfigurasi Plugin Login Sosial

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

Bagaimana Alur Autentikasi Berfungsi

Sebelum memahami konfigurasi, pahami alur berikut:

1. Plugin mengautentikasi dengan penyedia sosial (Google/Apple/Facebook) secara native
2. Plugin menerima token (token akses, token ID) dari penyedia
3. Aplikasi Anda mengirimkan token ke Supabase menggunakan signInWithIdToken()
4. Supabase memvalidasi token dengan penyedia dan membuat sesi pengguna
5. Supabase mengembalikan token JWT miliknya untuk permintaan autentikasi aplikasi Anda

Konfigurasi Plugin Google

Plugin ini membutuhkan ID Klien Web untuk semua platform dan secara opsional ID Klien iOS 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 ID Klien Web (bukan ID klien Android/iOS) untuk webClientId bidang
• Plugin ini akan berfungsi di semua platform hanya dengan ID Klien Web
• The iOSClientId adalah optional dan hanya digunakan untuk fitur Google iOS khusus

Konfigurasi Plugin Apple

Konfigurasi Apple berbeda antara iOS dan Android:

Untuk iOS (tanda tangan 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'
  }
});

Titik-titik penting untuk Apple:

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

Facebook memerlukan ID Aplikasi dan Token Klien:

Titik-titik penting untuk Facebook:

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

Pakai ID Aplikasi yang sama yang Anda konfigurasi di Supabase

• Token Klien ditemukan di Pengaturan Dasar Aplikasi Facebook Anda
• Mengaktifkan fitur Login Terbatas yang fokus pada privasi Facebook (hanya iOS)
• limitedLogin: true Penting
• __CAPGO_KEEP_0__: Lihat panduan pengaturan Facebook kami Panduan Pengaturan Facebook untuk informasi login terbatas, termasuk pertimbangan ATT

Inisialisasi Plugin Selesai

Ini cara Anda menginisialisasi semua penyedia bersamaan:

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

Catatan Penting:

• 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 asliJangan dari Supabase
• Pastikan kredit penyedia sesuai dengan apa yang Anda konfigurasi di Supabase

Langkah 5: Konfigurasi Klien Supabase

Instal klien Supabase:

npm install @supabase/supabase-js

Buat layanan Supabase:

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

Langkah 6: Implementasi Alur Autentikasi

Buat layanan autentikasi yang menggabungkan kedua:

// 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: Implementasi di Aplikasi Anda

Mulai 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 - Konfigurasi kemampuan Sign in dengan Apple
• Setup iOS Facebook (panduan Facebook 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 setup iOS yang lengkap termasuk konfigurasi proyek Xcode.

Konfigurasi Android

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

• Setup Android Google - Jejak SHA-1, konfigurasi Google Play Services
• Setup Android Apple - Konfigurasi ID layanan untuk Android
• Setup Android Facebook (panduan Facebook umum) - Integrasi Facebook SDK

Setup Android yang penting:

1. Dapatkan jejak 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 yang lengkap termasuk pengaturan Google Play Services dan pengaturan nama paket.

Langkah 9: Menggunakan Database Supabase dengan Pengguna yang Dapat Diandalkan

Saat pengguna telah terautentikasi, 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;
  }
}

Pertimbangan Keamanan yang Penting

1. Jangan pernah mengekspos kunci sensitif di klien code
2. Gunakan variabel lingkungan untuk pengaturan
3. Aktifkan Keamanan Tingkat Baris di Supabase
4. Mengonfirmasi Token di backend Anda jika diperlukan
5. Mengatasi Perbaruan Token otomatis dengan Supabase

Mengatasi Masalah Umum

Kesalahan Token Tidak Sesuai

• Pastikan konfigurasi penyedia OAuth Anda sesuai antara plugin login sosial dan Supabase
• Periksa bahwa URL redirect yang benar telah dikonfigurasi

Masalah Spesifik Platform

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

Alur Autentikasi Gangguan

• Implementasikan penanganan kesalahan yang tepat untuk masalah jaringan
• Tambahkan status pengisian saat 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
• Pengelolaan token yang halus
• Pengintegrasian database waktu nyata

The combination of Supabase and the Capgo Social Login plugin offers a powerful, scalable authentication solution for your Capacitor apps.

Kombinasi Supabase dan plugin Login Sosial __CAPGO_KEEP_0__ menawarkan solusi autentikasi yang kuat dan skalabel untuk aplikasi __CAPGO_KEEP_1__ Anda Untuk fitur-fitur yang lebih maju seperti atau klaim-kelaim khusus , lihat dokumentasidokumentasi Supabase dan dokumentasi plugin Login Sosial Teruskan dari Setup Autentikasi Supabase dengan __CAPGO_KEEP_0__ Plugin Login Sosial Jika Anda menggunakan.

Setup Autentikasi Supabase dengan Capacitor Plugin Login Sosial

untuk merencanakan autentikasi dan alur akun, hubungkannya dengan @Capacitor/__CAPGO_KEEP_1__-login-sosial untuk detail implementasi di @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-login-sosial, @capgo/capacitor-social-login for the implementation detail in @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 (Perusahaan) untuk detail implementasi di SSO (Perusahaan).