En un componente nuxt con un div y un botón, quiero mostrar solo uno de ellos según el estado del usuario (Iniciar sesión y Cerrar sesión).

Cuando inicio sesión, aparece el botón de cierre de sesión y el inicio de sesión se oculta como se desea.

El problema es que cuando cierro la sesión, el botón de cierre de sesión está oculto pero el botón de inicio de sesión no se muestra.

Lo que es extraño para mí es que cuando registro la propiedad isUserLoggedIn , me da el valor correcto entre verdadero/falso en el cliente, pero siempre devuelve falso en la terminal y Nuxt SSR en el navegador.

Uso el módulo @nuxtjs/firebase para manejar la autenticación y esta es la configuración

 firebase: { config: { // My config }, services: { auth: { persistence: "local", initialize: { onAuthStateChangedAction: "onAuthStateChanged", subscribeManually: false, }, ssr: false, }, }, },

Mi componente Login.vue :

 <template> <div> <div v-show="!isUserLoggedIn" id="firebase-auth-google"></div> <button @click="logout" v-show="isUserLoggedIn" class="flex px-4 py-2 text-white bg-red-600" > Logout </button> </div> </template> <script> export default { computed: { isUserLoggedIn() { console.log("Login page", this.$store.getters["isLoggedIn"]); return this.$store.getters["isLoggedIn"]; }, }, methods: { async logout() { await this.$firebaseAuth.signOut(); }, }, mounted() { this.$firebaseAuth.renderGoogleLogin("firebase-auth-google"); }, }; </script>