0

I got this button in the navigator that shows up when a user is logged in and when the user logs out the button is gone. But now i need to refresh my page before the button removes/appears. Here is my code: Button:

<div v-if="ingelogd">
  <div class="w-2/12 hidden lg:flex" v-for="(data, index) in allIngelogds" :key="index">
    <button @click="uitloggen" class="downloadbtn">
      {{ data.uitloggenKnop }}
    </button>
  </div>
</div>

in data:() i return this:

ingelogd: false

and then i created a mounted() function to update if the user is logged in or not:

mounted() {
    const user = firebase.auth().currentUser
    if(user) {
      this.ingelogd = true;
    }
  },

And yes i imported firebase and firebase/auth and allIngelogds is a graphql query.

2 Answers2

2

You'll want to use an onAuthStateChanged listener instead of the currentUser:

mounted() {
  firebase.auth().onAuthStateChanged((user) => {
    if(user) {
      this.ingelogd = true;
    }
  });
},

The onAuthStateChanged listener gets called each time the sign-in state changes, which ensures your ingelogd always reflects this state.

For more on this, see the first snippet in the Firebase documentation on getting the currently signed in user.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
0

https://stackoverflow.com/a/40586872/8647537

Checkout the answer above. The lazy way or not very good approach will be

vm.$forceUpdate();

it is not good approach though. Read more in mentioned link.

Taha Malik
  • 2,188
  • 1
  • 17
  • 28