attempt to reduce size and use native crypto

esbuild.config.mjs

@@ -24,6 +24,7 @@ esbuild
       "obsidian",
       "electron",
       "fs",
+      "crypto",
       // ...builtins
     ],
     format: "cjs",

package.json

@@ -13,10 +13,7 @@
   "browser": {
     "path": "path-browserify",
     "process": "process/browser",
-    "stream": "stream-browserify",
+    "stream": "stream-browserify"
-    "crypto": "crypto-browserify",
-    "util": "util/",
-    "assert": "assert/"
   },
   "source": "main.ts",
   "keywords": [],

src/main.ts

@@ -32,8 +32,7 @@ import { WebdavConfig, DEFAULT_WEBDAV_CONFIG, WebdavAuthType } from "./webdav";
 import {
   DropboxConfig,
   DEFAULT_DROPBOX_CONFIG,
-  getCodeVerifierAndChallenge,
+  getAuthUrlAndVerifier,
-  getAuthUrl,
   sendAuthReq,
   setConfigBySuccessfullAuthInplace,
 } from "./remoteForDropbox";
@@ -296,13 +295,11 @@ export class DropboxAuthModal extends Modal {
     this.revokeAuthSetting = revokeAuthSetting;
   }
 
-  onOpen() {
+  async onOpen() {
     let { contentEl } = this;
 
-    const k = getCodeVerifierAndChallenge();
+    const { authUrl, verifier } = await getAuthUrlAndVerifier(
-    const authUrl = getAuthUrl(
+      this.plugin.settings.dropbox.clientID
-      this.plugin.settings.dropbox.clientID,
-      k.challenge
     );
 
     contentEl.createEl("p", {
@@ -336,7 +333,7 @@ export class DropboxAuthModal extends Modal {
           try {
             const authRes = await sendAuthReq(
               this.plugin.settings.dropbox.clientID,
-              k.verifier,
+              verifier,
               authCode
             );
             const self = this;

src/remoteForDropbox.ts

@@ -1,9 +1,7 @@
 import * as path from "path";
 import { FileStats, Vault } from "obsidian";
-import { Buffer } from "buffer";
-import * as crypto from "crypto";
 
-import { Dropbox, DropboxResponse, files } from "dropbox";
+import { Dropbox, DropboxAuth, DropboxResponse, files } from "dropbox";
 export { Dropbox } from "dropbox";
 import { RemoteItem } from "./baseTypes";
 import {
@@ -162,32 +160,28 @@ const fixLastModifiedTimeInplace = (allFilesFolders: RemoteItem[]) => {
 // see https://dropbox.tech/developers/pkce--what-and-why-
 ////////////////////////////////////////////////////////////////////////////////
 
-const specialBase64Encode = (str: Buffer) => {
+export const getAuthUrlAndVerifier = async (appKey: string) => {
-  return str
+  const auth = new DropboxAuth({
-    .toString("base64")
+    clientId: appKey,
-    .replace(/\+/g, "-")
+  });
-    .replace(/\//g, "_")
+  const authUrl = (
-    .replace(/=/g, "");
+    await auth.getAuthenticationUrl(
-};
+      undefined,
-const sha256 = (buffer: string) => {
+      undefined,
-  return crypto.createHash("sha256").update(buffer).digest();
+      "code",
-};
+      "offline",
-
+      undefined,
-export const getCodeVerifierAndChallenge = () => {
+      "none",
-  const codeVerifier = specialBase64Encode(crypto.randomBytes(32));
+      true
-  // console.log(`Client generated code_verifier: ${codeVerifier}`);
+    )
-  const codeChallenge = specialBase64Encode(sha256(codeVerifier));
+  ).toString();
-  // console.log(`Client generated code_challenge: ${codeChallenge}`);
+  const verifier = auth.getCodeVerifier();
   return {
-    verifier: codeVerifier,
+    authUrl: authUrl,
-    challenge: codeChallenge,
+    verifier: verifier,
   };
 };
 
-export const getAuthUrl = (appKey: string, challenge: string) => {
-  return `https://www.dropbox.com/oauth2/authorize?client_id=${appKey}&response_type=code&code_challenge=${challenge}&code_challenge_method=S256&token_access_type=offline`;
-};
-
 export interface DropboxSuccessAuthRes {
   access_token: string;
   token_type: "bearer";

webpack.config.js

@@ -43,7 +43,8 @@ module.exports = {
       // buffer: require.resolve("buffer/"),
       // console: require.resolve("console-browserify"),
       // constants: require.resolve("constants-browserify"),
-      crypto: require.resolve("crypto-browserify"),
+      // crypto: require.resolve("crypto-browserify"),
+      crypto: false,
       // domain: require.resolve("domain-browser"),
       // events: require.resolve("events"),
       // http: require.resolve("stream-http"),