@authon/js 0.1.7 → 0.1.9

package/dist/index.js

@@ -131,6 +131,25 @@ var ModalRenderer = class {
       this.containerElement.innerHTML = "";
     }
   }
+  showLoading() {
+    if (!this.shadowRoot) return;
+    this.hideLoading();
+    const overlay = document.createElement("div");
+    overlay.id = "authon-loading-overlay";
+    overlay.innerHTML = `
+      <div class="loading-spinner">
+        <div class="loading-ring"></div>
+        <div class="loading-ring"></div>
+        <div class="loading-ring"></div>
+      </div>
+      <div class="loading-text">Signing in<span class="loading-dots"><span></span><span></span><span></span></span></div>
+    `;
+    this.shadowRoot.querySelector(".modal-container")?.appendChild(overlay);
+  }
+  hideLoading() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.getElementById("authon-loading-overlay")?.remove();
+  }
   render(view) {
     const host = document.createElement("div");
     host.setAttribute("data-authon-modal", "");
@@ -234,6 +253,7 @@ var ModalRenderer = class {
         border-radius: var(--authon-radius);
         padding: 32px;
         width: 400px; max-width: 100%;
+        position: ${this.mode === "popup" ? "fixed" : "relative"};
         ${this.mode === "popup" ? `box-shadow: 0 25px 50px -12px rgba(0,0,0,${dark ? "0.5" : "0.25"}); animation: slideIn 0.3s ease;` : ""}
       }
       .logo { display: block; margin: 0 auto 16px; max-height: 48px; }
@@ -288,6 +308,39 @@ var ModalRenderer = class {
         font-size: 11px; color: var(--authon-dim);
       }
       .secured-brand { font-weight: 600; color: var(--authon-muted); }
+      /* Loading overlay */
+      #authon-loading-overlay {
+        position: absolute; inset: 0; z-index: 10;
+        background: ${dark ? "rgba(15,23,42,0.92)" : "rgba(255,255,255,0.92)"};
+        backdrop-filter: blur(2px);
+        border-radius: var(--authon-radius);
+        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
+        animation: fadeIn 0.15s ease;
+      }
+      .loading-spinner { position: relative; width: 48px; height: 48px; }
+      .loading-ring {
+        position: absolute; inset: 0;
+        border: 2.5px solid transparent; border-top-color: var(--authon-primary-start);
+        border-radius: 50%; animation: spin 1s cubic-bezier(.55,.15,.45,.85) infinite;
+      }
+      .loading-ring:nth-child(2) {
+        inset: 5px; border-top-color: transparent; border-right-color: var(--authon-primary-end);
+        animation-duration: 1.2s; animation-direction: reverse; opacity: .7;
+      }
+      .loading-ring:nth-child(3) {
+        inset: 10px; border-top-color: transparent; border-bottom-color: var(--authon-primary-start);
+        animation-duration: .8s; opacity: .4;
+      }
+      .loading-text { font-size: 14px; font-weight: 500; color: var(--authon-muted); }
+      .loading-dots { display: inline-flex; gap: 2px; margin-left: 2px; }
+      .loading-dots span {
+        width: 3px; height: 3px; border-radius: 50%;
+        background: var(--authon-muted); animation: blink 1.4s infinite both;
+      }
+      .loading-dots span:nth-child(2) { animation-delay: .2s; }
+      .loading-dots span:nth-child(3) { animation-delay: .4s; }
+      @keyframes spin { to { transform: rotate(360deg); } }
+      @keyframes blink { 0%,80%,100% { opacity: .2; } 40% { opacity: 1; } }
       @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
       @keyframes slideIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
       ${b.customCss || ""}
