title: Angular fire app losing authstate upon refreshing the page
body: <p>Hi all I am working on a sharing app with angular and firebase and I have encountered a problem that I have 1. Never encountered before 2. Tried solutions from stack overflow to no avail. I am implementing an auth guard into my app so that certain pages can only be viewed by authenticated users.
  Here is my sign in directive code:</p>
  <pre><code>import { Directive, HostListener } from '@angular/core';
  import { AngularFireAuth } from '@angular/fire/auth';
  import * as firebase from 'firebase/app';
  
  @Directive({
    selector: '[appGoogleSignin]',
  })
  export class GoogleSigninDirective {
    constructor(private afAuth: AngularFireAuth) {}
  
    @HostListener('click')
    onclick() {
      this.afAuth
        .setPersistence(firebase.default.auth.Auth.Persistence.LOCAL)
        .then(() =&gt; {
          this.afAuth.signInWithPopup(
            new firebase.default.auth.GoogleAuthProvider()
          );
        });
    }
  }
  </code></pre>
  <p>Here is my authguard code:</p>
  <pre><code>import { Injectable } from '@angular/core';
  import { AngularFireAuth } from '@angular/fire/auth';
  import {
    CanActivate,
    ActivatedRouteSnapshot,
    RouterStateSnapshot,
    UrlTree,
  } from '@angular/router';
  import { Observable } from 'rxjs';
  import { SnackService } from '../services/snack.service';
  
  @Injectable({
    providedIn: 'root',
  })
  export class AuthGuard implements CanActivate {
    constructor(private afAuth: AngularFireAuth, private snack: SnackService) {}
  
    async canActivate(
      route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Promise&lt;boolean&gt; {
      const user = await this.afAuth.currentUser;
      const isLoggedIn = !!user;
      if (!isLoggedIn) {
        this.snack.authError();
      }
  
      return isLoggedIn;
    }
  }
  </code></pre>
  <p>And here is my implementation of the auth guard:</p>
  <pre><code>    path: 'upload',
      loadChildren: () =&gt;
        import('./upload/upload.module').then((m) =&gt; m.UploadModule),
      canActivate: [AuthGuard],
    },
  </code></pre>
  <p>I have tried multiple solutions on stack overflow including setting the persistence state to both session and local. None have worked for me.</p>