Langsung ke konten
Capgo

Firebase Integration Introduction

Konten ini belum tersedia dalam bahasa Anda.

Overview

This tutorial will guide you through setting up Firebase Authentication with the Capacitor Social Login plugin. This integration allows you to use native social login providers (Google, Apple, Facebook, Twitter) on mobile platforms while leveraging Firebase Auth for backend authentication and Firestore for data storage.

What You’ll Learn

  • How to configure Firebase Authentication
  • How to integrate Capacitor Social Login plugin with Firebase Auth
  • Platform-specific setup for Android, iOS, and Web

What You’ll Need

Before you begin, make sure you have:

  1. A Firebase Project

    • Create a project at Firebase Console
    • Enable Authentication (Email/Password and Google Sign-In)
    • Get your Firebase configuration credentials

  2. Firebase JS SDK

    • Install Firebase in your project:
      Terminal window
      npm install firebase

  3. A Capacitor Project

    • An existing Capacitor application
    • Capacitor Social Login plugin installed:
      Terminal window
      npm install @capgo/capacitor-social-login
      npx cap sync

Example Application

A complete working example is available in the repository:

Code Repository: You can find the code repository here

The example app demonstrates:

  • Email/password authentication with Firebase
  • Google Sign-In integration (Android, iOS, and Web)
  • A simple key-value store using Firebase Firestore collections
  • User-specific data storage in Firestore subcollections

A word about using the Firebase SDK on Capacitor

When using the Firebase JS SDK on Capacitor, you need to be aware that when using the authentication methods, you need to initialize the Firebase Auth instance a bit differently.

On the web platform, you would use the getAuth function to get the Firebase Auth instance.

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


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

Unfortunately, on Capacitor, this does not work and causes Firebase auth to hang. As stated in this blog post, you need to use the initializeAuth function to initialize the Firebase Auth instance. This looks like this:

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

Next Steps

Continue with the setup guides: