Auth value null outside of block

Question

I'm trying to get the current user information from Firebase google login but I'm really confused as to why angularfire would not let me store the current user information. Current user info is returned when I try to output the value of this.user but returns a null value outside of the block. Need a little help figuring this out.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
import { FirebaseService } from '../../services/firebase.service';
import * as firebase from 'firebase';
import { AngularFire, FirebaseAuthState } from 'angularfire2';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  public user: FirebaseAuthState;
  public userProfiles: any;
  public displayName: string;

  constructor(
    public af:AngularFire,
    public flashMessage:FlashMessagesService,
    private firebaseService: FirebaseService,
    private router:Router
  ) {
    this.af.auth.subscribe(user => {
      if(user) {
      // user logged in
        this.user = user;
        console.log('if');
        console.log(this.user);
      }
      else {
      // user not logged in
        // this.user = ;
        console.log('else');
      }
    })
    console.log(this.user);
  }

  ngOnInit() {
    this.af.auth.subscribe((state: FirebaseAuthState) => {
      this.userProfiles = state;
      this.displayName = this.userProfiles.auth.displayName;
      // console.log(this.userProfiles);
    });
    console.log(this.firebaseService.getCurrentUser());
  }

  login(){
    this.af.auth.login();
  }

  logout(){
    this.af.auth.logout();
    this.flashMessage.show('You are logged out',
    {cssClass: 'alert-success', timeout: 3000});
  }

  username(){

  }
}

Well, it's async, so at the console.log() outside of the block, user is null, because the observable hasn't emitted any values yet (the http request is not yet completed). — Adnan A., Mar 07 '17 at 20:34
@AJT_82 I've read the page that you've provided but could you provide some example of how I would do it? — Shawn Yap, Mar 08 '17 at 00:01

score 0 · Accepted Answer · answered Mar 08 '17 at 01:41

Current user info is returned when I try to output the value of this.user but returns a null value outside of the block. Need a little help figuring this out.

Zoomining in to your code

 this.af.auth.subscribe(user => {
  if(user) {
  // user logged in
    this.user = user;
    console.log('if');
    console.log(this.user);
  }
  else {
  // user not logged in
    // this.user = ;
    console.log('else');
  }
})
console.log(this.user);

The call this.af.auth.subscribe( is async and has no impact on sync code. This is essentially similar to

this.user = null;
setTimeout(() => {
  this.user = 'something'
});
console.log(this.user); // null!

Fix

Use user inside the subscribe block. Feel free to call functions from inside the subscribe if you want to act on a non null user.

Auth value null outside of block

1 Answers1

Fix