Added message when API key is not valid or is not existent

src/frontend/src/contexts/storeContext.tsx

@@ -10,13 +10,15 @@ const initialValue = {
   setValidApiKey: () => {},
   hasApiKey: false,
   setHasApiKey: () => {},
+  loadingApiKey: true,
 };
 
 export const StoreContext = createContext<storeContextType>(initialValue);
 
 export function StoreProvider({ children }) {
   const [hasStore, setHasStore] = useState(true);
-  const [hasApiKey, setHasApiKey] = useState(false);
+  const [loadingApiKey, setLoadingApiKey] = useState(true);
+  const [hasApiKey, setHasApiKey] = useState(true);
   const [validApiKey, setValidApiKey] = useState(false);
   const [storeChecked, setStoreChecked] = useState(false);
 
@@ -36,6 +38,7 @@ export function StoreProvider({ children }) {
   }, []);
 
   useEffect(() => {
+    setLoadingApiKey(true);
     const fetchStoreData = async () => {
       try {
         if (storeChecked) return;
@@ -43,6 +46,7 @@ export function StoreProvider({ children }) {
         console.log(res);
         setHasApiKey(res?.has_api_key ?? false);
         setValidApiKey(res?.is_valid ?? false);
+        setLoadingApiKey(false);
       } catch (e) {
         console.log(e);
       }
@@ -60,6 +64,7 @@ export function StoreProvider({ children }) {
         setHasApiKey,
         validApiKey,
         setValidApiKey,
+        loadingApiKey,
       }}
     >
       {children}

src/frontend/src/pages/StorePage/index.tsx

@@ -23,7 +23,8 @@ import { storeComponent } from "../../types/store";
 import { cn } from "../../utils/utils";
 import { MarketCardComponent } from "./components/market-card";
 export default function StorePage(): JSX.Element {
-  const { validApiKey, setValidApiKey, hasApiKey } = useContext(StoreContext);
+  const { validApiKey, setValidApiKey, hasApiKey, loadingApiKey } =
+    useContext(StoreContext);
   const { setErrorData } = useContext(alertContext);
   const [loading, setLoading] = useState(true);
   const [loadingTags, setLoadingTags] = useState(true);
@@ -43,6 +44,26 @@ export default function StorePage(): JSX.Element {
     handleGetTags();
   }, []);
 
+  useEffect(() => {
+    if (!loadingApiKey) {
+      if (!hasApiKey) {
+        setErrorData({
+          title: "API Key Error",
+          list: [
+            "You don't have an API Key. Please add one to use the Langflow Store.",
+          ],
+        });
+      } else if (!validApiKey) {
+        setErrorData({
+          title: "API Key Error",
+          list: [
+            "Your API Key is not valid. Please add a valid API Key to use the Langflow Store.",
+          ],
+        });
+      }
+    }
+  }, [loadingApiKey, validApiKey, hasApiKey]);
+
   useEffect(() => {
     handleGetComponents();
   }, [
@@ -53,6 +74,7 @@ export default function StorePage(): JSX.Element {
     filteredCategories,
     selectFilter,
     validApiKey,
+    hasApiKey,
   ]);
 
   function handleGetTags() {
@@ -64,6 +86,7 @@ export default function StorePage(): JSX.Element {
   }
 
   function handleGetComponents() {
+    if (!hasApiKey) return;
     setLoading(true);
     getStoreComponents({
       page: pageIndex,
@@ -81,6 +104,9 @@ export default function StorePage(): JSX.Element {
         if (!res?.authorized && validApiKey === true) {
           setValidApiKey(false);
         } else {
+          if (res?.authorized) {
+            setValidApiKey(true);
+          }
           setLoading(false);
           setSearchData(res?.results ?? []);
           setTotalRowsCount(

src/frontend/src/types/contexts/store.ts

@@ -5,4 +5,5 @@ export type storeContextType = {
   hasApiKey: boolean;
   setValidApiKey: (key: boolean) => void;
   validApiKey: boolean;
+  loadingApiKey: boolean;
 };