fix: correctly call the /variable endpoint after the user is authenticated (#4267)

* ✨ (authContext.tsx): Add functionality to fetch global variables on authentication
🔧 (api.tsx): Replace universal-cookie import with react-cookie for consistency
🔧 (authStore.ts): Replace universal-cookie import with react-cookie for consistency
🔧 (use-get-global-variables.ts): Add check to only fetch global variables if user is authenticated
✨ (use-get-mutation-global-variables.ts): Add mutation function to fetch and update global variables
🔧 (authStore.ts): Replace universal-cookie import with react-cookie for consistency

* ✨ (use-get-folders.ts): add authentication check before fetching folders data to ensure only authenticated users can access the data

src/frontend/src/contexts/authContext.tsx

@@ -5,9 +5,10 @@ import {
   LANGFLOW_REFRESH_TOKEN,
 } from "@/constants/constants";
 import { useGetUserData } from "@/controllers/API/queries/auth";
+import { useGetGlobalVariablesMutation } from "@/controllers/API/queries/variables/use-get-mutation-global-variables";
 import useAuthStore from "@/stores/authStore";
 import { createContext, useEffect, useState } from "react";
-import Cookies from "universal-cookie";
+import { Cookies } from "react-cookie";
 import { useStoreStore } from "../stores/storeStore";
 import { Users } from "../types/api";
 import { AuthContextType } from "../types/contexts/auth";
@@ -41,6 +42,7 @@ export function AuthProvider({ children }): React.ReactElement {
   const setIsAuthenticated = useAuthStore((state) => state.setIsAuthenticated);
 
   const { mutate: mutateLoggedUser } = useGetUserData();
+  const { mutate: mutateGetGlobalVariables } = useGetGlobalVariablesMutation();
 
   useEffect(() => {
     const storedAccessToken = cookies.get(LANGFLOW_ACCESS_TOKEN);
@@ -86,12 +88,17 @@ export function AuthProvider({ children }): React.ReactElement {
     setAccessToken(newAccessToken);
     setIsAuthenticated(true);
     getUser();
+    getGlobalVariables();
   }
 
   function storeApiKey(apikey: string) {
     setApiKey(apikey);
   }
 
+  function getGlobalVariables() {
+    mutateGetGlobalVariables({});
+  }
+
   return (
     // !! to convert string to boolean
     <AuthContext.Provider

src/frontend/src/controllers/API/api.tsx

@@ -3,10 +3,9 @@ import { useCustomApiHeaders } from "@/customization/hooks/use-custom-api-header
 import useAuthStore from "@/stores/authStore";
 import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from "axios";
 import * as fetchIntercept from "fetch-intercept";
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
 import { Cookies } from "react-cookie";
 import { BuildStatus } from "../../constants/enums";
-import { AuthContext } from "../../contexts/authContext";
 import useAlertStore from "../../stores/alertStore";
 import useFlowStore from "../../stores/flowStore";
 import { checkDuplicateRequestAndStoreRequest } from "./helpers/check-duplicate-requests";
@@ -21,7 +20,14 @@ const cookies = new Cookies();
 function ApiInterceptor() {
   const autoLogin = useAuthStore((state) => state.autoLogin);
   const setErrorData = useAlertStore((state) => state.setErrorData);
-  let { accessToken, authenticationErrorCount } = useContext(AuthContext);
+  const accessToken = useAuthStore((state) => state.accessToken);
+  const authenticationErrorCount = useAuthStore(
+    (state) => state.authenticationErrorCount,
+  );
+  const setAuthenticationErrorCount = useAuthStore(
+    (state) => state.setAuthenticationErrorCount,
+  );
+
   const { mutate: mutationLogout } = useLogout();
   const { mutate: mutationRenewAccessToken } = useRefreshAccessToken();
   const isLoginPage = location.pathname.includes("login");
@@ -149,10 +155,10 @@ function ApiInterceptor() {
   function checkErrorCount() {
     if (isLoginPage) return;
 
-    authenticationErrorCount = authenticationErrorCount + 1;
+    setAuthenticationErrorCount(authenticationErrorCount + 1);
 
     if (authenticationErrorCount > 3) {
-      authenticationErrorCount = 0;
+      setAuthenticationErrorCount(0);
       mutationLogout();
       return false;
     }
@@ -169,9 +175,9 @@ function ApiInterceptor() {
     }
     mutationRenewAccessToken(undefined, {
       onSuccess: async () => {
-        authenticationErrorCount = 0;
+        setAuthenticationErrorCount(0);
         await remakeRequest(error);
-        authenticationErrorCount = 0;
+        setAuthenticationErrorCount(0);
       },
       onError: (error) => {
         console.error(error);

src/frontend/src/controllers/API/queries/folders/use-get-folders.ts

@@ -1,5 +1,6 @@
 import { DEFAULT_FOLDER, STARTER_FOLDER_NAME } from "@/constants/constants";
 import { FolderType } from "@/pages/MainPage/entities";
+import useAuthStore from "@/stores/authStore";
 import { useFolderStore } from "@/stores/foldersStore";
 import { useTypesStore } from "@/stores/typesStore";
 import { useQueryFunctionType } from "@/types/api";
@@ -18,7 +19,10 @@ export const useGetFoldersQuery: useQueryFunctionType<
   const setMyCollectionId = useFolderStore((state) => state.setMyCollectionId);
   const setFolders = useFolderStore((state) => state.setFolders);
 
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
   const getFoldersFn = async (): Promise<FolderType[]> => {
+    if (!isAuthenticated) return [];
     const res = await api.get(`${getURL("FOLDERS")}/`);
     const data = res.data;
 

src/frontend/src/controllers/API/queries/variables/use-get-global-variables.ts

@@ -1,3 +1,4 @@
+import useAuthStore from "@/stores/authStore";
 import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
 import getUnavailableFields from "@/stores/globalVariablesStore/utils/get-unavailable-fields";
 import { useQueryFunctionType } from "@/types/api";
@@ -20,7 +21,10 @@ export const useGetGlobalVariables: useQueryFunctionType<
     (state) => state.setUnavailableFields,
   );
 
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+
   const getGlobalVariablesFn = async (): Promise<GlobalVariable[]> => {
+    if (!isAuthenticated) return [];
     const res = await api.get(`${getURL("VARIABLES")}/`);
     setGlobalVariablesEntries(res.data.map((entry) => entry.name));
     setUnavailableFields(getUnavailableFields(res.data));

src/frontend/src/controllers/API/queries/variables/use-get-mutation-global-variables.ts

@@ -0,0 +1,33 @@
+import { useGlobalVariablesStore } from "@/stores/globalVariablesStore/globalVariables";
+import getUnavailableFields from "@/stores/globalVariablesStore/utils/get-unavailable-fields";
+import { useMutationFunctionType } from "@/types/api";
+import { GlobalVariable } from "@/types/global_variables";
+import { UseMutationOptions, UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+export const useGetGlobalVariablesMutation: useMutationFunctionType<
+  undefined
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const setGlobalVariablesEntries = useGlobalVariablesStore(
+    (state) => state.setGlobalVariablesEntries,
+  );
+  const setUnavailableFields = useGlobalVariablesStore(
+    (state) => state.setUnavailableFields,
+  );
+
+  const getGlobalVariablesFn = async (): Promise<GlobalVariable[]> => {
+    const res = await api.get(`${getURL("VARIABLES")}/`);
+    setGlobalVariablesEntries(res.data.map((entry) => entry.name));
+    setUnavailableFields(getUnavailableFields(res.data));
+    return res.data;
+  };
+
+  const mutation: UseMutationResult<undefined, Error, GlobalVariable[]> =
+    mutate(["useGetGlobalVariables"], getGlobalVariablesFn, options);
+
+  return mutation;
+};

src/frontend/src/stores/authStore.ts

@@ -1,7 +1,7 @@
 // authStore.js
 import { LANGFLOW_ACCESS_TOKEN } from "@/constants/constants";
 import { AuthStoreType } from "@/types/zustand/auth";
-import Cookies from "universal-cookie";
+import { Cookies } from "react-cookie";
 import { create } from "zustand";
 
 const cookies = new Cookies();