Estoy implementando la autenticación de Firebase en la aplicación Nuxt js y estoy muy cerca. El problema es que quiero cometer una mutación vuext dentro de la función predeterminada de onAuthStateChanged() . Pero cada vez que cargo la página, muestra el siguiente error: "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$store')"
¿Pueden ayudarme con este problema?
Gracias.
import firebase from '@/plugins/firebase' import { getAuth, signInWithEmailAndPassword, onAuthStateChanged } from "firebase/auth" export const state = () => ({ user: null, authIsReady: false }) export const mutations = { updateUser(state, payload) { state.user = payload console.log('user is updated', state.user) }, setAuthIsReady(state, payload) { state.authIsReady = payload console.log(state.authIsReady) } } export const actions = { async signIn(context, { email, password }) { console.log('sign in action') const res = await signInWithEmailAndPassword(getAuth(), email, password) if (res) { context.commit('updateUser', res.user) } else { throw new Error('could not complete sign in') } } }// esta función está causando el problema
const unsub = onAuthStateChanged(getAuth(), (user) => { this.$store.commit('updateUser', user) unsub() })El archivo firebase.js que estoy importando "auth" desde abajo, es solo la configuración regular de Firebase en cosas de Nuxt... y las líneas importantes son: const auth = getAuth() export { auth }
import { auth } from "~/plugins/firebase.js"; export default (context) => { const { store } = context return new Promise((resolve, reject) => { auth.onAuthStateChanged((user) => { if (user) { return resolve(store.dispatch('onAuthStateChangedAction', user)) } return resolve() }) }) }En su archivo store/index.js agregue la siguiente función asíncrona en su configuración de acciones:
async onAuthStateChangedAction(vuexContext, authUser) { if (!authUser) { //in my case I'm just forcing user back to sign in page, only authorized users allowed//redirect from here this.$router.push({ path: '/signin', }) }else { //call your commits or do whatever you want to do vuexContext.commit("setUser", authUser.email); }},
La primera parte del código asegura que cuando el estado de autenticación cambia en Firestore, este cambio se comunica a la acción que acaba de crear en la tienda. La segunda parte del código, la función asíncrona en la tienda logra lo que usted quiera que haga dentro de la tienda.