2016-09-08 10 views
6

"Googleでログイン"ボタンを使用してsignInWithPopup(provider)をトリガするReactアプリケーションを作成しようとしています。しかし、私がnew firebaseApp.auth.GoogleAuthProvider()と呼ぶたびに、私のコンソールはエラーを返します。私は単にconsole.log()resultにしようとしています。React - Firebase - GoogleAuthProviderがコンストラクタではありません

エラー:ここ Uncaught TypeError: _firebase_setup2.default.auth.GoogleAuthProvider is not a constructor

は私のコードは

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> 

    ); 
    } 
} 
0であります

この問題についての洞察をいただければ幸いです。私は数多くのチュートリアルを調べましたが、provider変数を宣言しようとすると、常に同じエラーが発生します。

+0

は、しばらく前に同様の問題があったが、私の問題は、 '古いドキュメントと、もはやコンストラクタをサポートしていfirebase APIの最新バージョンを、使用していたこれを行っている必要があります新しいFirebase ... ' – StackOverMySoul

+0

@Davidlrntは素早い応答に感謝します!私は新しい文書を使用しています。 – szier

+0

'console.log(typeof firebaseApp.auth.GoogleAuthProvider)'のヒントです。 –

答えて

14

インスタンスと名前空間を混在させようとしています。firebaseAppは、構成データの単なるコンテナです。プロバイダインスタンスを作成する方法ではありません。

適切な方法は次のとおりです。

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

それはうまくいった!どうもありがとうございます! – szier

+0

これはライブラリreact-native-firebaseで動作しますか? –

2

私もこの「ないコンストラクタ」の問題といくつかの他のエラーに走りました。それは

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

されている必要がありますとき、私はまた、このような名前で私のアプリを初期化した

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

初期化されませんでした
var myApp = firebase.initializeApp(appConfig, "App"); 

私はこのような何かをしていましたDEFAULTアプリ&より多くのエラーが発生しました。 (私は1つのアプリを持っているので)私は

var myApp = firebase.initializeApp(appConfig); 
関連する問題