Logout User
Tags: vue, webdev, javascript, firebase
Published: 2021-04-19 07:16:36

---
title: Logout User
published: true
date: 2021-04-19 07:15:00 UTC
tags: vue, webdev, javascript, firebase
series: Vue Full Application Build
canonical_url: https://hiltonmeyer.com/articles/series/pantry/11-auth-logout.html
---

_Code for this can be found in the [Github Branch](https://github.com/bikingbadger/pantry/tree/11-auth-logout)_

The final step in wrapping up auth before getting back to the [ingredients](https://hiltonmeyer.com/articles/series/pantry/articles/series/pantry/3-ingredients.html) 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 [#](https://hiltonmeyer.com/articles/series/pantry/11-auth-logout.html#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 [#](https://hiltonmeyer.com/articles/series/pantry/11-auth-logout.html#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>

```