Enhance: added encryption on LLM keys

agenta-web/.env.local.example

@@ -1,4 +1,5 @@
 # Rename this file to .env.local and provide the secret values to access them in the app
 # .env.local should not be committed to git
 
-NEXT_PUBLIC_OPENAI_API_KEY=
+NEXT_PUBLIC_OPENAI_API_KEY=
+NEXT_PUBLIC_LLM_ENCRYPTION_KEY="add a secure key to encrypt your llm keys"

agenta-web/package.json

@@ -53,6 +53,7 @@
         "autoprefixer": "10.4.14",
         "axios": "^1.4.0",
         "classnames": "^2.3.2",
+        "crypto-js": "^4.2.0",
         "dayjs": "^1.11.10",
         "diff": "^5.2.0",
         "dotenv": "^16.3.1",
@@ -90,6 +91,7 @@
     "devDependencies": {
         "@swc/cli": "^0.3.12",
         "@swc/core": "^1.4.15",
+        "@types/crypto-js": "^4.2.2",
         "@types/node": "^20.8.10",
         "cypress": "^13.4.0",
         "node-mocks-http": "^1.12.2",

agenta-web/src/components/AppSelector/AppSelector.tsx

@@ -18,7 +18,7 @@ import {useAppsData} from "@/contexts/app.context"
 import {useProfileData} from "@/contexts/profile.context"
 import CreateAppStatusModal from "./modals/CreateAppStatusModal"
 import {usePostHogAg} from "@/hooks/usePostHogAg"
-import {LlmProvider, getAllProviderLlmKeys} from "@/lib/helpers/llmProviders"
+import {LlmProvider, getAllDecryptedProviderLlmKeys} from "@/lib/helpers/llmProviders"
 import ResultComponent from "../ResultComponent/ResultComponent"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 
@@ -195,7 +195,7 @@ const AppSelector: React.FC = () => {
         setStatusModalOpen(true)
 
         // attempt to create and start the template, notify user of the progress
-        const apiKeys = getAllProviderLlmKeys()
+        const apiKeys = getAllDecryptedProviderLlmKeys()
         await createAndStartTemplate({
             appName: newApp,
             templateId: template_id,

agenta-web/src/lib/helpers/llmProviders.ts

@@ -1,5 +1,5 @@
 import _ from "lodash"
-import {camelToSnake} from "./utils"
+import {encryptText, decryptText} from "./utils"
 
 const llmAvailableProvidersToken = "llmAvailableProvidersToken"
 
@@ -48,10 +48,11 @@ export const getApikeys = () => {
 }
 
 export const saveLlmProviderKey = (providerName: string, keyValue: string) => {
-    // TODO: add encryption here
     const keys = getAllProviderLlmKeys()
     const item = keys.find((item: LlmProvider) => item.title === providerName)
-    if (item) item.key = keyValue
+    const encryptedKeyValue = encryptText(keyValue)
+
+    if (item) item.key = encryptedKeyValue
     localStorage.setItem(llmAvailableProvidersToken, JSON.stringify(keys))
 }
 
@@ -74,6 +75,15 @@ export const getAllProviderLlmKeys = () => {
     }
     return providers
 }
+export const getAllDecryptedProviderLlmKeys = () => {
+    const providers = getAllProviderLlmKeys()
+    return providers.map((provider) => {
+        if (provider.key) {
+            provider.key = decryptText(provider.key)
+        }
+        return provider
+    })
+}
 
 export const removeSingleLlmProviderKey = (providerName: string) => {
     const keys = getAllProviderLlmKeys()

agenta-web/src/lib/helpers/utils.ts

@@ -7,7 +7,8 @@ import dayjs from "dayjs"
 import utc from "dayjs/plugin/utc"
 import {notification} from "antd"
 import Router from "next/router"
-import {getAllProviderLlmKeys, getApikeys} from "./llmProviders"
+import {getAllDecryptedProviderLlmKeys, getApikeys} from "./llmProviders"
+import CryptoJS from "crypto-js"
 
 if (typeof window !== "undefined") {
     //@ts-ignore
@@ -46,7 +47,7 @@ export const EvaluationTypeLabels: Record<EvaluationType, string> = {
 }
 
 export const apiKeyObject = () => {
-    const apiKeys = getAllProviderLlmKeys()
+    const apiKeys = getAllDecryptedProviderLlmKeys()
 
     if (!apiKeys) return {}
 
@@ -327,3 +328,25 @@ export const getInitials = (str: string, limit = 2) => {
 
     return initialText
 }
+
+const ENCRYPTION_KEY = process.env.NEXT_PUBLIC_LLM_ENCRYPTION_KEY as string
+export const encryptText = (data: string) => {
+    try {
+        const encryptedKey = CryptoJS.AES.encrypt(data, ENCRYPTION_KEY).toString()
+        return encryptedKey
+    } catch (error) {
+        return data
+    }
+}
+
+export const decryptText = (encryptedKey: string) => {
+    try {
+        if (!encryptedKey) return ""
+
+        const bytes = CryptoJS.AES.decrypt(encryptedKey, ENCRYPTION_KEY)
+        const originalKey = bytes.toString(CryptoJS.enc.Utf8)
+        return originalKey
+    } catch (error) {
+        return encryptedKey
+    }
+}