[AUT-956] Add iframe resize logic (#25)

* Add iframe resize logic

* Add deprecation warning to height option

* Bump version

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@authsignal/browser",
  "type": "module",
- "version": "0.0.19",
+ "version": "0.0.20",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
@@ -23,11 +23,13 @@
  "dependencies": {
  "@fingerprintjs/fingerprintjs": "^3.3.6",
  "a11y-dialog": "^7.5.2",
+ "iframe-resizer": "^4.3.6",
  "uuid": "^9.0.0"
  },
  "devDependencies": {
  "@rollup/plugin-node-resolve": "^14.1.0",
  "@rollup/plugin-typescript": "^8.5.0",
+ "@types/iframe-resizer": "^3.5.9",
  "@types/uuid": "^8.3.4",
  "@typescript-eslint/eslint-plugin": "^5.39.0",
  "@typescript-eslint/parser": "^5.39.0",

src/authsignal.ts

@@ -50,7 +50,7 @@ export class Authsignal {
  } else {
  const {popupOptions} = options;
 
- const Popup = new PopupHandler({width: popupOptions?.width, height: popupOptions?.height});
+ const Popup = new PopupHandler({width: popupOptions?.width});
 
  const popupUrl = `${url}&mode=popup`;
 

src/popup-handler.ts

@@ -1,11 +1,14 @@
 import A11yDialog from "a11y-dialog";
+import "iframe-resizer/js/iframeResizer";
+import "iframe-resizer/js/iframeResizer.contentWindow";
 
 const CONTAINER_ID = "__authsignal-popup-container";
 const CONTENT_ID = "__authsignal-popup-content";
 const OVERLAY_ID = "__authsignal-popup-overlay";
 const STYLE_ID = "__authsignal-popup-style";
-const DEFAULT_WIDTH = "576px";
-const DEFAULT_HEIGHT = "600px";
+const IFRAME_ID = "__authsignal-popup-iframe";
+
+const DEFAULT_WIDTH = "385px";
 
 type PopupShowInput = {
  url: string;
@@ -17,35 +20,29 @@ type EventHandler = (node: Element, event?: Event) => void;
 
 type PopupHandlerOptions = {
  width?: string;
- height?: string;
 };
 
 class PopupHandler {
  private popup: A11yDialog | null = null;
+ private isHeightAutoResized = true;
 
- constructor({width, height}: PopupHandlerOptions) {
+ constructor({width}: PopupHandlerOptions) {
  if (document.querySelector(`#${CONTAINER_ID}`)) {
  throw new Error("Multiple instances of Authsignal popup is not supported.");
  }
 
- this.create({width, height});
+ this.create({width});
  }
 
- create({width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT}: PopupHandlerOptions) {
+ create({width = DEFAULT_WIDTH}: PopupHandlerOptions) {
  const isWidthValidCSSValue = CSS.supports("width", width);
- const isHeightValidCSSValue = CSS.supports("height", height);
 
  let popupWidth = width;
- let popupHeight = height;
 
  if (!isWidthValidCSSValue) {
  console.warn("Invalid CSS value for `popupOptions.width`. Using default value instead.");
  popupWidth = DEFAULT_WIDTH;
  }
- if (!isHeightValidCSSValue) {
- console.warn("Invalid CSS value for `popupOptions.height`. Using default value instead.");
- popupHeight = DEFAULT_HEIGHT;
- }
 
  // Create dialog container
  const container = document.createElement("div");
@@ -67,6 +64,18 @@ class PopupHandler {
  const style = document.createElement("style");
  style.setAttribute("id", STYLE_ID);
  style.textContent = `
+ @keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+ }
+ 
+ @keyframes slide-up {
+ from {
+ transform: translateY(10%);
+ }
+ }
+
  #${CONTAINER_ID},
  #${OVERLAY_ID} {
  position: fixed;
@@ -86,23 +95,32 @@ class PopupHandler {
  }
 
  #${OVERLAY_ID} {
- background-color: rgba(43, 46, 56, 0.9);
+ background-color: rgba(0, 0, 0, 0.18);
+ animation: fade-in 200ms both;
  }
 
  #${CONTENT_ID} {
  margin: auto;
  z-index: 2147483647;
  position: relative;
  background-color: transparent;
- height: ${popupHeight};
- width: ${popupWidth};
  border-radius: 8px;
+ width: ${popupWidth};
+ animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both;
  }
 
  #${CONTENT_ID} iframe {
- width: 100%;
- height: 100%;
+ width: 1px;
+ min-width: 100%;
  border-radius: inherit;
+ max-height: 65vh;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ #${OVERLAY_ID},
+ #${CONTENT_ID} {
+ animation: none;
+ }
  }
  `;
 
@@ -136,6 +154,7 @@ class PopupHandler {
 
  const iframe = document.createElement("iframe");
 
+ iframe.setAttribute("id", IFRAME_ID);
  iframe.setAttribute("name", "authsignal");
  iframe.setAttribute("title", "Authsignal multi-factor authentication");
  iframe.setAttribute("src", url);
@@ -148,7 +167,17 @@ class PopupHandler {
  dialogContent.appendChild(iframe);
  }
 
- this.popup.show();
+ // @ts-expect-error can't get typescript import to behave nicely, this works though
+ iFrameResize(
+ {
+ checkOrigin: false,
+ scrolling: true,
+ onInit: () => {
+ this.popup?.show();
+ },
+ },
+ iframe
+ );
  }
 
  close() {

src/types.ts

@@ -16,9 +16,11 @@ type PopupLaunchOptions = BaseLaunchOptions & {
  mode: "popup";
  popupOptions?: {
  /** Any valid CSS value for the `width` property. */
- width: string;
- /** Any valid CSS value for the `height` property. */
- height: string;
+ width?: string;
+ /**
+ * @deprecated The popup will automatically resize to fit the content.
+ */
+ height?: string;
  };
 };
 

yarn.lock

@@ -103,6 +103,11 @@
  resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
  integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/iframe-resizer@^3.5.9":
+ version "3.5.9"
+ resolved "https://registry.npmjs.org/@types/iframe-resizer/-/iframe-resizer-3.5.9.tgz#75c4cda33cee5f4da4c7693a0d9ad1ccb0c5ee98"
+ integrity sha512-RQUBI75F+uXruB95BFpC/8V8lPgJg4MQ6HxOCtAZYBB/h0FNCfrFfb4I+u2pZJIV7sKeszZbFqy1UnGeBMrvsA==
+
 "@types/json-schema@^7.0.9":
  version "7.0.11"
  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -642,6 +647,11 @@ has@^1.0.3:
  dependencies:
  function-bind "^1.1.1"
 
+iframe-resizer@^4.3.6:
+ version "4.3.6"
+ resolved "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.6.tgz#61d92c1adefe5d416bff4fbf80c7f1f74be70ec0"
+ integrity sha512-wz0WodRIF6eP0oGQa5NIP1yrITAZ59ZJvVaVJqJRjaeCtfm461vy2C3us6CKx0e7pooqpIGLpVMSTzrfAjX9Sg==
+
 ignore@^5.2.0:
  version "5.2.0"
  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"