From 2a5e62481bb0f75b7e83877fe01c050276df9694 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 10 Apr 2024 08:49:40 -0700
Subject: [PATCH 1/5] ui - setup sso

---
 .../src/components/admins.tsx                 | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index b8995eb1d5..d95a8d5077 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/ui/litellm-dashboard/src/components/admins.tsx
@@ -376,6 +376,56 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
           </div>
         </Col>
       </Grid>
+      <Grid>
+      <Title level={4}>Add SSO </Title>
+      <Card>
+      <Form
+    form={form}
+    onFinish={handleMemberUpdate}
+    labelCol={{ span: 8 }}
+    wrapperCol={{ span: 16 }}
+    labelAlign="left"
+  >
+    <>
+    <Form.Item
+        label="PROXY_BASE_URL"
+        name="proxy_base_url"
+        rules={[
+          { required: true, message: "Please enter the public key" },
+        ]}
+      >
+      <Input />
+      </Form.Item>
+      
+
+      <Form.Item
+        label="GOOGLE_CLIENT_ID"
+        name="google_client_id"
+        rules={[
+          { required: true, message: "Please enter the public key" },
+        ]}
+      >
+      <Input.Password />
+      </Form.Item>
+
+      <Form.Item
+        label="GOOGLE_CLIENT_SECRET"
+        name="google_client_secret"
+        rules={[
+          { required: true, message: "Please enter the private key" },
+        ]}
+      >
+        <Input.Password />
+        </Form.Item>
+    </>
+    <div style={{ textAlign: "right", marginTop: "10px" }}>
+      <Button2 htmlType="submit">Update role</Button2>
+    </div>
+  </Form>
+
+      </Card>
+
+      </Grid>
     </div>
   );
 };

From 84c486cacb2752e493f073abb9ee2638bb1cf848 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 10 Apr 2024 11:44:08 -0700
Subject: [PATCH 2/5] v0 setup sso on litellm admin ui

---
 ui/litellm-dashboard/src/components/admins.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index d95a8d5077..459b9f3b75 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/ui/litellm-dashboard/src/components/admins.tsx
@@ -40,6 +40,7 @@ import {
   Member,
   userGetAllUsersCall,
   User,
+  setCallbacksCall,
 } from "./networking";
 
 const AdminPanel: React.FC<AdminPanelProps> = ({
@@ -284,6 +285,20 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
       console.error("Error creating the key:", error);
     }
   };
