angularfire: ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 4
Comments: 16

Most upvoted comments

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

+30

danfri86 on Jul 31, 2018

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!

+27

SMontiel on Apr 29, 2018

Had to go with this for Angular/Fire 6.0.0

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

+11

JoeBoxr on Apr 10, 2020

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

susovan87 on Apr 30, 2018

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

susovan87 on Apr 25, 2018

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"

dominic-ks on Nov 6, 2020

@danfri86 Thanks man, that approach worked for me !

“@angular/fire”: “^6.0.0”, “firebase”: “^7.13.2”,

gustavo-alarcon on Apr 15, 2020

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

fayeyen on May 8, 2018

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

JonathanParra on Jun 23, 2019

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

jakehe808 on Nov 27, 2020

Thank you. @SMontiel

Works for me to.

tuneis on May 12, 2018