title: Angular 5 canActivate redirecting to login on browser refresh
body: <p>Angular 5 authentication app using angularfire2 and firebase.
  The app works fine navigating using in-app links e.g. redirect to dashboard after login or link to another page (component) via a button/link in the app.
  However, if when on the "<a href="http://localhost:4300/dashboard" rel="nofollow noreferrer">http://localhost:4300/dashboard</a>" page I hit the browser refresh (Chrome), it redirects me back to the Login page.
  Using BACK / NEXT on the browser works fine - but I guess because I am not specifically asking to go to a particular route.</p>
  
  <p>I have a NavBar that, through use of subscription, identifies whether I am logged in or not (see screenshot top right...) - and this all works fine.</p>
  
  <p><a href="https://i.stack.imgur.com/OdnpX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OdnpX.jpg" alt="Login page"></a></p>
  
  <p>I am guessing that on browser refresh or direct URL navigation that it tries to load the page before identifying whether I am already authenticated or not.
  The dev console suggests this from the console.log statements I inserted into the nav-bar component and the fact they are "undefined" before Angular core suggests we are running in dev mode:</p>
  
  <p><a href="https://i.stack.imgur.com/GZNqU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GZNqU.png" alt="Developer Tools Console"></a></p>
  
  <p><strong>app.routes:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Routes, RouterModule } from '@angular/router';
  
  import { LoginComponent } from './views/login/login.component';
  import { DashboardComponent } from './views/dashboard/dashboard.component';
  import { ProfileComponent } from './views/profile/profile.component';
  
  import { AuthGuard } from './services/auth-guard.service';
  
  const appRoutes: Routes = [
    {
      path: '',
      component: LoginComponent
    },
    {
      path: 'dashboard',
      canActivate: [AuthGuard],
      component: DashboardComponent
    },
    {
      path: 'profile',
      canActivate: [AuthGuard],
      component: ProfileComponent
    },
    {
      path: '**',
      redirectTo: ''
    }
  ];
  
  export const AppRoutes = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p><strong>auth-gaurd:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { AuthService } from './auth.service';
  import { Injectable } from '@angular/core';
  import { Router, CanActivate } from '@angular/router';
  
  @Injectable()
  export class AuthGuard implements CanActivate {
    status: string;
  
    constructor(private router: Router,
                private authService: AuthService) { }
  
    canActivate() {
      this.authService.authState.subscribe(state =&gt;
        this.status = state.toString());
  
      console.log('Can Activate ' + this.authService.authState);
      console.log('Can Activate ' + this.authService.isLoggedIn());
      console.log('Can Activate ' + this.status);
  
      if(this.authService.isLoggedIn()) {
        return true;
      }
  
      this.router.navigate(['/']);
      return false;
    }
  }
  </code></pre>
  
  <p><strong>auth.service:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Router } from "@angular/router";
  
  import { AngularFireAuth } from 'angularfire2/auth';
  import * as firebase from 'firebase/app';
  import { Observable } from 'rxjs/Observable';
  import { GoogleAuthProvider, GoogleAuthProvider_Instance } from '@firebase/auth-types';
  import { userInfo } from 'os';
  import { Subject } from 'rxjs/Subject';
  
  @Injectable()
  export class AuthService {
    private user: Observable&lt;firebase.User&gt;;
    private userDetails: firebase.User = null;
  
    public authState = new Subject();
  
    constructor(private _firebaseAuth: AngularFireAuth, private router: Router) { 
      this.user = _firebaseAuth.authState;
  
      this.user.subscribe((user) =&gt; {
        if (user) {
          this.userDetails = user;
          this.authState.next('Logged In');
          //console.log(this.userDetails);
        } else {
          this.userDetails = null;
          this.authState.next('Not Logged In');
        }
      });
    }
  
    isLoggedIn() {
      if (this.userDetails == null) {
        return false;
      } else {
        return true;
      }
    }
  }
  </code></pre>
  
  <p><strong>nav-bar.component:</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { AuthService } from '../../services/auth.service';
  
  @Component({
    selector: 'app-nav-bar',
    templateUrl: './nav-bar.component.html',
    styleUrls: ['./nav-bar.component.css']
  })
  export class NavBarComponent implements OnInit {
    status: string;
  
    constructor(private authService: AuthService) {
      console.log('Constructor ' + this.status);
    }
  
    ngOnInit() {
      //this.authService.isLoggedIn().subscribe((state) =&gt; this.status = state.toString());
      this.authService.authState.subscribe(state =&gt;
        this.status = state.toString());
      console.log('ngOnInit ' + this.status);
    }
  }
  </code></pre>