diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index dbd35cc62..b1f73b1c6 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -48,6 +48,7 @@ "elkjs": "^0.9.3", "emoji-regex": "^10.3.0", "esbuild": "^0.21.5", + "fetch-intercept": "^2.4.0", "file-saver": "^2.0.5", "framer-motion": "^11.2.10", "fuse.js": "^7.0.0", @@ -8617,6 +8618,12 @@ "node": "^12.20 || >= 14.13" } }, + "node_modules/fetch-intercept": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/fetch-intercept/-/fetch-intercept-2.4.0.tgz", + "integrity": "sha512-BPZ2LM9Dh1ua2ovQf03N6rhWg1qxdVD5qK/G4llvcemt6M+jjxCuIDxJ+6IiG+uz//3UQmgfKEv0gOGvYIxZ7g==", + "license": "MIT" + }, "node_modules/fetch-retry": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-6.0.0.tgz", diff --git a/src/frontend/package.json b/src/frontend/package.json index ed20c4dfe..733886664 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -43,6 +43,7 @@ "elkjs": "^0.9.3", "emoji-regex": "^10.3.0", "esbuild": "^0.21.5", + "fetch-intercept": "^2.4.0", "file-saver": "^2.0.5", "framer-motion": "^11.2.10", "fuse.js": "^7.0.0", diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index c03d13e9e..51d354eea 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -2,6 +2,7 @@ import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants"; import { useCustomApiHeaders } from "@/customization/hooks/use-custom-api-headers"; import useAuthStore from "@/stores/authStore"; import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from "axios"; +import * as fetchIntercept from "fetch-intercept"; import { useContext, useEffect } from "react"; import { Cookies } from "react-cookie"; import { BuildStatus } from "../../constants/enums"; @@ -27,6 +28,20 @@ function ApiInterceptor() { const customHeaders = useCustomApiHeaders(); useEffect(() => { + const unregister = fetchIntercept.register({ + request: function (url, config) { + const accessToken = cookies.get(LANGFLOW_ACCESS_TOKEN); + if (accessToken && !isAuthorizedURL(config?.url)) { + config.headers["Authorization"] = `Bearer ${accessToken}`; + } + + for (const [key, value] of Object.entries(customHeaders)) { + config.headers[key] = value; + } + return [url, config]; + }, + }); + const interceptor = api.interceptors.response.use( (response) => response, async (error: AxiosError) => { @@ -127,6 +142,7 @@ function ApiInterceptor() { // Clean up the interceptors when the component unmounts api.interceptors.response.eject(interceptor); api.interceptors.request.eject(requestInterceptor); + unregister(); }; }, [accessToken, setErrorData, customHeaders, autoLogin]); @@ -222,10 +238,6 @@ async function performStreamingRequest({ // this flag is fundamental to ensure server stops tasks when client disconnects Connection: "close", }; - const accessToken = cookies.get(LANGFLOW_ACCESS_TOKEN); - if (accessToken) { - headers["Authorization"] = `Bearer ${accessToken}`; - } const controller = new AbortController(); useFlowStore.getState().setBuildController(controller); const params = { diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index af38687d5..9d633ecbf 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -41,7 +41,7 @@ const SignUp = lazy(() => import("./pages/SignUpPage")); const router = createBrowserRouter( createRoutesFromElements([ diff --git a/src/frontend/vite.config.mts b/src/frontend/vite.config.mts index 353f12014..9072997be 100644 --- a/src/frontend/vite.config.mts +++ b/src/frontend/vite.config.mts @@ -34,7 +34,7 @@ export default defineConfig(({ mode }) => { }, {}); return { - basename: (BASENAME || "") + "/", + basename: BASENAME || "", build: { outDir: "build", },