@rhinestone/1auth 0.5.0 → 0.6.1

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,175 @@ 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 urlParams = new URL(url, window.location.href).searchParams;
+    const themeMode = urlParams.get("theme") || "light";
+    const accentColor = urlParams.get("accent") || "#0090ff";
+    const isDark = themeMode === "dark" || themeMode !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const bgPrimary = isDark ? "#191919" : "#fcfcfc";
+    const bgSecondary = isDark ? "#222222" : "#f9f9f9";
+    const borderColor = isDark ? "#2a2a2a" : "#e0e0e0";
+    const textPrimary = isDark ? "#eeeeee" : "#202020";
+    const textSecondary = isDark ? "#7b7b7b" : "#838383";
+    const bgSurface = isDark ? "#222222" : "#f0f0f0";
+    const ah = accentColor.replace("#", "");
+    const accentRgb = `${parseInt(ah.slice(0, 2), 16)},${parseInt(ah.slice(2, 4), 16)},${parseInt(ah.slice(4, 6), 16)}`;
+    const accentTint = isDark ? `rgba(${accentRgb},0.15)` : `rgba(${accentRgb},0.1)`;
+    const hostname = window.location.hostname;
     const dialog = document.createElement("dialog");
     dialog.dataset.passkey = "";
+    dialog.style.opacity = "1";
+    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;
+        color-scheme: normal;
         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);
+        color-scheme: normal;
+        pointer-events: auto;
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
       }
-
-      @media (min-width: 769px) {
-        dialog[data-passkey] iframe {
-          animation: passkey_zoomIn 0.2s cubic-bezier(0.32, 0.72, 0, 1);
-        }
+      dialog[data-passkey] [data-passkey-overlay] {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding-top: 50px;
+        background: rgba(0, 0, 0, 0.4);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        z-index: 1;
+        animation: _1auth-backdrop-in 0.2s ease-out;
       }
-
       @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;
+        dialog[data-passkey] [data-passkey-overlay] {
+          align-items: flex-end;
+          padding-top: 0;
         }
       }
