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

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