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() {  }
}

Caryloncaryn

Did you enable the google signin option in the firebase console? – Uriiah

@Uriiah - Yes, its enabled. – Caryloncaryn

The same code works fine for me. I can see a popup with my recent google accounts. just check the native way works? firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider()) – Uriiah

@Uriiah - Getting error firebase.auth is not a function. – Caryloncaryn

i think you have problem with import * as firebase from 'firebase/app';. may be its not imported correctly – Uriiah

@Uriiah - used cmd npm install angularfire2 firebase --save, anything need to add in app.module ? – Caryloncaryn

yes your above code should work, i don't know why. – Uriiah

yes you need to initialize your AngularFireModule in app.module.ts under imports section – Uriiah

@Uriiah - AngularFireModule already added, anything else ? – Caryloncaryn

@Uriiah - gor answer while re-install npm. check my answer – Caryloncaryn

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!

Caryloncaryn

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';

Hargrove

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());

Tannin

Answer 4

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

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

Plus

i'm having the same issue since updating to AngularFire: 5.0.0-rc.6.0 today. Angular V5.2.10 – Quasi

This works for me with firebase: 4.13.1 and angularfire2 5.0.0-rc.6.0 – Aniseed

Answer 5

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.

Ulna

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>

Legal

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'

Contestation

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';

Competent

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

Gabble

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.

Tillford

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>

Skilling

Answer 12

import { initializeApp, FirebaseApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

initializeApp(firebaseConfig);

initializeApp(firebaseConfig);

export const loginWhitGoogle = () => {

return signInWithPopup(new GoogleAuthProvider());

}

Sunup

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Viscus

Answer 13

instead of this:

import * as firebase from 'firebase/app';

use this:

import firebase from 'firebase/compat/app';

I hope this solution works for you as it did for me!

Phrase