Firebaseui-web: 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);

1. 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 [email protected]
npm install firebaseui --save

I get an npm error,

While resolving: [email protected]
Found: [email protected]
node_modules/firebase
  firebase@"^9.0.0-beta.1" from the root project

Could not resolve dependency:
peer firebase@">=8.2.4" from [email protected]
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.