React - Firebase - GoogleAuthProvider is not a constructor

Question

I am trying to create a React application that uses the "Sign in with Google" button to call signInWithPopup(provider) . However, every time I call new firebaseApp.auth.GoogleAuthProvider() , my console returns an error. I am just trying console.log() result .

Error: Uncaught TypeError: _firebase_setup2.default.auth.GoogleAuthProvider is not a constructor

Here is my code

firebase_setup.js

 import * as firebase from 'firebase'; const firebaseConfig = { apiKey: "AIzaSyAKlWtFZvbvuNy2qC68Xt5xzaTQVyy9l2o", authDomain: "doordash-ff045.firebaseapp.com", databaseURL: "https://doordash-ff045.firebaseio.com", storageBucket: "doordash-ff045.appspot.com", }; const firebaseApp = firebase.initializeApp(firebaseConfig); export default firebaseApp; 

login.js

 import React, { Component } from 'react'; import { browserHistory } from 'react-router'; import firebaseApp from '../../../services/firebase_setup'; export default class Login extends Component { componentDidMount() { firebaseApp.auth().onAuthStateChanged(user => { if (user) { console.log(user); browserHistory.push('/profile'); } }); } authenticate() { var provider = new firebaseApp.auth.GoogleAuthProvider(); provider.addScope('profile'); provider.addScope('email'); firebaseApp.auth().signInWithPopup(provider) .then(result => { console.log(result); }) } render() { return ( <div> <h1>Login Page</h1> <button onClick={this.authenticate.bind(this)}> Login with Google </button> </div> ); } } 

I would be grateful for your understanding of this problem! I looked through a lot of manuals, but always encountered the same error when trying to declare a provider variable.

Answer 1

You mix namespaces with an instance: firebaseApp is just a container for configuration data. This is not how you create the provider instance.

The right way:

 var provider = new firebase.auth.GoogleAuthProvider(); 

Answer 2

I came across this problem not a "constructor" and some other errors. I was doing something like this:

 var googleProvider = new myApp.auth.GoogleAuthProvider(); 

When it was supposed to be

 var googleProvider = new firebase.auth.GoogleAuthProvider(); 

I also initialized my application with this name:

 var myApp = firebase.initializeApp(appConfig, "App"); 

Which did not initialize the DEFAULT application and gave me more errors. I had to do this (since I only have one application)

 var myApp = firebase.initializeApp(appConfig);