Google Firebase signInWithPopup doesn’t show on iOS using Ionic Capacitor

Question

When using firebase.auth().signInWithPopup(googleAuthProvider);, it works fine in the web app, but nothing happens in the iOS simulator using Ionic Capacitor. Do I need to use some kind of in app browser? Is there another way to sign in with google using Ionic Capacitor?

EDIT: I've started using @capacitor-firebase/authentication as suggested. Here's what I've done so far:

1. yarn add @capacitor-firebase/authentication
2. Used this when signing in:

import { FirebaseAuthentication } from "@capacitor-firebase/authentication";
import { GoogleAuthProvider } from "firebase/auth";
...
  const result = await FirebaseAuthentication.signInWithGoogle();
  // 2. Sign in on the web layer using the id token
  const credential = GoogleAuthProvider.credential(
    result.credential?.idToken
  );
  firebase.auth().signInWithCredential(credential);

3. Added an iOS app to my firebase console, downloaded the GoogleService-Info.plist file and put it in my ios/App/App folder (including adding it in xcode)
4. Added FirebaseApp.configure() to the application method in the AppDelegate.swift file where FirebaseApp comes from import FirebaseCore
5. Added this to my capacitor.config.ts file:

plugins: {
    FirebaseAuthentication: {
      skipNativeAuth: false,
      providers: ["google.com"],
    },
  },

6. Followed all the instructions here: https://github.com/capawesome-team/capacitor-firebase/blob/main/packages/authentication/docs/setup-google.md

Yet when clicking the “Sign In With Google” button. Nothing happens, but I would expect a popup to appear to be able to log in with google.

Answer 1

You need to use the Firebase Android and iOS SDK. The Firebase JS SDK has some limitations in the web view. Here is an example using a Capacitor Firebase Authentication plugin:

import { FirebaseAuthentication } from '@capacitor-firebase/authentication';

const signInWithGoogle = async () => {
  const result = await FirebaseAuthentication.signInWithGoogle();
  return result.user;
};