Pengenalan Integrasi Firebase

Ikhtisar

Tutorial ini akan memandu Anda melakukan setup Firebase Authentication dengan plugin Capacitor Social Login. Integrasi ini memungkinkan Anda menggunakan provider social login native (Google, Apple, Facebook, Twitter) di platform mobile sambil memanfaatkan Firebase Auth untuk autentikasi backend dan Firestore untuk penyimpanan data.

Apa yang Akan Anda Pelajari

• Cara mengonfigurasi Firebase Authentication
• Cara mengintegrasikan plugin Capacitor Social Login dengan Firebase Auth
• Setup khusus platform untuk Android, iOS, dan Web

Yang Anda Butuhkan

Sebelum memulai, pastikan Anda sudah memiliki:

1. Proyek Firebase

   • Buat proyek di Firebase Console
   • Aktifkan Autentikasi (Email/Password dan Google Sign-In)
   • Dapatkan kredensial konfigurasi Firebase Anda

2. SDK Firebase JS

   • Install Firebase di proyek Anda:

     npm install firebase

3. Proyek Capacitor

   • Aplikasi Capacitor yang sudah ada
   • Plugin Capacitor Social Login sudah terinstal:

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

Aplikasi Contoh

Contoh aplikasi lengkap yang sudah berfungsi tersedia di repositori:

Repositori Code: Anda dapat menemukan repositori code di sini

Aplikasi contoh ini mendemonstrasikan:

• Autentikasi email/password dengan Firebase
• Integrasi Google Sign-In (Android, iOS, dan Web)
• Penyimpanan key-value sederhana menggunakan koleksi Firebase Firestore
• Penyimpanan data spesifik user di subkoleksi Firestore

Catatan tentang penggunaan Firebase SDK di Capacitor

Saat menggunakan Firebase JS SDK di Capacitor, perlu diperhatikan bahwa saat menggunakan metode autentikasi, Anda perlu menginisialisasi instance Firebase Auth dengan cara yang sedikit berbeda.

Di platform web, Anda akan menggunakan getAuth untuk mendapatkan instance Firebase Auth.

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

Sayangnya, di Capacitor, hal ini tidak berhasil dan menyebabkan Firebase auth hang. Seperti yang dijelaskan di postingan blog ini, Anda perlu menggunakan initializeAuth untuk menginisialisasi instance Firebase Auth. Seperti ini tampilannya:

import { initializeApp } from 'firebase/app';
import { initializeAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);

function whichAuth() {
  let auth;
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    auth = getAuth(app);
  }
  return auth;
}

export const auth = whichAuth();

Langkah Berikutnya

Lanjutkan dengan panduan setup:

• Setup Firebase - Konfigurasikan proyek Firebase
• Setup Android - Konfigurasi khusus Android
• Setup iOS - Konfigurasi khusus iOS
• Setup Web - Konfigurasi khusus Web

Lanjutkan dari Pengenalan Integrasi Firebase

Jika Anda menggunakan Pengenalan Integrasi Firebase 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.