feat: add MVP of codeium oauth process

Author: 1egoman

packages/web/src/components/use-settings.tsx

@@ -24,7 +24,12 @@ export function SettingsProvider({ config, children }: ProviderPropsType) {
   const updateConfig = async (newConfig: Partial<SettingsType>) => {
     // Filter out null values and convert back to an object
     const changeSet = Object.fromEntries(
-      Object.entries(newConfig).filter(([_, value]) => value !== null),
+      Object.entries(newConfig).filter(([key, value]) => {
+        if (key === 'codeiumApiKey') {
+          return true;
+        }
+        return value !== null;
+      }),
     );
 
     await updateConfigServer(changeSet);

packages/web/src/lib/server.ts

@@ -240,6 +240,7 @@ interface EditConfigRequestType {
   aiBaseUrl?: string;
   aiModel?: string;
   aiProvider?: AiProviderType;
+  codeiumApiKey?: string;
   subscriptionEmail?: string | null;
 }
 

packages/web/src/main.tsx

@@ -8,6 +8,7 @@ import Home, { loader as homeLoader } from './routes/home';
 import Apps from './routes/apps';
 import Session from './routes/session';
 import Settings from './routes/settings';
+import SettingsCodiumCallback from './routes/settings-codeium-callback';
 import Secrets from './routes/secrets';
 import ErrorPage from './error';
 import { DragAndDropSrcmdModal } from './components/drag-and-drop-srcmd-modal';
@@ -49,6 +50,11 @@ const router = createBrowserRouter([
         element: <Apps />,
         errorElement: <ErrorPage />,
       },
+      {
+        path: '/settings/codeium-callback',
+        element: <SettingsCodiumCallback />,
+        errorElement: <ErrorPage />,
+      },
       {
         path: '/',
         element: (

packages/web/src/routes/settings-codeium-callback.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import useEffectOnce from '@/components/use-effect-once';
+import { useSettings } from '@/components/use-settings';
+
+export async function exchangeCodeiumAccessTokenForApiKey(accessToken: string): Promise<{
+  api_key: string;
+  name: string;
+}> {
+  // from: https://github.com/Exafunction/codeium.vim/blob/d85a85ca7e12967db22b00fd5e9f1a095bb47c96/autoload/codeium/command.vim#L90
+  const response = await fetch('https://api.codeium.com/register_user/', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ firebase_id_token: accessToken }),
+  });
+
+  if (!response.ok) {
+    console.error(response);
+    throw new Error(`Error exchanging codeium access token for api key: ${response.status} ${await response.text()}`);
+  }
+
+  return response.json();
+}
+
+function SettingsCodeiumCallback() {
+  const [status, setStatus] = useState<
+    'loading' | 'already_set' | 'no_access_token' | 'token_exchange_error'
+  >('loading');
+  const { codeiumApiKey, updateConfig } = useSettings();
+
+  const navigate = useNavigate();
+  const [queryParams] = useSearchParams();
+
+  useEffectOnce(() => {
+    if (codeiumApiKey) {
+      setStatus("already_set");
+      return;
+    }
+    const accessToken = queryParams.get('access_token');
+    if (!accessToken) {
+      setStatus("no_access_token");
+      return;
+    }
+
+    exchangeCodeiumAccessTokenForApiKey(accessToken).then(async response => {
+      const apiKey = response.api_key;
+      await updateConfig({ codeiumApiKey: apiKey });
+
+      navigate('/settings');
+    }).catch(err => {
+      console.error(err);
+      setStatus("token_exchange_error");
+    });
+  });
+
+  switch (status) {
+    case "loading":
+      return (
+        <div>Loading...</div>
+      );
+    case "already_set":
+      return (
+        <div>Codeium credentials already set!</div>
+      );
+    case "no_access_token":
+      return (
+        <div>No <code>access_token</code> query parameter found!</div>
+      );
+    case "token_exchange_error":
+      return (
+        <div>Error exchanging codeium access token for api key!</div>
+      );
+  }
+};
+
+export default SettingsCodeiumCallback;

packages/web/src/routes/settings.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { CircleCheck, Loader2, CircleX } from 'lucide-react';
+import { CircleCheck, Loader2, CircleX, EyeIcon, EyeOffIcon } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import { aiHealthcheck, subscribeToMailingList } from '@/lib/server';
 import { useSettings } from '@/components/use-settings';
 import { AiProviderType, getDefaultModel, type CodeLanguageType } from '@srcbook/shared';
@@ -21,6 +22,7 @@ function Settings() {
     aiProvider,
     aiModel,
     aiBaseUrl,
+    codeiumApiKey,
     openaiKey: configOpenaiKey,
     anthropicKey: configAnthropicKey,
     updateConfig: updateConfigContext,
@@ -35,6 +37,7 @@ function Settings() {
   const [model, setModel] = useState<string>(aiModel);
   const [baseUrl, setBaseUrl] = useState<string>(aiBaseUrl || '');
   const [email, setEmail] = useState<string>(isSubscribed ? subscriptionEmail : '');
+  const [codeiumApiKeyVisible, setCodeiumApiKeyVisible] = useState(false);
 
   const updateDefaultLanguage = (value: CodeLanguageType) => {
     updateConfigContext({ defaultLanguage: value });
@@ -81,6 +84,8 @@ function Settings() {
     }
   };
 
+  const codeiumCallbackUrl = `${window.location.href}/codeium-callback`;
+
   return (
     <div>
       <h4 className="h4 mx-auto mb-6">Settings</h4>
@@ -206,6 +211,49 @@ function Settings() {
             )}
           </div>
         </div>
+        <div>
+          <h2 className="text-xl pb-2">AI Autocomplete</h2>
+          <div className="flex flex-col">
+            {codeiumApiKey ? (
+              <div>
+                <div className="opacity-70 text-sm pb-2">Codeium API Key:</div>
+                <div className="flex justify-between items-center gap-2">
+                  <Input
+                    name="codeiumApiKey"
+                    type={codeiumApiKeyVisible ? "text" : "password"}
+                    value={codeiumApiKey}
+                    readOnly
+                  />
+                  <Button size="icon" variant="secondary" onClick={() => setCodeiumApiKeyVisible(n => !n)}>
+                    {codeiumApiKeyVisible ? (
+                      <EyeIcon size={16} />
+                    ) : (
+                      <EyeOffIcon size={16} />
+                    )}
+                  </Button>
+                  <Button variant="secondary" onClick={() => {
+                    updateConfigContext({ codeiumApiKey: null }).then(() => {
+                      toast.success('Removed Codeium api key.');
+                    }).catch(err => {
+                      console.error('Error removing Codeium api key:', err);
+                      toast.error('Error removing Codeium key!');
+                    });
+                  }}>
+                    Remove
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <div>
+                <Button asChild>
+                  <Link to={`https://www.codeium.com/profile?response_type=token&redirect_uri=${codeiumCallbackUrl}&state=a&scope=openid%20profile%20email&redirect_parameters_type=query`}>
+                    Start Codeium OAuth
+                  </Link>
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
 
         <div>
           <h2 className="text-xl pb-2">Get product updates</h2>

packages/web/src/types.ts

@@ -15,6 +15,7 @@ export type SettingsType = {
   aiProvider: AiProviderType;
   aiModel: string;
   aiBaseUrl?: string | null;
+  codeiumApiKey?: string | null;
   subscriptionEmail?: string | null;
 };