In my app, I'm currently developing a login/register system using Firebase and Vuex for authentication and database management. Within Nuxt JS, I have implemented actions to create a user, log them in, and sign them out.
After a successful registration or during the login process, I am attempting to redirect the user. Here is a snippet of my code:
export const actions = {
/*
* Create a user
*/
createUser ({commit}, payload) {
this.$fireAuth.createUserWithEmailAndPassword(payload.email, payload.password).then(function(firebaseUser) {
commit('setUser', payload)
}).catch(function(error) {
console.log('error logging in' + error)
});
},
/*
* Log a user into Beacon
*/
login ({commit}, payload) {
this.$fireAuth.signInWithEmailAndPassword(payload.email, payload.password).then(function(firebaseUser) {
commit('setUser', payload)
}).catch(function(error) {
console.log('error logging in' + error)
});
},
/*
* Sign a user out of Beacon
*/
signOut ({commit}) {
this.$fireAuth.signOut().then(() => {
commit('setUser', null)
}).catch(err => console.log(error))
}
}
The tech stack I'm working with includes Nuxt JS 2.9.2 and Vue JS 2.6.10.
Additionally, I have multiple modules integrated into the project.
I've experimented with this.router.push('/') and window.location.href for redirection purposes while still maintaining Single Page Application (SPA) functionality.