Fix auth url generation

package.json

@@ -46,6 +46,7 @@
     "eslint": "^10.1.0",
     "eslint-plugin-vuetify": "^2.7.2",
     "happy-dom": "^20.0.10",
+    "jsdom": "^29.1.1",
     "npm-run-all2": "^8.0.4",
     "pinia": "^2.3.1",
     "sass": "^1.77.8",
@@ -57,6 +58,7 @@
     "unplugin-vue-router": "^0.19.0",
     "vite": "^7.3.2",
     "vite-plugin-vuetify": "^2.1.2",
+    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.15",
     "vue-router": "^4.6.3",
     "vue-tsc": "^3.2.6"

src/api/clients/api.client.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const apiClient = axios.create({
+  baseURL: import.meta.env.VITE_SPOTIFY_ENDPOINT,
+  timeout: 10_000,
+  headers: {
+    "Content-Type": "application/x-www-form-urlencoded"
+  }
+});

src/api/clients.ts → src/api/clients/auth.client.ts

@@ -7,11 +7,3 @@ export const authApiClient = axios.create({
     "Content-Type": "application/x-www-form-urlencoded"
   }
 });
-
-export const apiClient = axios.create({
-  baseURL: import.meta.env.VITE_SPOTIFY_ENDPOINT,
-  timeout: 10_000,
-  headers: {
-    "Content-Type": "application/x-www-form-urlencoded"
-  }
-});

src/api/clients/index.ts

@@ -0,0 +1,2 @@
+export { apiClient } from "./api.client";
+export { authApiClient } from "./auth.client";

src/api/index.ts

@@ -1,2 +1,2 @@
-import "./interceptors";
-import "./clients";
+export { setupInterceptors } from "./setup.interceptors";
+export * from "./clients";

src/api/interceptors/auth.interceptor.ts

@@ -0,0 +1,16 @@
+import type { InternalAxiosRequestConfig } from "axios";
+
+type AuthStoreLike = {
+  accessToken: string | undefined;
+};
+
+export const createAuthRequestInterceptor =
+  (authStore: AuthStoreLike) =>
+  (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => {
+    if (authStore.accessToken) {
+      config.headers = config.headers ?? {};
+      config.headers.Authorization = `Bearer ${authStore.accessToken}`;
+    }
+
+    return config;
+  };

src/api/interceptors/index.ts

@@ -1,3 +1,3 @@
-import "./refresh-token"
-import "./rate-limit"
-import "./auth"
+export * from "./auth.interceptor";
+export * from "./refresh-token.interceptor";
+export * from "./rate-limit.interceptor";

src/api/interceptors/rate-limit.interceptor.ts

@@ -0,0 +1,38 @@
+import type { AxiosError, AxiosInstance, InternalAxiosRequestConfig } from "axios";
+
+export const createRateLimitInterceptor =
+  (client: AxiosInstance) =>
+    async (error: AxiosError) => {
+      const config = error.config as InternalAxiosRequestConfig | undefined;
+
+      if (!config || !error.response) {
+        return Promise.reject(error);
+      }
+
+      if (error.response.status !== 429) {
+        return Promise.reject(error);
+      }
+
+      const method = config.method?.toLowerCase();
+
+      const safeMethods = ["get", "head", "put", "delete"];
+
+      if (!method || !safeMethods.includes(method)) {
+        return Promise.reject(error);
+      }
+
+      const retryAfterSecs = parseInt(
+        error.response.headers["retry-after"],
+        10
+      );
+
+      const delayMs =
+        (Number.isFinite(retryAfterSecs) ? retryAfterSecs : 1) * 1000;
+
+      const wait = (ms: number) =>
+        new Promise((res) => setTimeout(res, ms));
+
+      await wait(Math.min(delayMs, 120_000));
+
+      return client.request(config);
+    };

src/api/interceptors/refresh-token.interceptor.ts

@@ -0,0 +1,45 @@
+import type { AxiosError, AxiosInstance } from "axios";
+
+type AuthStoreLike = {
+  accessToken: string | undefined;
+  refreshToken: string | undefined;
+  accessTokenExpired: boolean;
+  refreshAccessToken: () => Promise<void>;
+};
+
+type RouterLike = {
+  push: (...args: any[]) => any;
+};
+
+export const createRefreshTokenInterceptor =
+  (client: AxiosInstance, authStore: AuthStoreLike, router: RouterLike) =>
+  async (error: AxiosError) => {
+    const status = error.response?.status;
+
+    if (status !== 401 && status !== 403) {
+      return Promise.reject(error);
+    }
+
+    if (!authStore.refreshToken && !authStore.accessToken) {
+      await router.push({ name: "/" });
+      return Promise.reject(error);
+    }
+
+    if (authStore.accessTokenExpired && authStore.refreshToken) {
+      await authStore.refreshAccessToken();
+
+      const config = error.config;
+
+      if (!config) {
+        return Promise.reject(error);
+      }
+
+      config.headers = config.headers ?? {};
+      config.headers.Authorization = `Bearer ${authStore.accessToken}`;
+
+      return client.request(config);
+    }
+
+    await router.push({ name: "/" });
+    return Promise.reject(error);
+  };

src/api/setup.interceptors.ts

@@ -0,0 +1,12 @@
+import { useAuthStore } from "@/stores/auth";
+import { apiClient } from "./clients/api.client";
+import { createAuthRequestInterceptor, createRateLimitInterceptor, createRefreshTokenInterceptor,  } from "./interceptors";
+import router from "@/router";
+
+export function setupInterceptors(): void {
+  const authStore = useAuthStore();
+
+  apiClient.interceptors.request.use(createAuthRequestInterceptor(authStore));
+  apiClient.interceptors.response.use((res) => res, createRefreshTokenInterceptor(apiClient, authStore, router))
+  apiClient.interceptors.response.use((res) => res, createRateLimitInterceptor(apiClient));
+}

src/components.d.ts

@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 // @ts-nocheck
 // biome-ignore lint: disable
 // oxlint-disable

src/main.ts

@@ -31,10 +31,12 @@ import Cassette from "./components/cassette/Cassette.vue";
 
 // Composables
 import { createApp } from 'vue'
+import { setupInterceptors } from "./api";
 
 const app = createApp(App)
 
 registerPlugins(app)
+setupInterceptors();
 
 app.component('cassette-side', CassetteSide)
 app.component('playlist-list', PlaylistsList)

src/stores/album.ts

@@ -4,7 +4,7 @@ import type { GetAlbumResponse, GetAlbumTracksResponse, SearchResponse } from '@
 import { ParseAlbumTrackDTO } from '@/parsers/trackDtoParser'
 import { GetSmallestImage } from '@/utils/images/imageUtils'
 import { useCassettesStore } from './cassette'
-import { apiClient } from '@/api/clients'
+import { apiClient } from '@/api/'
 import { useProfileStore } from './profile'
 import type { AlbumDTO } from '@/types/spotify/dto'
 import { ParseAlbumDTO } from '@/parsers/albumDtoParser'