firebase-js-sdk icon indicating copy to clipboard operation
firebase-js-sdk copied to clipboard

Signin functions are not resolving with Firebase 10 under capacitor

Open paxvenv opened this issue 1 year ago • 0 comments

Operating System

iOS 17.2

Browser Version

Mobile Safari UI/WKWebView

Firebase SDK Version

10.12.2

Firebase SDK Product:

Auth

Describe your project's tooling

Vue 3 app bundled with Vite as local assets inside Capacitor 6 (migrated recently, the same thing happens on Capacitor 5).

Describe the problem

I believe this one is related to the firebase, not the capacitor itself. The signin functions, no matter if fired by @capacitor-firebase/authentication, or just by Firebase SDK are not resolving, even after acquiring the correct credentials.

This is the simple example of custom authentication for Microsoft provider we use:

    const result = (await exchangeCodeForToken({
      code
    })); //
    if (
      !result.data.id_token
    ) {
      throw new Error('error exchanging code for a token');
    }
    // Token acquired correctly
    const token = result.data.id_token;
    const userCredential = await signInWithCustomToken(auth, token); // <- this line is never resolving

This is the example of custom authentication for Google provider we use:

  const result = (await exchangeCodeForToken({
    code
  }));
  if (!result.data.id_token) {
      throw new Error('error exchanging code for a token');
  }
  const token = result.data.id_token;
  const credential = GoogleAuthProvider.credential(token);
  // Creds acquired correctly
  await signInWithCredential(auth, credential); // <- this line is never resolving

The same happens when using @capacitor-firebase/authentication, also for MS, Google providers (The flow is a bit different but with the same result).

Important note is that we had exactly the same problem when using the Firebase version 9; but we were able to find a fix quickly: https://github.com/firebase/firebase-js-sdk/issues/5497

Basically the fix was to initialize auth with some kind of persistence for the capacitor environment:

let auth: Auth;
const getFirebaseAuth = (app: FirebaseApp) => {
  if (!auth) {
    if (Capacitor.isNativePlatform()) {
      auth = initializeAuth(app, { persistence: browserLocalPersistence });
    } else {
      auth = getAuth(app);
    }
  }
  return auth;
};

With our current version of Firebase (10.12.2), the same problem came back (inside two of our projects). We tried to switch the persistence types and as well, it didn't help. Btw - downgrading to our previous version (9.17.1) makes it functioning correctly.

Steps and code to reproduce issue

Requires some familiarity with Capacitor workflow

  1. Setup a firebase app and capacitor app Remember that firebaseui does not work inside capacitor environment, so
  2. Setup auth using @capacitor-firebase/authentication library or by handling the signin flow manually ( e.g. Google: https://firebase.google.com/docs/auth/web/google-signin)
  3. Build the capacitor app and run it inside Iphone emulator, try to authenticate using google provider.

paxvenv avatar Jun 27 '24 11:06 paxvenv