18.06 Add Logout Button - Show only when User Logged In

src/App.vue

@@ -9,10 +9,12 @@ import { mapActions } from 'vuex'
 export default {
   name: 'App',
   methods: {
-    ...mapActions('settings', ['getSettings'])
+    ...mapActions('settings', ['getSettings']),
+    ...mapActions('auth', ['handleAuthStateChange'])
   },
   mounted () {
     this.getSettings()
+    this.handleAuthStateChange()
   }
 }
 </script>

src/layouts/Layout.vue

@@ -6,12 +6,20 @@
           Awesome Todo
         </q-toolbar-title>
         <q-btn
+          v-if="!loggedIn"
           to="/auth"
           flat
           icon-right="account_circle"
           label="Login"
           class="absolute-right"
         />
+        <q-btn
+          v-else
+          flat
+          icon-right="account_circle"
+          label="Logout"
+          class="absolute-right"
+        />
       </q-toolbar>
     </q-header>
 
@@ -57,6 +65,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 
 export default {
   name: 'MainLayout',
@@ -79,6 +88,11 @@ export default {
         }
       ]
     }
+  },
+  computed: {
+    ...mapState('auth', ['loggedIn'])
+  },
+  methods: {
   }
 }
 </script>

src/store/store-auth.js

@@ -1,13 +1,17 @@
 import { firebaseAuth } from 'boot/firebase'
 
 const state = {
+  loggedIn: false
 }
 
 const mutations = {
+  setLoggedIn (state, value) {
+    state.loggedIn = value
+  }
 }
 
 const actions = {
-  registerUser ({ state }, payload) {
+  registerUser ({ commit }, payload) {
     firebaseAuth.createUserWithEmailAndPassword(payload.email, payload.password)
       .then(response => {
         console.log('response: ', response)
@@ -16,7 +20,7 @@ const actions = {
         console.log('error.message: ', error)
       })
   },
-  loginUser ({ state }, payload) {
+  loginUser ({ commit }, payload) {
     firebaseAuth.signInWithEmailAndPassword(payload.email, payload.password)
       .then(response => {
         console.log('response: ', response)
@@ -24,6 +28,15 @@ const actions = {
       .catch(error => {
         console.log('error.message: ', error)
       })
+  },
+  handleAuthStateChange ({ commit }) {
+    firebaseAuth.onAuthStateChanged(function (user) {
+      if (user) {
+        commit('setLoggedIn', true)
+      } else {
+        commit('setLoggedIn', false)
+      }
+    })
   }
 }