使用 GoogleAuthProvider() 方法时遇到问题

Question

How to use GoogleAuthProvider() method in angular app for authentication in login method?

     Angular version: ^12.2.7 
    "@angular/fire": "^7.0.4", 
    "firebase": "^9.1.0",

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
// import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { AppUser } from '../models/appuser';
import * as firebase from 'firebase/compat/app';
import { GoogleAuthProvider } from "firebase/auth";

I'm getting error at:

firebase.GoogleAuthProvider(). async login() { const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || this.router.url; 
localStorage.setItem('returnUrl', returnUrl); 
const credential = await this.afAuth.signInWithPopup(new firebase.GoogleAuthProvider()); 
return this.updateUserData(credential.user); }

Answer 1

You can try importing GoogleAuthProvider like this:

import { GoogleAuthProvider } from "firebase/auth"

// ...signInWithPopUp(new GoogleAuthProvider())

If you want to use that firebase.auth namespace then you might have to downgrade Firebase to "8.XX" or use compat version for imports:

// Add compat if using V9

import firebase from "firebase/compat/app"; 
import "firebase/compat/auth"