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

user_16517725 0
Viewed 867

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):

enter image description here

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 firebase@9.0.0-beta.8 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!

angularfire firebase-authentication angular firebase next.js
2 Answers

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);
user_27097120

Here goes my solution. I only dynamic import firebase auth when I need it. So I don't call it in the entire application, only when am making request to firebase. If you have small to medium application, it should not be to much work. Tip: To keep the state of current user, use cookies.

const onSubmit = async () => {
  const { getAuth } = await import("firebase/auth");
  getAuth(firebase);
}
user_169007960
Related