Cannot read properties of undefined (reading 'GoogleAuthProvider')

[falk-stefan]

trafficstars

I am trying to implement a minimum working example to find out why I get a TOKEN_EXPIRED error just a few seconds after logging in. For this I am preparing a StackBlitz example which uses the same package versions.

However, it's not possible to run the login-routine because the imports to not seem to work as I am getting a TypeError stating:

Cannot read properties of undefined (reading 'GoogleAuthProvider')

auth.service.ts

import {Injectable} from "@angular/core";
import firebase from "firebase/compat/app";
import {AngularFireAuth} from "@angular/fire/compat/auth";
import {NGXLogger} from "ngx-logger";
import auth = firebase.auth;


@Injectable()
export class AuthService {

  private static user: firebase.User | null;

  private static fbAuth: AngularFireAuth;

  private static logger: NGXLogger;

  constructor(
    fbAuth: AngularFireAuth,
    logger: NGXLogger
  ) {
    AuthService.fbAuth = fbAuth;
    AuthService.logger = logger;
  }

  public static signInWithGoogle() {
    return this.signIn(new auth.GoogleAuthProvider());
  }

  private static signIn(provider: auth.AuthProvider) {
    return this.fbAuth
      .signInWithPopup(provider)
      .then(
        (userCredentials) => {
          AuthService.user = userCredentials.user;
          return userCredentials.user;
        }
      );
  }
}

package.json

"dependencies": {
  "@angular/animations": "~12.2.0",
  "@angular/common": "~12.2.0",
  "@angular/compiler": "~12.2.0",
  "@angular/core": "~12.2.0",
  "@angular/fire": "^7.2.1",
  "@angular/forms": "~12.2.0",
  "@angular/material": "^12.2.11",
  "@angular/platform-browser": "~12.2.0",
  "@angular/platform-browser-dynamic": "~12.2.0",
  "@angular/router": "~12.2.0",
  "firebase": "^9.6.7",
  "ngx-logger": "^5.0.9",
  "rxfire": "^6.0.0",
  "rxjs": "~6.6.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.11.4"
},

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[spy4x]

I have the same issue with the next versions:

@angular/[email protected]
@angular/[email protected]
[email protected]

import firebase from "firebase/compat/app";
console.log(firebase.auth); // -> undefined

[spy4x]

Downgrade back to [email protected] solved my issue ✅

[lowkeycode]

Following the docs helped me.

"@angular/core": "^16.2.11",
"@angular/fire": "^16.0.0",
"firebase": "^9.12.1",

For the sake of brevity...

import { GoogleAuthProvider } from '@angular/fire/auth';

etc...

this.afAuth.signInWithPopup(new GoogleAuthProvider())