Setup Autentikasi Supabase dengan Capacitor Plugin Login Sosial

Mengatur autentikasi di aplikasi mobile dapat kompleks, tetapi menggabungkan Supabase dengan plugin login sosial __CAPGO_KEEP_0__ membuatnya lebih mudah. Tutorial ini akan memandu Anda melalui proses mengintegrasikan autentikasi sosial (Google, Apple, Facebook) dengan Supabase di aplikasi __CAPGO_KEEP_0__ Anda. Mengapa Menggunakan Supabase dengan Login Sosial? Supabase menawarkan backend-as-a-service yang kuat dengan autentikasi bawaan, sementara plugin @Capgo/__CAPGO_KEEP_1__-social-login menawarkan autentikasi sosial asli di platform iOS, Android, dan web. Untuk integrasi Supabase yang lebih erat, makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ @capgo/capacitor-social-login plugin @capgo/capacitor-supabase menambahkan bantuan autentikasi asli dan akses JWT. Bersama-sama, mereka menyediakan:

Autentikasi sosial yang halus
Pengelolaan token yang aman
Kompatibilitas lintas platform
Pengintegrasian basis data waktu nyata
Pengelolaan pengguna bawaan

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

Saat ini sebuah proyek Capacitor yang telah diatur
Akun dan proyek Supabase
Akun pengembang untuk penyedia sosial yang dipilih (Google, Apple, Facebook)

Pertama, pasang plugin login sosial Capgo:

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

Lihat halaman Login Sosial context: Halaman/area: Halaman produk/pricing perusahaan. Peran: Label UI pendek atau item navigasi. Dilihat di: halaman enterprise.astro. Kunci pesan `enterprise_plugins_capgo_social_login` (Enterprise Plugins Capgo Social Login). dan context: Halaman/area: Situs web pemasaran Capgo. Peran: Label UI pendek atau item navigasi. Dilihat di: halaman trust.astro. Kunci pesan `and` (Dan).

plugin

