Angular Firebase Google authentication import issue

Question

When I try to run this code to create a Google Auth popup on a click event, I get an error due to the 'auth' part on the last line of code. VScode is giving me the error:

Property 'auth' does not exist on type 'typeof import(/angular/my-app/node_modules/firebase/app/dist/app/index)

I see this issue with the .auth is common, but following what everyone else did I couldn't seem to resolve the issue. All the previous solution were from like 2020 so I figured something has changed.

Does anyone have any idea how to resolve this issue?

import { Directive, HostListener } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import * as firebase from 'firebase/app';


@Directive({
  selector: '[appGoogleSignin]'
})
export class GoogleSigninDirective {
  constructor(private afAuth: AngularFireAuth) {}

  @HostListener('click')
  onclick() {
    this.afAuth.signInWithPopup(new firebase.*auth*.GoogleAuthProvider());
  }
}