From d286e68b0953741496164eabc61fe4781bfb5666 Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Mon, 6 Apr 2026 17:23:10 -0600
Subject: [PATCH 1/3] Refactor Dropbox authentication URLs to use constants for
 improved maintainability

---
 src/index.ts | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index f878b30..90119f8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,6 +14,10 @@ import React from "react";
 import apiPost from "roamjs-components/util/apiPost";
 import mimeTypes from "./mimeTypes";
 
+const DROPBOX_CLIENT_ID = "ghagecp4sgm6v99";
+const DROPBOX_AUTH_DOMAIN = "https://roamjs.com";
+const DROPBOX_REDIRECT_URI = "https://roamjs.com/oauth?auth=true";
+
 const mimeLookup = (path: string) => {
   if (!path || typeof path !== "string") {
     return false;
@@ -53,19 +57,19 @@ export default runExtension(async (args) => {
               ServiceIcon: DropboxLogo,
               getPopoutUrl: () =>
                 Promise.resolve(
-                  `https://www.dropbox.com/oauth2/authorize?client_id=ghagecp4sgm6v99&redirect_uri=${encodeURIComponent(
-                    "https://roamjs.com/oauth?auth=true"
+                  `https://www.dropbox.com/oauth2/authorize?client_id=${DROPBOX_CLIENT_ID}&redirect_uri=${encodeURIComponent(
+                    DROPBOX_REDIRECT_URI
                   )}&response_type=code&token_access_type=offline`
                 ),
               getAuthData: (data) =>
                 apiPost({
-                  domain: `https://lambda.roamjs.com`,
+                  domain: DROPBOX_AUTH_DOMAIN,
                   path: `dropbox-auth`,
                   anonymous: true,
                   data: {
                     ...JSON.parse(data),
                     grant_type: "authorization_code",
-                    redirect_uri: "https://roamjs.com/oauth?auth=true",
+                    redirect_uri: DROPBOX_REDIRECT_URI,
                     dev: undefined,
                   },
                 }),
@@ -87,7 +91,7 @@ export default runExtension(async (args) => {
       );
       return tokenAge > expires_in
         ? apiPost<{ access_token: string }>({
-            domain: `https://lambda.roamjs.com`,
+            domain: DROPBOX_AUTH_DOMAIN,
             path: `dropbox-auth`,
             data: {
               refresh_token,

From b59a901dd2605fa8f5447e3009480aea16a6f843 Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Mon, 6 Apr 2026 18:24:21 -0600
Subject: [PATCH 2/3] Update version to 1.3.1 in package.json

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0a604d2..7b732ab 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dropbox",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Send file uploads in Roam directly to your Dropbox!",
   "main": "./build/main.js",
   "scripts": {
@@ -18,4 +18,4 @@
   "samepage": {
     "extends": "node_modules/roamjs-components/package.json"
   }
-}
+}
\ No newline at end of file

From 52ad4ee6f38311f9afb44d486b0e5506e594cf11 Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Mon, 6 Apr 2026 22:51:23 -0600
Subject: [PATCH 3/3] Update version to 1.4.0 and refactor Dropbox
 authentication to use new OauthPanel component

---
 package-lock.json                    |   4 +-
 src/components/DropboxLogo.tsx       |   5 +-
 src/components/DropboxOauthPanel.tsx | 310 +++++++++++++++++++++++++++
 src/index.ts                         |  29 +--
 4 files changed, 317 insertions(+), 31 deletions(-)
 create mode 100644 src/components/DropboxOauthPanel.tsx

diff --git a/package-lock.json b/package-lock.json
index 000fd1c..37116db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "dropbox",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
@@ -24396,4 +24396,4 @@
       "peer": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/DropboxLogo.tsx b/src/components/DropboxLogo.tsx
index 4d919e0..a55bc0a 100644
--- a/src/components/DropboxLogo.tsx
+++ b/src/components/DropboxLogo.tsx
@@ -8,9 +8,10 @@ const DropboxLogo = () => (
     xmlnsXlink="http://www.w3.org/1999/xlink"
     x="0px"
     y="0px"
-    width="84px"
-    height="63.8px"
+    width="16"
+    height="16"
     viewBox="0 0 84 63.8"
+    preserveAspectRatio="xMidYMid meet"
     xmlSpace="preserve"
   >
     <style
diff --git a/src/components/DropboxOauthPanel.tsx b/src/components/DropboxOauthPanel.tsx
new file mode 100644
index 0000000..9802ac5
--- /dev/null
+++ b/src/components/DropboxOauthPanel.tsx
@@ -0,0 +1,310 @@
+import React, { useCallback, useMemo, useState } from "react";
+import apiPost from "roamjs-components/util/apiPost";
+import localStorageGet from "roamjs-components/util/localStorageGet";
+import localStorageSet from "roamjs-components/util/localStorageSet";
+import DropboxLogo from "./DropboxLogo";
+
+type OauthAccount = {
+  uid: string;
+  text: string;
+  data: string;
+  time: number;
+};
+
+const OAUTH_KEY = "oauth-dropbox";
+const ROAMJS_ORIGIN = "https://roamjs.com";
+const REDIRECT_URI = `${ROAMJS_ORIGIN}/oauth?auth=true`;
+const OAUTH_TIMEOUT_MS = 5 * 60 * 1000;
+const DESKTOP_POLL_INTERVAL_MS = 1500;
+const DROPBOX_CLIENT_ID = "ghagecp4sgm6v99";
+
+const getStoredAccounts = (): OauthAccount[] => {
+  try {
+    return JSON.parse(localStorageGet(OAUTH_KEY) || "[]");
+  } catch {
+    return [];
+  }
+};
+
+const getAccount = (): OauthAccount | null => getStoredAccounts()[0] || null;
+
+const setAccount = (account: OauthAccount | null) =>
+  localStorageSet(OAUTH_KEY, JSON.stringify(account ? [account] : []));
+
+const createNonce = () =>
+  `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+
+const createSessionId = () =>
+  `sess_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+
+const encodeState = (value: unknown) => {
+  const json = JSON.stringify(value);
+  return window
+    .btoa(json)
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/g, "");
+};
+
+const createState = (session?: string) => {
+  const nonce = createNonce();
+  try {
+    const payload: { nonce: string; origin: string; session?: string } = {
+      nonce,
+      origin: window.location.origin,
+    };
+    if (session) {
+      payload.session = session;
+    }
+    return encodeState(payload);
+  } catch {
+    return nonce;
+  }
+};
+
+const wait = (ms: number) =>
+  new Promise<void>((resolve) => window.setTimeout(resolve, ms));
+
+const createUid = () =>
+  window.roamAlphaAPI?.util?.generateUID?.() ||
+  Math.random().toString(36).slice(2, 11);
+
+const toErrorMessage = (error: unknown) => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === "string") {
+    return error;
+  }
+  if (error && typeof error === "object") {
+    const e = error as { error?: string; message?: string };
+    return e.error || e.message || JSON.stringify(error);
+  }
+  return "Failed to exchange OAuth code. Please try again in a moment.";
+};
+
+const DropboxOauthPanel = () => {
+  const [account, setLocalAccount] = useState<OauthAccount | null>(() =>
+    getAccount(),
+  );
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const nextLabel = useMemo(() => "Dropbox Account", []);
+
+  const removeAccount = useCallback(() => {
+    setAccount(null);
+    setLocalAccount(null);
+  }, []);
+
+  const login = useCallback(() => {
+    const isDesktop = !!window.roamAlphaAPI?.platform?.isDesktop;
+    const session = isDesktop ? createSessionId() : undefined;
+    const state = createState(session);
+    setError("");
+    setLoading(true);
+
+    const url =
+      "https://www.dropbox.com/oauth2/authorize?" +
+      `client_id=${DROPBOX_CLIENT_ID}` +
+      `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
+      `&response_type=code&token_access_type=offline&state=${encodeURIComponent(
+        state,
+      )}`;
+
+    const width = 600;
+    const height = 525;
+    const left = window.screenX + (window.innerWidth - width) / 2;
+    const top = window.screenY + (window.innerHeight - height) / 2;
+    const popup = window.open(
+      url,
+      "roamjs_dropbox_login",
+      `left=${left},top=${top},width=${width},height=${height},status=1`,
+    );
+
+    if (!popup) {
+      if (!isDesktop) {
+        setLoading(false);
+        setError("Popup blocked. Please allow popups and try again.");
+        return;
+      }
+    }
+    popup?.focus?.();
+
+    const exchangeCode = (payload: Record<string, string>) =>
+      apiPost({
+        anonymous: true,
+        domain: ROAMJS_ORIGIN,
+        path: "dropbox-auth",
+        data: {
+          ...payload,
+          grant_type: "authorization_code",
+          redirect_uri: REDIRECT_URI,
+        },
+      }).then((tokenData) => {
+        const label =
+          typeof tokenData?.label === "string" && tokenData.label
+            ? tokenData.label
+            : nextLabel;
+        const nextAccount: OauthAccount = {
+          uid: createUid(),
+          text: label,
+          data: JSON.stringify(tokenData),
+          time: Date.now(),
+        };
+        setAccount(nextAccount);
+        setLocalAccount(nextAccount);
+      });
+
+    if (isDesktop && session) {
+      void (async () => {
+        try {
+          const deadline = Date.now() + OAUTH_TIMEOUT_MS;
+          while (Date.now() < deadline) {
+            const pollUrl = `${ROAMJS_ORIGIN}/oauth/session?session=${encodeURIComponent(
+              session,
+            )}`;
+            const response = await fetch(pollUrl, { cache: "no-store" });
+            if (response.ok) {
+              const pollData = (await response.json()) as {
+                status?: string;
+                code?: string;
+                state?: string;
+                error?: string;
+              };
+              if (pollData.status === "completed") {
+                if (pollData.state !== state) {
+                  throw new Error("OAuth state mismatch. Please try again.");
+                }
+                if (pollData.error) {
+                  throw new Error(pollData.error);
+                }
+                if (!pollData.code) {
+                  throw new Error(
+                    "Did not receive an authorization code from Dropbox.",
+                  );
+                }
+                await exchangeCode({
+                  code: pollData.code,
+                  state: pollData.state,
+                });
+                return;
+              }
+            }
+            await wait(DESKTOP_POLL_INTERVAL_MS);
+          }
+          throw new Error(
+            "Dropbox login timed out or was closed before completing. Please try again.",
+          );
+        } catch (e) {
+          setError(toErrorMessage(e));
+        } finally {
+          setLoading(false);
+        }
+      })();
+      return;
+    }
+
+    let timeoutId = 0;
+    const cleanup = () => {
+      window.removeEventListener("message", onMessage);
+      window.clearTimeout(timeoutId);
+    };
+
+    const onMessage = (event: MessageEvent) => {
+      if (event.origin !== ROAMJS_ORIGIN) {
+        return;
+      }
+      cleanup();
+      const raw = event.data;
+      let payload: Record<string, string> = {};
+      if (typeof raw === "string") {
+        try {
+          payload = JSON.parse(raw || "{}") as Record<string, string>;
+        } catch {
+          setLoading(false);
+          setError("Invalid OAuth response from callback page.");
+          return;
+        }
+      } else if (raw && typeof raw === "object") {
+        payload = raw as Record<string, string>;
+      }
+
+      if (payload.state !== state) {
+        setLoading(false);
+        setError("OAuth state mismatch. Please try again.");
+        return;
+      }
+      if (payload.error) {
+        setLoading(false);
+        setError(payload.error);
+        return;
+      }
+      if (!payload.code) {
+        setLoading(false);
+        setError("Did not receive an authorization code from Dropbox.");
+        return;
+      }
+
+      exchangeCode(payload)
+        .catch((e) => {
+          setError(toErrorMessage(e));
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    };
+
+    window.addEventListener("message", onMessage);
+    timeoutId = window.setTimeout(() => {
+      cleanup();
+      setLoading(false);
+      setError(
+        "Dropbox login timed out or was closed before completing. Please try again.",
+      );
+    }, OAUTH_TIMEOUT_MS);
+  }, [nextLabel]);
+
+  return (
+    <div className="flex flex-col gap-2" style={{ minWidth: 300 }}>
+      <button
+        className="bp3-button bp3-minimal"
+        onClick={login}
+        disabled={loading}
+      >
+        <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+          <span style={{ width: 15, height: 15, display: "inline-flex" }}>
+            <DropboxLogo />
+          </span>
+          {loading
+            ? "Connecting..."
+            : account
+              ? "Reconnect Dropbox"
+              : "Login With Dropbox"}
+        </span>
+      </button>
+      {!!account && (
+        <>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginTop: 8,
+            }}
+          >
+            <span style={{ minWidth: 192 }}>{account.text}</span>
+            <button className="bp3-button bp3-small" onClick={removeAccount}>
+              Log Out
+            </button>
+          </div>
+        </>
+      )}
+      {!!error && (
+        <div style={{ color: "red", whiteSpace: "pre-line" }}>{error}</div>
+      )}
+    </div>
+  );
+};
+
+export default DropboxOauthPanel;
diff --git a/src/index.ts b/src/index.ts
index 90119f8..2c55bde 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,6 @@
 import runExtension from "roamjs-components/util/runExtension";
 import getOauth from "roamjs-components/util/getOauth";
 import getDropUidOffset from "roamjs-components/dom/getDropUidOffset";
-import DropboxLogo from "./components/DropboxLogo";
 import differenceInSeconds from "date-fns/differenceInSeconds";
 import createBlock from "roamjs-components/writes/createBlock";
 import updateBlock from "roamjs-components/writes/updateBlock";
@@ -9,14 +8,12 @@ import getUids from "roamjs-components/dom/getUids";
 import createHTMLObserver from "roamjs-components/dom/createHTMLObserver";
 import localStorageGet from "roamjs-components/util/localStorageGet";
 import localStorageSet from "roamjs-components/util/localStorageSet";
-import OauthPanel from "roamjs-components/components/OauthPanel";
 import React from "react";
 import apiPost from "roamjs-components/util/apiPost";
 import mimeTypes from "./mimeTypes";
+import DropboxOauthPanel from "./components/DropboxOauthPanel";
 
-const DROPBOX_CLIENT_ID = "ghagecp4sgm6v99";
 const DROPBOX_AUTH_DOMAIN = "https://roamjs.com";
-const DROPBOX_REDIRECT_URI = "https://roamjs.com/oauth?auth=true";
 
 const mimeLookup = (path: string) => {
   if (!path || typeof path !== "string") {
@@ -51,29 +48,7 @@ export default runExtension(async (args) => {
         description: "Log into Dropbox to connect your account to Roam!",
         action: {
           type: "reactComponent",
-          component: () =>
-            React.createElement(OauthPanel, {
-              service: "dropbox",
-              ServiceIcon: DropboxLogo,
-              getPopoutUrl: () =>
-                Promise.resolve(
-                  `https://www.dropbox.com/oauth2/authorize?client_id=${DROPBOX_CLIENT_ID}&redirect_uri=${encodeURIComponent(
-                    DROPBOX_REDIRECT_URI
-                  )}&response_type=code&token_access_type=offline`
-                ),
-              getAuthData: (data) =>
-                apiPost({
-                  domain: DROPBOX_AUTH_DOMAIN,
-                  path: `dropbox-auth`,
-                  anonymous: true,
-                  data: {
-                    ...JSON.parse(data),
-                    grant_type: "authorization_code",
-                    redirect_uri: DROPBOX_REDIRECT_URI,
-                    dev: undefined,
-                  },
-                }),
-            }),
+          component: () => React.createElement(DropboxOauthPanel),
         },
       },
     ],