CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-authentication
szier
szier

Reputation: 1507

React - Firebase - GoogleAuthProvider is not a constructor

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.

error

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>

    );
  }
}

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.

Upvotes: 19

Views: 18258

Answers (6)

subhajit das
subhajit das

Reputation: 445

It is not firebaseApp which you are exporting from firebase.js.

instead of that imoprt firebase from "firebase" //the actual sdk

and do this const auth = firebase.auth();

on firebase.js file and export it

then on the app.js just import the auth.

This is how I got my way out

Upvotes: 0

Daniel Garcia
Daniel Garcia

Reputation: 11

Hi in your login.js modify the firebase import

try replace this:

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

for this:

import firebaseApp from "firebase/app";

I hope that solve the problem. Have a nice day!

Upvotes: 0

Aamir
Aamir

Reputation: 176

I also faced the same issue and now fortunately is working!

put this in firebase.js

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

and import in login.js

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

Upvotes: 2

pasx
pasx

Reputation: 2975

I ran into this issue as I was trying to store a reference to firebase.auth to use in multiple functions.

I found that the GoogleAuthProvider function is a property of the auth firebase function whereas the signInWithPopup, onAuthStateChanged, signOut, etc. are on the firebase.auth.Auth returned by the firebase.auth() function.

This is what my code now looks like.

    //constructor
    this.auth = firebase.auth;
    this.auth_ = firebase.auth();
    ...
    //sign in function
    var provider = new this.auth.GoogleAuthProvider();
    this.auth_.signInWithPopup(provider);

The sample code at https://codelabs.developers.google.com/codelabs/firebase-web/#5 is correct but this is a hard to notice difference when you paste this code in your solution and start messing with it.

Upvotes: 2

Trev14
Trev14

Reputation: 4116

I ran into this "not a constructor" problem and some other errors as well. I was doing something like this:

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

When it should have been

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

I was also initializing my app with a name like this:

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

Which didn't initialize a DEFAULT app & gave me more errors. I should have done this (since I only have one app)

var myApp = firebase.initializeApp(appConfig);

Upvotes: 5

Frank van Puffelen
Frank van Puffelen

Reputation: 598827

You're mixing namespaces with instance: the firebaseApp is just a container for configuration data. It is not how you create a provider instance.

The proper way is:

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

Upvotes: 36

Related Questions