Question

我正在尝试创建一个使用“使用Google登录”按钮触发signInWithPopup(provider)的React应用程序。但是每次我调用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

我遇到了这个＆＃34;而不是构造函数＆＃34;问题和其他一些错误。我正在做这样的事情：

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

什么时候应该

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

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

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

哪个没有初始化DEFAULT应用＆amp;给了我更多错误。我应该这样做（因为我只有一个应用程序）

var myApp = firebase.initializeApp(appConfig);

Answer 3

我遇到了这个问题，因为我试图存储对firebase.auth的引用以用于多个函数。

我发现GoogleAuthProvider函数是auth firebase函数的一个属性，而signInWithPopup，onAuthStateChanged，signOut等位于firebase.auth（）函数返回的firebase.auth.Auth上。

这就是我的代码现在的样子。

    //constructor
    this.auth = firebase.auth;
    this.auth_ = firebase.auth();
    ...
    //sign in function
    var provider = new this.auth.GoogleAuthProvider();
    this.auth_.signInWithPopup(provider);

https://codelabs.developers.google.com/codelabs/firebase-web/#5处的示例代码是正确的，但是当您将此代码粘贴到解决方案中并开始搞乱时，这是一个很难注意到的差异。

Answer 4

我也遇到了同样的问题，幸运的是现在工作了！

将其放入firebase.js

export const provider = new firebase.auth.GoogleAuthProvider();

并导入login.js

import {firebaseApp,provider} from '../../../services/firebase_setup';

Answer 5

Hi 在你的 login.js 中修改 firebase 导入

尝试替换这个：

import firebaseApp from '../../../services/firebase_setup';

为此：

import firebaseApp from "firebase/app";

希望能解决问题。祝你有美好的一天！

Answer 6

您从 firebase.js 导出的不是 firebaseApp。

而不是来自“firebase”的 imoprt firebase //实际的 sdk

然后这样做 const auth = firebase.auth();

在 firebase.js 文件上并导出

然后在 app.js 上导入 auth。

这就是我的出路

React - Firebase - GoogleAuthProvider不是构造函数

6 个答案: