fix(auth): improve refresh token logic

Author: wale

components/Layout.vue

@@ -8,6 +8,8 @@
 </template>
 
 <script setup lang="ts">
+import { useIntervalFn } from "@vueuse/core";
+
 const props = defineProps<{
     title: string;
     description: string;
@@ -23,7 +25,7 @@ useHead({
 const userStore = useAuthStore();
 const { user } = storeToRefs(userStore);
 
-const pollRefresh = async () => {
+useIntervalFn(async () => {
     // eslint-disable-next-line no-useless-return
     if (!user.value.id) return;
     else {
@@ -32,9 +34,5 @@ const pollRefresh = async () => {
         );
         if (requestState.error) throw requestState.error;
     }
-};
-
-onMounted(() => {
-    setInterval(pollRefresh, 30_000); // poll refresh token API every 30s
-});
+}, 300_000); // update every 5 minutes when logged in
 </script>

package.json

@@ -37,6 +37,7 @@
     "@ts-safeql/eslint-plugin": "^2.0.3",
     "@types/jsonwebtoken": "^9.0.5",
     "@types/uuid": "^9.0.8",
+    "@vueuse/core": "^10.9.0",
     "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
     "eslint-config-clarity": "^1.0.6",

server/api/auth/refresh.post.ts

@@ -21,19 +21,25 @@ export default defineEventHandler(async (event) => {
         runtimeConfig.jwtRefreshSecret,
     ) as jwt.JwtPayload;
 
+    if (new Date().getTime() > payload.exp!)
+        throw createError({
+            statusCode: 403,
+            statusMessage: "Forbidden: token is still valid",
+        });
+
     const savedRefreshToken = await findRefreshTokenById(payload.jti!);
 
     if (!savedRefreshToken || savedRefreshToken.revoked)
         throw createError({
             statusCode: 401,
-            statusMessage: "Unauthorized",
+            statusMessage: "Unauthorized: token revoked",
         });
 
     const hashedToken = hashToken(result.data.refreshToken);
     if (hashedToken !== savedRefreshToken.hashedToken)
         throw createError({
             statusCode: 401,
-            statusMessage: "Unauthorized",
+            statusMessage: "Unauthorized: refresh token mismatch",
         });
 
     const user = await db.user.findFirst({
@@ -45,7 +51,7 @@ export default defineEventHandler(async (event) => {
     if (!user)
         throw createError({
             statusCode: 401,
-            statusMessage: "Unauthorized",
+            statusMessage: "Unauthorized: user not found",
         });
 
     await deleteRefreshToken(savedRefreshToken.id);

utils/authStore.ts

@@ -117,16 +117,13 @@ export const useAuthStore = defineStore("auth", {
                 error: null,
             };
             try {
-                const data: RefreshState = await $fetch(
-                    "/api/auth/refresh",
-                    {
-                        method: "post",
-                        headers: { "Content-Type": "application/json" },
-                        body: {
-                            refreshToken,
-                        },
+                const data: RefreshState = await $fetch("/api/auth/refresh", {
+                    method: "post",
+                    headers: { "Content-Type": "application/json" },
+                    body: {
+                        refreshToken,
                     },
-                );
+                });
                 requestState.loading = false;
 
                 this.user.refreshToken = data.refreshToken;

yarn.lock

@@ -1732,6 +1732,11 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
   integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
 
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
 "@typescript-eslint/eslint-plugin@^6.1.0":
   version "6.21.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz#30830c1ca81fd5f3c2714e524c4303e0194f9cd3"
@@ -2073,6 +2078,28 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
   integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
 
+"@vueuse/core@^10.9.0":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.9.0.tgz#7d779a95cf0189de176fee63cee4ba44b3c85d64"
+  integrity sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.9.0"
+    "@vueuse/shared" "10.9.0"
+    vue-demi ">=0.14.7"
+
+"@vueuse/[email protected]":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.9.0.tgz#769a1a9db65daac15cf98084cbf7819ed3758620"
+  integrity sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==
+
+"@vueuse/[email protected]":
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.9.0.tgz#13af2a348de15d07b7be2fd0c7fc9853a69d8fe0"
+  integrity sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==
+  dependencies:
+    vue-demi ">=0.14.7"
+
 "@wale/general-sans@^1.0.0":
   version "1.0.0"
   resolved "https://npm.pkg.github.com/download/@wale/general-sans/1.0.0/31df4917e47fd8012e6d06ae3d366d5fc794a794#31df4917e47fd8012e6d06ae3d366d5fc794a794"
@@ -7855,7 +7882,7 @@ vue-bundle-renderer@^2.0.0:
   dependencies:
     ufo "^1.2.0"
 
-vue-demi@>=0.14.5:
+vue-demi@>=0.14.5, vue-demi@>=0.14.7:
   version "0.14.7"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
   integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==