Use table functions

Author: maparent

apps/obsidian/src/components/AdminPanelSettings.tsx

@@ -14,21 +14,16 @@ export const AdminPanelSettings = () => {
   const [username, setUsername] = useState<string>(
     plugin.settings.username || "",
   );
-  const [accessToken, setAccessToken] = useState<string | null>(null);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
   useEffect(() => {
     if (syncModeEnabled) {
-      const fetchTokens = async () => {
+      const checkLogin = async () => {
         const client = await getLoggedInClient(plugin);
-        if (client) {
-          const session = await client.auth.getSession();
-          if (session.data.session) {
-            setAccessToken(session.data.session.access_token);
-          }
-        }
+        setIsLoggedIn(client !== null);
       };
-      void fetchTokens();
+      void checkLogin();
     } else {
-      setAccessToken(null);
+      setIsLoggedIn(false);
     }
   }, [syncModeEnabled, plugin]);
 
@@ -60,6 +55,22 @@ export const AdminPanelSettings = () => {
     await updateUsername(plugin, newValue);
   };
 
+  const handleLoginHandoff = async () => {
+    const client = await getLoggedInClient(plugin);
+    if (!client) return;
+    const sessionData = await client.auth.getSession();
+    if (!sessionData.data.session) return;
+    /* eslint-disable @typescript-eslint/naming-convention */
+    const { access_token, refresh_token } = sessionData.data.session;
+    const { data, error } = await client.rpc("create_secret_token", {
+      v_payload: JSON.stringify({ access_token, refresh_token }),
+      expiry_interval: "10s",
+    });
+    /* eslint-enable @typescript-eslint/naming-convention */
+    if (error) return;
+    if (data) window.open(`${nextRoot()}/auth/token?t=${data}&url=/`, "_blank");
+  };
+
   return (
     <div className="general-settings">
       <div className="setting-item">
@@ -99,26 +110,21 @@ export const AdminPanelSettings = () => {
           />
         </div>
       </div>
-      <div className={"setting-item " + (accessToken ? "" : "hidden")}>
+      <div className={"setting-item " + (isLoggedIn ? "" : "hidden")}>
         <div className="setting-item-info">
           <div className="setting-item-name">Group management</div>
           <div className="setting-item-description">
             This will allow you to view and manage your sharing groups
           </div>
         </div>
         <div className="setting-item-control">
-          {accessToken && (
-            <button
-              onClick={() => {
-                window.open(
-                  `${nextRoot()}/auth/token?t=${accessToken}&url=/`,
-                  "_blank",
-                );
-              }}
-            >
-              Manage groups
-            </button>
-          )}
+          <button
+            onClick={() => {
+              void handleLoginHandoff();
+            }}
+          >
+            Manage groups
+          </button>
         </div>
       </div>
     </div>

apps/roam/src/components/settings/AdminPanel.tsx

@@ -306,6 +306,22 @@ const FeatureFlagsTab = (): React.ReactElement => {
     }
   };
 
+  const handleLoginHandoff = async () => {
+    const client = await getLoggedInClient();
+    if (!client) return;
+    const sessionData = await client.auth.getSession();
+    if (!sessionData.data.session) return;
+    /* eslint-disable @typescript-eslint/naming-convention */
+    const { access_token, refresh_token } = sessionData.data.session;
+    const { data, error } = await client.rpc("create_secret_token", {
+      v_payload: JSON.stringify({ access_token, refresh_token }),
+      expiry_interval: "10s",
+    });
+    /* eslint-enable @typescript-eslint/naming-convention */
+    if (error) return;
+    if (data) window.open(`${nextRoot()}/auth/token?t=${data}&url=/`, "_blank");
+  };
+
   return (
     <div className="flex flex-col gap-4 p-4">
       <FeatureFlagPanel
@@ -414,10 +430,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
           className="w-96"
           icon="document-open"
           onClick={() => {
-            window.open(
-              `${nextRoot()}/auth/token?t=${accessToken}&url=/`,
-              "_blank",
-            );
+            handleLoginHandoff();
           }}
         >
           Manage groups

apps/website/app/components/auth/LoginWithToken.tsx

@@ -7,24 +7,41 @@ import { useState, useEffect, useCallback } from "react";
 export const LoginWithToken = () => {
   const searchParams = useSearchParams();
   const router = useRouter();
-  const [accessToken] = useState(searchParams.get("t"));
-  const [refreshToken] = useState(searchParams.get("r"));
+  const [secretToken] = useState(searchParams.get("t"));
   const [url] = useState(searchParams.get("url"));
   const [done, setDone] = useState(false);
   const [error, setError] = useState<string | null>(
-    accessToken === null ? "Please provide access token" : null,
+    secretToken === null ? "Please provide token" : null,
   );
 
   const login = useCallback(async () => {
     try {
       const client = createClient();
-      const response = await client.auth.setSession({
-        /* eslint-disable @typescript-eslint/naming-convention */
-        access_token: accessToken!,
-        // in most cases, do not provide the refresh token! The access token will expire after 1h
-        refresh_token: refreshToken ?? "faketoken",
-        /* eslint-enable @typescript-eslint/naming-convention */
+      const result = await client.rpc("get_secret_token", {
+        token: secretToken!,
       });
+      if (result.error) {
+        setError(result.error.message);
+        return;
+      }
+      if (typeof result.data !== "string") {
+        setError("Payload is not a string");
+        return;
+      }
+      const data = JSON.parse(result.data) as {
+        access_token: string;
+        refresh_token: string;
+      };
+      if (
+        !data ||
+        typeof data !== "object" ||
+        !data.access_token ||
+        !data.refresh_token
+      ) {
+        setError("Malformed token information");
+        return;
+      }
+      const response = await client.auth.setSession(data);
       if (response.error) {
         setError(response.error.message);
       } else if (url) {
@@ -35,12 +52,12 @@ export const LoginWithToken = () => {
     } finally {
       setDone(true);
     }
-  }, [accessToken, refreshToken, url, router]);
+  }, [secretToken, url, router]);
   useEffect(() => {
     if (!error && !done) {
       void login();
     }
-  }, [error, login, accessToken, refreshToken, done]);
+  }, [error, login, secretToken, done]);
   return (
     <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
       <div className="w-full max-w-sm">