React - Firebase - GoogleAuthProvider不是构造函数

Question

我正在尝试创建一个使用"使用Google登录"按钮来触发的React应用程序signInWithPopup(provider).但是,每次调用new firebaseApp.auth.GoogleAuthProvider()我的控制台都会返回错误.我只是想console.log()的result.

错误

未捕获的TypeError:_ firebase_setup2.default.auth.GoogleAuthProvider不是构造函数

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>

    );
  }
}

我很感激任何洞察这个问题!我已经查找了许多教程,但在尝试声明provider变量时总会遇到同样的错误.

Answer 1

您将命名空间与实例混合:firebaseApp它只是配置数据的容器.这不是您创建提供程序实例的方式.

正确的方法是:

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

Answer 2

我遇到了这个“不是构造函数”问题以及其他一些错误。我正在做这样的事情：

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

当它应该是

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

我还用这样的名称初始化我的应用程序：

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

这没有初始化默认应用程序并给了我更多错误。我应该这样做（因为我只有一个应用程序）

var myApp = firebase.initializeApp(appConfig);