firebaseui-web: Firebase UI is incompatible with Firebase SDK 9 (beta)

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!

Working on support over at #850 FYI.

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.

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?

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

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.

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!

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 😕

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?

😢 Almost 2 years…

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

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

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.