-
-      @keyframes passkey_zoomIn {
-        from {
-          opacity: 0;
-          transform: scale(0.96) translateY(8px);
-        }
-        to {
-          opacity: 1;
-          transform: scale(1) translateY(0);
+      dialog[data-passkey] [data-passkey-card] {
+        width: 340px;
+        overflow: hidden;
+        border-radius: 14px;
+        box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
+        animation: _1auth-card-in 0.2s cubic-bezier(0.32, 0.72, 0, 1);
+        max-height: calc(100dvh - 100px);
+      }
+      @media (max-width: 768px) {
+        dialog[data-passkey] [data-passkey-card] {
+          width: 100%;
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: 0;
+          animation: _1auth-card-slide 0.3s cubic-bezier(0.32, 0.72, 0, 1);
         }
       }
-
-      @keyframes passkey_slideFromBottom {
+      @keyframes _1auth-backdrop-in {
+        from { opacity: 0; } to { opacity: 1; }
+      }
+      @keyframes _1auth-card-in {
+        from { opacity: 0; transform: scale(0.96) translateY(8px); }
+        to { opacity: 1; transform: scale(1) translateY(0); }
+      }
+      @keyframes _1auth-card-slide {
         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); }
+      @keyframes _1auth-spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
       }
     `;
     dialog.appendChild(style);
+    const overlay = document.createElement("div");
+    overlay.dataset.passkeyOverlay = "";
+    const _sp = '<path d="M10 0.5C8.02219 0.5 6.08879 1.08649 4.4443 2.1853C2.79981 3.28412 1.51809 4.8459 0.761209 6.67316C0.00433288 8.50043 -0.1937 10.5111 0.192152 12.4509C0.578004 14.3907 1.53041 16.1725 2.92894 17.5711C4.32746 18.9696 6.10929 19.922 8.0491 20.3078C9.98891 20.6937 11.9996 20.4957 13.8268 19.7388C15.6541 18.9819 17.2159 17.7002 18.3147 16.0557C19.4135 14.4112 20 12.4778 20 10.5C20 7.84783 18.9464 5.3043 17.0711 3.42893C15.1957 1.55357 12.6522 0.5 10 0.5ZM10 17.7727C8.56159 17.7727 7.15549 17.3462 5.95949 16.547C4.7635 15.7479 3.83134 14.6121 3.28088 13.2831C2.73042 11.9542 2.5864 10.4919 2.86702 9.08116C3.14764 7.67039 3.8403 6.37451 4.85741 5.3574C5.87452 4.3403 7.17039 3.64764 8.58116 3.36702C9.99193 3.0864 11.4542 3.23042 12.7832 3.78088C14.1121 4.33133 15.2479 5.26349 16.0471 6.45949C16.8462 7.65548 17.2727 9.06159 17.2727 10.5C17.2727 12.4288 16.5065 14.2787 15.1426 15.6426C13.7787 17.0065 11.9288 17.7727 10 17.7727Z" fill="currentColor" opacity="0.3"/><path d="M10 3.22767C11.7423 3.22846 13.4276 3.8412 14.7556 4.95667C16.0837 6.07214 16.9681 7.61784 17.2512 9.31825C17.3012 9.64364 17.4662 9.94096 17.7169 10.1573C17.9677 10.3737 18.2878 10.4951 18.6205 10.5C18.8211 10.5001 19.0193 10.457 19.2012 10.3735C19.3832 10.2901 19.5445 10.1684 19.674 10.017C19.8036 9.86549 19.8981 9.68789 19.9511 9.49656C20.004 9.30523 20.0141 9.10478 19.9807 8.90918C19.5986 6.56305 18.3843 4.42821 16.5554 2.88726C14.7265 1.34631 12.4025 0.5 10 0.5C7.59751 0.5 5.27354 1.34631 3.44461 2.88726C1.61569 4.42821 0.401366 6.56305 0.0192815 8.90918C-0.0141442 9.10478 -0.00402016 9.30523 0.0489472 9.49656C0.101914 9.68789 0.196449 9.86549 0.325956 10.017C0.455463 10.1684 0.616823 10.2901 0.798778 10.3735C0.980732 10.457 1.1789 10.5001 1.37945 10.5C1.71216 10.4951 2.03235 10.3737 2.28307 10.1573C2.5338 9.94096 2.69883 9.64364 2.74882 9.31825C3.03193 7.61784 3.91633 6.07214 5.24436 4.95667C6.57239 3.8412 8.25775 3.22846 10 3.22767Z" fill="currentColor"/>';
+    overlay.innerHTML = `<div data-passkey-card style="background:${bgPrimary};border:1px solid ${borderColor};font-family:ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji'"><div style="height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:${bgSecondary};border-bottom:1px solid ${borderColor}"><div style="display:flex;align-items:center;gap:8px"><div style="display:flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:4px;background:${bgSurface}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="${textPrimary}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4Z"/></svg></div><span style="font-size:13px;font-weight:500;color:${textPrimary};max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${hostname}</span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="${textSecondary}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></div><div style="display:flex;align-items:center;gap:4px"><div style="display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:6px;color:${textSecondary}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg></div><button data-passkey-close style="display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:6px;color:${textSecondary};border:none;background:none;cursor:pointer;padding:0"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button></div></div><div style="padding:12px"><div style="display:flex;align-items:center;gap:8px"><div style="display:flex;width:32px;height:32px;min-width:32px;align-items:center;justify-content:center;border-radius:50%;background:${accentTint};padding:6px"><svg style="width:100%;height:100%;animation:_1auth-spin 0.8s linear infinite;color:${accentColor}" fill="none" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg">${_sp}</svg></div><div style="font-weight:500;font-size:18px;color:${textPrimary}">Loading...</div></div><div style="margin-top:8px"><div style="font-size:15px;line-height:20px;color:${textPrimary}">This will only take a few moments.</div><div style="font-size:15px;line-height:20px;color:${textSecondary}">Please do not close the window.</div></div></div></div>`;
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) cleanup();
+    });
+    const overlayCloseBtn = overlay.querySelector("[data-passkey-close]");
+    if (overlayCloseBtn) overlayCloseBtn.addEventListener("click", () => cleanup());
+    dialog.appendChild(overlay);
     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 });
+    let overlayHidden = false;
+    const hideOverlay = () => {
+      if (overlayHidden) return;
+      overlayHidden = true;
+      overlay.style.display = "none";
+      iframe.style.opacity = "1";
+    };
     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") {
+        hideOverlay();
+      }
+      if (event.data?.type === "PASSKEY_DISCONNECT") {
         localStorage.removeItem("1auth-user");
       }
     };
@@ -2109,19 +2163,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 +2194,8 @@ var OneAuthClient = class {
           dialogReady = true;
           iframe.contentWindow?.postMessage({
             type: "PASSKEY_INIT",
-            mode: "iframe"
+            mode: "iframe",
+            fullViewport: true
           }, dialogOrigin);
           return;
         }