Home > Blockchain >  Getting error while using firebase.User method to get username of logged in user from firebase angul
Getting error while using firebase.User method to get username of logged in user from firebase angul

Time:04-05

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

}

CodePudding user response:

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;
}
  • Related