+
+  const handleSSOUpdate = async (formValues: Record<string, any>) => {
+    if (accessToken == null) {
+      return;
+    }
+    let payload = {
+      environment_variables: {
+        PROXY_BASE_URL: formValues.proxy_base_url,
+        GOOGLE_CLIENT_ID: formValues.google_client_id,
+        GOOGLE_CLIENT_SECRET: formValues.google_client_secret,
+      },
+    };
+    setCallbacksCall(accessToken, payload);
+  }
   console.log(`admins: ${admins?.length}`);
   return (
     <div className="w-full m-2 mt-2 p-8">
@@ -381,7 +396,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
       <Card>
       <Form
     form={form}
-    onFinish={handleMemberUpdate}
+    onFinish={handleSSOUpdate}
     labelCol={{ span: 8 }}
     wrapperCol={{ span: 16 }}
     labelAlign="left"

From 25347b1f6f1441d513363d65b14d160660f62d6d Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 10 Apr 2024 11:44:27 -0700
Subject: [PATCH 3/5] feat - set env vars on proxy

---
 litellm/proxy/proxy_server.py | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/litellm/proxy/proxy_server.py b/litellm/proxy/proxy_server.py
index 691bb1adf3..6416044d8c 100644
--- a/litellm/proxy/proxy_server.py
+++ b/litellm/proxy/proxy_server.py
@@ -2493,13 +2493,12 @@ class ProxyConfig:
                     if success_callback not in litellm.success_callback:
                         litellm.success_callback.append(success_callback)
                         _added_callback = True
-            if _added_callback:
-                # we need to set env variables too
-                environment_variables = config_data.get("environment_variables", None)
-                for k, v in environment_variables.items():
-                    decoded_b64 = base64.b64decode(v)
-                    value = decrypt_value(value=decoded_b64, master_key=master_key)
-                    os.environ[k] = value
+            # we need to set env variables too
+            environment_variables = config_data.get("environment_variables", None)
+            for k, v in environment_variables.items():
+                decoded_b64 = base64.b64decode(v)
+                value = decrypt_value(value=decoded_b64, master_key=master_key)
+                os.environ[k] = value
         except Exception as e:
             verbose_proxy_logger.error(
                 "{}\nTraceback:{}".format(str(e), traceback.format_exc())

From 09ef6f827ca56dcaa74085931bd5d9532ecf93eb Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 10 Apr 2024 11:49:27 -0700
Subject: [PATCH 4/5] v0 - add sso

---
 ui/litellm-dashboard/src/components/admins.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index 459b9f3b75..90319d232b 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/ui/litellm-dashboard/src/components/admins.tsx
@@ -434,7 +434,7 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
         </Form.Item>
     </>
     <div style={{ textAlign: "right", marginTop: "10px" }}>
-      <Button2 htmlType="submit">Update role</Button2>
+      <Button2 htmlType="submit">Save</Button2>
     </div>
   </Form>
 

From cfb250903dac0dfa49c5851d301339ef2a59e3ac Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Wed, 10 Apr 2024 12:07:21 -0700
Subject: [PATCH 5/5] ui - setup sso on admin ui

---
 .../src/components/admins.tsx                 | 147 ++++++++++++------
 1 file changed, 101 insertions(+), 46 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/admins.tsx b/ui/litellm-dashboard/src/components/admins.tsx
index 90319d232b..926df9b87c 100644
--- a/ui/litellm-dashboard/src/components/admins.tsx
+++ b/ui/litellm-dashboard/src/components/admins.tsx
@@ -57,6 +57,33 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
   const [isAddMemberModalVisible, setIsAddMemberModalVisible] = useState(false);
   const [isAddAdminModalVisible, setIsAddAdminModalVisible] = useState(false);
   const [isUpdateMemberModalVisible, setIsUpdateModalModalVisible] = useState(false);
+  const [isAddSSOModalVisible, setIsAddSSOModalVisible] = useState(false);
+  const [isInstructionsModalVisible, setIsInstructionsModalVisible] = useState(false);
+
+const handleAddSSOOk = () => {
+  setIsAddSSOModalVisible(false);
+  form.resetFields();
+};
+
+const handleAddSSOCancel = () => {
+  setIsAddSSOModalVisible(false);
+  form.resetFields();
+};
+
+const handleShowInstructions = (formValues: Record<string, any>) => {
+  setIsAddSSOModalVisible(false);
+  setIsInstructionsModalVisible(true);
+  // Optionally, you can call handleSSOUpdate here with the formValues
+  // handleSSOUpdate(formValues);
+};
+
+const handleInstructionsOk = () => {
+  setIsInstructionsModalVisible(false);
+};
+
+const handleInstructionsCancel = () => {
+  setIsInstructionsModalVisible(false);
+};
 
   const roles = ["proxy_admin", "proxy_admin_viewer"]
 
@@ -392,55 +419,83 @@ const AdminPanel: React.FC<AdminPanelProps> = ({
         </Col>
       </Grid>
       <Grid>
-      <Title level={4}>Add SSO </Title>
-      <Card>
-      <Form
-    form={form}
-    onFinish={handleSSOUpdate}
-    labelCol={{ span: 8 }}
-    wrapperCol={{ span: 16 }}
-    labelAlign="left"
-  >
-    <>
-    <Form.Item
-        label="PROXY_BASE_URL"
-        name="proxy_base_url"
-        rules={[
-          { required: true, message: "Please enter the public key" },
-        ]}
-      >
-      <Input />
-      </Form.Item>
-      
+  <Title level={4}>Add SSO</Title>
+  <div className="flex justify-start mb-4">
+    <Button onClick={() => setIsAddSSOModalVisible(true)}>Add SSO</Button>
+    <Modal
+      title="Add SSO"
+      visible={isAddSSOModalVisible}
+      width={800}
+      footer={null}
+      onOk={handleAddSSOOk}
+      onCancel={handleAddSSOCancel}
+    >
 
-      <Form.Item
-        label="GOOGLE_CLIENT_ID"
-        name="google_client_id"
-        rules={[
-          { required: true, message: "Please enter the public key" },
-        ]}
-      >
-      <Input.Password />
-      </Form.Item>
+        <Form
+          form={form}
+          onFinish={handleShowInstructions}
+          labelCol={{ span: 8 }}
+          wrapperCol={{ span: 16 }}
+          labelAlign="left"
+        >
+          <>
+            <Form.Item
+              label="PROXY BASE URL"
+              name="proxy_base_url"
+              rules={[{ required: true, message: "Please enter the public key" }]}
+            >
+              <Input />
+            </Form.Item>
 
-      <Form.Item
-        label="GOOGLE_CLIENT_SECRET"
-        name="google_client_secret"
-        rules={[
-          { required: true, message: "Please enter the private key" },
-        ]}
-      >
-        <Input.Password />
-        </Form.Item>
-    </>
-    <div style={{ textAlign: "right", marginTop: "10px" }}>
-      <Button2 htmlType="submit">Save</Button2>
+            <Form.Item
+              label="GOOGLE CLIENT ID"
+              name="google_client_id"
+              rules={[{ required: true, message: "Please enter the public key" }]}
+            >
+              <Input.Password />
+            </Form.Item>
+
+            <Form.Item
+              label="GOOGLE CLIENT SECRET"
+              name="google_client_secret"
+              rules={[{ required: true, message: "Please enter the private key" }]}
+            >
+              <Input.Password />
+            </Form.Item>
+          </>
+          <div style={{ textAlign: "right", marginTop: "10px" }}>
+            <Button2 htmlType="submit">Save</Button2>
+          </div>
+        </Form>
+
+    </Modal>
+    <Modal
+      title="SSO Setup Instructions"
+      visible={isInstructionsModalVisible}
+      width={800}
+      footer={null}
+      onOk={handleInstructionsOk}
+      onCancel={handleInstructionsCancel}
+    >
+      <p>Follow these steps to complete the SSO setup:</p>
+      <Text className="mt-2">
+        1. DO NOT Exit this TAB
+      </Text>
+      <Text className="mt-2">
+        2. Open a new tab, visit your proxy base url
+      </Text>
+      <Text className="mt-2">
+        3. Confirm your SSO is configured correctly and you can login on the new Tab
+      </Text>
+      <Text className="mt-2">
+        4. If Step 3 is successful, you can close this tab
+      </Text>
+      <div style={{ textAlign: "right", marginTop: "10px" }}>
+        <Button2 onClick={handleInstructionsOk}>Done</Button2>
     </div>
-  </Form>
-
-      </Card>
-
-      </Grid>
+    </Modal>
+  </div>
+</Grid>
     </div>
   );
 };