2016-09-08 23 views
6

Próbuję utworzyć aplikację React, która używa przycisku "Zaloguj się z Google", aby wywołać signInWithPopup(provider). Jednak za każdym razem, gdy zadzwonię pod numer new firebaseApp.auth.GoogleAuthProvider(), moja konsola zwraca błąd. Po prostu próbuję uzyskać console.log() z result.React - Firebase - GoogleAuthProvider nie jest konstruktorem.

Błąd: Uncaught TypeError: _firebase_setup2.default.auth.GoogleAuthProvider is not a constructor

Oto mój kod

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> 

    ); 
    } 
} 

Byłbym wdzięczny za wszelkie informacje na ten temat! Sprawdziłem wiele tutoriali, ale zawsze napotykam na ten sam błąd podczas próby zadeklarowania zmiennej provider.

+0

miał podobny problem jakiś czas temu, mój problem został przy użyciu starych dokumentów i najnowszą wersję Firebase API, który nie obsługuje już konstruktor ' nowa baza Firebase ... ' – StackOverMySoul

+0

@Davidlrnt dzięki za szybką odpowiedź! Używam jednak nowych dokumentów. – szier

+0

'console.log (typeof firebaseApp.auth.GoogleAuthProvider)' dla wskazówki. –

Odpowiedz

14

Mieszanie przestrzeni nazw z instancją: firebaseApp to tylko kontener dla danych konfiguracyjnych. To nie jest sposób tworzenia instancji dostawcy.

Właściwym sposobem jest:

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

To zadziałało! Dziękuję bardzo! – szier

+0

Czy to działa z biblioteką react-native-firebase? –

2

wpadłem na tego „nie konstruktor” problem i kilka innych błędów, jak również. Robiłem coś takiego:

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

Kiedy powinno być

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

Byłem też inicjowanie moją aplikację o nazwie jak ten:

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

Który nie został zainicjowany DEFAULT aplikacja & dała mi więcej błędów. Powinienem zrobić to (ponieważ mam tylko jedną aplikację)

var myApp = firebase.initializeApp(appConfig); 
Powiązane problemy