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