extension: Instead of manually creating api keys, let users exchange their username passwords for one

2 files changed, 38 insertions, 26 deletions

diff --git a/packages/browser-extension/src/utils/providers.tsx b/packages/browser-extension/src/utils/providers.tsx
index cf3ca804..d21714b6 100644
--- a/packages/browser-extension/src/utils/providers.tsx
+++ b/packages/browser-extension/src/utils/providers.tsx
@@ -1,35 +1,38 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { httpBatchLink } from "@trpc/client";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { api } from "./trpc";
-import usePluginSettings from "./settings";
+import usePluginSettings, { getPluginSettings } from "./settings";
 import superjson from "superjson";
 
+function getTRPCClient(address: string) {
+  return api.createClient({
+    links: [
+      httpBatchLink({
+        url: `${address}/api/trpc`,
+        async headers() {
+          const settings = await getPluginSettings();
+          return {
+            Authorization: `Bearer ${settings.apiKey}`,
+          };
+        },
+        transformer: superjson,
+      }),
+    ],
+  });
+}
+
 export function Providers({ children }: { children: React.ReactNode }) {
-  const [settings] = usePluginSettings();
+  const { settings } = usePluginSettings();
   const [queryClient] = useState(() => new QueryClient());
 
-  const getTrpcClient = useCallback(() => {
-    return api.createClient({
-      links: [
-        httpBatchLink({
-          url: `${settings.address}/api/trpc`,
-          headers() {
-            return {
-              Authorization: `Bearer ${settings.apiKey}`,
-            };
-          },
-          transformer: superjson,
-        }),
-      ],
-    });
-  }, [settings]);
-
-  const [trpcClient, setTrpcClient] = useState(getTrpcClient());
+  const [trpcClient, setTrpcClient] = useState<
+    ReturnType<typeof getTRPCClient>
+  >(getTRPCClient(settings.address));
 
   useEffect(() => {
-    setTrpcClient(getTrpcClient());
-  }, [getTrpcClient]);
+    setTrpcClient(getTRPCClient(settings.address));
+  }, [settings.address]);
 
   return (
     <api.Provider client={trpcClient} queryClient={queryClient}>
diff --git a/packages/browser-extension/src/utils/settings.ts b/packages/browser-extension/src/utils/settings.ts
index ee7f0722..37f474c0 100644
--- a/packages/browser-extension/src/utils/settings.ts
+++ b/packages/browser-extension/src/utils/settings.ts
@@ -6,8 +6,17 @@ export type Settings = {
 };
 
 export default function usePluginSettings() {
-  return useChromeStorageSync("settings", {
-    apiKey: "",
-    address: "",
-  } as Settings);
+  const [settings, setSettings, _1, _2, isInit] = useChromeStorageSync(
+    "settings",
+    {
+      apiKey: "",
+      address: "",
+    } as Settings,
+  );
+
+  return { settings, setSettings, isPending: isInit };
+}
+
+export async function getPluginSettings() {
+  return (await chrome.storage.sync.get("settings")).settings as Settings;
 }