I am currently working on implementing a Google sign-in/login feature in Angular 16 using Firebase. However, when I try to click the "LogIn" button, I encounter the following error: "ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'GoogleAuthProvider')". I opted for this approach as I couldn't find a simpler method to manage the authState and determine whether a user is logged in or not. Any assistance in resolving this error or providing an alternative solution for implementing a functional login with a public guard (ensuring that only logged-in users can access the landing page) would be greatly appreciated.
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import firebase from "firebase/compat/app";
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { User } from '../models/user.model';
@Injectable({
providedIn: 'root'
})
export class AuthService {
user$: Observable<User | null | undefined>;
constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, private router: Router) {
this.user$ = this.afAuth.authState.pipe(
switchMap(user => {
// Logged in
if (user) {
return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
} else {
// Logged out
return of(null);
}
})
)
}
async googleSignin() {
const provider = new firebase.auth.GoogleAuthProvider();
const credential = await this.afAuth.signInWithPopup(provider);
return this.updateUserData(credential.user);
}
private updateUserData(user) {
const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`);
const data = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL
}
}
async signOut() {
await this.afAuth.signOut();
this.router.navigate(['/']);
}
}
The issue seems to be related to the line: const provider = new firebase.auth.GoogleAuthProvider(); It appears to be a problem with the firebase import.