@hotosm/hanko-auth 0.5.2 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",
   "type": "module",
   "main": "dist/hanko-auth.umd.js",
@@ -17,13 +17,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "watch": "vite build --watch",
-    "preview": "vite preview",
-    "prepublishOnly": "pnpm build"
-  },
   "keywords": [
     "hotosm",
     "hanko",
@@ -51,5 +44,11 @@
   },
   "devDependencies": {
     "vite": "^5.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "preview": "vite preview"
   }
-}
+}

package/src/hanko-auth.styles.ts

@@ -274,7 +274,7 @@ export const styles = css`
 
   .login-link {
     color: var(--login-btn-text-color, white);
-    font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
+    font-size: var(--hot-font-size-small);
     border-radius: var(
       --login-btn-border-radius,
       var(--hot-border-radius-medium)
@@ -303,11 +303,11 @@ export const styles = css`
     border: none;
   }
   .login-link.filled.primary {
-    background: var(--login-btn-bg-color, var(--hot-color-primary-1000));
+    background: var(--hot-color-gray-950);
     color: var(--login-btn-text-color, white);
   }
   .login-link.filled.primary:hover {
-    background: var(--login-btn-hover-bg-color, var(--hot-color-primary-900));
+    background: var(--hot-color-primary-800);
   }
   .login-link.filled.neutral {
     background: var(--login-btn-bg-color, var(--hot-color-neutral-600));
@@ -330,8 +330,8 @@ export const styles = css`
     border: 1px solid;
   }
   .login-link.outline.primary {
-    border-color: var(--login-btn-bg-color, var(--hot-color-primary-1000));
-    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
+    border-color: var(--login-btn-bg-color, var(--hot-color-primary-950));
+    color: var(--login-btn-text-color, var(--hot-color-primary-950));
   }
   .login-link.outline.primary:hover {
     background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));
@@ -357,7 +357,7 @@ export const styles = css`
     border: none;
   }
   .login-link.plain.primary {
-    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
+    color: var(--login-btn-text-color, var(--hot-color-primary-950));
   }
   .login-link.plain.primary:hover {
     background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));

package/src/hanko-auth.ts

@@ -195,6 +195,8 @@ export class HankoAuth extends LitElement {
   private _lastSessionId: string | null = null;
   private _hanko: any = null;
   private _isPrimary = false; // Is this the primary instance?
+  private _sessionCheckFailures = 0;
+  private _sessionCheckBackoffTimer: ReturnType<typeof setTimeout> | null = null;
   private _hankoObserver: MutationObserver | null = null;
 
   // Hanko signup headline text across all supported languages (used for subtitle injection)
@@ -368,6 +370,8 @@ export class HankoAuth extends LitElement {
   private _handleVisibilityChange = () => {
     // Only primary instance should handle visibility changes to prevent race conditions
     if (!this._isPrimary) return;
+    // Don't re-check if a backoff retry is already scheduled
+    if (this._sessionCheckBackoffTimer) return;
 
     if (!document.hidden && !this.showProfile && !this.user) {
       // Page became visible, we're in header mode, and no user is logged in
@@ -380,6 +384,8 @@ export class HankoAuth extends LitElement {
   private _handleWindowFocus = () => {
     // Only primary instance should handle window focus to prevent race conditions
     if (!this._isPrimary) return;
+    // Don't re-check if a backoff retry is already scheduled
+    if (this._sessionCheckBackoffTimer) return;
 
     if (!this.showProfile && !this.user) {
       // Window focused, we're in header mode, and no user is logged in
@@ -549,6 +555,16 @@ export class HankoAuth extends LitElement {
     }
   }
 
+  private _scheduleSessionRetry() {
+    if (this._sessionCheckBackoffTimer) return; // already scheduled
+    const delay = Math.min(1000 * 2 ** this._sessionCheckFailures, 60000);
+    this.log(`Session check failed, retrying in ${delay / 1000}s (attempt ${this._sessionCheckFailures})`);
+    this._sessionCheckBackoffTimer = setTimeout(() => {
+      this._sessionCheckBackoffTimer = null;
+      this.checkSession();
+    }, delay);
+  }
+
   private async checkSession() {
     this.log("Checking for existing Hanko session...");
 
@@ -592,6 +608,7 @@ export class HankoAuth extends LitElement {
             return;
           }
 
+          this._sessionCheckFailures = 0; // reset backoff on success
           this.log("Valid Hanko session found via cookie");
           this.log("Session data:", sessionData);
 
@@ -710,12 +727,16 @@ export class HankoAuth extends LitElement {
           this.log("No valid session cookie found - user needs to login");
         }
       } catch (validateError) {
+        this._sessionCheckFailures++;
         this.log("Session validation failed:", validateError);
-        this.log("No valid session - user needs to login");
+        this._scheduleSessionRetry();
+        return;
       }
     } catch (error) {
+      this._sessionCheckFailures++;
       this.log("Session check error:", error);
-      this.log("No existing session - user needs to login");
+      this._scheduleSessionRetry();
+      return;
     } finally {
       // Broadcast state changes to other instances
       if (this._isPrimary) {