@@ -542,6 +595,7 @@ var Authon = class {
       const { url } = await this.apiGet(
         `/v1/auth/oauth/${provider}/url?redirectUri=${encodeURIComponent(redirectUri)}`
       );
+      this.modal?.showLoading();
       const width = 500;
       const height = 700;
       const left = window.screenX + (window.outerWidth - width) / 2;
@@ -551,30 +605,56 @@ var Authon = class {
         "authon-oauth",
         `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no`
       );
+      let callbackReceived = false;
+      let cleaned = false;
+      const cleanup = () => {
+        if (cleaned) return;
+        cleaned = true;
+        window.removeEventListener("message", handler);
+        window.removeEventListener("focus", focusHandler);
+        if (maxTimer) clearTimeout(maxTimer);
+      };
+      const focusHandler = () => {
+        if (callbackReceived || cleaned) return;
+        setTimeout(() => {
+          if (callbackReceived || cleaned) return;
+          cleanup();
+          this.modal?.hideLoading();
+        }, 1500);
+      };
+      window.addEventListener("focus", focusHandler);
+      const maxTimer = setTimeout(() => {
+        if (callbackReceived || cleaned) return;
+        cleanup();
+        this.modal?.hideLoading();
+      }, 18e4);
+      if (!popup) {
+        cleanup();
+        this.modal?.hideLoading();
+        this.emit("error", new Error("Popup was blocked by the browser"));
+        return;
+      }
       const handler = async (e) => {
-        if (e.data?.type === "authon-oauth-callback") {
-          window.removeEventListener("message", handler);
-          try {
-            popup?.close();
-          } catch {
-          }
-          try {
-            const tokens = await this.apiPost("/v1/auth/oauth/callback", {
-              code: e.data.code,
-              state: e.data.state,
-              codeVerifier: e.data.codeVerifier,
-              provider
-            });
-            this.session.setSession(tokens);
-            this.modal?.close();
-            this.emit("signedIn", tokens.user);
-          } catch (err) {
-            this.emit("error", err instanceof Error ? err : new Error(String(err)));
-          }
+        if (e.data?.type !== "authon-oauth-callback") return;
+        callbackReceived = true;
+        cleanup();
+        try {
+          const tokens = await this.apiPost("/v1/auth/oauth/callback", {
+            code: e.data.code,
+            state: e.data.state,
+            provider
+          });
+          this.session.setSession(tokens);
+          this.modal?.close();
+          this.emit("signedIn", tokens.user);
+        } catch (err) {
+          this.modal?.hideLoading();
+          this.emit("error", err instanceof Error ? err : new Error(String(err)));
         }
       };
       window.addEventListener("message", handler);
     } catch (err) {
+      this.modal?.hideLoading();
       this.emit("error", err instanceof Error ? err : new Error(String(err)));
     }
   }

package/dist/index.mjs

@@ -104,6 +104,25 @@ var ModalRenderer = class {
       this.containerElement.innerHTML = "";
     }
   }
+  showLoading() {
+    if (!this.shadowRoot) return;
+    this.hideLoading();
+    const overlay = document.createElement("div");
+    overlay.id = "authon-loading-overlay";
+    overlay.innerHTML = `
+      <div class="loading-spinner">
+        <div class="loading-ring"></div>
+        <div class="loading-ring"></div>
+        <div class="loading-ring"></div>
+      </div>
+      <div class="loading-text">Signing in<span class="loading-dots"><span></span><span></span><span></span></span></div>
+    `;
+    this.shadowRoot.querySelector(".modal-container")?.appendChild(overlay);
+  }
+  hideLoading() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.getElementById("authon-loading-overlay")?.remove();
+  }
   render(view) {
     const host = document.createElement("div");
     host.setAttribute("data-authon-modal", "");
@@ -207,6 +226,7 @@ var ModalRenderer = class {
         border-radius: var(--authon-radius);
         padding: 32px;
         width: 400px; max-width: 100%;
+        position: ${this.mode === "popup" ? "fixed" : "relative"};
         ${this.mode === "popup" ? `box-shadow: 0 25px 50px -12px rgba(0,0,0,${dark ? "0.5" : "0.25"}); animation: slideIn 0.3s ease;` : ""}
       }
       .logo { display: block; margin: 0 auto 16px; max-height: 48px; }
@@ -261,6 +281,39 @@ var ModalRenderer = class {
         font-size: 11px; color: var(--authon-dim);
       }
       .secured-brand { font-weight: 600; color: var(--authon-muted); }
+      /* Loading overlay */
+      #authon-loading-overlay {
+        position: absolute; inset: 0; z-index: 10;
+        background: ${dark ? "rgba(15,23,42,0.92)" : "rgba(255,255,255,0.92)"};
+        backdrop-filter: blur(2px);
+        border-radius: var(--authon-radius);
+        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
+        animation: fadeIn 0.15s ease;
+      }
+      .loading-spinner { position: relative; width: 48px; height: 48px; }
+      .loading-ring {
+        position: absolute; inset: 0;
+        border: 2.5px solid transparent; border-top-color: var(--authon-primary-start);
+        border-radius: 50%; animation: spin 1s cubic-bezier(.55,.15,.45,.85) infinite;
+      }
+      .loading-ring:nth-child(2) {
+        inset: 5px; border-top-color: transparent; border-right-color: var(--authon-primary-end);
+        animation-duration: 1.2s; animation-direction: reverse; opacity: .7;
+      }
+      .loading-ring:nth-child(3) {
+        inset: 10px; border-top-color: transparent; border-bottom-color: var(--authon-primary-start);
+        animation-duration: .8s; opacity: .4;
+      }
+      .loading-text { font-size: 14px; font-weight: 500; color: var(--authon-muted); }
+      .loading-dots { display: inline-flex; gap: 2px; margin-left: 2px; }
+      .loading-dots span {
+        width: 3px; height: 3px; border-radius: 50%;
+        background: var(--authon-muted); animation: blink 1.4s infinite both;
+      }
+      .loading-dots span:nth-child(2) { animation-delay: .2s; }
+      .loading-dots span:nth-child(3) { animation-delay: .4s; }
+      @keyframes spin { to { transform: rotate(360deg); } }
+      @keyframes blink { 0%,80%,100% { opacity: .2; } 40% { opacity: 1; } }
       @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
       @keyframes slideIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
       ${b.customCss || ""}
