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:
   

   firebaseui-web/javascript/widgets/authui.js

   Line 127 in 1a8f9e5

   var tempApp = firebase.initializeApp({

TypeError: Cannot read property 'initializeApp' of undefined

@davideast has commented on the issue over at firebase/firebase-js-sdk#4375 (comment) 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: #722 (comment)

[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?

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/xx rather than firebase/xx