title: Angular 6 AngularFireAuth check if user is logged in before page rendered
body: <p>I have set up a new angular 6 project with Firebase auth and Cloud Fire Store. There is a login page where you can login via google and the user data is saved in Firestore (code below). My only issue is how I can check if the user is already logged in, is there any best practice?</p>
  <p>At the moment im fetching the user data async, but then the navigation is flickering. For one second there is the login button, then it switches to the logout button. Is there good way to check the login state before it renders the page?
  <a href="https://i.stack.imgur.com/X1x0S.png" rel="noreferrer"><img src="https://i.stack.imgur.com/X1x0S.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/vcclY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vcclY.png" alt="one second later" /></a></p>
  <blockquote>
  <p>User.ts</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>export interface User {
    uid: string;
    email: string;
  }
  </code></pre>
  <blockquote>
  <p>auth.service.ts</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Router } from '@angular/router';
  import * as firebase from 'firebase/app';
  import { AngularFireAuth } from 'angularfire2/auth';
  import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
  import { Observable, of } from 'rxjs';
  import { switchMap } from 'rxjs/operators';
  import { User } from './user';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AuthService {
  
    user: Observable&lt;User&gt;;
  
    constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, private router: Router) {
      this.user = this.afAuth.authState.pipe(
          switchMap(user =&gt; {
            if (user) {
              return this.afs.doc&lt;User&gt;(`users/${user.uid}`).valueChanges();
            } else {
              return of(null);
            }
          }))
    }
  
    public googleLogin() {
      const provider = new firebase.auth.GoogleAuthProvider()
      return this.oAuthLogin(provider);
    }
  
    public signOut() {
      this.afAuth.auth.signOut();
    }
  
    private oAuthLogin(provider) {
      return this.afAuth.auth.signInWithPopup(provider)
        .then((credential) =&gt; {
          this.updateUserData(credential.user)
        })
    }
  
    private updateUserData(user) {
      const userRef: AngularFirestoreDocument&lt;any&gt; = this.afs.doc(`users/${user.uid}`);
      const data: User = {
        uid: user.uid,
        email: user.email
      }
      return userRef.set(data, { merge: true })
    }
  
  }
  </code></pre>
  <blockquote>
  <p>navigation.component.ts</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { AuthService } from '../core/auth.service';
  import { AngularFireAuth } from 'angularfire2/auth';
  
  @Component({
    selector: 'app-navigation',
    templateUrl: './navigation.component.html',
    styleUrls: ['./navigation.component.scss']
  })
  export class NavigationComponent implements OnInit {
  
    constructor(public auth: AuthService) { }
  
    ngOnInit() {}
  </code></pre>
  <p>}</p>
  <blockquote>
  <p>auth.service.ts</p>
  </blockquote>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngIf=&quot;auth.user | async; then loggedIn else loggedOut&quot;&gt;&lt;/div&gt;
                      
  &lt;ng-template #loggedOut&gt;
      &lt;li  class=&quot;nav-item d-none d-md-inline-block pl-2 pr-0&quot;&gt;
          &lt;a class=&quot;btn btn-sm btn-primary u-btn-primary u-btn-pill transition-3d-hover&quot; href=&quot;/login&quot;&gt;
              Login
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ng-template&gt;
  
  &lt;ng-template #loggedIn&gt;
      &lt;li  class=&quot;nav-item d-none d-md-inline-block pl-2 pr-0&quot;&gt;
          &lt;a class=&quot;btn btn-sm btn-primary u-btn-primary u-btn-pill transition-3d-hover&quot; (click)=&quot;auth.signOut()&quot;&gt;
              Logout
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ng-template&gt;
  </code></pre>