React - Firebase - GoogleAuthProvider 不是构造函数

IT技术 javascript reactjs firebase firebase-authentication
2021-04-26 12:08:24

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

错误

未捕获的类型错误：_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变量时总是遇到相同的错误。

4个回答

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

正确的做法是：

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

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

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

应该是什么时候

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

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

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

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

var myApp = firebase.initializeApp(appConfig);

我在尝试存储对 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 上的示例代码是正确的，但是当您将此代码粘贴到解决方案中并开始弄乱它时，很难注意到差异。

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

把它放在 firebase.js 中

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

并在 login.js 中导入

import {firebaseApp,provider} from '../../../services/firebase_setup';
其它你可能感兴趣的问题
上一篇批量生产的 FDM 打印机何时可用？ 下一篇如何在 Next.js 应用程序中仅获取一次数据并使其对服务器和客户端中的所有应用程序均可访问