@rhinestone/1auth 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -26,7 +26,6 @@ var POPUP_WIDTH = 450;
 var POPUP_HEIGHT = 600;
 var DEFAULT_EMBED_WIDTH = "400px";
 var DEFAULT_EMBED_HEIGHT = "500px";
-var MODAL_WIDTH = 340;
 var DEFAULT_PROVIDER_URL = "https://passkey.1auth.box";
 var OneAuthClient = class {
   constructor(config) {
@@ -555,7 +554,7 @@ var OneAuthClient = class {
       if (event.origin !== dialogOrigin) return;
       if (event.data?.type === "PASSKEY_READY") {
         iframe.contentWindow?.postMessage(
-          { type: "PASSKEY_INIT", ...initPayload },
+          { type: "PASSKEY_INIT", ...initPayload, fullViewport: true },
           dialogOrigin
         );
       }
@@ -894,7 +893,7 @@ var OneAuthClient = class {
       if (event.origin !== dialogOrigin) return;
       if (event.data?.type === "PASSKEY_READY") {
         iframe.contentWindow?.postMessage(
-          { type: "PASSKEY_INIT", ...batchInitPayload },
+          { type: "PASSKEY_INIT", ...batchInitPayload, fullViewport: true },
           dialogOrigin
         );
       }
@@ -1227,7 +1226,7 @@ var OneAuthClient = class {
             ready: true,
             sendInit: (initMessage) => {
               iframe.contentWindow?.postMessage(
-                { type: "PASSKEY_INIT", ...initMessage },
+                { type: "PASSKEY_INIT", ...initMessage, fullViewport: true },
                 dialogOrigin
               );
             }
@@ -1961,7 +1960,8 @@ var OneAuthClient = class {
           teardown();
           iframe.contentWindow?.postMessage({
             type: "PASSKEY_INIT",
-            ...initMessage
+            ...initMessage,
+            fullViewport: true
           }, dialogOrigin);
           resolve(true);
         } else if (event.data?.type === "PASSKEY_CLOSE") {
@@ -1984,121 +1984,88 @@ var OneAuthClient = class {
     });
   }
   /**
-   * Create a modal dialog with an iframe inside.
+   * Create a modal dialog with a full-viewport iframe inside.
+   * All visual chrome (backdrop, positioning, animations) is rendered
+   * by the passkey app inside the iframe — the SDK just provides
+   * a transparent full-screen container.
    */
   createModalDialog(url) {
     const dialogUrl = this.getDialogUrl();
     const hostUrl = new URL(dialogUrl);
     const dialog = document.createElement("dialog");
     dialog.dataset.passkey = "";
+    dialog.style.opacity = "0";
+    dialog.style.background = "transparent";
     document.body.appendChild(dialog);
     const style = document.createElement("style");
     style.textContent = `
       dialog[data-passkey] {
-        padding: 0;
-        border: none;
-        background: transparent;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        height: 100dvh;
         max-width: none;
         max-height: none;
         margin: 0;
-        position: fixed;
-        top: 50px;
-        left: 50%;
-        transform: translateX(-50%);
+        padding: 0;
+        border: none;
+        background: transparent;
         outline: none;
+        overflow: hidden;
+        pointer-events: auto;
       }
-
       dialog[data-passkey]::backdrop {
-        background-color: rgba(0, 0, 0, 0.4);
-        backdrop-filter: blur(8px);
-        -webkit-backdrop-filter: blur(8px);
+        background: transparent !important;
       }
-
       dialog[data-passkey] iframe {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
         background-color: transparent;
-        border-radius: 14px;
-        border: none;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
-        transition: height 0.15s ease-out;
-        max-height: calc(100vh - 100px);
-        max-height: calc(100dvh - 100px);
-      }
-
-      @media (min-width: 769px) {
-        dialog[data-passkey] iframe {
-          animation: passkey_zoomIn 0.2s cubic-bezier(0.32, 0.72, 0, 1);
-        }
-      }
-
-      @media (max-width: 768px) {
-        dialog[data-passkey] {
-          width: 100vw !important;
-          height: auto !important;
-          max-height: 90vh !important;
-          max-height: 90dvh !important;
-          top: auto !important;
-          bottom: 0 !important;
-          left: 0 !important;
-          right: 0 !important;
-          transform: none !important;
-          margin: 0 !important;
-        }
-
-        dialog[data-passkey] iframe {
-          animation: passkey_slideFromBottom 0.3s cubic-bezier(0.32, 0.72, 0, 1);
-          border-bottom-left-radius: 0 !important;
-          border-bottom-right-radius: 0 !important;
-          width: 100% !important;
-          max-height: 90vh !important;
-          max-height: 90dvh !important;
-          box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.15) !important;
-        }
-      }
-
-      @keyframes passkey_zoomIn {
-        from {
-          opacity: 0;
-          transform: scale(0.96) translateY(8px);
-        }
-        to {
-          opacity: 1;
-          transform: scale(1) translateY(0);
-        }
-      }
-
-      @keyframes passkey_slideFromBottom {
-        from { transform: translate3d(0, 100%, 0); }
-        to { transform: translate3d(0, 0, 0); }
-      }
-
-      @keyframes passkey_shake {
-        0%, 100% { transform: translateX(0); }
-        20% { transform: translateX(-4px); }
-        40% { transform: translateX(4px); }
-        60% { transform: translateX(-4px); }
-        80% { transform: translateX(4px); }
+        pointer-events: auto;
       }
     `;
     dialog.appendChild(style);
     const iframe = document.createElement("iframe");
     iframe.setAttribute(
       "allow",
-      "publickey-credentials-get *; publickey-credentials-create *; clipboard-write; identity-credentials-get"
+      [
+        `publickey-credentials-get ${hostUrl.origin}`,
+        `publickey-credentials-create ${hostUrl.origin}`,
+        "clipboard-write",
+        "identity-credentials-get"
+      ].join("; ")
     );
     iframe.setAttribute("aria-label", "Passkey Authentication");
     iframe.setAttribute("tabindex", "0");
+    iframe.setAttribute(
+      "sandbox",
+      "allow-forms allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+    );
     iframe.setAttribute("src", url);
     iframe.setAttribute("title", "Passkey");
-    iframe.style.border = "none";
-    iframe.style.height = "400px";
-    iframe.style.width = `${MODAL_WIDTH}px`;
+    iframe.style.opacity = "0";
     dialog.appendChild(iframe);
+    const inertObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName === "inert") {
+          dialog.removeAttribute("inert");
+        }
+      }
+    });
+    inertObserver.observe(dialog, { attributes: true });
     const handleMessage = (event) => {
       if (event.origin !== hostUrl.origin) return;
-      if (event.data?.type === "PASSKEY_RESIZE") {
-        const maxHeight = window.innerHeight - 100;
-        iframe.style.height = `${Math.min(event.data.height, maxHeight)}px`;
-      } else if (event.data?.type === "PASSKEY_DISCONNECT") {
+      if (event.data?.type === "PASSKEY_RENDERED") {
+        dialog.style.opacity = "1";
+        iframe.style.opacity = "1";
+      }
+      if (event.data?.type === "PASSKEY_DISCONNECT") {
         localStorage.removeItem("1auth-user");
       }
     };
@@ -2109,19 +2076,22 @@ var OneAuthClient = class {
       }
     };
     document.addEventListener("keydown", handleEscape);
-    dialog.addEventListener("click", (event) => {
-      if (event.target === dialog) {
-        cleanup();
-      }
-    });
     dialog.showModal();
     let cleanedUp = false;
     const cleanup = () => {
       if (cleanedUp) return;
       cleanedUp = true;
+      inertObserver.disconnect();
       window.removeEventListener("message", handleMessage);
       document.removeEventListener("keydown", handleEscape);
       dialog.close();
+      if (dialog.parentNode) {
+        for (const sibling of Array.from(dialog.parentNode.children)) {
+          if (sibling !== dialog && sibling instanceof HTMLElement && sibling.hasAttribute("inert")) {
+            sibling.removeAttribute("inert");
+          }
+        }
+      }
       dialog.remove();
     };
     return { dialog, iframe, cleanup };
@@ -2137,7 +2107,8 @@ var OneAuthClient = class {
           dialogReady = true;
           iframe.contentWindow?.postMessage({
             type: "PASSKEY_INIT",
-            mode: "iframe"
+            mode: "iframe",
+            fullViewport: true
           }, dialogOrigin);
           return;
         }