React - Firebase - GoogleAuthProvider 不是构造函数

Posted 2023-02-22

【中文标题】React - Firebase - GoogleAuthProvider 不是构造函数

【英文标题】：React - Firebase - GoogleAuthProvider is not a constructor

【发布时间】：2017-01-16 18:24:11

【问题描述】：

我正在尝试创建一个使用“使用 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;

登录.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 变量时总是遇到同样的错误。

【问题讨论】：

前段时间有类似的问题，我的问题是使用旧文档和最新版本的 firebase api，它不再支持构造函数new Firebase...

@Davidlrnt 感谢您的快速回复！不过我正在使用新文档。

console.log(typeof firebaseApp.auth.GoogleAuthProvider) 寻找线索。

@JaredSmith 谢谢你，但不幸的是我得到了和以前一样的错误

@szier 你必须把它放在 before 你尝试调用它。一旦抛出错误，除非它被捕获，否则该脚本中的其余代码将不会运行。

【参考方案1】：

您将命名空间与实例混合在一起：firebaseApp 只是配置数据的容器。这不是您创建提供程序实例的方式。

正确的做法是：

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

【讨论】：

这是否适用于库 react-native-firebase？

【参考方案2】：

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

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

应该是什么时候

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

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

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

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

var myApp = firebase.initializeApp(appConfig);

【参考方案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 的示例代码是正确的，但是当您将此代码粘贴到解决方案中并开始使用它时，很难注意到差异。

【参考方案4】：

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

把它放在 firebase.js 中

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

并在 login.js 中导入

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

【参考方案5】：

您好，在您的 login.js 中修改 firebase 导入

尝试替换这个：

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

为此：

import firebaseApp from "firebase/app";

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

【参考方案6】：

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

而不是“firebase”中的那个 imoprt firebase //实际的 sdk

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

在 firebase.js 文件上并导出它

然后在 app.js 上只需导入身份验证。

这就是我的出路