sk/Perplexica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(UI): protect API keys by not displaying them in the UI.

Browse source
This commit is contained in:
Willie Zutz 2025-05-20 00:44:52 -06:00
parent cae11cc13c
commit 288120dc1d
2 changed files with 52 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/app/api/config/route.ts
View file

@ -51,15 +51,23 @@ export const GET = async (req: Request) => {
});
}
config['openaiApiKey'] = getOpenaiApiKey();
// Helper function to obfuscate API keys
const protectApiKey = (key: string | null | undefined) => {
return key ? "protected" : key;
};
// Obfuscate all API keys in the response
config['openaiApiKey'] = protectApiKey(getOpenaiApiKey());
config['groqApiKey'] = protectApiKey(getGroqApiKey());
config['anthropicApiKey'] = protectApiKey(getAnthropicApiKey());
config['geminiApiKey'] = protectApiKey(getGeminiApiKey());
config['deepseekApiKey'] = protectApiKey(getDeepseekApiKey());
config['customOpenaiApiKey'] = protectApiKey(getCustomOpenaiApiKey());
// Non-sensitive values remain unchanged
config['ollamaApiUrl'] = getOllamaApiEndpoint();
config['lmStudioApiUrl'] = getLMStudioApiEndpoint();
config['anthropicApiKey'] = getAnthropicApiKey();
config['groqApiKey'] = getGroqApiKey();
config['geminiApiKey'] = getGeminiApiKey();
config['deepseekApiKey'] = getDeepseekApiKey();
config['customOpenaiApiUrl'] = getCustomOpenaiApiUrl();
config['customOpenaiApiKey'] = getCustomOpenaiApiKey();
config['customOpenaiModelName'] = getCustomOpenaiModelName();
config['baseUrl'] = getBaseUrl();
@ -77,32 +85,39 @@ export const POST = async (req: Request) => {
try {
const config = await req.json();
const getUpdatedProtectedValue = (newValue: string, currentConfig: string) => {
if (newValue === 'protected') {
return currentConfig;
}
return newValue;
}
const updatedConfig = {
MODELS: {
OPENAI: {
API_KEY: config.openaiApiKey,
API_KEY: getUpdatedProtectedValue(config.openaiApiKey, getOpenaiApiKey()),
},
GROQ: {
API_KEY: config.groqApiKey,
API_KEY: getUpdatedProtectedValue(config.groqApiKey, getGroqApiKey()),
},
ANTHROPIC: {
API_KEY: config.anthropicApiKey,
API_KEY: getUpdatedProtectedValue(config.anthropicApiKey, getAnthropicApiKey()),
},
GEMINI: {
API_KEY: config.geminiApiKey,
API_KEY: getUpdatedProtectedValue(config.geminiApiKey, getGeminiApiKey()),
},
OLLAMA: {
API_URL: config.ollamaApiUrl,
},
DEEPSEEK: {
API_KEY: config.deepseekApiKey,
API_KEY: getUpdatedProtectedValue(config.deepseekApiKey, getDeepseekApiKey()),
},
LM_STUDIO: {
API_URL: config.lmStudioApiUrl,
},
CUSTOM_OPENAI: {
API_URL: config.customOpenaiApiUrl,
API_KEY: config.customOpenaiApiKey,
API_KEY: getUpdatedProtectedValue(config.customOpenaiApiKey, getCustomOpenaiApiKey()),
MODEL_NAME: config.customOpenaiModelName,
},
},

35
src/app/settings/page.tsx
View file

@ -1,6 +1,6 @@
'use client';
import { Settings as SettingsIcon, ArrowLeft, Loader2 } from 'lucide-react';
import { Settings as SettingsIcon, ArrowLeft, Loader2, Info } from 'lucide-react';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/utils';
import { Switch } from '@headlessui/react';
@ -117,12 +117,24 @@ const Select = ({
const SettingsSection = ({
title,
children,
tooltip,
}: {
title: string;
children: React.ReactNode;
tooltip?: string;
}) => (
<div className="flex flex-col space-y-4 p-4 bg-light-secondary/50 dark:bg-dark-secondary/50 rounded-xl border border-light-200 dark:border-dark-200">
<h2 className="text-black/90 dark:text-white/90 font-medium">{title}</h2>
<div className="flex items-center gap-2">
<h2 className="text-black/90 dark:text-white/90 font-medium">{title}</h2>
{tooltip && (
<div className="relative group">
<Info size={16} className="text-black/70 dark:text-white/70 cursor-help" />
<div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-2 bg-black/90 dark:bg-white/90 text-white dark:text-black text-xs rounded-lg opacity-0 group-hover:opacity-100 whitespace-nowrap transition-opacity">
{tooltip}
</div>
</div>
)}
</div>
{children}
</div>
);
@ -226,7 +238,7 @@ const Page = () => {
fetchConfig();
}, []);
const saveConfig = async (key: string, value: any) => {
const saveConfig = async (key: string, value: any) => {
setSavingStates((prev) => ({ ...prev, [key]: true }));
try {
@ -671,7 +683,7 @@ const Page = () => {
Custom OpenAI API Key
</p>
<Input
type="text"
type="password"
placeholder="Custom OpenAI API Key"
value={config.customOpenaiApiKey}
isSaving={savingStates['customOpenaiApiKey']}
@ -786,14 +798,17 @@ const Page = () => {
)}
</SettingsSection>
<SettingsSection title="API Keys">
<SettingsSection
title="API Keys"
tooltip="API Key values can be viewed in the config.toml file"
>
<div className="flex flex-col space-y-4">
<div className="flex flex-col space-y-1">
<p className="text-black/70 dark:text-white/70 text-sm">
OpenAI API Key
</p>
<Input
type="text"
type="password"
placeholder="OpenAI API Key"
value={config.openaiApiKey}
isSaving={savingStates['openaiApiKey']}
@ -831,7 +846,7 @@ const Page = () => {
GROQ API Key
</p>
<Input
type="text"
type="password"
placeholder="GROQ API Key"
value={config.groqApiKey}
isSaving={savingStates['groqApiKey']}
@ -850,7 +865,7 @@ const Page = () => {
Anthropic API Key
</p>
<Input
type="text"
type="password"
placeholder="Anthropic API key"
value={config.anthropicApiKey}
isSaving={savingStates['anthropicApiKey']}
@ -869,7 +884,7 @@ const Page = () => {
Gemini API Key
</p>
<Input
type="text"
type="password"
placeholder="Gemini API key"
value={config.geminiApiKey}
isSaving={savingStates['geminiApiKey']}
@ -888,7 +903,7 @@ const Page = () => {
Deepseek API Key
</p>
<Input
type="text"
type="password"
placeholder="Deepseek API Key"
value={config.deepseekApiKey}
isSaving={savingStates['deepseekApiKey']}