diff --git a/ui/litellm-dashboard/src/app/page.tsx b/ui/litellm-dashboard/src/app/page.tsx
index 2569b22c45..e796444514 100644
--- a/ui/litellm-dashboard/src/app/page.tsx
+++ b/ui/litellm-dashboard/src/app/page.tsx
@@ -215,6 +215,7 @@ export default function CreateKeyPage() {
userEmail={userEmail}
setProxySettings={setProxySettings}
proxySettings={proxySettings}
+ accessToken={accessToken}
/>
diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx
index 9bdc0fe9b7..b64f72c547 100644
--- a/ui/litellm-dashboard/src/components/navbar.tsx
+++ b/ui/litellm-dashboard/src/components/navbar.tsx
@@ -1,5 +1,5 @@
import Link from "next/link";
-import React from "react";
+import React, { useState, useEffect } from "react";
import type { MenuProps } from "antd";
import { Dropdown } from "antd";
import { Organization } from "@/components/networking";
@@ -9,6 +9,8 @@ import {
LogoutOutlined
} from '@ant-design/icons';
import { clearTokenCookies } from "@/utils/cookieUtils";
+import { fetchProxySettings } from "@/utils/proxyUtils";
+
interface NavbarProps {
userID: string | null;
userEmail: string | null;
@@ -16,6 +18,7 @@ interface NavbarProps {
premiumUser: boolean;
setProxySettings: React.Dispatch>;
proxySettings: any;
+ accessToken: string | null;
}
const Navbar: React.FC = ({
@@ -24,10 +27,30 @@ const Navbar: React.FC = ({
userRole,
premiumUser,
proxySettings,
+ setProxySettings,
+ accessToken,
}) => {
const isLocal = process.env.NODE_ENV === "development";
const imageUrl = isLocal ? "http://localhost:4000/get_image" : "/get_image";
- let logoutUrl = proxySettings?.PROXY_LOGOUT_URL || "";
+ const [logoutUrl, setLogoutUrl] = useState("");
+
+ useEffect(() => {
+ const initializeProxySettings = async () => {
+ if (accessToken) {
+ const settings = await fetchProxySettings(accessToken);
+ console.log("response from fetchProxySettings", settings);
+ if (settings) {
+ setProxySettings(settings);
+ }
+ }
+ };
+
+ initializeProxySettings();
+ }, [accessToken]);
+
+ useEffect(() => {
+ setLogoutUrl(proxySettings?.PROXY_LOGOUT_URL || "");
+ }, [proxySettings]);
const handleLogout = () => {
clearTokenCookies();
diff --git a/ui/litellm-dashboard/src/utils/proxyUtils.ts b/ui/litellm-dashboard/src/utils/proxyUtils.ts
new file mode 100644
index 0000000000..32e14baddb
--- /dev/null
+++ b/ui/litellm-dashboard/src/utils/proxyUtils.ts
@@ -0,0 +1,13 @@
+import { getProxyUISettings } from "@/components/networking";
+
+export const fetchProxySettings = async (accessToken: string | null) => {
+ if (!accessToken) return null;
+
+ try {
+ const proxySettings = await getProxyUISettings(accessToken);
+ return proxySettings;
+ } catch (error) {
+ console.error("Error fetching proxy settings:", error);
+ return null;
+ }
+};
\ No newline at end of file