Property 'auth' does not exist on type 'AngularFireAuth' using exact same code as in other projects

Question

I understand this question has been asked before, but none of the solutions I've seen work for me. Im building a login page for my ionic app using firebase-ui, I'm using the exact same approach as in other apps and it works there. I installed angularFire and firebase-ui, and imported them in my app.module like this

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAuthModule,
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Then, in my login.ts file, I've got this

import { Component, OnInit, NgZone, OnDestroy } from '@angular/core';
import * as firebaseui from 'firebaseui';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { LoadingController } from '@ionic/angular';
import { AngularFireAuth } from '@angular/fire/auth/auth';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit, OnDestroy {
  ui: firebaseui.auth.AuthUI;

  constructor(
    private router: Router,
    private loadingCtrl: LoadingController,
    private afAuth: AngularFireAuth,
    private ngZone: NgZone) { }

  ngOnInit() {
    const uiConfig = {
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      callbacks: {
        signInSuccessWithAuthResult: this.onLoginSuccessful.bind(this)
      }
    };
    this.ui = new firebaseui.auth.AuthUI(this.afAuth.auth); // This line gets the error
    this.ui.start('#firebaseui-auth-container', uiConfig);
  }

  ngOnDestroy() {
    this.ui.delete();
  }
  onLoginSuccessful(result) {
    console.log('Firebase login result: ', result);
    this.ngZone.run(() => {
      this.router.navigateByUrl('/secciones');
    });
  }

}

I've used this code multiple times before, and am completely stumped as to why the auth property is not found. I've tried a bunch of variations of the code and for some reason something is not working right, i'd appreciate any input as to why. Of course, I've added the firebase config on my enviroment and added the proper packages "firebase": "^7.10.0" and "firebaseui": "^4.4.0",

Answer 1

import { Component } from "@angular/core";
import { AngularFireAuth } from "@angular/fire/auth";
import { auth } from "firebase/app";

 @Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  constructor(public auth: AngularFireAuth) {}
  login() {
    this.auth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.auth.auth.signOut();
  }
}

Answer 2

Adding to Marcus's answer:

Change something like this:

const user = this.afAuth.auth.currentUser;

to:

const user = await this.afAuth.currentUser;

But make sure it is in an async function.

Answer 3

You are probably using the new version (6.0) of AngularFire. They removed the auth property and it is now promise proxied. Try changing your code to:

this.ui = new firebaseui.auth.AuthUI(this.afAuth);