'firebase-ui-auth firebaseui.auth is undefined

I'm trying to get firebase-ui-auth to work. I pasted what the documentation says to paste into my code (Found here):

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

I added the below to my <head> tag per here:

<script src="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.1/firebase-ui-auth.css" />

I believe this isn't working because it uses Firebase Web version 8 syntax instead of Web version 9, like I am using:

// Import the required SDKs  
        import { initializeApp  } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js"
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-analytics.js";
        import { getAuth, 
                createUserWithEmailAndPassword, 
                signOut, 
                signInWithEmailAndPassword, 
                onAuthStateChanged,
                GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-auth.js"
        import { getFirestore, collection, getDocs, addDoc } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-firestore.js"
        // Firebase configuration object
        const firebaseConfig = {
            apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
            authDomain: "xxxxxxxxxxxxx.firebaseapp.com",
            databaseURL: "",
            projectId: "xxxxxxxxxxxxxxx",
            appId: "x:xxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxx",
            measurementId: "xxxxxxxxxxxxxxxx"
        }
        // Initialize Firebase App
        const app = initializeApp(firebaseConfig)
            // Initialize Analytics
            const analytics = getAnalytics(app);
            // Initialize Authenticaion
            const auth = getAuth(app)
            // Initiailze Cloud Firestore DB
            const db = getFirestore(app)
            // Initialize Google Auth
            const googleProvider = new GoogleAuthProvider()
            // Initialize the FirebaseUI Widget using Firebase.
            var ui = new firebaseui.auth.AuthUI(firebase.auth());

I've tried Googling around to find the Web version 9 syntax to no avail and even just tried experimenting with random imports, such as the below to no avail as well.

import { AuthUI } from "https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth.js"
var firebaseui = require(["https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth.js"])

Does anyone know the Web version 9 syntax for this or am I being dense and missing something obvious?

Thank you kindly.

javascript firebase

Solution 1:^[1]

I'm struggling with getting this going also, but I found this here:

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

Solution 2:^[2]

As was said, you'll need to use the compat versions of v9 to get firebaseui to work. Here's what worked for me:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import * as firebaseui from 'firebaseui';

const firebaseConfig = {
//your configs
}


var app = firebase.initializeApp(firebaseConfig);
var ui = new firebaseui.auth.AuthUI(app.auth());

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	cblock
Solution 2	Kevin Atherton

'firebase-ui-auth firebaseui.auth is undefined

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]