szier szier - 2 months ago 30
React JSX Question

React - Firebase - GoogleAuthProvider is not a constructor

I am trying to create a React application that uses a "Login with Google" button to trigger

signInWithPopup(provider)
. However each time I call
new firebaseApp.auth.GoogleAuthProvider()
my console returns an error. I am simply trying to
console.log()
the
result
.

The 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 appreciate any insight into this issue! I have looked up numerous tutorials but always run into the same error when attempting to declare the
provider
variable.

Answer

You're mixing namespaces with instance: the firebaseApp is just a container for configuration data. It is not how you create a provider instance.

The proper way is:

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