Conditional navbar based on a user authentication status

Question

I'm trying to conditionally display navbar elements of a navigation component based on the onAuthStateChanged Firebase function.

<template>
    <navbar dark position="top" class="default-color" scrolling>
        <mdb-navbar-brand href="#/" style="font-weight: bolder;">
            Test
        </mdb-navbar-brand>
        <navbar-collapse>
            <navbar-nav left>
                <navbar-item href="#/" waves-fixed>Home</navbar-item>
                <navbar-item href="#/css" waves-fixed>About</navbar-item>
                <navbar-item href="#/jobs" waves-fixed>Jobs</navbar-item>
                <navbar-item href="#/advanced" waves-fixed>Profile</navbar-item>
            </navbar-nav>
            <navbar-nav right>
                <router-link to="/signup"><button v-if="!user" type="button" class="btn btn-primary">Signup</button></router-link>
                <router-link to="/login"><button v-if="!user" type="button" class="btn btn-primary">Login</button></router-link>
                <p><a v-if="user" @click="logout">Logout</a></p>
            </navbar-nav>
        </navbar-collapse>
    </navbar>    
</template>

<script>
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(() => {
          this.$router.push({path: '/'});
        });
    },
    created() {
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          this.user = user;
        } else {
          this.user = null;
        }
      });
    }
  }
};

</script>

Unfortunately, for some reason, the onAuthStateChanged 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:

console.log(firebase.auth().currentUser);

Thanks in advance for any hints.

And what about the value of user? (I mean the vue data property that you set with this.user = user). Is it still null? Also, shouldn’t created() be outside of methods, to be considered as a lifecycle hook? — Renaud Tarnec
– Renaud Tarnec, Commented Aug 27, 2018 at 18:13
Yes, it remains null even if there is an active, logged-in user. It looks like the method is not able to update the user data property. Tried to simply update it during created hook with a fixed value without the firebase function - no success as well. — bloo
– bloo, Commented Aug 27, 2018 at 18:19
The way you declare created is not how to declare a hook. See vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks. It should be at the same level than methods. — Renaud Tarnec
– Renaud Tarnec, Commented Aug 27, 2018 at 18:21

abaga129 · Accepted Answer · 2018-08-27 21:01:46Z

I just wanted to point out another option. Renaud Tarnec's answer is correct but there is a second solution.

You can use the arrow function syntax. With arrow functions the context doesnt change so there is no need to set vm = this before the function since this will still work inside the function. I'm a huge fan of lambda/arrow functions and see no reason not to use them.

Renaud Tarnec's should be the accepted answer but just wanted to offer a second option :)

export default {
  name: 'Navigation',
  data() {
    return {
      user: null,
    };
  },
  components: {
    Navbar,
    NavbarItem,
    NavbarNav,
    NavbarCollapse,
    mdbNavbarBrand
  },
  methods: {
    ....
    }
  },
  created: function () {
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          this.user = user;
        } else {
          this.user = null;
        }
      });
   }
};

Renaud Tarnec · Accepted Answer · 2018-08-27 18:32:28Z

2

If you want to call firebase.auth().onAuthStateChanged() in the created lifecycle hook you should do as follows:

export default {
  name: 'Navigation',
  data() {
    return {
      user: null,
    };
  },
  components: {
    Navbar,
    NavbarItem,
    NavbarNav,
    NavbarCollapse,
    mdbNavbarBrand
  },
  methods: {
    ....
    }
  },
  created: function () {
      var vm = this;
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          vm.user = user;
        } else {
          vm.user = null;
        }
      });
   }
};

The way you do it, you are declaring created as a "standard" component method.

edited Aug 27, 2018 at 18:32

answered Aug 27, 2018 at 18:29

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

1 Comment

bloo Over a year ago

Thanks for pointing this out. I also found out that I'm out of this context in the created hook. Storing this context as a variable solved the issue.

Collectives™ on Stack Overflow

Conditional navbar based on a user authentication status

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related