Skip to content
Capgo

Firebase Google Login on Web

Introduction

Section titled “Introduction”

The Capacitor Social Login plugin does not support web platforms. For web applications, you should use Firebase’s built-in Google Sign-In directly, which provides a more reliable popup-based authentication flow.

Why Not Use the Plugin on Web?

Section titled “Why Not Use the Plugin on Web?”

The Capacitor Social Login plugin is designed for native mobile platforms (Android and iOS) where it can leverage platform-specific authentication flows. For web, Firebase’s native signInWithPopup method is:

  • ✅ More reliable and better supported
  • ✅ Handles browser session storage automatically
  • ✅ Provides better error handling
  • ✅ No additional configuration needed

Setup Steps

Section titled “Setup Steps”

  1. Configure Firebase Project

    Ensure your Firebase project has Google Sign-In enabled:

    • Go to Firebase Console
    • Navigate to Authentication > Sign-in method
    • Enable Google Sign-In provider

  2. Add your authorized domains

    1. Go to your project overview over at console.cloud.google.com Firebase Project Overview
    2. Open the Authentication menu Firebase Authentication Menu
    3. Click on the Settings button Firebase Authentication Sign-in Method Button
    4. Setup the Authorized domains Firebase Authentication Settings Authorized Domains

Example Implementation

Section titled “Example Implementation”

See the authUtils.ts file in the example app for a complete implementation that:

  • Uses Firebase’s signInWithPopup for web platforms
  • Uses Capacitor Social Login plugin for Android/iOS platforms
  • Handles platform detection automatically

The example shows how to conditionally use Firebase’s built-in method for web while using the plugin for native platforms.

Additional Resources

Section titled “Additional Resources”