@authon/js 0.1.6 → 0.1.8

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 || ""}
@@ -339,6 +392,7 @@ var ModalRenderer = class {
 // src/session.ts
 var SessionManager = class {
   accessToken = null;
+  refreshToken = null;
   user = null;
   refreshTimer = null;
   apiUrl;
@@ -355,11 +409,15 @@ var SessionManager = class {
   }
   setSession(tokens) {
     this.accessToken = tokens.accessToken;
+    this.refreshToken = tokens.refreshToken;
     this.user = tokens.user;
-    this.scheduleRefresh(tokens.expiresIn);
+    if (tokens.expiresIn && tokens.expiresIn > 0) {
+      this.scheduleRefresh(tokens.expiresIn);
+    }
   }
   clearSession() {
     this.accessToken = null;
+    this.refreshToken = null;
     this.user = null;
     if (this.refreshTimer) {
       clearTimeout(this.refreshTimer);
@@ -368,10 +426,14 @@ var SessionManager = class {
   }
   scheduleRefresh(expiresIn) {
     if (this.refreshTimer) clearTimeout(this.refreshTimer);
-    const refreshIn = Math.max((expiresIn - 60) * 1e3, 5e3);
+    const refreshIn = Math.max((expiresIn - 60) * 1e3, 3e4);
     this.refreshTimer = setTimeout(() => this.refresh(), refreshIn);
   }
   async refresh() {
+    if (!this.refreshToken) {
+      this.clearSession();
+      return null;
+    }
     try {
       const res = await fetch(`${this.apiUrl}/v1/auth/token/refresh`, {
         method: "POST",
@@ -379,7 +441,8 @@ var SessionManager = class {
           "Content-Type": "application/json",
           "x-api-key": this.publishableKey
         },
-        credentials: "include"
+        credentials: "include",
+        body: JSON.stringify({ refreshToken: this.refreshToken })
       });
       if (!res.ok) {
         this.clearSession();
@@ -532,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;
@@ -541,27 +605,42 @@ var Authon = class {
         "authon-oauth",
         `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no`
       );
-      const handler = async (e) => {
-        if (e.data?.type === "authon-oauth-callback") {
-          window.removeEventListener("message", handler);
-          popup?.close();
-          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)));
+      let callbackReceived = false;
+      const pollTimer = setInterval(() => {
+        if (callbackReceived) return;
+        try {
+          if (!popup || popup.closed) {
+            clearInterval(pollTimer);
+            if (!callbackReceived) {
+              window.removeEventListener("message", handler);
+              this.modal?.hideLoading();
+            }
           }
+        } catch {
+        }
+      }, 500);
+      const handler = async (e) => {
+        if (e.data?.type !== "authon-oauth-callback") return;
+        callbackReceived = true;
+        window.removeEventListener("message", handler);
+        clearInterval(pollTimer);
+        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 || ""}
@@ -312,6 +365,7 @@ var ModalRenderer = class {
 // src/session.ts
 var SessionManager = class {
   accessToken = null;
+  refreshToken = null;
   user = null;
   refreshTimer = null;
   apiUrl;
@@ -328,11 +382,15 @@ var SessionManager = class {
   }
   setSession(tokens) {
     this.accessToken = tokens.accessToken;
+    this.refreshToken = tokens.refreshToken;
     this.user = tokens.user;
-    this.scheduleRefresh(tokens.expiresIn);
+    if (tokens.expiresIn && tokens.expiresIn > 0) {
+      this.scheduleRefresh(tokens.expiresIn);
+    }
   }
   clearSession() {
     this.accessToken = null;
+    this.refreshToken = null;
     this.user = null;
     if (this.refreshTimer) {
       clearTimeout(this.refreshTimer);
@@ -341,10 +399,14 @@ var SessionManager = class {
   }
   scheduleRefresh(expiresIn) {
     if (this.refreshTimer) clearTimeout(this.refreshTimer);
-    const refreshIn = Math.max((expiresIn - 60) * 1e3, 5e3);
+    const refreshIn = Math.max((expiresIn - 60) * 1e3, 3e4);
     this.refreshTimer = setTimeout(() => this.refresh(), refreshIn);
   }
   async refresh() {
+    if (!this.refreshToken) {
+      this.clearSession();
+      return null;
+    }
     try {
       const res = await fetch(`${this.apiUrl}/v1/auth/token/refresh`, {
         method: "POST",
@@ -352,7 +414,8 @@ var SessionManager = class {
           "Content-Type": "application/json",
           "x-api-key": this.publishableKey
         },
-        credentials: "include"
+        credentials: "include",
+        body: JSON.stringify({ refreshToken: this.refreshToken })
       });
       if (!res.ok) {
         this.clearSession();
@@ -505,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;
@@ -514,27 +578,42 @@ var Authon = class {
         "authon-oauth",
         `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no`
       );
-      const handler = async (e) => {
-        if (e.data?.type === "authon-oauth-callback") {
-          window.removeEventListener("message", handler);
-          popup?.close();
-          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)));
+      let callbackReceived = false;
+      const pollTimer = setInterval(() => {
+        if (callbackReceived) return;
+        try {
+          if (!popup || popup.closed) {
+            clearInterval(pollTimer);
+            if (!callbackReceived) {
+              window.removeEventListener("message", handler);
+              this.modal?.hideLoading();
+            }
           }
+        } catch {
+        }
+      }, 500);
+      const handler = async (e) => {
+        if (e.data?.type !== "authon-oauth-callback") return;
+        callbackReceived = true;
+        window.removeEventListener("message", handler);
+        clearInterval(pollTimer);
+        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.6",
+  "version": "0.1.8",
   "description": "Authon core SDK — ShadowDOM login modal for any app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",