0

I'm trying to use the firebaseUI library for authentication in a react app made with create-react-app. It works great in a standard html/js app but I can't get it to work with react.

here is my simple login component:

import React, { Component } from 'react'
import * as firebase from 'firebase'
import firebaseui from 'firebaseui'

const dbConfig = {
  apiKey: ...,
  authDomain: ...,
  ...
}
firebase.initializeApp(dbConfig)

const uiConfig = {
  signInFlow: 'popup',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ]
}

class Login extends Component {

  componentDidMount() {
    console.log("component mounted")
    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

All the firebase stuff works until I try to initialize the firebaseUI widget using new firebaseui.auth.AuthUI(firebase.auth()) which is when it throws an error saying firebase.initializeApp is not a function. Problem seems to be stemming from node_modules/firebaseui/dist/npm.js:340 where initializeApp gets called.

Anyone else experienced this behavior (and hopefully resolved it)?

Here are my firebase dependancies btw:

"firebase": "^5.0.2",
"firebaseui": "^3.0.0"
Egor
  • 764
  • 2
  • 6
  • 11

1 Answers1

0

It is a problem with the new version of firebase (5.0.2). Switching to version 4.13.0 solved the issue.

Egor
  • 764
  • 2
  • 6
  • 11