[AUT-171] - Add onClose event handler + resolve promise when popup …

…closes (#12)

* Resolve promise on popup close

* Bump version

* Remove onClose

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@authsignal/browser",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",

src/authsignal.ts

@@ -76,11 +76,14 @@ export class Authsignal {
           if (event.origin === this.endpoint) {
             if (event.data === AuthsignalWindowMessage.AUTHSIGNAL_CLOSE_POPUP) {
               Popup.close();
-              resolve(true);
             }
           }
         };
 
+        Popup.on("hide", () => {
+          resolve(true);
+        });
+
         window.addEventListener("message", onMessage, false);
       });
     }

src/popup-handler.ts

@@ -9,6 +9,10 @@ type PopupShowInput = {
   url: string;
 };
 
+type EventType = "show" | "hide" | "destroy" | "create";
+
+type EventHandler = (node: Element, event?: Event) => void;
+
 class PopupHandler {
   private popup: A11yDialog | null = null;
 
@@ -85,12 +89,17 @@ class PopupHandler {
     container.appendChild(content);
 
     this.popup = new A11yDialog(container);
-    this.popup.on("hide", this.destroy);
+
+    // Make sure to remove any trace of the dialog on hide
+    this.popup.on("hide", () => {
+      this.destroy();
+    });
   }
 
   destroy() {
     const dialogEl = document.querySelector(`#${CONTAINER_ID}`);
     const styleEl = document.querySelector(`#${STYLE_ID}`);
+
     if (dialogEl && styleEl) {
       document.body.removeChild(dialogEl);
       document.head.removeChild(styleEl);
@@ -103,12 +112,14 @@ class PopupHandler {
     }
 
     const iframe = document.createElement("iframe");
+
     iframe.setAttribute("name", "authsignal");
     iframe.setAttribute("title", "Authsignal multi-factor authentication");
     iframe.setAttribute("src", url);
     iframe.setAttribute("frameborder", "0");
 
     const dialogContent = document.querySelector(`#${CONTENT_ID}`);
+
     if (dialogContent) {
       dialogContent.appendChild(iframe);
     }
@@ -123,6 +134,14 @@ class PopupHandler {
 
     this.popup.hide();
   }
+
+  on(event: EventType, handler: EventHandler) {
+    if (!this.popup) {
+      throw new Error("Popup is not initialized");
+    }
+
+    this.popup.on(event, handler);
+  }
 }
 
 export {PopupHandler};

src/types.ts

@@ -9,6 +9,12 @@ export type MfaInput = {
 };
 
 export type LaunchOptions = {
+  /**
+   *  How the Authsignal Prebuilt MFA page should launch.
+   *  `popup` will cause it to open in a overlay, whilst `redirect`
+   *  will trigger a full page redirect.
+   *  If no value is supplied, mode defaults to `redirect`.
+   */
   mode?: "popup" | "redirect";
 };