feat(auth): add JWT /refresh endpoint

Author: wale

components/Layout.vue

@@ -19,4 +19,22 @@ useHead({
     title: title.value,
     meta: [{ name: "description", content: description.value }],
 });
+
+const userStore = useAuthStore();
+const { user } = storeToRefs(userStore);
+
+const pollRefresh = async () => {
+    // eslint-disable-next-line no-useless-return
+    if (!user.value.id) return;
+    else {
+        const { requestState } = await userStore.refresh(
+            user.value.refreshToken,
+        );
+        if (requestState.error) throw requestState.error;
+    }
+};
+
+onMounted(() => {
+    setInterval(pollRefresh, 30_000); // poll refresh token API every 30s
+});
 </script>

server/api/auth/refresh.post.ts

@@ -0,0 +1,63 @@
+import jwt from "jsonwebtoken";
+import { v4 } from "uuid";
+import { z } from "zod";
+
+const schema = z.object({
+    refreshToken: z.string(),
+});
+
+export default defineEventHandler(async (event) => {
+    const result = await readValidatedBody(event, (body) =>
+        schema.safeParse(body),
+    );
+
+    // eslint-disable-next-line @typescript-eslint/no-throw-literal
+    if (!result.success) throw result.error.issues;
+
+    const runtimeConfig = useRuntimeConfig();
+
+    const payload = jwt.verify(
+        result.data.refreshToken,
+        runtimeConfig.jwtRefreshSecret,
+    ) as jwt.JwtPayload;
+
+    const savedRefreshToken = await findRefreshTokenById(payload.jti!);
+
+    if (!savedRefreshToken || savedRefreshToken.revoked)
+        throw createError({
+            statusCode: 401,
+            statusMessage: "Unauthorized",
+        });
+
+    const hashedToken = hashToken(result.data.refreshToken);
+    if (hashedToken !== savedRefreshToken.hashedToken)
+        throw createError({
+            statusCode: 401,
+            statusMessage: "Unauthorized",
+        });
+
+    const user = await db.user.findFirst({
+        where: {
+            id: payload.userId,
+        },
+    });
+
+    if (!user)
+        throw createError({
+            statusCode: 401,
+            statusMessage: "Unauthorized",
+        });
+
+    await deleteRefreshToken(savedRefreshToken.id);
+    const jti = v4();
+    const { accessToken, refreshToken: newRefreshToken } = generateTokens(
+        user,
+        jti,
+    );
+    await addRefreshToken(jti, newRefreshToken, user);
+
+    return {
+        accessToken,
+        refreshToken: newRefreshToken,
+    };
+});

utils/authStore.ts

@@ -5,6 +5,11 @@ interface RequestState {
     error: Error | null;
 }
 
+interface RefreshState {
+    accessToken: string;
+    refreshToken: string;
+}
+
 interface UserState {
     id: string;
     username: string;
@@ -104,5 +109,35 @@ export const useAuthStore = defineStore("auth", {
                 return { data: {} as UserState, requestState };
             }
         },
+        async refresh(
+            refreshToken: string,
+        ): Promise<{ data: RefreshState; requestState: RequestState }> {
+            const requestState: RequestState = {
+                loading: true,
+                error: null,
+            };
+            try {
+                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;
+                this.user.accessToken = data.accessToken;
+
+                return { data, requestState };
+            } catch (error) {
+                requestState.loading = false;
+                requestState.error = error as Error;
+                return { data: {} as RefreshState, requestState };
+            }
+        },
     },
 });