title: Firebase Authentication not persisting
body: <p>Authentication doesn't seem to persist after page has been refreshed. Even after using <code>firebase.auth.Auth.Persistence.LOCAL</code>.</p>
  
  <p>Whenever I log into my app, it successfully redirects me to the Dashboard. But, when page has been refreshed, accessing Dashboard is not possible.</p>
  
  <p>Here's my code.</p>
  
  <p><strong>Filename: login.component.ts</strong></p>
  
  <pre><code>import { Router } from '@angular/router';
  import { Component, OnInit } from '@angular/core';
  
  import * as firebase from 'firebase/app';
  import { Observable } from 'rxjs/Observable';
  import { AngularFireAuth } from 'angularfire2/auth';
  import { AngularFirestore } from 'angularfire2/firestore';
  
  @Component({
      ...
  })
  export class LoginComponent implements OnInit {
  
      email: string = '';
      password: string = '';
  
      constructor(public afAuth: AngularFireAuth, private router: Router, private fb: FormBuilder) {}
  
      signIn(credentials) {
          this.email = credentials.email;
          this.password = credentials.password;
  
          this.afAuth.auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL).then(() =&gt; {
              this.afAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(() =&gt; {
                  this.router.navigate(['dashboard']);
              }).catch((err) =&gt; {
                  ...
              })
          }).catch((err) =&gt; {
              ...
          })
      }
  
      ngOnInit() {}
  
  }
  </code></pre>
  
  <p><strong>Filename: auth.guard.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
  import { Observable } from 'rxjs/Observable';
  
  import { AngularFireAuth } from 'angularfire2/auth';
  
  @Injectable()
  export class AuthGuard implements CanActivate {
  
      constructor(private router: Router, private afAuth: AngularFireAuth) {}
  
      canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
          var authed = this.afAuth.auth.currentUser;
  
          if (authed) {
              return true;
          } else {
              this.router.navigate(['/']);
              return false;
          }
      }
  }
  </code></pre>
  
  <p><strong>Additional Info:</strong></p>
  
  <pre><code>@angular/animations: 5.0.0
  @angular/common: 5.0.0
  @angular/compiler: 5.0.0
  @angular/core: 5.0.0
  @angular/forms: 5.0.0
  @angular/http: 5.0.0
  @angular/platform-browser: 5.0.0
  @angular/platform-browser-dynamic: 5.0.0
  @angular/router: 5.0.0
  angular2-materialize: 15.1.10
  angularfire2: 5.0.0-rc.3
  core-js: 2.4.1
  firebase: 4.6.1
  hammerjs: 2.0.8
  jquery: 2.2.4
  materialize-css: 0.100.2
  rxjs: 5.5.2
  zone.js: 0.8.14
  </code></pre>
  
  <p><strong>Expected Result:</strong></p>
  
  <p><code>http://localhost:4200/dashboard</code> (<strong>ACCESSIBLE</strong> WHILE LOGGED IN)</p>
  
  <p><strong>Current Result:</strong></p>
  
  <p><code>http://localhost:4200/dashboard</code> (<strong>INACCESSIBLE</strong> WHILE LOGGED IN; REDIRECTS TO HOME)</p>
  
  <p>Where did I go wrong or something else?</p>