Code for this can be found in the Github Branch
The final step in wrapping up auth before getting back to the ingredients form is being able to log a user out of the application. Again firebase does the heavy lifting and all we need to do is make sure our state is updated.
Store #
The store needs to be refactored and updated after I noticed a few issues. The first is that the user details can be stored as an Object for easier use in the app called currentUser.
store/auth/authIndex.js
import authActions from './authActions.js'; import authMutations from './authMutations'; import authGetters from './authGetters'; export default { namespaced: true, state() { return { currentUser: { id: 0, username: '', email: '' }, registrationError: false, isLoggedIn: false, errorMsg: '', }; }, mutations: authMutations, actions: authActions, getters: authGetters, }; Below you can see the use of firebase to sign out the user from the system. The snippet below is without the full code for register and login. Take a look at the repo for full code.
store/auth/authActions.js
import firebase from '@/firebase.js'; const userRef = firebase.firestore().collection('/user'); export default { async register({ commit }, user) { ... }, async login({ commit }, user) { ... }, async logout({ commit }) { await firebase.auth().signOut(); commit('logout'); }, }; Our mutation now has to update the state of the user being logged out. I also refactor the currentUser data in both the logout and authSuccess.
store/auth/authMutations.js
import router from '@/router'; export default { authSuccess(state, user) { state.currentUser.id = user.uid; state.currentUser.email = user.email; state.currentUser.username = user.username; state.registrationError = false; state.isLoggedIn = true; state.errorMsg = ''; router.push({ name: 'home' }); }, authFail(state, error) { state.registrationError = true; state.isLoggedIn = false; state.errorMsg = error.message; }, logout(state) { state.isLoggedIn = false; state.currentUser.id = null; state.currentUser.email = null; state.currentUser.username = null; router.replace({ name: 'home' }); }, }; Implement #
With this done we complete the logout functionality and now just need to use the action after clicking the button.
components/ui/TheHeader.vue
<template> <img alt="App logo" src="https://res.cloudinary.com/hiltonmeyer-com/image/upload/v1611488325/pantry/cooking-robot_xdaw7k.png" /> <div id="nav"> <router-link to="/">Home</router-link> <router-link v-if="isLoggedIn" to="/ingredients"> Ingredients</router-link> </div> <div id="auth"> <router-link v-if="!isLoggedIn" to="/login" tag="button"> <button>Login</button> </router-link> <router-link v-if="!isLoggedIn" to="/register"> <button>Register</button> </router-link> <button v-if="isLoggedIn" @click.prevent="logout">Logout</button> </div> </template> <script> import { mapGetters, mapActions } from 'vuex'; export default { computed: { ...mapGetters('auth', ['isLoggedIn']), }, methods: { ...mapActions('auth', ['logout']), }, }; </script> 
Top comments (0)