Migrate from callbacks to promises (#40)

rogebrd · web-flow · commit 4c96c44784f7 · 2020-11-12T16:57:12.000-08:00
* Migrate callback logic to promise

- Add timeout option to throw an error if no response is returned
- Downgrade the Dropbox dependency to 7.0.0
- Add Upgrading.md for v2.0.0

* Add upgrading.md
diff --git a/UPGRADING.md b/UPGRADING.md
@@ -0,0 +1,32 @@
+# Upgrading the OAuth Popup
+
+This document shows you how to upgrade to the latest version of the popup, accomodating any breaking changes introduced by major version updates. If you find any issues with either this guide on upgrading or the changes introduced in the new version, please see file an issue.
+
+# Upgrading from v1.X.X to v2.X.X
+
+## Updating from callbacks to promises
+
+We have updated the library to use the newer promises over callbacks. Previously this would have looked like this:
+
+```
+var popup = new DropboxPopup();
+popup.authUser((auth) => {
+    // Do logic with auth
+});
+```
+
+This now becomes:
+
+```
+var popup = new DropboxPopup();
+popup.authUser().then((auth) => {
+    // Do logic with auth
+}).catch((error) => {
+    // Handle Error
+});
+```
+
+## Timeout Functionality
+
+We have also added timeout functionality. When attempting to authenticate, we will timeout and throw an error if the request is not fulfilled in the time specified. The default is 5 minutes but can be configured to any time in milliseconds.
+
diff --git a/examples/browser.html b/examples/browser.html
@@ -5,7 +5,7 @@
     <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dropbox/dist/Dropbox-sdk.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dropbox-oauth-popup@1.4.1/dist/dropboxPopup.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dropbox-oauth-popup@2.0.0/dist/dropboxPopup.js"></script>
 </head>
 
 <body>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dropbox-oauth-popup",
-  "version": "1.4.1",
+  "version": "2.0.0",
   "registry": "npm",
   "description": "This is a simple addition built onto the Dropbox SDK that allows for OAuth in the browser to be done via a popup window.",
   "homepage": "https://github.com/rogebrd/dropbox-oauth-popup",
@@ -30,7 +30,7 @@
     "rollup-plugin-terser": "^7.0.2"
   },
   "dependencies": {
-    "dropbox": "^7.1.0"
+    "dropbox": "^7.0.0"
   },
   "browserslist": [
     "> 0.25%",
@@ -40,7 +40,6 @@
     "*.md",
     "LICENSE",
     "src",
-    "test",
     "dist"
   ],
   "repository": {
diff --git a/src/dropboxPopup.js b/src/dropboxPopup.js
@@ -27,6 +27,8 @@ const defaultWindowOptions = {
   left: 100,
 };
 
+const defaultTimeout = 300000; // 5 minutes
+
 /**
  * @class DropboxPopup
  * @classdesc The DropboxPopup class is to provide a simple popup window to preform OAuth in.
@@ -57,16 +59,18 @@ const defaultWindowOptions = {
  * @param {object} [windowOptions.additionalParams] - Any additional parameters desired to be used
  * with the window.open() command. Note, by default, we add the parameters toolbar=no and menubar=no
  * in order to ensure this opens as a popup.
+ * @param {number} timeout - The timeout for when to give up on the promise and throw an error
  */
 export default class DropboxPopup {
-  constructor(options, windowOptions) {
+  constructor(options, windowOptions, timeout) {
     this.clientId = options.clientId;
     this.redirectUri = options.redirectUri;
     this.clientSecret = options.clientSecret || '';
     this.tokenAccessType = options.tokenAccessType || 'offline';
     this.scope = options.scope || null;
     this.includeGrantedScopes = options.includeGrantedScopes || 'none';
     this.usePKCE = options.usePKCE || false;
+    this.timeout = timeout || defaultTimeout;
 
     this.authObject = new DropboxAuth({
       clientId: this.clientId,
@@ -90,40 +94,44 @@ export default class DropboxPopup {
   /**
    * The main function to handle authentication via a popup window.
    *
-   * @param {Function} callback - The callback function which will utilize the DropboxAuth object.
-   * @returns {void}
+   * @returns {Promise<DropboxAuth>} The promise which contains the end auth object
    */
-  authUser(callback) {
-    window.removeEventListener('message', this.handleRedirect);
-    this.callback = callback;
-    this.callback.bind(this);
-    const authUrl = this.authObject.getAuthenticationUrl(this.redirectUri, this.state, 'code', this.tokenAccessType, this.scope, this.includeGrantedScopes, this.usePKCE);
-    const popupWindow = window.open(authUrl, windowName, this.windowOptions);
-    popupWindow.focus();
+  authUser() {
+    const popup = this;
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        reject(new Error('Request timed out'));
+      }, popup.timeout);
 
-    window.addEventListener('message', (event) => this.handleRedirect(event), false);
-  }
+      /**
+       * The function in charge of handling the redirect once the popup has completed.
+       *
+       * @param {MessageEvent} event - The incoming message from the popup window.
+       * @returns {void}
+       */
+      function handleRedirect(event) {
+        window.removeEventListener('message', popup.handleRedirect);
 
-  /**
-   * The function in charge of handling the redirect once the popup has completed.
-   *
-   * @param {MessageEvent} event - The incoming message from the popup window.
-   * @returns {void}
-   */
-  handleRedirect(event) {
-    const { data } = event;
-    const urlParams = new URLSearchParams(data);
-    const code = urlParams.get('code');
-    this.authObject.getAccessTokenFromCode(this.redirectUri, code)
-      .then((response) => {
-        const { result } = response;
-        this.authObject.setAccessToken(result.access_token);
-        this.authObject.setRefreshToken(result.refresh_token);
-        this.authObject.setAccessTokenExpiresAt(new Date(Date.now() + result.expires_in));
-        this.callback(this.authObject);
-      })
-      .catch((error) => {
-        throw error;
-      });
+        const { data } = event;
+        const urlParams = new URLSearchParams(data);
+        const code = urlParams.get('code');
+
+        popup.authObject.getAccessTokenFromCode(popup.redirectUri, code).then((response) => {
+          const { result } = response;
+          popup.authObject.setAccessToken(result.access_token);
+          popup.authObject.setRefreshToken(result.refresh_token);
+          popup.authObject.setAccessTokenExpiresAt(new Date(Date.now() + result.expires_in));
+          resolve(popup.authObject);
+        })
+          .catch((error) => {
+            reject(error);
+          });
+      }
+
+      const authUrl = popup.authObject.getAuthenticationUrl(popup.redirectUri, popup.state, 'code', popup.tokenAccessType, popup.scope, popup.includeGrantedScopes, popup.usePKCE);
+      const popupWindow = window.open(authUrl, windowName, popup.windowOptions);
+      popupWindow.focus();
+      window.addEventListener('message', handleRedirect, false);
+    });
   }
 }
diff --git a/test/static/index.html b/test/static/index.html
@@ -31,10 +31,10 @@ <h1>Dropbox OAuth Popup Window</h1>
                 width: 400,
                 top: 100,
                 left: 100
-            });
+            }, 200000);
             function runAuth() {
                 document.getElementById("result").innerHTML = "Waiting for auth...";
-                popup.authUser((auth) => {
+                popup.authUser().then((auth) => {
                     const dbx = new Dropbox.Dropbox(auth);
                     dbx.usersGetCurrentAccount()
                         .then((response) => {
@@ -43,6 +43,8 @@ <h1>Dropbox OAuth Popup Window</h1>
                         .catch((error) => {
                             document.getElementById("result").innerHTML = error;
                         });
+                }).catch((error) => {
+                    document.getElementById("result").innerHTML = error;
                 });
             }
         </script>
