[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";
 };