title: angularfire2 auth state on page reload check user logged in
body: <p>I have an <code>angular4</code> app using <code>angularfire2</code> and I'm having difficulty in finding out how to check if a user is logged in on page load.
  I can login and logout without issue, and I've implemented a guard on the router to prevent unauthorised access. </p>
  
  <p>In an example I've found, the guard calls isLoggedIn in my auth service class, and checks if the user (AngularFireAuth) is not null. Since <code>AngularFireAuth</code> is of type <code>Observable</code> its never null so this doesn't work.
  How can I check if the user is logged in or not for my guard to work correctly?</p>
  
  <p>Here's my auth service class</p>
  
  <pre><code>import { NotificationService } from './notification.service';
  import { Router } from '@angular/router';
  import { Observable } from 'rxjs/Rx';
  import * as firebase from 'firebase/app';
  import { Injectable } from '@angular/core';
  import { AngularFireAuth } from 'angularfire2/auth';
  import { _firebaseAppFactory } from 'angularfire2/firebase.app.module';
  
  
  @Injectable()
  export class AuthService {
  
    private _user: Observable&lt;firebase.User&gt;;
    private _userDetails: firebase.User;
    private _success: boolean;
  
    constructor(private _firebaseAuth: AngularFireAuth, private _router: Router, private _notifier: NotificationService) {
      this._user = _firebaseAuth.authState;
      _firebaseAuth.authState.subscribe((user: firebase.User) =&gt; {
        console.log(user);
        this._userDetails = user;
      })
    }
  
    get user() {
      return this._user;
    }
  
    isLoggedIn() {
      if (this.user == null) {
        return false;
      } else {
        return true;
      }
    }
  
  
    login(email: string, password: string) {
      this._notifier.display(false, '');
      this._firebaseAuth.auth.signInWithEmailAndPassword(email, password).then((user: firebase.User) =&gt; {
        // if (user.emailVerified) {
        this._userDetails = user;
        this._router.navigate(['dashboard'])
        // }
      }).catch(err =&gt; {
        console.log('Something went wrong:', err.message);
        this._notifier.display(true, err.message);
      })
    }
  
    logout() {
      this._firebaseAuth.auth.signOut()
        .then((res) =&gt; {
          this._userDetails = null;
          this._router.navigate(['/login'])
        });
    }
  
  }
  </code></pre>
  
  <p>Auth Guard File</p>
  
  <pre><code>import { AngularFireAuth } from 'angularfire2/auth';
  import { Injectable } from '@angular/core';
  import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
  import { Observable } from 'rxjs/Observable';
  import { AuthService } from './auth.service';
  
  @Injectable()
  export class AuthGuard implements CanActivate {
  
    isLoggedIn$: Observable&lt;boolean&gt;;
  
    constructor(private _auth: AuthService, private _router: Router, private _firebaseAuth: AngularFireAuth) {
      this.isLoggedIn$ = _auth.isLoggedIn();
  
      this.isLoggedIn$.subscribe(res =&gt; {
        if (res) {
          console.log("is logged in");
        } else {
          console.log("is not logged in");
        }
      });
    }
  
    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean {
  
    }
  }
  </code></pre>