Encrypt openai token in browser local storage via Cryptr

.env.example

@@ -5,4 +5,5 @@ FIREBASE_PROJECTID=
 FIREBASE_STORAGEBUCKET=
 FIREBASE_MESSAGINGSENDERID=
 FIREBASE_APPID=
-PUBLIC_DISABLE_TRACKING=true
+PUBLIC_DISABLE_TRACKING=true
+SITE_SECRET=changeme

package.json

@@ -52,6 +52,7 @@
 		"@inqling/svelte-icons": "^4.0.2",
 		"@vercel/analytics": "^1.1.0",
 		"common-tags": "^1.8.2",
+		"cryptr": "^6.3.0",
 		"firebase": "^10.4.0",
 		"gpt3-tokenizer": "^1.1.5",
 		"highlight.js": "^11.9.0",

src/lib/ChatInput.svelte

@@ -17,7 +17,8 @@
 		isLoadingAnswerStore,
 		liveAnswerStore,
 		enhancedLiveAnswerStore,
-		settingsStore
+		settingsStore,
+		OpenAI_API_Key
 	} from '$misc/stores';
 	import { countTokens } from '$misc/openai';
 
@@ -93,7 +94,7 @@
 					}) as ChatCompletionMessageParam
 			),
 			settings: chat.settings,
-			openAiKey: $settingsStore.openAiApiKey
+			openAiKey: $OpenAI_API_Key
 		};
 
 		$eventSourceStore.start(payload, handleAnswer, handleError, handleAbort);
@@ -208,7 +209,7 @@
 
 	export async function editMessage(message: ChatMessage) {
 		originalMessage = message;
-		input = message.content;
+		input = message.content + '';
 		isEditMode = true;
 
 		// tick is required for the action to resize the textarea

src/lib/Modals/SettingsModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion, AccordionItem, getModalStore } from '@skeletonlabs/skeleton';
-	import { chatStore, settingsStore } from '$misc/stores';
+	import { OpenAI_API_Key, chatStore, settingsStore } from '$misc/stores';
 	import { models, OpenAiModel } from '$misc/openai';
 	import { track } from '$misc/shared';
 
@@ -59,7 +59,7 @@
 		<h3 class="h3 mb-4">Settings</h3>
 		<div class="flex-row space-y-6">
 			<!-- API key -->
