18.07 Logout Button - Log the User Out

src/layouts/Layout.vue

@@ -15,6 +15,7 @@
         />
         <q-btn
           v-else
+          @click="logoutUser"
           flat
           icon-right="account_circle"
           label="Logout"
@@ -65,7 +66,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'MainLayout',
@@ -93,6 +94,7 @@ export default {
     ...mapState('auth', ['loggedIn'])
   },
   methods: {
+    ...mapActions('auth', ['logoutUser'])
   }
 }
 </script>

src/store/store-auth.js

@@ -29,6 +29,9 @@ const actions = {
         console.log('error.message: ', error)
       })
   },
+  logoutUser () {
+    firebaseAuth.signOut()
+  },
   handleAuthStateChange ({ commit }) {
     firebaseAuth.onAuthStateChanged(function (user) {
       if (user) {