Angularでfirebaseのauthメソッドが使用できない

Question

エラー内容

Tuyano SYODA氏のAngular超入門のP375でgoogleアカウントで認証してログインする機能を作る部分があります。
以下のtsファイルで各authの行で

Property 'auth' does not exist on type 'AngularFireAuth'.

というエラーが出ます。

調査

(https://github.com/angular/angularfire/issues/2409)
以下でauthを消せば行けるよみたいなことが書いてあったのでauthを削除したのですが、GoogleAuthProvider()と.displayNameとimport { auth } from 'firebase/app';
がエラーで

のようになります。どうしたら認証がうまくいくでしょうか。
よろしくお願いします。

<div class="container">
  <h1>material works!</h1>
  <div>
    <p>{{message}}</p>
    <button mat-raised-button (click)="login()">login</button>
    <button mat-raised-button (click)="logout()">logout</button>
    <p>USER: {{currentUser}}</p>
    <table>
      <tr>
        <th>Name</th>
        <th>Mail</th>
        <th>Age</th>
      </tr>
      <tr *ngFor="let item of data">
        <td>{{ item['name'] }}</td>
        <td>{{ item['mail'] }}</td>
        <td>{{ item['age'] }}</td>
      </tr>
    </table>
  </div>
</div>

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';


@Component({
  selector: 'app-fire',
  templateUrl: './fire.component.html',
  styleUrls: ['./fire.component.css']
})
export class FireComponent implements OnInit {
  message:string = 'people data.';
  data:any;

  constructor(private db:AngularFirestore, public afAuth: AngularFireAuth) { }

  ngOnInit() {
    this.access();
  }

  access() {
    this.db.collection('people')
      .valueChanges()
      .subscribe(value=>{
        this.data = value;
      },
      error=>{
        this.message = "(can't get data...)";
        this.data = null;
      });
  }

  login(){
    let provider = new firebase.auth.GoogleAuthProvider();
    this.afAuth.auth.signInWithRedirect(provider)
      .then((result)=>{
        this.access();
    });
  }

  logout() {
    this.afAuth.auth.signOut();
    this.access();
  }


  get currentUser() {
    return this.afAuth.auth != null ?
      this.afAuth.auth.currentUser != null?
        this.afAuth.auth.currentUser.displayName :
        '(not logined.)' :
      '(not logined.)';
  }
}

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.2.4
Node: 14.15.1
OS: darwin x64

Angular: 11.2.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.4
@angular-devkit/build-angular   0.1102.4
@angular-devkit/core            11.2.4
@angular-devkit/schematics      11.2.4
@angular/cdk                    10.2.7
@angular/cli                    11.2.4
@angular/fire                   6.1.4
@angular/material               10.2.7
@schematics/angular             11.2.4
@schematics/update              0.1102.4
rxjs                            6.5.5
typescript                      4.1.5

Answer 1

firebase.authとしているところをfirebase.default.authにしてください。

Answer 2

firebaseのauthを使用する場合は次のようにfirebase/authをimportする必要があると思いますが、これは記述されていますか？

import "firebase/auth";

Comments

[magatamaamagata]

ありがとうございます、tsファイルに記述しましたがダメでした。別のファイルでしょうか!?