Halaman plugin untuk pengaturan spesifik platform.:
- Langkah 2: Setup Proyek Supabase Setup Proyek Supabase Anda dan mendaftar/masuk
- Klik “Proyek Baru”
- Pilih organisasi Anda
- Masukkan sebuah Nama Proyek (misalnya, “Auth MyApp”)
- Atur kata sandi Database (simpan ini dengan aman) Pilih wilayah Anda
- Pilih wilayah Anda Pilih wilayah Anda Pilih yang paling dekat dengan pengguna Anda
- Klik “Buat proyek baru”
Dapatkan kunci proyek Anda:
- Setelah dibuat, pergi ke Pengaturan > API
- Salin URL proyek Anda (misalnya, Salin kunci publik anonim Anda https://your-project-ref.supabase.co)
- __CAPGO_KEEP_0__ kunci __CAPGO_KEEP_0__ API
- Simpanlah ini untuk digunakan nanti di aplikasi Anda

Konfigurasi Pengaturan Autentikasi

Setup 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 tambahan URL Redirect jika perlu:
```
http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)
```
Konfigurasi pengaturan email (opsional tetapi disarankan):
- Di bawah Pengaturan SMTP, konfigurasi penyedia email Anda
- Ini memungkinkan konfirmasi email dan reset kata sandi
- Untuk pengembangan, Anda dapat menggunakan layanan email bawaan

Akses bagian penyedia:
- Pergi ke Autentikasi > Pengguna dalam dashboard Supabase Anda
- Anda akan melihat daftar penyedia sosial yang tersedia
- Setiap penyedia memiliki Nonaktifkan/Tunggu toggle dan opsi pengaturan

Sekarang mari kita konfigurasi setiap penyedia sosial secara rinci:

Pengaturan Autentikasi Google di Supabase

Pertama, dapatkan kunci OAuth Google Anda:

Ikuti panduan setup Google yang komprehensif kami: Konfigurasi Autentikasi Google

Petunjuk ini mencakup:

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

Setelah menyelesaikan pengaturan Google, konfigurasi di Supabase:

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

PentingGunakan ID Klien Web dan Rahasia Klien Web Mengatur Autentikasi Apple di Supabase Dapatkan kredensial Apple:

Ikuti panduan setup Apple yang rinci kami:

Penting

Gunakan ID Klien Web Konfigurasi Autentikasi Apple

Petunjuk ini mencakup:

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

Setelah menyelesaikan pengaturan Apple, konfigurasi di Supabase:

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: Buat JWT ini menggunakan kunci pribadi Apple Anda (lihat Dokumen Apple Supabase untuk format JWT)
  - URL Redirect: https://your-project-ref.supabase.co/auth/v1/callback (diisi secara otomatis)
- Klik “Simpan”

Catatan: Pengaturan autentikasi Apple 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

Pedoman ini mencakup:

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

Setelah menyelesaikan pengaturan Facebook, konfigurasinya di Supabase:

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

PentingKunci Aplikasi Facebook Anda harus ditambahkan ke daftar URL Redirect OAuth yang valid di pengaturan Facebook Login.https://your-project-ref.supabase.co/auth/v1/callbackPenting Catatan Konfigurasi Supabase Keamanan Tingkat Baris (RLS): __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

Setelah mengatur autentikasi, aktifkan RLS pada tabel Anda
Pergi ke Database > Tabel dan aktifkan Aktifkan RLS untuk setiap tabel
Buat kebijakan untuk mengontrol akses data berdasarkan pengguna yang telah di autentikasi

Pengelolaan Pengguna:

Lihat pengguna yang telah di autentikasi di Pengautentikan > Pengguna
Pantau kejadian autentikasi di Pengautentikan > Log
Konfigurasi Template Email di Autentikasi > Template Email

Tes Konfigurasi:

Pakai alat tes autentikasi bawaan Supabase
Pergi ke Autentikasi > Pengguna dan klik “Undang pengguna” untuk menguji aliran email
Cek bagian Log context: Halaman/area: Capgo Builder / produk native cloud build. Peran: Label UI singkat atau item navigasi. Dilihat di: halaman native-build.astro. Kunci pesan `native_build_v2_trust_logs_lbl` (Native Build V2 Trust Logs Lbl).

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

Sebelum memasuki konfigurasi, pahami alur:

Plugin mengautentikasi

dengan penyedia sosial (Google/Apple/Facebook) secara native Plugin menerima token
(token akses, token ID) dari penyedia Langkah
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 untuk semua platform dan secara opsional ID Klien iOS untuk fitur iOS tertentu: Aplikasi Anda mengirimkan token ini ke Supabase menggunakan

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

Titik-titik penting untuk Google:

Pilih ID Klien Web (bukan ID klien Android/iOS) untuk bidang webClientId bidang
Plugin ini akan berfungsi di semua platform dengan hanya menggunakan ID Klien Web
adalah iOSClientId opsional dan hanya digunakan untuk fitur Google khusus iOS

Konfigurasi Plugin Apple

Konfigurasi Apple berbeda antara iOS dan Android:

Untuk iOS (tanda tangan Apple asli):

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
The redirectUrl harus sesuai dengan apa yang Anda konfigurasi di Portal Pengembang Apple dan Supabase

Konfigurasi Plugin Facebook

Facebook memerlukan ID Aplikasi dan Token Klien:

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 penting untuk Facebook:

Gunakan ID Aplikasi yang sama yang Anda konfigurasi di Supabase
Token Klien ditemukan di Pengaturan Dasar Aplikasi Facebook Anda
limitedLogin: true mengaktifkan fitur Login Terbatas Facebook yang berfokus pada privasi (hanya untuk iOS)
Perlu diingat: Lihat panduan pengaturan Facebook untuk informasi Terbatas Login yang lebih rinci, termasuk pertimbangan ATT Kompletasi Inisialisasi Plugin

Ini cara untuk menginisialisasi semua penyedia bersama-sama:

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

saat aplikasi Anda dimulai, bukan sebelum setiap login initialize() Hanya perlu mengonfigurasi penyedia yang Anda rencanakan untuk digunakan sekali
ketika
Kredensial di sini berasal dari provider aslibukan dari Supabase
Pastikan kredensial provider sesuai dengan apa yang Anda konfigurasi di Supabase

Langkah 5: Setup Klien Supabase

Pasang 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

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 Platform-Spesifik

Konfigurasi iOS

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

Pengaturan iOS Google - Konfigurasi URL scheme, Info.plist
Pengaturan iOS Apple - Pengaturan kemampuan Sign in dengan Apple
Pengaturan 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 yang lengkap, termasuk konfigurasi proyek Xcode.

Konfigurasi Android

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

Pengaturan Android Google - Tanda tangan SHA-1, konfigurasi Google Play Services
Pengaturan Android Apple - Konfigurasi ID layanan untuk Android
Pengaturan Android Facebook (panduan Facebook secara umum) - Integrasi Facebook SDK

Pengaturan Android yang penting:

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 terkait untuk konfigurasi Android yang lengkap termasuk pengaturan Google Play Services dan pengaturan nama paket.

Langkah 9: Menggunakan Database Supabase dengan Pengguna Terotentikasi

Setelah pengguna terotentikasi, 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

Jangan pernah mengungkapkan kunci sensitif di klien code
Pakai variabel lingkungan untuk pengaturan
Aktifkan Keamanan Tingkat Baris di Supabase
Validasi token di backend Anda jika diperlukan
Handle refresh token otomatis dengan Supabase

Pengaturan Umum Masalah

Masalah Kesalahan Token

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 paket Anda sesuai dengan konfigurasi pengembang Apple Anda
Android: Pastikan sidik jari SHA1 Anda ditambahkan dengan benar ke Google Console

Interrupsi Alur Autentikasi

Tangani 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. Konfigurasi ini menyediakan:

Autentikasi sosial native yang aman
Pengelolaan token yang halus
Pengintegrasian database waktu nyata
Kompatibilitas lintas platform

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

Untuk fitur-fitur yang lebih canggih seperti autentikasi multi-faktor atau periksa dokumentasi Supabasedan dokumentasi plugin Login Sosial Teruskan dari Pengaturan Autentikasi Supabase dengan __CAPGO_KEEP_0__ Plugin Login Sosial Jika Anda menggunakan Pengaturan Autentikasi Supabase dengan __CAPGO_KEEP_0__ Plugin Login Sosial.

Pengaturan Supabase dengan __CAPGO_KEEP_0__ Plugin Login Sosial Pengaturan Supabase dengan Capacitor Plugin Login Sosial Pengaturan Supabase dengan __CAPGO_KEEP_0__ Plugin Login Sosial @capgo/capacitor-login-sosial untuk detail implementasi di @capgo/capacitor-login-sosial @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey @capgo/capacitor-biometrik-natif untuk detail implementasi di @capgo/capacitor-biometrik-natif Autentikasi Dua Faktor untuk detail implementasi di Autentikasi Dua Faktor, dan SSO (Perusahaan) untuk detail implementasi di SSO (Perusahaan).

Setup Autentikasi Supabase dengan Plugin Login Sosial Capacitor

Why Use Supabase with Social Login?

Prasyarat

Langkah 1: Pasang dan Konfigurasi Plugin Login Sosial

plugin

plugin

Konfigurasi Pengaturan Autentikasi

Aktifkan Penyedia Autentikasi Sosial

Langkah 3: Konfigurasi Penyedia Sosial di Supabase

Pengaturan Autentikasi Google di Supabase

Ikuti panduan setup Apple yang rinci kami:

Pengaturan Autentikasi Facebook di Supabase

__CAPGO_KEEP_1__

Langkah 4: Konfigurasi Plugin Login Sosial

Sebelum memasuki konfigurasi, pahami alur:

Konfigurasi Plugin Google

Konfigurasi Plugin Apple

Konfigurasi Plugin Facebook

Ini cara untuk menginisialisasi semua penyedia bersama-sama:

Langkah 5: Setup Klien Supabase

Langkah 6: Implementasi Alur Autentikasi

Langkah 7: Implementasi di Aplikasi Anda

Langkah 8: Konfigurasi Platform-Spesifik

Konfigurasi iOS

Konfigurasi Android

Langkah 9: Menggunakan Database Supabase dengan Pengguna Terotentikasi

Pertimbangan Keamanan yang Penting

Pengaturan Umum Masalah

Masalah Kesalahan Token

Masalah Spesifik Platform

Interrupsi Alur Autentikasi

Kesimpulan

Keep going from Setup Supabase Authentication with Capacitor Social Login Plugin