Firebase v9 loads a large iframe.js (263K) on mobile

Question

After upgrading Firebase from V8 to V9, on mobile version only, there is an IFRAME loading a huge javascript file (263K) from https://[Firebase projectId].firebaseapp.com/__/auth/iframe.js (See image below):

The only clue I've found so far is that it could be related to third-party cookies restrictions in chrome as mentioned in this forum: https://groups.google.com/g/firebase-talk/c/TC1xTPG85EI.

I'm not using any cookie restrictions in Chrome since all cookies are allowed based on settings here: chrome://settings/cookies?search=cookies

Also, I have disabled Safe Browsing Enhanced protection and set it to No protection (not recommended) here: chrome://settings/security?search=cookies

but iframe.js is still being loaded in mobile mode.

I am using [email protected] library with version 9 modular (not compat) code snippets here: https://firebase.google.com/docs/web/modular-upgrade.

Any idea or clue about getting rid of this huge iframe.js file will be appreciated. Even though the library is BETA, everything else works as expected with tree-shaking that considerably reduced client side package size.

You can test with Lighthouse on my personal Website here: https://guydumais.digital

Thanks in advance, see You!

Answer 1

We also had this problem for quite a while, I've just recently found this link https://firebase.google.com/docs/auth/web/custom-dependencies

On mobile browsers, the library will automatically open an iframe to your Auth domain preemptively. This is done to make the experience seamless for most users, but it can impact performance by loading additional code right when the app starts. This behavior can be avoided by utilizing initializeAuth() and manually passing the browserPopupRedirectResolver dependency to the functions that need it

import {initializeAuth, browserLocalPersistence, browserPopupRedirectResolver, indexedDBLocalPersistence, signInWithRedirect, GoogleAuthProvider} from "firebase/auth";
import {initializeApp} from "firebase/app";

const app = initializeApp({/** Your app config */});
const auth = initializeAuth(app, {
  persistence: [indexedDBLocalPersistence, browserLocalPersistence],
});

// Later
signInWithRedirect(auth, new GoogleAuthProvider(), browserPopupRedirectResolver);