title: Conditional navbar based on a user authentication status
body: <p>I'm trying to conditionally display navbar elements of a navigation component based on the <code>onAuthStateChanged</code> Firebase function. </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;navbar dark position="top" class="default-color" scrolling&gt;
          &lt;mdb-navbar-brand href="#/" style="font-weight: bolder;"&gt;
              Test
          &lt;/mdb-navbar-brand&gt;
          &lt;navbar-collapse&gt;
              &lt;navbar-nav left&gt;
                  &lt;navbar-item href="#/" waves-fixed&gt;Home&lt;/navbar-item&gt;
                  &lt;navbar-item href="#/css" waves-fixed&gt;About&lt;/navbar-item&gt;
                  &lt;navbar-item href="#/jobs" waves-fixed&gt;Jobs&lt;/navbar-item&gt;
                  &lt;navbar-item href="#/advanced" waves-fixed&gt;Profile&lt;/navbar-item&gt;
              &lt;/navbar-nav&gt;
              &lt;navbar-nav right&gt;
                  &lt;router-link to="/signup"&gt;&lt;button v-if="!user" type="button" class="btn btn-primary"&gt;Signup&lt;/button&gt;&lt;/router-link&gt;
                  &lt;router-link to="/login"&gt;&lt;button v-if="!user" type="button" class="btn btn-primary"&gt;Login&lt;/button&gt;&lt;/router-link&gt;
                  &lt;p&gt;&lt;a v-if="user" @click="logout"&gt;Logout&lt;/a&gt;&lt;/p&gt;
              &lt;/navbar-nav&gt;
          &lt;/navbar-collapse&gt;
      &lt;/navbar&gt;    
  &lt;/template&gt;
  
  &lt;script&gt;
  import Navbar from '@/components/Navbar.vue';
  import NavbarItem from '@/components/NavbarItem.vue';
  import NavbarNav from '@/components/NavbarNav.vue';
  import NavbarCollapse from '@/components/NavbarCollapse.vue';
  import mdbNavbarBrand from '@/components/NavbarBrand.vue';
  import firebase from 'firebase';
  
  export default {
    name: 'Navigation',
    data() {
      return {
        user: null,
      };
    },
    components: {
      Navbar,
      NavbarItem,
      NavbarNav,
      NavbarCollapse,
      mdbNavbarBrand
    },
    methods: {
      logout() {
        firebase.auth().signOut()
          .then(() =&gt; {
            this.$router.push({path: '/'});
          });
      },
      created() {
        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            this.user = user;
          } else {
            this.user = null;
          }
        });
      }
    }
  };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Unfortunately, for some reason, the <code>onAuthStateChanged</code> is not working. I also tried to simply display the user in the console from the component perspective, but it's not working as well:</p>
  
  <pre class="lang-js prettyprint-override"><code>console.log(firebase.auth().currentUser);
  </code></pre>
  
  <p>Thanks in advance for any hints. </p>