Firebaseui-web: Firebase auth PROVIDER_ID is undefined

[joshkuhar]

• Operating System version: macOS High Sierra 10.13.6
• Browser version: Chrome Version 68.0.3440.106
• Firebase UI version: firebaseui 3.4.1
• Firebase SDK version: 5.5.0
• Node: 8.11.1

I'm using react 16.5.0 and receiving the following error "Cannot read property 'PROVIDER_ID' of undefined"

I initialize firebase in a config file and import firebase and firebaseui like so

import firebase from '../config.js';
import firebaseui from 'firebaseui';

I'm able to use firebase.auth() in the same file. So I know firebase was initialized and is working.

firebase.auth().signInWithEmailAndPassword(username, password)

I enabled the Email/Password signin provider in the project console. Below is the code that I have in my componentDidMount() method.

 var uiConfig = {
      signInSuccessUrl: '/home',
      signInOptions: [firebase.auth.EmailAuthProvider.PROVIDER_ID]
 }

var ui = new firebaseui.auth.AuthUI( firebase.auth() );
ui.start('#firebaseui-auth-container', uiConfig);

Is anyone else running into this or have an idea what's going on?

[wti806]

I cannot replicate the issue. I suspect it's related to how you import the firebase library. Can you post your config.js file and deploy you app somewhere so we can help you debug?

[joshkuhar]

Below is the config.js file. Default is development. I used $firebase serve on both staging and development. I also did a build in both environments and deployed to staging and still got the error. I can deploy to staging if troubleshooting the config.js doesn't work. Will have to modify the app before deployment.

'use strict';

import * as firebase from 'firebase';
require("firebase/firestore");

var config = {};

switch (process.env.REACT_APP_ENV) {
    case 'production':
        config = {
            apiKey: "...",
            authDomain: "<app>production.firebaseapp.com",
            databaseURL: "...",
            projectId: "...",
            storageBucket: "...",
            messagingSenderId: "..."
        };
        break;
    case 'staging':
        config = {
            apiKey: "...",
            authDomain: "<app>staging.firebaseapp.com",
            databaseURL: "...",
            projectId: "...",
            storageBucket: "...",
            messagingSenderId: "..."
        };
        break;
    default:
        config = {
            apiKey: "...",
            authDomain: "<app>dev.firebaseapp.com",
            databaseURL: "...",
            projectId: "...",
            storageBucket: "...",
            messagingSenderId: "..."
        };
}

const db = firebase.initializeApp(config);

export default db;

[bojeil-google]

Hey @joshkuhar, this is not related to FirebaseUI. You will get better helping posting this question on https://github.com/firebase/firebase-js-sdk

[wti806]

@joshkuhar Don't you need to export the firebase object from config.js?

[joshkuhar]

@wti806 You are correct! I'm not sure why the auth() was working after initializing firebase and then exporting. I exported the config object and then initialized in the component. Thanks!

'use strict';

import React, {Component} from 'react';
import config from '../config.js';
import * as firebase from 'firebase';
import * as firebaseui from 'firebaseui';

const db = firebase.initializeApp(config);

const uiConfig = {
    signInSuccessUrl: '/',
    signInOptions: [ firebase.auth.EmailAuthProvider.PROVIDER_ID ],
    tosUrl: '/'
};

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            error: ''
        }
    }
    componentDidMount() {
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        ui.start('#firebaseui-auth-container', uiConfig);
    }
    render() {
        return <div id="firebaseui-auth-container"></div>
    }
} 

export default Login;