-			{#if editApiKey || !$settingsStore.openAiApiKey}
+			{#if editApiKey || !$OpenAI_API_Key}
 				<label class="label">
 					<div class="flex justify-between space-x-12">
 						<span>OpenAI API key</span>
@@ -70,9 +70,17 @@
 					<input
 						required
 						class="input"
-						class:input-error={!$settingsStore.openAiApiKey}
+						class:input-error={!$OpenAI_API_Key}
 						type="text"
-						bind:value={$settingsStore.openAiApiKey}
+						on:input={async (e) => {
+							const response = await fetch('/api/encrypt-key', {
+								method: 'POST',
+								// @ts-expect-error value is a valid prop
+								body: JSON.stringify({ key: e.target.value })
+							}).then((res) => res.json());
+
+							if (response.encryptedKey) $OpenAI_API_Key = response.encryptedKey;
+						}}
 						on:blur={() => (editApiKey = false)}
 					/>
 				</label>
@@ -81,7 +89,7 @@
 					<span class="label">OpenAI API key</span>
 
 					<div class="flex justify-between items-center space-x-4">
-						<span>{maskString($settingsStore.openAiApiKey)}</span>
+						<span>{'********************'}</span>
 
 						<button class="btn btn-sm variant-ghost-secondary" on:click={() => (editApiKey = true)}>
 							Edit
@@ -91,7 +99,7 @@
 			{/if}
 
 			<!-- Model -->
-			{#if $settingsStore.openAiApiKey}
+			{#if $OpenAI_API_Key}
 				<div class="flex flex-col space-y-2">
 					<label class="label">
 						<div class="flex justify-between space-x-12">

src/lib/Modals/SuggestTitleModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getModalStore, ProgressRadial } from '@skeletonlabs/skeleton';
 	import { confettiAction } from 'svelte-legos';
-	import { chatStore, settingsStore } from '$misc/stores';
+	import { chatStore, OpenAI_API_Key, settingsStore } from '$misc/stores';
 	import { canSuggestTitle, suggestChatTitle, track } from '$misc/shared';
 
 	const modalStore = getModalStore();
@@ -11,14 +11,14 @@
 
 	let title = $chatStore[slug].title;
 
-	$: showAiSuggestOptions = $settingsStore.openAiApiKey && canSuggestTitle($chatStore[slug]);
+	$: showAiSuggestOptions = $OpenAI_API_Key && canSuggestTitle($chatStore[slug]);
 
 	async function handleSuggestTitle() {
-		if (!$settingsStore.openAiApiKey) {
+		if (!$OpenAI_API_Key) {
 			return;
 		}
 		isLoading = true;
-		title = await suggestChatTitle($chatStore[slug], $settingsStore.openAiApiKey);
+		title = await suggestChatTitle($chatStore[slug], $OpenAI_API_Key);
 		isLoading = false;
 		track('suggestTitleManually');
 	}

src/misc/cryptr.ts

@@ -0,0 +1,3 @@
+import { SITE_SECRET } from '$env/static/private';
+import Cryptr from 'cryptr';
+export default new Cryptr(SITE_SECRET + '');

src/misc/shared.ts

@@ -28,7 +28,6 @@ export interface Chat {
 }
 
 export interface ClientSettings {
-	openAiApiKey?: string;
 	hideLanguageHint?: boolean;
 	useTitleSuggestions?: boolean;
 	defaultModel?: OpenAiModel;

src/misc/stores.ts

@@ -6,6 +6,9 @@ import { EventSource } from './eventSource';
 import { ChatStorekeeper } from './chatStorekeeper';
 import type { Chat, ChatMessage, ClientSettings } from './shared';
 import { closeOpenedCodeTicks } from './markdownHelper';
+import { browser } from '$app/environment';
+
+export const OpenAI_API_Key = localStorageStore('OpenAI_API_Key', '');
 
 export const settingsStore: Writable<ClientSettings> = localStorageStore('settingsStore', {});
 

src/routes/[slug]/+page.svelte

@@ -6,7 +6,7 @@
 	import { Trash, Cog6Tooth, Share } from '@inqling/svelte-icons/heroicon-24-outline';
 	import type { PageData } from './$types';
 	import { goto } from '$app/navigation';
-	import { chatStore, isLoadingAnswerStore, settingsStore } from '$misc/stores';
+	import { OpenAI_API_Key, chatStore, isLoadingAnswerStore, settingsStore } from '$misc/stores';
 	import Toolbar from '$lib/Toolbar.svelte';
 	import ChatInput from '$lib/ChatInput.svelte';
 	import Chat from '$lib/Chat.svelte';
@@ -104,8 +104,8 @@
 
 		// has no title
 		if ($settingsStore.useTitleSuggestions) {
-			if ($settingsStore.openAiApiKey) {
-				const title = await suggestChatTitle(chat, $settingsStore.openAiApiKey);
+			if ($OpenAI_API_Key) {
+				const title = await suggestChatTitle(chat, $OpenAI_API_Key);
 				chatStore.updateChat(slug, { title });
 				showToast(toastStore, `Chat title set to: '${title}'`, 'secondary');
 			}
@@ -149,7 +149,7 @@
 				>
 					<Cog6Tooth class="w-6 h-6" />
 				</button>
-				{#if !$settingsStore.openAiApiKey}
+				{#if !$OpenAI_API_Key}
 					<span class="relative flex h-3 w-3">
 						<span
 							style="left: -10px;"
@@ -164,10 +164,7 @@
 			</span>
 
 			<!-- Share -->
-			<span
-				class="relative inline-flex"
-				style={!$settingsStore.openAiApiKey ? 'margin-left: -4px;' : ''}
-			>
+			<span class="relative inline-flex" style={!$OpenAI_API_Key ? 'margin-left: -4px;' : ''}>
 				<button
 					disabled={!chat.contextMessage.content?.length && !chat.messages?.length}
 					class="btn btn-sm inline-flex variant-ghost-tertiary"

src/routes/api/ask/+server.ts

@@ -7,6 +7,7 @@ import type { RequestHandler } from './$types';
 import type { OpenAiSettings } from '$misc/openai';
 import { error } from '@sveltejs/kit';
 import { getErrorMessage, throwIfUnset } from '$misc/error';
+import cryptr from '$misc/cryptr';
 
 // this tells Vercel to run this function as https://vercel.com/docs/concepts/functions/edge-functions
 export const config: Config = {
@@ -42,9 +43,11 @@ export const POST: RequestHandler = async ({ request, fetch }) => {
 		// 		: 'https://api.openai.com/v1/completions';
 		const apiUrl = 'https://api.openai.com/v1/chat/completions';
 
+		const decryptedKey = cryptr.decrypt(openAiKey);
+
 		const response = await fetch(apiUrl, {
 			headers: {
-				Authorization: `Bearer ${openAiKey}`,
+				Authorization: `Bearer ${decryptedKey}`,
 				'Content-Type': 'application/json'
 			},
 			method: 'POST',

src/routes/api/encrypt-key/+server.ts

@@ -0,0 +1,13 @@
+import { json } from '@sveltejs/kit';
+import Cryptr from 'cryptr';
+import { SITE_SECRET } from '$env/static/private';
+import cryptr from '$misc/cryptr';
+
+export const POST = async ({ request }) => {
+	const body = await request.json();
+	if (!body.key) return json({ success: false, error: 'No key provided' });
+
+	const encryptedKey = cryptr.encrypt(body.key);
+
+	return json({ success: true, encryptedKey });
+};

src/routes/api/suggest-title/+server.ts

@@ -7,6 +7,7 @@ import type { RequestHandler } from './$types';
 import { OpenAiModel, defaultOpenAiSettings, type OpenAiSettings } from '$misc/openai';
 import { error } from '@sveltejs/kit';
 import { getErrorMessage, respondToClient, throwIfUnset } from '$misc/error';
+import cryptr from '$misc/cryptr';
 
 // this tells Vercel to run this function as https://vercel.com/docs/concepts/functions/edge-functions
 export const config: Config = {
@@ -47,9 +48,11 @@ export const POST: RequestHandler = async ({ request, fetch }) => {
 
 		const apiUrl = 'https://api.openai.com/v1/chat/completions';
 
+		const decryptedKey = cryptr.decrypt(openAiKey);
+
 		const response = await fetch(apiUrl, {
 			headers: {
-				Authorization: `Bearer ${openAiKey}`,
+				Authorization: `Bearer ${decryptedKey}`,
 				'Content-Type': 'application/json'
 			},
 			method: 'POST',