Firebaseui-web: "Cannot read property 'PROVIDER_ID' of undefined" error on version 2.1.1

[geooot]

For some reason, when clicking on any button results on this JavaScript error

firebaseui.js:331 Uncaught TypeError: Cannot read property 'PROVIDER_ID' of undefined
    at firebaseui.js:331
    at b (firebaseui.js:331)
    at firebaseui.js:73
    at ol.<anonymous> (firebaseui.js:273)
    at cf (firebaseui.js:148)
    at Bg.h.dispatchEvent (firebaseui.js:147)
    at Dg (firebaseui.js:184)
    at Bg.Tc (firebaseui.js:183)
    at af (firebaseui.js:144)
    at HTMLButtonElement.We (firebaseui.js:145)

My initialization code:

<script>
          var config = window.settings.FirebaseCredentials;
          firebase.initializeApp(config);
</script>
<script src="https://cdn.firebase.com/libs/firebaseui/2.1.1/firebaseui.js"></script>
<script>

   var uiConfig = {
        signInSuccessUrl: "/",
        signInOptions: [
            // Leave the lines as is for the providers you want to offer your users.
            firebase.auth.GoogleAuthProvider.PROVIDER_ID,
            firebase.auth.GithubAuthProvider.PROVIDER_ID,
            firebase.auth.TwitterAuthProvider.PROVIDER_ID,
            firebase.auth.FacebookAuthProvider.PROVIDER_ID
        ],
        tosUrl: "http://howlbits.com"
    };

    // Initialize the FirebaseUI Widget using Firebase.
    var ui = new firebaseui.auth.AuthUI(firebase.auth());
    // The start method will wait until the DOM is loaded.
    ui.start('#firebase-auth-container', uiConfig);
...

[geooot]

Found out the issue:

Firebase sdk was at version 3.3.3 updating it to the latest version solved the problem

[AnaghaJais]

Hi,how did you update to new version.I am also facing the same issue.I am using 4.1.3 firebase sdk.

[israelidanny]

I can confirm that this happens to me in the latest sdk version.

[wti806]

@israelidanny Can you provide the version of firebaseui and firebase sdk you are using?

[geooot]

For me it is working with Firebase Version: 4.1.2, Firebase UI Version: 2.2.1

[ChrisBlueSpurs]

I'm on firebase 5.0.4 and firebaseui 3.0.0 getting this same error.

let fire = require('firebase');
let firebaseui = require('firebaseui');

var config = {
    //redacted
};

let firebase = fire.initializeApp(config);
firebase.firestore().settings({ timestampsInSnapshots: true });

const firestore = firebase.firestore();
let ui = new firebaseui.auth.AuthUI(firebase.auth());

let uiConfig = {
    callbacks: {
        signInSuccessWithAuthResult: function(authResult, redirectUrl) {
            return false;
        },
        uiShown: function() {
            document.getElementById('loader').style.display = 'none';
        }
    },
    signInFlow: 'popup',
    signInSuccessUrl: '<url-to-redirect-to-on-success>',
    signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
    tosUrl: '<your-tos-url>'
};

ui.start('#firebaseui-auth-container', uiConfig);

gives me:
TypeError: Cannot read property 'PROVIDER_ID' of undefined

  31 |     },
  32 |     signInFlow: 'popup',
  33 |     signInSuccessUrl: '<url-to-redirect-to-on-success>',
> 34 |     signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
  35 |     tosUrl: '<your-tos-url>'
  36 | };
  37 | 

[dewetvdm]

For those of you facing this issue I realised when initialising firebase, this causes the issue.

This works for me

import firebase from 'firebase';
import firebaseui from 'firebaseui';

const firebaseAuthObj = firebase.auth;

const config = { ... };

firebase.initializeApp(config);

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

const uiConfig = {
    ...
    signInOptions: [firebaseAuthObj.GoogleAuthProvider.PROVIDER_ID],
    ...
};

Note when setting signInOptions for uiConfig, I reference the firebaseAuthObj

[ChrisBlueSpurs]

Thank you! This did lead to a solution but interestingly, it was nothing to do with firebaseAuthObj and everything to do with importing firebase and firebaseui. I had used

let fire = require ('firebase');
let firebaseui = require('firebaseui');

let config = { ... };

let firebase = fire.initializeApp(config);

Changing this simply to:

import firebase from 'firebase';
import firebaseui from 'firebase';

let config = { ... };

firebase.initializeApp(config);

Made it work. Interesting that the way I was doing it actually gave me working access to cloud firestore, but problems with firebase auth. Anyway, thanks very much for the help, still fairly new to React and ES6. Hopefully this can help someone else if they ever come across it.

[elayers]

Adding worked for me

[inform880]

I'm having the same issue. I'm using the exact same example found here: https://github.com/firebase/firebaseui-web-react, except I'm using email provider, and I'm importing firebase from my config file, set up like so:

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/storage";

const firebaseConfig = {
...
};

const app = firebase.initializeApp(firebaseConfig);

export default app;

Does anyone have any idea why this would be happening? I'm on the latest version of firebase. One important thing to note is that firebase storage is working correctly.

[microwriting]

import firebaseui from 'firebaseui';
I was using the above and it didn't work, but
The following worked fine.
import * as firebaseui from 'firebaseui'