Merge pull request #9117 from BerriAI/litellm_ui_logout_url

[UI SSO Bug fix] - Correctly use `PROXY_LOGOUT_URL` when set

ui/litellm-dashboard/src/app/page.tsx

@@ -215,6 +215,7 @@ export default function CreateKeyPage() {
               userEmail={userEmail}
               setProxySettings={setProxySettings}
               proxySettings={proxySettings}
+              accessToken={accessToken}
             />
             <div className="flex flex-1 overflow-auto">
               <div className="mt-8">

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<React.SetStateAction<any>>;
   proxySettings: any;
+  accessToken: string | null;
 }
 
 const Navbar: React.FC<NavbarProps> = ({
@@ -24,10 +27,30 @@ const Navbar: React.FC<NavbarProps> = ({
   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();

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;
+  }
+};