Firebase UI is incompatible with Firebase SDK 9 (beta)

[johanrd]

• Firebase UI version: 4.8.0
• Firebase SDK version: 0.900.19

Firebase SDK 9 is now released in beta. When testing with Firebase UI 4.8.0, it becomes clear that Firebase UI is not ready to be used with the modularized import api of Firebase SDK 9.

Steps to reproduce: 1) Load Firebase UI with Firebase SDK 9:

import { getApp } from 'firebase/app'
import { getAuth }  from 'firebase/auth'
import * as firebaseui from 'firebaseui';

const app = getApp();
const auth = getAuth(app);
uiConfig = (…)
new firebaseui.auth.AuthUI(auth).start('#firebaseui-auth-container', uiConfig);

2. Experience TypeError, since firebase is undefined in firebaseui-web: https://github.com/firebase/firebaseui-web/blob/1a8f9e523f76df7a6c5da36b63b4d2a5b34b64ef/javascript/widgets/authui.js#L127

   TypeError: Cannot read property 'initializeApp' of undefined

@davideast has commented on the issue over at https://github.com/firebase/firebase-js-sdk/discussions/4375#discussioncomment-330765 in February:

We don't have a version of Firebase UI available for the new SDK just yet. But hang tight!

I could not see the issue being tracked here, so therefore I'm posting it as a specific reproducible bug to track. (The theme is somewhat already addressed in #257, however there as a more general issue).

[bojeil-google]

Hey @johanrd, this is a known limitation (documented in official docs too). v9 is still in beta. We will update the README to also reflect this issue.

[cairomassimo]

Documentation says:

Modular v9 is not currently compatible with FirebaseUI for Web. The v9 compat library permits its usage alongside v9, but without the app size reduction and other benefits of the v9 SDK.

Can you please explain how to do it, if at all possible?

[vujins]

Note: FirebaseUI is not compatible with the v9 modular SDK. The v9 compatibility layer (specifically, the app-compat and auth-compat-exp packages) permits the usage of FirebaseUI alongside v9, but without the app size reduction and other benefits of the v9 SDK

Source: https://firebase.google.com/docs/auth/web/firebaseui

Has anyone solved this? I've tried importing both files mentioned above but it still doesn't work. I can't find documentation about this.

[j-ea]

If I run,

npm install --save firebase@9.0.0-beta.1
npm install firebaseui --save

I get an npm error,

While resolving: svelte-app@1.0.0
Found: firebase@9.0.0-beta.2
node_modules/firebase
  firebase@"^9.0.0-beta.1" from the root project

Could not resolve dependency:
peer firebase@">=8.2.4" from firebaseui@4.8.0
node_modules/firebaseui
  firebaseui@"*" from the root project

Full error: eresolve-report.txt

Did anyone else trying to use Firebase UI with Firebase SDK 9 have this issue?

[tim-harding]

I had to add --legacy-peer-deps to make the installation work. However, I have yet to make the compatibility work. One thing I've found is that you need to initialize the app using the compatibility API, otherwise it says you have not initialized the app. Even still, I'm getting an error in the console: export 'default' (imported as 'firebase') was not found in 'firebase/app' I think this means that the library is trying to access the Firebase API directly and not just through the auth handle you pass to it. Not sure there's much to be done for that until the devs support v9. Guess I'll be rolling back for now. I did see this as a possible remedy, though I haven't tried it: https://github.com/firebase/firebaseui-web/issues/722#issuecomment-735018681

[jamesdaniels]

Working on support over at #850 FYI.

[jamesdaniels]

This is available for testing now, npm i --save firebaseui@next firebase@next

[johanrd]

Great. I can verify that firebaseui-web@0.6 *works* with the following versions:

"firebase": "^9.0.0-202171919375",
"firebaseui": "^0.600.0-rc.0",

…However: As I understand it, the expected bundle size reduction from the modularized import API of firebase@9 is still a distant dream as long as firebaseui@0.6 imports the whole shebang from firebase/app and firebase/auth. @jamesdaniels should I create other issues for this, or is that already part of the plan for firebaseui@0.6?:

1) Make firebaseui utilize the modularized import API of firebase@9, e.g. something like:

-import firebase from 'firebase/compat/app';
-import 'firebase/compat/auth';
+ import { AuthCredential, GoogleAuthProvider, PhoneAuthProvider, EmailAuthProvider, GithubAuthProvider, SAMLAuthProvider, OAuthProvider, RecaptchaVerifier, Auth } from 'firebase/compat/auth';

2) Make the API of firebaseui-web itself modularized (as opposed to import * as firebaseui from 'firebaseui'), e.g. something like:

