Getting error while using firebase.User method to get username of logged in user from firebase angular project

Question

Below are my lines of code, I have an error getting the current username to display on the browser.

I created a Navbar that has a dropdown list only to be shown to the logged-in user. Login also works perfectly but I cannot get the current user name to show in the drop-down menu. I am using google authentication using firebase.

I am getting below error on below line,

user: firebase.User;

Error:

Namespace '"E:/Workspace/Angular/oshop/node_modules/firebase/app/dist/app/index"' has no exported member 'User'".

See my code below.

bs-navbar.component.ts

import { AngularFireAuth } from '@angular/fire/compat/auth';
import { AngularFireModule } from '@angular/fire/compat';
import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import { getAuth, onAuthStateChanged } from "firebase/auth";

//const auth = getAuth();
//const user = auth.currentUser;

@Component({
  selector: 'bs-navbar',
  templateUrl: './bs-navbar.component.html',
  styleUrls: ['./bs-navbar.component.css']
})
export class BsNavbarComponent {  
  user: firebase.User;

  constructor(private afAuth: AngularFireAuth) {
    afAuth.authState.subscribe(user => this.user = user)
   }

  logout(){
    this.afAuth.signOut().then(() => {
      window.alert('Logged out');
    })
  }

}

Answer 1

You can import User from Firebase Auth SDK as shown below:

// Remove this import
// import * as firebase from 'firebase/app';

import { User, getAuth, onAuthStateChanged } from "firebase/auth";

export class BsNavbarComponent {  
  user: User;
}