Set time out for token and hold user login when refesh page

layouts/default.vue

@@ -4,11 +4,13 @@
       <div id="logo">
       <div id="logo">
         <Logo />
         <Logo />
       </div>
       </div>
-      <ul id="navbar-child">
+      <div class="text-warning hi h3 align-middle" v-if="$store.getters.isAuth == true"> Hello {{this.$store.getters.getName}}</div>
+
+      <ul id="navbar-child" class="pb-3">
         <li><nuxt-link to="/">Home</nuxt-link></li>
         <li><nuxt-link to="/">Home</nuxt-link></li>
         <li><nuxt-link to="/chat">Chat Room</nuxt-link></li>
         <li><nuxt-link to="/chat">Chat Room</nuxt-link></li>
         <li><nuxt-link to="/my_page">About Me</nuxt-link></li>
         <li><nuxt-link to="/my_page">About Me</nuxt-link></li>
-        <li v-if="$store.getters.isAuth == true"><nuxt-link to="/login">Logout</nuxt-link></li>
+        <li v-if="$store.getters.isAuth == true"><a href="#" @click="onLogout">Logout</a></li>
         <li v-else><nuxt-link to="/login">Login</nuxt-link></li>
         <li v-else><nuxt-link to="/login">Login</nuxt-link></li>
 
 
         <!-- <li> -->
         <!-- <li> -->
@@ -25,7 +27,7 @@
 
 
 <style lang="scss">
 <style lang="scss">
 #navbar {
 #navbar {
-  height: 50px;
+  height: 60px;
   width: 100%;
   width: 100%;
   background-color: black;
   background-color: black;
   #navbar-child {
   #navbar-child {
@@ -59,6 +61,12 @@
     height: 60px;
     height: 60px;
     float: left;
     float: left;
   }
   }
+  .hi {
+    padding-left: 50px;
+    padding-top: 20px;
+    width: auto;
+    float: left;
+  }
 }
 }
 </style>
 </style>
 
 
@@ -111,3 +119,13 @@ html {
   background-color: #35495e;
   background-color: #35495e;
 }
 }
 </style>
 </style>
+<script>
+export default {
+  methods: {
+    onLogout() {
+      this.$store.dispatch('logout')
+      this.$router.push('/')
+    }
+  }
+}
+</script>

middleware/check_auth.js

 export default function (context) {
 export default function (context) {
-  if (process.client) context.store.dispatch('initAuth')
+  context.store.dispatch('initAuth', context.req)
 }
 }

store/index.js

@@ -10,8 +10,11 @@ const createStore = () => {
       setToken(state, token) {
       setToken(state, token) {
         state.token = token
         state.token = token
       },
       },
+      setName(state, name) {
+        state.name = name
+      },
       clearToken(state) {
       clearToken(state) {
-        stateate.token = null
+        state.token = null
       },
       },
     },
     },
     actions: {
     actions: {
@@ -40,7 +43,14 @@ const createStore = () => {
                 'tokenExpiration',
                 'tokenExpiration',
                 new Date().getTime() + result.expiresIn * 1000
                 new Date().getTime() + result.expiresIn * 1000
               )
               )
-              console.log(result.expiresIn)
+              Cookies.set('name', credentials.email)
+
+              // console.log(result.expiresIn)
+              Cookies.set('token', result.idToken)
+              Cookies.set(
+                'tokenExpiration',
+                new Date().getTime() + result.expiresIn * 1000
+              )
               context.dispatch('setLogoutTimer', result.expiresIn * 1000)
               context.dispatch('setLogoutTimer', result.expiresIn * 1000)
               // context.commit('setToken', result.idToken)
               // context.commit('setToken', result.idToken)
               this.$router.push('my_page')
               this.$router.push('my_page')
@@ -58,23 +68,59 @@ const createStore = () => {
         }, duration)
         }, duration)
       },
       },
 
 
-      initAuth(context) {
-        const token = localStorage.getItem('token')
-        const tokenExpiration = localStorage.getItem('tokenExpiration')
+      initAuth(context, req) {
+        let token, tokenExpiration
+        if (req) {
+          // Handle first time
+          if (!req.headers.cookie) return false
+
+          const keyToken = req.headers.cookie
+            .split(';')
+            .find((c) => c.trim().startsWith('token='))
+          const keyTokenExpiration = req.headers.cookie
+            .split(';')
+            .find((c) => c.trim().startsWith('tokenExpiration='))
+
+          if (!keyToken || !keyTokenExpiration) {
+            context.dispatch('logout')
+            return false
+          }
+
+          token = keyToken.split('=')[1]
+          tokenExpiration = keyTokenExpiration.split('=')[1]
+        } else {
+          token = localStorage.getItem('token')
+          tokenExpiration = localStorage.getItem('tokenExpiration')
 
 
-        if (new Date().getTime() > tokenExpiration || !token) return false
+          if (new Date().getTime() > tokenExpiration || !token) {
+            context.dispatch('logout')
+            return false
+          }
 
 
           localStorage.setItem(
           localStorage.setItem(
             'tokenExpiration',
             'tokenExpiration',
             tokenExpiration - new Date().getTime()
             tokenExpiration - new Date().getTime()
           )
           )
+        }
+
         context.commit('setToken', token)
         context.commit('setToken', token)
       },
       },
+      logout(context) {
+        context.commit('clearToken')
+        Cookies.remove('token')
+        Cookies.remove('tokenExpiration')
+        localStorage.removeItem('token')
+        localStorage.removeItem('tokenExpiration')
+      },
     },
     },
     getters: {
     getters: {
       isAuth(state) {
       isAuth(state) {
         return state.token != null
         return state.token != null
       },
       },
+      getName() {
+        const nameEmail = Cookies.get('name').split('@')[0]
+        return nameEmail
+      },
     },
     },
   })
   })
 }
 }