FirebaseUI doesn't work properly in chrome mobile randomly: 20s latency onAuthStateChanged event

[EmilioNicolas]

Describe your environment

• Operating System version: Mac OS 13.4
• Browser version: chrome 119 (on mobile compatibility)
• Firebase UI version: latest
• Firebase SDK version: latest

Describe the problem

If using my firebaseUI implementation, randomly it appears the error code: TypeError: u[v] is not a function

Then it is not after 20 seconds that I receive auth.onAuthStateChanged event

Why could this be happening?

Thanks in advance for your help!

[sbrett]

Also experiencing this issue, I have tried several combinations of the sign in flows and settings but have been unable to get this working as expected on mobile web.

[jhuleatt]

Sorry to hear that this is happening. I tried to reproduce the issue on the demo app in Chrome on my Pixel 5 with email sign-in, sign in with Google, and phone sign-in, and wasn't able to reproduce the issue.

Can you please share which mobile OS you're using, which sign-in method you're trying, and if possible a minimal code sample? That should help us figure this out.

[EmilioNicolas]

Ey! I solved it.

This changes worked for me:

Removal of HTML script tags:

Added imports in JS:

Sorry about the image format!

[jhuleatt]

@EmilioNicolas thanks for the update, and glad that fixed it! Just to help us chase down this issue - did you switch to the npm install of the Firebase SDK now that you've removed the gstatic script tags? I'm wondering if the bug may specifically apply to the combination of FirebaseUI 6.1.0 and Firebase 10.0.0 served from gstatic.

[EmilioNicolas]

Hi! Yep, I switched to npm and then all good so it seems you are right about the buggy combo

[sbrett]

Experiencing this on firebase 10.6.0 and firebaseui 6.1.0 via NPM.
Strangely enough it only seems to occur on the mobile web view (including chrome device toolbar).
The callback seems to take 20+ seconds, or sometimes not work at all.
Sometimes just clicking the "Sign in with Google" button results in a 10+ second load time.
TypeError: u[v] is not a function is often in the console.

Things I have tried:

• Ensuring client ID is correct
• Ensuring authorized domains in firebase console is correct
• Ensuring my list of authorized redirect URIs in the cloud console is correct
• Ensuring my list of authorized javascript origins in the cloud console is correct
• Trying both the firebaseapp.com and web.app domains as the value for the authDomain key in my config, as per the redirect best practices
• Trying various redirect URLs including __/auth/handler
• I have tried a couple of different combinations of versions of both packages but have not strayed too far from the latest

Here is a minimal version of my code:

export const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};


// Initialize Firebase
export const app = initializeApp(firebaseConfig);

export const firebaseAuthUiConfig = {
    callbacks: {
        signInSuccessWithAuthResult: function (authResult: any, redirectUrl: any) {
            return true;
        },
        uiShown: function () {
        }
    },
    signInSuccessUrl: getConfig().AUTH_REDIRECT_URL,
    signInOptions: [
        {
            provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            clientId: "",

        },
        {
            provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
        },
    ],
};


useEffect(() => {
  const unsubscribe = onAuthStateChanged(getAuth(app), (fbUser) => {   
    if(!fbUser){
      navigate("/login");
    }
    setUser(!!user);
  });

  return () => {
    unsubscribe();
  };
}, [user, setUser, navigate]);


const handleClick = () => {
    signOut(getAuth())
}

export const FbAuth = () => {

    useEffect(() => {
        const ui =
            firebaseui.auth.AuthUI.getInstance() ||
            new firebaseui.auth.AuthUI(getAuth(app));
        ui.start("#firebaseui-auth-container", firebaseAuthUiConfig);
    }, []);


    return (
        <div>
            <button onClick={handleClick}>Sign out</button>
            <div id="firebaseui-auth-container"></div>
        </div>
    );
};

[sbrett]

Any update here? I am still experiencing this issue and have been trying for weeks to fix it with no luck.

[mwatz122]

@sbrett did you ever find a solution for this? i'm dealing with the exact same issue

[sbrett]

@mwatz122 Sorry to hear. I moved away from firebase UI and integrated with Firebase Auth directly, implementing the UI myself. I wish I did that from the start as it was quite simple and would've saved me from a lot of headaches.
From memory after some investigation I found that FirebaseUI simply doesn't work with the latest versions of the Firebase modules.
Best of luck