React-Firebase-GoogleAuthProvider不是构造函数 [英] React - Firebase - GoogleAuthProvider is not a constructor
问题描述
我正在尝试创建一个使用使用Google登录"按钮触发signInWithPopup(provider)
的React应用程序.但是,每次我调用new firebaseApp.auth.GoogleAuthProvider()
时,控制台都会返回一个错误.我只是尝试console.log()
result
.
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
.
未捕获的TypeError:_firebase_setup2.default.auth.GoogleAuthProvider不是构造函数
Uncaught TypeError: _firebase_setup2.default.auth.GoogleAuthProvider is not a constructor
firebase_setup.js
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
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
变量时总是遇到相同的错误.
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.
推荐答案
您正在将名称空间与实例混合:firebaseApp
只是用于配置数据的容器.这不是您创建提供程序实例的方式.
You're mixing namespaces with instance: the firebaseApp
is just a container for configuration data. It is not how you create a provider instance.
正确的方法是:
var provider = new firebase.auth.GoogleAuthProvider();
这篇关于React-Firebase-GoogleAuthProvider不是构造函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!