4 files changed, 11 insertions, 43 deletions
diff --git a/apps/browser-extension/src/OptionsPage.tsx b/apps/browser-extension/src/OptionsPage.tsx
index 9670558e..24785857 100644
--- a/apps/browser-extension/src/OptionsPage.tsx
+++ b/apps/browser-extension/src/OptionsPage.tsx
@@ -17,6 +17,8 @@ export default function OptionsPage() {
     },
   );
 
+  const { mutate: deleteKey } = api.apiKeys.revoke.useMutation();
+
   const invalidateWhoami = api.useUtils().users.whoami.refetch;
 
   useEffect(() => {
@@ -39,7 +41,10 @@ export default function OptionsPage() {
   }
 
   const onLogout = () => {
-    setSettings((s) => ({ ...s, apiKey: "" }));
+    if (settings.apiKeyId) {
+      deleteKey({ id: settings.apiKeyId });
+    }
+    setSettings((s) => ({ ...s, apiKey: "", apiKeyId: undefined }));
     invalidateWhoami();
     navigate("/notconfigured");
   };
diff --git a/apps/browser-extension/src/SignInPage.tsx b/apps/browser-extension/src/SignInPage.tsx
index a9b77e83..aa8699ae 100644
--- a/apps/browser-extension/src/SignInPage.tsx
+++ b/apps/browser-extension/src/SignInPage.tsx
@@ -15,7 +15,7 @@ export default function SignInPage() {
     isPending,
   } = api.apiKeys.exchange.useMutation({
     onSuccess: (resp) => {
-      setSettings((s) => ({ ...s, apiKey: resp.key }));
+      setSettings((s) => ({ ...s, apiKey: resp.key, apiKeyId: resp.id }));
       navigate("/options");
     },
   });
diff --git a/apps/browser-extension/src/utils/providers.tsx b/apps/browser-extension/src/utils/providers.tsx
index 7b14b22c..4ca17016 100644
--- a/apps/browser-extension/src/utils/providers.tsx
+++ b/apps/browser-extension/src/utils/providers.tsx
@@ -1,47 +1,9 @@
-import { useEffect, useState } from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { httpBatchLink } from "@trpc/client";
-import superjson from "superjson";
+import { TRPCProvider } from "@hoarder/shared-react/providers/trpc-provider";
 
-import usePluginSettings, { getPluginSettings } from "./settings";
-import { api } from "./trpc";
-
-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,
-      }),
-    ],
-  });
-}
+import usePluginSettings from "./settings";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const { settings } = usePluginSettings();
-  const [queryClient] = useState(() => new QueryClient());
-
-  const [trpcClient, setTrpcClient] = useState<
-    ReturnType<typeof getTRPCClient>
-  >(getTRPCClient(settings.address));
-
-  useEffect(() => {
-    setTrpcClient(getTRPCClient(settings.address));
-  }, [settings.address]);
 
-  return (
-    <api.Provider
-      key={settings.address}
-      client={trpcClient}
-      queryClient={queryClient}
-    >
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </api.Provider>
-  );
+  return <TRPCProvider settings={settings}>{children}</TRPCProvider>;
 }
diff --git a/apps/browser-extension/src/utils/settings.ts b/apps/browser-extension/src/utils/settings.ts
index f20e9827..ef290555 100644
--- a/apps/browser-extension/src/utils/settings.ts
+++ b/apps/browser-extension/src/utils/settings.ts
@@ -2,6 +2,7 @@ import { useChromeStorageSync } from "use-chrome-storage";
 
 export interface Settings {
   apiKey: string;
+  apiKeyId?: string;
   address: string;
 }