ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined

Question

ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined

susovan87 opened this issue 6 years ago · comments

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.

Susovan Ghosh · Answer 1 · Wed Apr 25 2018 14:28:16 GMT+0800 (China Standard Time)

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 · Answer 2 · Fri Apr 27 2018 00:14:38 GMT+0800 (China Standard Time)

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"

Uriel Blanco · Answer 3 · Sat Apr 28 2018 02:26:40 GMT+0800 (China Standard Time)

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

Salvador Montiel · Answer 4 · Mon Apr 30 2018 02:25:13 GMT+0800 (China Standard Time)

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!

Susovan Ghosh · Answer 5 · Mon Apr 30 2018 11:32:00 GMT+0800 (China Standard Time)

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

Yen Chong · Answer 6 · Wed May 09 2018 05:41:16 GMT+0800 (China Standard Time)

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

Ryan Tunis · Answer 7 · Sun May 13 2018 03:08:25 GMT+0800 (China Standard Time)

Thank you. @SMontiel

Works for me to.

danfri86 · Answer 8 · Wed Aug 01 2018 03:42:11 GMT+0800 (China Standard Time)

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 · Answer 9 · Tue Jun 18 2019 07:03:44 GMT+0800 (China Standard Time)

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...

Rammuz_T · Answer 10 · Mon Jun 24 2019 04:06:40 GMT+0800 (China Standard Time)

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

s1rc4 · Answer 11 · Tue Aug 13 2019 04:45:07 GMT+0800 (China Standard Time)

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

csills · Answer 12 · Fri Apr 10 2020 23:25:48 GMT+0800 (China Standard Time)

Had to go with this for Angular/Fire 6.0.0

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

Gustavo Alarcón · Answer 13 · Thu Apr 16 2020 01:42:13 GMT+0800 (China Standard Time)

@danfri86 Thanks man, that approach worked for me !

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

Joseph Izang · Answer 14 · Thu May 07 2020 08:13:19 GMT+0800 (China Standard Time)

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 · Answer 15 · Fri Nov 06 2020 18:05:53 GMT+0800 (China Standard Time)

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 · Answer 16 · Sat Nov 28 2020 05:03:48 GMT+0800 (China Standard Time)

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",