@hotosm/hanko-auth 0.5.2 → 0.5.4

package/README.md

@@ -1,6 +1,7 @@
 # Web Component: `<hotosm-auth>`
 
-Lit-based web component for HOTOSM SSO authentication with Hanko and OpenStreetMap integration.
+Lit-based web component for HOTOSM SSO authentication with Hanko and
+OpenStreetMap integration.
 
 ## Installation
 
@@ -56,57 +57,57 @@ export function AuthButton({ hankoUrl, onLogin }) {
 
 ### Core
 
-| Attribute   | Type   | Default                  | Description                                |
-| ----------- | ------ | ------------------------ | ------------------------------------------ |
-| `hanko-url` | string | `window.location.origin` | Login service URL for Hanko authentication |
-| `base-path` | string | `""`                     | Base URL for OSM OAuth endpoints           |
-| `auth-path` | string | `/api/auth/osm`          | OSM auth endpoints path                    |
+| Attribute | Type | Default | Description |
+| - | - | - | - |
+| `hanko-url` | string | `window.location.origin` | Login service URL |
+| `base-path` | string | `""` | Base URL for OSM OAuth endpoints |
+| `auth-path` | string | `/api/auth/osm` | OSM auth endpoints path |
 
 ### Behavior
 
-| Attribute        | Type    | Default        | Description                |
-| ---------------- | ------- | -------------- | -------------------------- |
-| `osm-required`   | boolean | `false`        | Require OSM connection     |
-| `osm-scopes`     | string  | `"read_prefs"` | Space-separated OSM scopes |
-| `auto-connect`   | boolean | `false`        | Auto-redirect to OSM OAuth |
-| `verify-session` | boolean | `false`        | Verify session on return   |
+| Attribute | Type | Default | Description |
+| - | - | - | - |
+| `osm-required` | boolean | `false` | Require OSM connection |
+| `osm-scopes` | string | `"read_prefs"` | OSM scopes (space-separated) |
+| `auto-connect` | boolean | `false` | Auto redirect to OSM OAuth |
+| `verify-session` | boolean | `false` | Verify session on return flow |
 
 ### Display
 
-| Attribute        | Type    | Default    | Description                                                       |
-| ---------------- | ------- | ---------- | ----------------------------------------------------------------- |
-| `show-profile`   | boolean | `false`    | Show full profile (vs header button)                              |
-| `display-name`   | string  | `""`       | Override display name                                             |
-| `lang`           | string  | `"en"`     | Language/locale code (e.g., "en", "es", "fr"). Enlish as fallback |
-| `button-variant` | string  | `"filled"` | Button style: `filled`, `outline`, or `plain`                     |
-| `button-color`   | string  | `"primary"`| Button color: `primary`, `neutral`, or `danger`                   |
-| `display`        | string  | `"default"`| Display mode: `default` (compact avatar) or `bar` (full-width bar with avatar + email + arrow) |
+| Attribute | Type | Default | Description |
+| - | - | - | - |
+| `show-profile` | boolean | `false` | Show full profile |
+| `display-name` | string | `""` | Override display name |
+| `lang` | string | `"en"` | Locale (e.g., "en", "es", "fr"), fallback "en" |
+| `button-variant` | string | `"filled"` | `filled`, `outline`, or `plain` |
+| `button-color` | string | `"primary"` | `primary`, `neutral`, or `danger` |
+| `display` | string | `"default"` | `default` (avatar) or `bar` mode |
 
 ### Redirects
 
-| Attribute               | Type   | Default | Description                |
+| Attribute | Type | Default | Description |
 | ----------------------- | ------ | ------- | -------------------------- |
-| `redirect-after-login`  | string | `""`    | URL after successful login |
-| `redirect-after-logout` | string | `""`    | URL after logout           |
+| `redirect-after-login` | string | `""` | URL after successful login |
+| `redirect-after-logout` | string | `""` | URL after logout |
 
 ### Cross-app
 
-| Attribute           | Type   | Default | Description                   |
+| Attribute | Type | Default | Description |
 | ------------------- | ------ | ------- | ----------------------------- |
-| `mapping-check-url` | string | `""`    | URL to check user mapping     |
-| `app-id`            | string | `""`    | App identifier for onboarding |
+| `mapping-check-url` | string | `""` | URL to check user mapping |
+| `app-id` | string | `""` | App identifier for onboarding |
 
 ## Events
 
 The component dispatches the following custom events:
 
-| Event           | Detail                 | When                        |
+| Event | Detail | When |
 | --------------- | ---------------------- | --------------------------- |
-| `hanko-login`   | `{ user: HankoUser }`  | User logged in              |
-| `osm-connected` | `{ osmData: OSMData }` | OSM account linked          |
-| `osm-skipped`   | `{}`                   | User skipped OSM connection |
-| `auth-complete` | `{}`                   | Auth flow complete          |
-| `logout`        | `{}`                   | User logged out             |
+| `hanko-login` | `{ user: HankoUser }` | User logged in |
+| `osm-connected` | `{ osmData: OSMData }` | OSM account linked |
+| `osm-skipped` | `{}` | User skipped OSM connection |
+| `auth-complete` | `{}` | Auth flow complete |
+| `logout` | `{}` | User logged out |
 
 ### Event Handling Example
 
@@ -129,9 +130,12 @@ auth.addEventListener("logout", () => {
 
 ## Flash Prevention (localStorage cache)
 
-On remount (e.g. React navigation), the component checks `localStorage` for a cached user under the key `hotosm-auth-user`. If found, it skips the loading spinner and renders immediately with the cached user.
+On remount (e.g. React navigation), the component checks `localStorage` for a
+cached user under the key `hotosm-auth-user`. If found, it skips the loading
+spinner and renders immediately with the cached user.
 
-The component reads from this key but does not write to it. The host app is responsible for keeping it in sync:
+The component reads from this key but does not write to it. The host app is
+responsible for keeping it in sync:
 
 ```js
 // Write on login
@@ -145,7 +149,8 @@ auth.addEventListener("logout", () => {
 });
 ```
 
-If the key is absent (first visit, after logout, or cleared storage), the component falls back to its normal loading flow — no change in behavior.
+If the key is absent (first visit, after logout, or cleared storage), the
+component falls back to its normal loading flow - no change in behavior.
 
 ## Usage Modes
 
@@ -194,7 +199,8 @@ Customize the login button appearance with `button-variant` and `button-color`:
 
 ### Bar Mode
 
-Shows a full-width bar with avatar, email, and chevron arrow (ideal for mobile drawers/menus):
+Shows a full-width bar with avatar, email, and chevron arrow (ideal for mobile
+drawers/menus):
 
 ```html
 <hotosm-auth
@@ -226,26 +232,26 @@ The component uses Shadow DOM and can be customized using CSS custom properties.
 
 #### Whole component
 
-| Property          | Description                                   | Default                                 |
-| ----------------- | --------------------------------------------- | --------------------------------------- |
-| `--font-family`   | Font family for all text in the component     | `system-ui, -apple-system, sans-serif`  |
-| `--font-weight`   | Font weight for all text in the component     | `500`                                   |
+| Property | Description | Default |
+| - | - | - |
+| `--font-family` | Font family for all text | `system-ui` |
+| `--font-weight` | Font weight for all text | `500` |
 
 #### Login button
 
-| Property                      | Description                        | Default                                                |
-| ----------------------------- | ---------------------------------- | ------------------------------------------------------ |
-| `--login-btn-margin`          | Margin around the login button     | `0`                                                    |
-| `--login-btn-padding`         | Padding inside the login button    | `var(--hot-spacing-x-small) var(--hot-spacing-medium)` |
-| `--login-btn-bg-color`        | Background color of login button   | `var(--hot-color-primary-1000)`                        |
-| `--login-btn-hover-bg-color`  | Background color on hover          | `var(--hot-color-primary-900)`                         |
-| `--login-btn-border-radius`   | Border radius of login button      | `var(--hot-border-radius-medium)`                      |
-| `--login-btn-text-color`      | Text color of login button         | `white`                                                |
-| `--login-btn-text-size`       | Font size of login button text     | `var(--hot-font-size-medium)`                          |
-| `--login-btn-font-family`     | Font family of login button        | falls back to `--font-family`                          |
-| `--login-btn-font-weight`     | Font weight of login button        | falls back to `--font-weight`                          |
-
-**Example:**
+| Property | Description | Default |
+| - | - | - |
+| `--login-btn-margin` | Margin around the login button | `0` |
+| `--login-btn-padding` | Padding inside button | `x-small ...` |
+| `--login-btn-bg-color` | Button bg color | `var(--hot-color-primary-1000)` |
+| `--login-btn-hover-bg-color` | Hover bg | `primary-900` |
+| `--login-btn-border-radius` | Button radius | `radius-medium` |
+| `--login-btn-text-color` | Button text color | `white` |
+| `--login-btn-text-size` | Button text size | `var(--hot-font-size-medium)` |
+| `--login-btn-font-family` | Button font family | from `--font-family` |
+| `--login-btn-font-weight` | Button font weight | from `--font-weight` |
+
+### Example
 
 ```css
 hotosm-auth {

package/dist/hanko-auth.esm.js

@@ -4018,7 +4018,7 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =
 
   .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)
@@ -4047,11 +4047,11 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =
     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));
@@ -4074,8 +4074,8 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =
     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));
