title: Cannot read property 'user' of undefined in Angular and Firebase Auth
body: <p>Working with Firebase for the first time and trying to set up email and Google auth in an Angular (v5) app. Following a tutorial (<a href="https://angularfirebase.com/lessons/google-user-auth-with-firestore-custom-data/#Step-5-User-Profile" rel="nofollow noreferrer">https://angularfirebase.com/lessons/google-user-auth-with-firestore-custom-data/#Step-5-User-Profile</a>), I get an error:</p>
  
  <p><code>ERROR TypeError: Cannot read property 'user' of undefined</code></p>
  
  <p>The error is coming from the template:</p>
  
  <p>login.component.html </p>
  
  <pre><code>&lt;div *ngIf="auth.user | async; then authenticated else guest"&gt;
    &lt;!-- template will replace this div --&gt;
  &lt;/div&gt;
  &lt;!-- User NOT logged in --&gt;
  &lt;ng-template #guest&gt;
    &lt;h3&gt;Howdy, GUEST&lt;/h3&gt;
    &lt;p&gt;Login to get started...&lt;/p&gt;
  
    &lt;button (click)="auth.googleLogin()"&gt;
      &lt;i class="fa fa-google"&gt;&lt;/i&gt; Connect Google
    &lt;/button&gt;
  &lt;/ng-template&gt;
  &lt;!-- User logged in --&gt;
  &lt;ng-template #authenticated&gt;
    &lt;div *ngIf="auth.user | async as user"&gt;
      &lt;h3&gt;Howdy, {{ user.displayName }}&lt;/h3&gt;
      &lt;img  [src]="user.photoURL"&gt;
      &lt;p&gt;UID: {{ user.uid }}&lt;/p&gt;
      &lt;p&gt;Favorite Color: {{ user?.favoriteColor }} &lt;/p&gt;
      &lt;button (click)="auth.signOut()"&gt;Logout&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>login.component.ts</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {AuthService} from '../auth/auth.service';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent {
  
    constructor(public authService: AuthService) {
    }
  }
  </code></pre>
  
  <p>auth.service.ts</p>
  
  <pre><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} from 'rxjs/Observable';
  import 'rxjs/add/operator/switchMap'
  
  interface User {
    uid: string;
    email: string;
    photoURL?: string;
    displayName?: string;
    favoriteColor?: string;
  }
  
  @Injectable()
  export class AuthService {
  
    user: Observable&lt;User&gt;;
  
    constructor(private afAuth: AngularFireAuth,
                private afs: AngularFirestore,
                private router: Router) {
      //// Get auth data, then get firestore user document || null
      this.user = this.afAuth.authState
        .switchMap(user =&gt; {
          if (user) {
            return this.afs.doc&lt;User&gt;(`users/${user.uid}`).valueChanges()
          } else {
            return Observable.of(null)
          }
        })
    }
    googleLogin() {
      const provider = new firebase.auth.GoogleAuthProvider()
      return this.oAuthLogin(provider);
    }
    private oAuthLogin(provider) {
      return this.afAuth.auth.signInWithPopup(provider)
        .then((credential) =&gt; {
          this.updateUserData(credential.user)
        })
    }
    private updateUserData(user) {
      // Sets user data to firestore on login
      const userRef: AngularFirestoreDocument&lt;any&gt; = 
      this.afs.doc(`users/${user.uid}`);
      const data: User = {
        uid: user.uid,
        email: user.email,
        displayName: user.displayName,
        photoURL: user.photoURL
      };
      return userRef.set(data)
    }
    signOut() {
      this.afAuth.auth.signOut().then(() =&gt; {
        this.router.navigate(['/']);
      });
    }
  }
  </code></pre>
  
  <p>This SO question seems similar but unsure how the answer would apply to my issue: <a href="https://stackoverflow.com/questions/26528532/firebase-onauth-throwing-typeerror-cannot-read-property-auth-of-undefined">firebase onAuth() throwing: TypeError cannot read property &#39;auth&#39; of undefined</a> and how to fix my problem.</p>
  
  <p>Here's a screenshot of the error:</p>
  
  <p><a href="https://i.stack.imgur.com/JyTog.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JyTog.png" alt="enter image description here"></a></p>