@@ -515,6 +568,7 @@ var Authon = class {
       const { url } = await this.apiGet(
         `/v1/auth/oauth/${provider}/url?redirectUri=${encodeURIComponent(redirectUri)}`
       );
+      this.modal?.showLoading();
       const width = 500;
       const height = 700;
       const left = window.screenX + (window.outerWidth - width) / 2;
@@ -524,30 +578,56 @@ var Authon = class {
         "authon-oauth",
         `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no`
       );
+      let callbackReceived = false;
+      let cleaned = false;
+      const cleanup = () => {
+        if (cleaned) return;
+        cleaned = true;
+        window.removeEventListener("message", handler);
+        window.removeEventListener("focus", focusHandler);
+        if (maxTimer) clearTimeout(maxTimer);
+      };
+      const focusHandler = () => {
+        if (callbackReceived || cleaned) return;
+        setTimeout(() => {
+          if (callbackReceived || cleaned) return;
+          cleanup();
+          this.modal?.hideLoading();
+        }, 1500);
+      };
+      window.addEventListener("focus", focusHandler);
+      const maxTimer = setTimeout(() => {
+        if (callbackReceived || cleaned) return;
+        cleanup();
+        this.modal?.hideLoading();
+      }, 18e4);
+      if (!popup) {
+        cleanup();
+        this.modal?.hideLoading();
+        this.emit("error", new Error("Popup was blocked by the browser"));
+        return;
+      }
       const handler = async (e) => {
-        if (e.data?.type === "authon-oauth-callback") {
-          window.removeEventListener("message", handler);
-          try {
-            popup?.close();
-          } catch {
-          }
-          try {
-            const tokens = await this.apiPost("/v1/auth/oauth/callback", {
-              code: e.data.code,
-              state: e.data.state,
-              codeVerifier: e.data.codeVerifier,
-              provider
-            });
-            this.session.setSession(tokens);
-            this.modal?.close();
-            this.emit("signedIn", tokens.user);
-          } catch (err) {
-            this.emit("error", err instanceof Error ? err : new Error(String(err)));
-          }
+        if (e.data?.type !== "authon-oauth-callback") return;
+        callbackReceived = true;
+        cleanup();
+        try {
+          const tokens = await this.apiPost("/v1/auth/oauth/callback", {
+            code: e.data.code,
+            state: e.data.state,
+            provider
+          });
+          this.session.setSession(tokens);
+          this.modal?.close();
+          this.emit("signedIn", tokens.user);
+        } catch (err) {
+          this.modal?.hideLoading();
+          this.emit("error", err instanceof Error ? err : new Error(String(err)));
         }
       };
       window.addEventListener("message", handler);
     } catch (err) {
+      this.modal?.hideLoading();
       this.emit("error", err instanceof Error ? err : new Error(String(err)));
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authon/js",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Authon core SDK — ShadowDOM login modal for any app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",