firebase 或 firebase auth 中的 onAuthStateChanged() 不返回值

Question

i'm using angular with firebase authentication. when i use onAuthStateChanged method to know if the user is logged in or not it does not return the user or even with angularfireAuth.currentUser when i want to retrieve the user data it's giving me this error: for example i used afAuth.currentUser.uid to use it in my query functions

Uncaught (in promise): TypeError: Cannot read property 'uid' of null

this is the code i call in my authService's Constructor:

 firebase.auth().onAuthStateChanged(firebaseUser => {
          if (firebaseUser) {
            console.log(firebaseUser.uid)
            this.user.next(firebaseUser)
            return (firebaseUser.uid)
          } else {
            return (null)
          }
    })

I think i have to do it asynchronously but i don't know how? Any Ideas?

Answer 1

Since you are using angularfire, I would suggest you listen to authState . I see that you are exposing an observable, subject of some kind, since you are calling next . But I would assign the value from authState to an observable, which you can subscribe to to get realtime changes, as this is triggered whenever changes happen to the authState .

Service:

import { User } from 'firebase';

// ...

user$: Observable<User | null>;

constructor(
    private afAuth: AngularFireAuth
) {
    this.user$ = this.afAuth.authState;
}

Then in your components you can subscribe to user$ :

this.myService.user$.subscribe(....)

Here though you need to remember to unsubscribe when component is destroyed!!

You can also write a function in the service, that returns the user once, and you don't need to worry about unsubscribing.

In service same code as above, but add:

getUser() {
  return this.user$.pipe(first())
}

Now when in components you subscribe to this function, your user is just emitted once.

If you need to use this user in some other async function that depends on for example the uid , you can chain these requests using switchMap ormergeMap . So what you can do is...

this.myService.getUser().pipe(
  switchMap((user: User) => {
    return this.getCat(user.uid)
  })
// will console true or false
).subscribe(data => console.log(data))

Answer 2

Are you wrapping that code in to a function and calling that function when the page loads? Maybe try wrapping it in a function and calling the loginStatus function when the page first loads

function loginStatus() { 
    firebase.auth().onAuthStateChanged(firebaseUser => {
      if (firebaseUser) {
        console.log(firebaseUser.uid)
      this.user.next(firebaseUser)
      return (firebaseUser.uid)
    } else {
      return (null)
    }
  })
}

Answer 3

If you are using angularFire you can import AngularFireAuth from @angular/fire/compat/auth and do the following in your component:

constructor(
  private afa: AngularFireAuth
) { }

ngOnInit(): void {
  this.monitorAuthState()
}

private monitorAuthState = async () => {
  this.afa.onAuthStateChanged( user => {
    if(user) { console.log(user) }
  })
}