Firebase web 9 Auth incompatible with Capacitor 3

[riderx]

• Operating System version: ios 14.5
• Browser version: Capacitor
• Firebase SDK version: 9 beta 2
• Firebase Product: auth

[REQUIRED] Describe the problem

When getting the auth with getAuth(firebaseApp);
The app crash and the only issue I see in safari dev console is :

TypeError: undefined is not an object (evaluating 'gapi.iframes.getContext')

Relevant Code:

import { getAuth, onAuthStateChanged, signInAnonymously } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { initializeApp } from "firebase/app"

var firebaseConfig = {
    apiKey: "***",
    authDomain: "***",
    databaseURL: "***",
    projectId: "***",
    storageBucket: "***",
    messagingSenderId: "****",
    appId: "***"
};
const firebaseApp = initializeApp(firebaseConfig);

export const user = new Promise((resolve, reject) => {
    try {    
        const auth = getAuth(firebaseApp);
        const removeListener = onAuthStateChanged(auth, user => {
            // Check for user status
            if (!user) {
                signInAnonymously(auth);
                return
            }
            console.log('user', user); // Will log the user object.
            removeListener();
            resolve(user);
        });
    } catch (err) {
        console.error('reject', err);
        reject(err)
    }
})
user()

[sam-gc]

Hi @riderx -- we don't explicitly support Capacitor, nor is it on our roadmap at this time. With that said, you're running into this issue because the default getAuth() function assumes you're in a browser context and automatically includes pieces you need to perform social login (i.e. signInWithPopup and signInWithRedirect). Instead, I'd suggest trying to initialize auth manually, which allows you to specifically choose your dependencies. For example:

const auth = initializeAuth(app, {
  persistence: browserLocalPersistence,  // This uses localStorage
});

Here is the reference docs: https://firebase.google.com/docs/reference/js/v9/auth#initializeauth

I'm not sure whether or not this will work with Capacitor, but it should at least get you past the error you linked.

[riderx]

@sam-gc i don't need social auth so for sure it will helps !
i got the same issue of #5020 now

[Log] onscript loading complete (user-script:2, line 262)
[Error] Preflight response is not successful
[Error] Fetch API cannot load https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=**** due to access control checks.
[Error] Failed to load resource: Preflight response is not successful (accounts:signUp, line 0)
[Warning] Ignoring Event: localhost (user-script:2, line 262)
[Error] Unhandled Promise Rejection: FirebaseError: Firebase: Error (auth/network-request-failed).
	dispatchException (4.9789fcb5.chunk.js:2:798381)
	(anonymous function) (4.9789fcb5.chunk.js:2:794609)
	r (4.9789fcb5.chunk.js:2:188)
	u (4.9789fcb5.chunk.js:2:428)
	promiseReactionJob

What I don't get is I have 2 apps in store (Captime and Mimesis) on google play store and apple who worked well until few days ago, now none of them work :/

[riderx]

@sam-gc i'm still unable to use firebase 9 in my apps, do you if it will be fixed, and when ?

I have to know if I need to switch from firebase to something else for my mobile apps

[harry-herskowitz]

@riderx what did you end up doing? Looks like I'll need to ditch firebase as well

[jayordway]

I have tried both firebase 8 & 9 now. The issue exists with Capacitor 3 and iOS 14, I have not tested other versions or on Android. I don't know the root cause yet, I am sure that in the worse case you could use your own api/server and do the firebase authentication there. I truly hope it is not something related to the WebKit.

[harry-herskowitz]

@jayordway let's hope this gets resolved :/ I'm sure there's a lot of people stuck on this. Thank you for your insight.

[harry-herskowitz]

FIXED! Here's the solution: https://harryherskowitz.com/2021/08/23/firebase-capacitor.html

[riderx]

@roldyclark thanks a lot, i will try to upgrade to v9 so :)

[jayordway]

This worked for me, but it is work elaborating that I was not able to get it to work with angularfire. I had to revert to using firebase 9 directly.

 init() {
    const app = initializeApp(environment.firebase);
    if (Capacitor.isNativePlatform) {
      initializeAuth(app, {
        persistence: indexedDBLocalPersistence
      });
    }
    this.firestore = getFirestore(app);
  }

The reason I did this is because I could not find a reliable way to set the persistence properly with "indexedDBLocalPersistence" when using angularFire. It may be possible though, I will attempt once more and report back.

[mesqueeb]

Ever since I started using Capacitor 3.x with Firebase 9.x compat build I cannot launch Capacitor anymore with the same error as the OP.

@sam-gc With the compat build however there is no concept of const auth = initializeAuth(app, ... because it's the compat syntax.

Does anyone know how I can solve this issue without having to convert to the modular syntax? The reason is that some plugins I use do not yet support the modular syntax.

[sam-gc]

For the folks using v9 modular, I would also suggest trying to import getAuth from firebase/auth/cordova. This will also avoid the browserPopupRedirectResolver dependency.

@mesqueeb, I will investigate. The compat layer should select the correct dependency at runtime.