add an auto logout

src/App.vue

@@ -14,8 +14,20 @@ export default {
   components: {
     TheHeader
   },
+  computed: {
+    didAutoLogout() {
+      return this.$store.getters.didAutoLogout;
+    }
+  },
   created() {
     this.$store.dispatch('tryLogin');
+  },
+  watch: {
+    didAutoLogout(curValue, oldValue) {
+      if (curValue && curValue !== oldValue) {
+        this.$router.replace('/coaches');
+      }
+    }
   }
 };
 </script>

src/store/modules/auth/actions.js

@@ -1,5 +1,7 @@
 import getAuth from '../../../scripts/axios-auth';
 
+let timer;
+
 export default {
   async login(context, payload) {
     return context.dispatch('auth', {
@@ -27,13 +29,20 @@ export default {
       });
       const responseData = response.data;
 
+      const expiresIn = +responseData.expiresIn * 1000;
+      const expirationDate = new Date().getTime() + expiresIn;
+
       localStorage.setItem('token', responseData.idToken);
       localStorage.setItem('userId', responseData.localId);
+      localStorage.setItem('tokenExpiration', expirationDate);
+
+      timer = setTimeout(function() {
+        context.dispatch('autoLogout');
+      }, expiresIn);
 
       context.commit('setUser', {
         token: responseData.idToken,
-        userId: responseData.localId,
-        tokenExpiration: responseData.expiresIn
+        userId: responseData.localId
       });
     } catch (err) {
       const error = new Error(err.message);
@@ -43,20 +52,39 @@ export default {
   tryLogin(context) {
     const token = localStorage.getItem('token');
     const userId = localStorage.getItem('userId');
+    const tokenExpiration = localStorage.getItem('tokenExpiration');
+
+    const expiresIn = +tokenExpiration - new Date().getTime();
+
+    if (expiresIn < 0) {
+      return;
+    }
+
+    setTimeout(function() {
+      context.dispatch('autoLogout');
+    }, expiresIn);
 
     if (token && userId) {
       context.commit('setUser', {
         token: token,
-        userId: userId,
-        tokenExpiration: null
+        userId: userId
       });
     }
   },
   logout(context) {
+    localStorage.removeItem('token');
+    localStorage.removeItem('userId');
+    localStorage.removeItem('tokenExpiration');
+
+    clearTimeout(timer);
+
     context.commit('setUser', {
       token: null,
-      userId: null,
-      tokenExpiration: null
+      userId: null
     });
+  },
+  autoLogout(context) {
+    context.dispatch('logout');
+    context.commit('setAutoLogout');
   }
 };

src/store/modules/auth/getters.js

@@ -7,5 +7,8 @@ export default {
   },
   isAuthenticated(state) {
     return !!state.token;
+  },
+  didAutoLogout(state) {
+    return state.didAutoLogout;
   }
 };

src/store/modules/auth/index.js

@@ -7,7 +7,7 @@ export default {
     return {
       userId: null,
       token: null,
-      tokenExpiration: null
+      didAutoLogout: false
     };
   },
   actions,

src/store/modules/auth/mutations.js

@@ -2,6 +2,9 @@ export default {
   setUser(state, payload) {
     state.token = payload.token;
     state.userId = payload.userId;
-    state.tokenExpiration = payload.tokenExpiration;
+    state.didAutoLogout = false;
+  },
+  setAutoLogout(state) {
+    state.didAutoLogout = true;
   }
 };