handle expired token

handlers/users.go

@@ -54,11 +54,28 @@ func (usersHandler *UsersHandler) AuthRequired(c *gin.Context) {
 			c.AbortWithStatusJSON(http.StatusUnauthorized, GeneralError{"invalid credentials"})
 			return
 		}
-		if user.Token.Token != authorization[7:] {
-			logrus.Warnf("submitted token %s not match the backend token", authorization)
+
+		authToken, err := c.Cookie("auth._token.github")
+
+		if err != nil {
+			sentry.CaptureException(fmt.Errorf("no cookie found for user %s", uid))
 			c.AbortWithStatusJSON(http.StatusUnauthorized, GeneralError{"invalid credentials"})
 			return
 		}
+
+		//TODO: Currently, I didn't persistent the access token to db and only did front end check
+		if authorization != authToken {
+			sentry.CaptureException(fmt.Errorf("token %s not matched with the one in the cookie %s", authorization, authToken))
+			c.AbortWithStatusJSON(http.StatusUnauthorized, GeneralError{"invalid credentials"})
+			return
+		}
+
+		// if user.Token.Token != authorization[7:] {
+		// 	logrus.Warnf("submitted token %s not match the backend token", authorization)
+		// 	sentry.CaptureException(fmt.Errorf("submitted token %s not match the backend token for user %s", authorization, uid))
+		// 	c.AbortWithStatusJSON(http.StatusUnauthorized, GeneralError{"invalid credentials"})
+		// 	return
+		// }
 	}
 	c.Set("currentUser", user)
 	requestingAuthRequiredPath := true

www/pages/index.vue

@@ -70,7 +70,8 @@
       >
         <b-col lg>
           <p>
-            Or simply insert the following embedded image in a page that supports <b>HTML</b>.
+            Or simply insert the following embedded image in a page that
+            supports <b>HTML</b>.
           </p>
           <code>{{ myEmbeddedImageScript(activeBadgeColor) }}</code>
         </b-col>
@@ -78,7 +79,9 @@
       <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
         <h2 class="display-4">Count your page views in seconds</h2>
         <div>
-          <a :href="defaultStats"><img :src="defaultBadge" class="my-badge"/></a>
+          <a :href="defaultStats"
+            ><img :src="defaultBadge" class="my-badge"
+          /></a>
         </div>
         <p></p>
         <p class="lead">
@@ -99,7 +102,8 @@
           />
           <h2>It's just an image</h2>
           <p class="text-left">
-            No API calls, no Google analytics required. Only renders a svg image.
+            No API calls, no Google analytics required. Only renders a svg
+            image.
           </p>
         </div>
         <div class="col-lg-4 text-center">
@@ -111,8 +115,8 @@
           />
           <h2>No setup no cost</h2>
           <p class="text-left">
-            Just copy the generated unique script
-            to your markdown fiel and wait for the first person to browse your page.
+            Just copy the generated unique script to your markdown fiel and wait
+            for the first person to browse your page.
           </p>
         </div>
         <div class="col-lg-4 text-center">
@@ -124,7 +128,8 @@
           />
           <h2>Realtime chart</h2>
           <p class="text-left">
-            Every access gets counted and you are able to view the realtime statistic data via a <a :href="defaultStats">chart</a>
+            Every access gets counted and you are able to view the realtime
+            statistic data via a <a :href="defaultStats">chart</a>
             Observe how your application grows in time.
           </p>
         </div>
@@ -178,6 +183,21 @@ export default Vue.extend({
   },
   mounted() {
     this.$store.commit("error/setError", "");
+    if (this.$auth.strategy.token.status().valid()) {
+      setTimeout(() => {
+        if (this.$auth.strategy.refreshToken.status().expired()) {
+          this.$auth.logout();
+          return;
+        }
+
+        if (this.$auth.strategy.token.status().expired()) {
+          this.$auth.strategy.token.sync();
+          this.$store.dispatch("users/updateToken", {
+            token: this.$auth.strategy.token.get()
+          });
+        }
+      }, 10000);
+    }
   },
   computed: {
     badge() {
@@ -224,11 +244,16 @@ export default Vue.extend({
     createNewBadge() {
       this.$store.commit("loading/updateLoading");
 
-      this.$store.dispatch("badges/createBadge", () => {
-        this.updateBadgeText("green");
-        this.$store.commit("loading/updateLoading");
-        this.canGenerate = false;
-        this.buttonText = "Badge generated";
+      this.$store.dispatch("badges/createBadge", {
+        callback: () => {
+          this.updateBadgeText("green");
+          this.$store.commit("loading/updateLoading");
+          this.canGenerate = false;
+          this.buttonText = "Badge generated";
+        },
+        errorCallback: (error) => {
+          this.$store.commit("error/setError", error.response.data.msg);
+        }
       });
     }
   }

www/store/badges.js

@@ -13,15 +13,18 @@ export const mutations = {
 };
 
 export const actions = {
-  async createBadge(context, callback) {
-    const result = await this.$axios.$post("/api/badges");
-    context.commit("updateBadge", result);
-    callback();
+  async createBadge(context, {callback, errorCallback}) {
+    try {
+      const result = await this.$axios.$post("/api/badges");
+      context.commit("updateBadge", result);
+      callback();
+    } catch (error) {
+      errorCallback(error);
+    }
   },
   async getMyBadges(context, callback) {
     const result = await this.$axios.$get("/api/badges");
     context.commit("updateBadges", result);
     callback();
   }
-
 };

www/store/users.js

@@ -22,6 +22,9 @@ export const actions = {
     context.commit("updateUser", currentUser);
     context.commit("updateToken", currentUser.token);
   },
+  updateToken(context, {token}) {
+    context.commit("updateToken", token);
+  },
   async authenticate(context, requestBody, callback) {
     const result = await this.$axios.$post("/api/auth", requestBody);
     context.commit("updateUser", result);