ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined

[susovan87]

Version info

Angular: 5.2.10
Firebase: 4.13.0
AngularFire: 5.0.0-rc.6.0

Other (e.g. Node, browser, operating system) (if applicable):
@firebase/app: 0.1.10
Node: v8.11.1
Browser: Google Chrome Version 65.0.3325.181 (Official Build) (64-bit)

Test case

Firebase Authentication is not working. I have tried the same code as mentioned in 5. Getting started with Firebase Authentication. Got error message as below

ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined
    at AppComponent.login (app.component.ts:46)
    at Object.eval [as handleEvent] (AppComponent.html:13)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at eval (core.js:10629)
    at HTMLButtonElement.eval (platform-browser.js:2628)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)

Error in below line

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

Inspecting firebase shows no auth inside

Please note that I have already enabled Google Authentication from firebase console.

[susovan87]

Tried replacing import * as firebase from 'firebase/app'; →import * as firebase from 'firebase'; as suggested by this post https://stackoverflow.com/a/48865752/2231209

But no luck.

Asked for help in Stackoverflow too https://stackoverflow.com/a/50025372/2231209

[zoidbergZA]

I upgraded angularfire2 in my app to "5.0.0-rc.6.0" today and have exactly the same problem as @susovan87

version info:
"angularfire2": "^5.0.0-rc.6.0",
"@firebase/app": "^0.1.6",
"firebase": "^4.13.1",
"angular/core": "^5.2.10"

[urielblanco]

For the moment if you change the version of firebase to 4.12.1 work it.

[SMontiel]

I had the same problem!
Just change this:

import * as firebase from 'firebase';

in favor of

import { firebase } from '@firebase/app';

That works for me.
My dependencies:

"dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@angular/router": "5.2.10",
    "@firebase/app": "0.1.6",
    "angularfire2": "5.0.0-rc.6.0",
    "core-js": "2.4.1",
    "firebase": "4.13.1",
    "font-awesome": "4.7.0",
    "rxjs": "^5.5.10",
    "zone.js": "^0.8.26"
  }

Hope it helps!

[susovan87]

Thanks @SMontiel, import { firebase } from '@firebase/app'; solved the issue.

[fayeyen]

Thanks @SMontiel
import { firebase } from '@firebase/app';
works

[tuneis]

Thank you. @SMontiel

Works for me to.

[danfri86]

Issue is till open so I want to contribute my solution:

"firebase": "^5.3.0"

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

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

[ninipop]

Cant seem to get this to work either. Tried downgrading but that messed up a few of my call functions. Using latest version of everything...

[JonathanParra]

Hola, tenia el mismo error y la manera en que lo solucione, fue simplemente agregando en el index la siguiente linea:

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

[s1rc4]

Buenas! Como dice Jonathan tambien lo solucione con agregar al html:

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

[JoeBoxr]

Had to go with this for Angular/Fire 6.0.0

import { auth } from 'firebase/app'; import 'firebase/auth';

[gustavo-alarcon]

@danfri86 Thanks man, that approach worked for me !

"@angular/fire": "^6.0.0",
"firebase": "^7.13.2",

[joeizang]

I think @gustavo-alarcon's solution should be included in the installation instructions and readme. Developers shouldn't have to search and come here in the issues to find this out when it can be done. I am willing to update the readme if need be.

[dominic-ks]

For the record and anyone else ending up here, this worked for me:

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

Then I could use this, as a crude example

constructor(
    private angularFireAuth: AngularFireAuth,
) {
    this.angularFireAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}

I am using:

"@angular/fire": "^6.0.4"
"firebase": "^8.0.1"

[jakehe808]

For the record and anyone else ending up here, this worked for me:

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

Then I could use this, as a crude example

constructor(
    private angularFireAuth: AngularFireAuth,
) {
    this.angularFireAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
}

I am using:

"@angular/fire": "^6.0.4"
"firebase": "^8.0.1"

works on

"@angular/fire": "^6.1.2",
"firebase": "^8.1.1",