-export { auth };
+ export { auth, FirebaseUiHandler, selectTenant, getAuth, startSignIn, reset, showProgressBar, hideProgressBar, completeSignOut, handleError, processUser, AuthUI, getInstance, disableAutoSignIn, start, setConfig, signIn, reset, delete, isPendingRedirect, AuthUIError, toJSON, ACCOUNT_CHOOSER_COM, GOOGLE_YOLO, NONE, PROVIDER_ID};

…or have I misunderstood what is possible/viable here?

[ghost]

Any more updates or progress on getting Firebase UI compatible with Firebase SDK 9?

[sam-gc]

@johanrd the way the Firebase UI library is written currently is not compatible with the modular structure of v9, so it's unlikely Firebase UI will benefit from the tree shaking features anytime soon. It's something we're definitely looking into but for the time being I can't say when or if we'll have an update there.

@kcb-reninja the library should be compatible with v9 (compat). If you're seeing issues, please file a separate bug report.

Thanks all!

[admeola1]

Hi if possible could someone update me on the situation as I am currently trying to use the firebase auth UI and have had no luck for a couple of weeks while integrating it into react. The firebase version I am using is 9.22.0, is this version okay to use along side the firebase auth drop in ui solution, any feedback will be geat, thanks

[xil222]

@admeola1 there's no Firebase JS SDK v9.22.0 but only v9.3.0 or v9.2.0. And yes, it is compatible with react just make sure import following the official doc import format firebase/compat/xxrather than firebase/xx

[shauryaaher]

I have the same issue. I'm using a React JS app. It would be really helpful if the Firebase team could fix it(including it in the v9 SDK and not only the v9 compact SDK).

[shauryaaher]

Can't use the compat library. I miss out on the cool features.

[sam-gc]

Hi @shauryaaher, for now FirebaseUI-web only works with v9 via the compatibility layer. We know this is a pain point, and we're investigating updates to allow it to work with the modular syntax, but at this time I can't share any timelines.

[shauryaaher]

Hi @shauryaaher, for now FirebaseUI-web only works with v9 via the compatibility layer. We know this is a pain point, and we're investigating updates to allow it to work with the modular syntax, but at this time I can't share any timelines.

Ok. Let's hope it comes around soon. I would be really good if it comes around a week after Google IO. I'm terrible at CSS styling, and I don't have a very big team to handle that work for me.

[samos123]

Could someone please post an example on how to get Firebaseauth UI to work with v9 with the compatibility layer? I'm getting stuck with this error and I suspect it's because I'm not importing the libraries correctly:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[glennsimon]

Could someone please post an example on how to get Firebaseauth UI to work with v9 with the compatibility layer? I'm getting stuck with this error and I suspect it's because I'm not importing the libraries correctly:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This is what worked for me. I am using webpack with a css loader so I can import css as shown below. First, npm install the latest firebase and firebaseui. Then the code looks like this:

import { getAuth } from 'firebase/auth';

import firebase from 'firebase/compat/app';
import * as firebaseui from 'firebaseui';
import 'firebaseui/dist/firebaseui.css';

const auth = getAuth();
const ui = new firebaseui.auth.AuthUI(auth);

const uiConfig = {
  signInSuccessUrl: './',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    // firebase.auth.GithubAuthProvider.PROVIDER_ID,
    // firebase.auth.PhoneAuthProvider.PROVIDER_ID,
  ],
  // Terms of service url.
  tosUrl: './#tos',
  // Privacy policy url.
  privacyPolicyUrl: './#privacy',
};

// The start method will wait until the DOM is loaded.
ui.start('#firebaseuiAuthContainer', uiConfig);

Then I added an empty div with id='firebaseuiAuthContainer' to my html where I wanted the sign in UI to show up.

It's kind of weird because you have to use a hybrid v8/v9 way of getting auth and the UI. I finally found the above after digging for a long time in the firebase documentation, but I can't find the link, or I would attach it. I agree that a clean v9 version of this feature is needed. Hope this helps!

[HugoGresse]

Having a tree-shaking JS is very important to reduce bandwidth and JS sizes which is better for the environement too (less impact on client memory, faster parsing time, etc etc).

After almost 2y after v9 release, I would have think this library was updated already but it is not :/

[360macky]

😢 Almost 2 years...

[cupidchan]

On one hand, there are now some new Firebase features, e.g. AppCheck support only V9. On the other hand, this FirebaseUI can only use compat sdk. Can someone from Angular (@sam-gc?) or Firebase (@jamesdaniels?) team comment on if/when will this be fixed? This would at least give the community a better idea if we should switch to something else. Thanks!