エラーの'auth' が'AngularFireAuth'に見つからない件について(firebaseを利用)

MacOS、VScodeにてIonicで簡単なアプリを作ろうとしています。その際にfirebaseを使ったのですが以下のエラーでつまってしまいました。

コード
 Build at: 2021-12-23T05:07:25.515Z - Hash: 8f41fd436e0419e212121 - Time: 1738ms
[ng] 
[ng] Error: src/app/login/login.page.ts:49:21 - error TS2339: Property 'auth' does not exist on type 'AngularFireAuth'.
[ng] 
[ng] 49         this.afAuth.auth
[ng]                        ~~~~
[ng] 
[ng] 
[ng] 
[ng] ✖ Failed to compile.

意味自体は'AngularFireAuth'中の（おそらく昔のバージョンではあった）'auth'が読み取れないためのエラーだと思います。解決策としてlogin.page.tsのスラッシュ部分に書いてあるようなことを調べて試してみたのですがどうもうまくいきませんでした。よろしくお願いします????‍♂️

import { Component, OnInit } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { Router } from '@angular/router';

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

//下のように試してみたのですが、うまく機能しませんでした。
// import 'firebase/compat/auth';

// import 'firebase/compat/firestore';
// import firebase from 'firebase/compat/app';
// 
// import { firebase.default.auth } from 'firebase/app';

// import { Component, OnInit } from '@angular/core';
// import { AngularFirestore } from '@angular/fire/firestore';
// import * as firebase from "firebase";
// import { AngularFireAuth } from '@angular/fire/auth';
// import { auth } from 'firebase/app';



// Firebase
import { AngularFireAuth } from '@angular/fire/compat/auth';

@Component({
    selector: 'app-login',
    templateUrl: './login.page.html',
    styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
    login: {
        email: string;
        password: string;
    } = {
        email: '',
        password: ''
    };

    constructor(
        private router: Router,
        private toastCtrl: ToastController,
        private afAuth: AngularFireAuth
    ) {}

    ngOnInit() {}

    userLogin() {
        this.afAuth.auth// ここが問題の部分です！
            .signInWithEmailAndPassword(this.login.email, this.login.password)
            .then(async user => {
                const toast = await this.toastCtrl.create({
                    message: `${user.user.displayName}さん、こんにちは！`,
                    duration: 3000
                });
                await toast.present();
                // ログインできたらメッセージボードに移動する
                this.router.navigate(['/home']);
            })
            .catch(async error => {
                const toast = await this.toastCtrl.create({
                    message: error.toString(),
                    duration: 3000
                });
                await toast.present();
            });
    }

    gotoSignup() {
        this.router.navigateByUrl('/signup');
    }
}
コード

package.json

コード
{
  "name": "ionic-board",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "@awesome-cordova-plugins/status-bar": "^5.37.3",
    "@capacitor/core": "3.3.3",
    "@ionic/angular": "^6.0.0",
    "cordova-plugin-statusbar": "^3.0.0",
    "firebase": "^9.6.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.1",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "~13.0.1",
    "@angular/compiler": "~13.0.0",
    "@angular/compiler-cli": "~13.0.0",
    "@angular/language-service": "~13.0.0",
    "@capacitor/cli": "3.3.3",
    "@ionic/angular-toolkit": "^5.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.4.4"
  },
  "description": "An Ionic project"
}