TypeError: Cannot read property 'GoogleAuthProvider' of undefined

Question

Using Angular cli v5 and angularfire2 v5, There is no error on console and terminal, all running fine but while calling google login function getting error on browser console.

Source code :

import { Component, OnInit, HostBinding  } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { moveIn } from '../router.animations';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [AngularFireAuth],
  animations: [moveIn()],
  host: {'[@moveIn]': ''}
})
export class LoginComponent implements OnInit {

  error: any;
  constructor(public afAuth: AngularFireAuth) {  }

  loginGoogle() {
     this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  logout() {
     this.afAuth.auth.signOut();
  }

  ngOnInit() {  }
}

Answer 1

Got warning message while npm install again, the message is [email protected] requires a peer of firebase@^4.5.0 but none was installed, then tried to install firebase alone with 4.5.0.

npm install [email protected] --save

then changed the import :

from import * as firebase from 'firebase/app';

to import * as firebase from 'firebase';

Runs fine now.

Note : finally added import { AngularFireAuthModule } from 'angularfire2/auth'; in app.module to avoid Uncaught (in promise): Error: No provider for AngularFireAuth!

Answer 2

Use both the below imports. It should solve your issue.

import * as firebase from 'firebase/app';
import 'firebase/auth';

Note that importing the whole firebase (development SDK) like below will work just as fine, but you will get a warning in the console to import only the individual SDK components you intend to use. This method is not recommended when deploying Firebase apps to production.

import * as firebase from 'firebase';

Answer 3

At import section add these lines of code:

import * as firebase from 'firebase/app'; import 'firebase/auth';

In your code:

firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider());

Answer 4

this worked for me: I'm using Vue.js

import firebase from 'firebase/app'
...
created() {
    let provider = new firebase.auth.GoogleAuthProvider()
}

I'm not sure how this should be for Angular. Maybe this can help for Vue.js developers, so I'm leaving this here.

Answer 5

Finally got solution at https://github.com/firebase/angularfire/issues/968

Just changing firebase import to import { firebase } from '@firebase/app'; solved the issue.

Answer 6

use this in your html page where you want to use firebase authentication.

<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>

Answer 7

If you only using import firebase from 'firebase/app'

You should get this result :

TypeError: Cannot read property 'GoogleAuthProvider' of undefined

You may add :

import 'firebase/auth'

Answer 8

I am not sure if this is related but I fix a similar issue by importing the auth module like this:

import { AngularFireAuth } from '@angular/fire/auth';
import { firebase } from '@firebase/app';
import '@firebase/auth';

Answer 9

my firebase.js (plugin)

import firebase from "firebase/app";
import "firebase/auth";
import dotenv from "dotenv";
dotenv.config();

// Import needed firebase modules

let config = {
  apiKey: process.env.VUE_APP_APIKEY,
  authDomain: process.env.VUE_APP_AUTHDOMAIN,
  databaseURL: process.env.VUE_APP_DATABASEURL,
  projectId: process.env.VUE_APP_PROJECTID,
  storageBucket: process.env.VUE_APP_STORAGEBUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_APP_ID,
  measurementId: process.env.VUE_APP_MEASUREMENT_ID
};

// Init our firebase app
firebase.initializeApp(config);

my component code

import firebase from "../plugins/firebase.js";  **//error is here**
import { required, email } from "vuelidate/lib/validators";
import { mapGetters, mapMutations } from "vuex";
import { GET_LOADING, SET_LOADING } from "../store";

enter image description here

here is what i did to fix my problem, am using vue and firebase google auth. i was importing a plugin file i had(firebase.js) created ,instead you should import firebase/app whenever you want to use google or any other authentication method lile;

import firebase/app

not

import firebase from '../plugins/firebase.js'

now my component code looks like this.

    import firebase from "firebase/app";  
    import { required, email } from "vuelidate/lib/validators";
    import { mapGetters, mapMutations } from "vuex";
    import { GET_LOADING, SET_LOADING } from "../store";

this worked for me

Answer 10

Downgrading the firebase package is a viable solution.

In your package.json, under the dependencies, change the version from 4.13.0 to 4.12.0, like so:

"dependencies": {
     ...
     ...
     "firebase": "4.12.0"
     ...
     ...
}

Then run npm install.

Answer 11

Got the same error. "Cannot read property 'GoogleAuthProvider' of undefined"

Not using Angular JS but I solved it by including the SDK of the firebase auth product in my HTML page:

<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-auth.js"></script>