@@ -4101,7 +4101,7 @@ const as = () => (nn && nn.abort(), nn = new AbortController(), nn.signal), Lt =
     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));
@@ -4848,7 +4848,7 @@ let oe = class extends qt {
   constructor() {
     super(), this.hankoUrlAttr = "", this.basePath = "", this.authPath = "/api/auth/osm", this.osmRequired = !1, this.osmScopes = "read_prefs", this.showProfile = !1, this.redirectAfterLogin = "", this.autoConnect = !1, this.verifySession = !1, this.redirectAfterLogout = "", this.displayNameAttr = "", this.mappingCheckUrl = "", this.appId = "", this.loginUrl = "", this.lang = "en", this.buttonVariant = "plain", this.buttonColor = "primary", this.display = "default", this.user = null, this.osmConnected = !1, this.osmData = null, this.osmLoading = !1, this.loading = !0, this.error = null, this.hankoReady = !1, this.profileDisplayName = "", this.profilePictureUrl = "", this.hasAppMapping = !1, this.userProfileLanguage = null, this.isOpen = !1, this.handleOutsideClick = (n) => {
       this.contains(n.target) || this.closeDropdown();
-    }, this._debugMode = !1, this._lastSessionId = null, this._hanko = null, this._isPrimary = !1, this._hankoObserver = null, this._signUpHeadlines = /* @__PURE__ */ new Set([
+    }, this._debugMode = !1, this._lastSessionId = null, this._hanko = null, this._isPrimary = !1, this._sessionCheckFailures = 0, this._sessionCheckBackoffTimer = null, this._hankoObserver = null, this._signUpHeadlines = /* @__PURE__ */ new Set([
       "Create an account",
       // en (our override)
       "Crear cuenta",
@@ -4875,9 +4875,9 @@ let oe = class extends qt {
       "Entrar"
       // pt loginEmailNoSignup
     ]), this._handleVisibilityChange = () => {
-      this._isPrimary && !document.hidden && !this.showProfile && !this.user && (this.log("Page visible, re-checking session..."), this.checkSession());
+      this._isPrimary && (this._sessionCheckBackoffTimer || !document.hidden && !this.showProfile && !this.user && (this.log("Page visible, re-checking session..."), this.checkSession()));
     }, this._handleWindowFocus = () => {
-      this._isPrimary && !this.showProfile && !this.user && (this.log("Window focused, re-checking session..."), this.checkSession());
+      this._isPrimary && (this._sessionCheckBackoffTimer || !this.showProfile && !this.user && (this.log("Window focused, re-checking session..."), this.checkSession()));
     }, this._handleExternalLogin = (n) => {
       var e;
       if (!this._isPrimary) return;
@@ -5040,6 +5040,13 @@ let oe = class extends qt {
       this.logError("Failed to initialize hanko-auth:", n), this.error = n.message, this.loading = !1, this._broadcastState();
     }
   }
+  _scheduleSessionRetry() {
+    if (this._sessionCheckBackoffTimer) return;
+    const n = Math.min(1e3 * 2 ** this._sessionCheckFailures, 6e4);
+    this.log(`Session check failed, retrying in ${n / 1e3}s (attempt ${this._sessionCheckFailures})`), this._sessionCheckBackoffTimer = setTimeout(() => {
+      this._sessionCheckBackoffTimer = null, this.checkSession();
+    }, n);
+  }
   async checkSession() {
     var n, t, e, o, i;
     if (this.log("Checking for existing Hanko session..."), !this._hanko) {
@@ -5070,7 +5077,7 @@ let oe = class extends qt {
             ));
             return;
           }
-          this.log("Valid Hanko session found via cookie"), this.log("Session data:", s);
+          this._sessionCheckFailures = 0, this.log("Valid Hanko session found via cookie"), this.log("Session data:", s);
           try {
             const d = await fetch(`${this.hankoUrl}/me`, {
               method: "GET",
@@ -5134,10 +5141,12 @@ let oe = class extends qt {
         } else
           this.log("No valid session cookie found - user needs to login");
       } catch (r) {
-        this.log("Session validation failed:", r), this.log("No valid session - user needs to login");
+        this._sessionCheckFailures++, this.log("Session validation failed:", r), this._scheduleSessionRetry();
+        return;
       }
     } catch (r) {
-      this.log("Session check error:", r), this.log("No existing session - user needs to login");
+      this._sessionCheckFailures++, this.log("Session check error:", r), this._scheduleSessionRetry();
+      return;
     } finally {
       this._isPrimary && this._broadcastState();
     }