diff --git a/package.json b/package.json index cca5084..eb3d402 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@authsignal/browser", - "version": "0.1.3", + "version": "0.1.4", "type": "module", "main": "dist/index.js", "module": "dist/index.js", @@ -24,7 +24,6 @@ "@fingerprintjs/fingerprintjs": "^3.3.6", "@simplewebauthn/browser": "^7.2.0", "a11y-dialog": "^7.5.2", - "iframe-resizer": "^4.3.6", "ky": "^0.33.3", "uuid": "^9.0.0" }, diff --git a/src/popup-handler.ts b/src/popup-handler.ts index 304c4c9..851f3db 100644 --- a/src/popup-handler.ts +++ b/src/popup-handler.ts @@ -1,6 +1,4 @@ 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"; @@ -24,7 +22,6 @@ type PopupHandlerOptions = { class PopupHandler { private popup: A11yDialog | null = null; - private isHeightAutoResized = true; constructor({width}: PopupHandlerOptions) { if (document.querySelector(`#${CONTAINER_ID}`)) { @@ -124,6 +121,8 @@ class PopupHandler { document.body.removeChild(dialogEl); document.head.removeChild(styleEl); } + + window.removeEventListener("message", resizeIframe); } show({url}: PopupShowInput) { @@ -146,17 +145,9 @@ class PopupHandler { dialogContent.appendChild(iframe); } - // @ts-expect-error can't get typescript import to behave nicely, this works though - iFrameResize( - { - checkOrigin: false, - scrolling: true, - onInit: () => { - this.popup?.show(); - }, - }, - iframe - ); + window.addEventListener("message", resizeIframe); + + this.popup?.show(); } close() { @@ -176,4 +167,12 @@ class PopupHandler { } } +function resizeIframe(event: MessageEvent) { + const iframeEl = document.querySelector(`#${IFRAME_ID}`); + + if (iframeEl && event.data.height) { + iframeEl.style.height = event.data.height + "px"; + } +} + export {PopupHandler};