@hotosm/hanko-auth 0.4.9 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",
   "type": "module",
   "main": "dist/hanko-auth.umd.js",
@@ -46,7 +46,7 @@
     "url": "https://github.com/hotosm/login/issues"
   },
   "dependencies": {
-    "@teamhanko/hanko-elements": "^1.0.0",
+    "@teamhanko/hanko-elements": "^2.5.0",
     "lit": "^3.3.1"
   },
   "devDependencies": {

package/src/hanko-auth.ts

@@ -1,15 +1,6 @@
-/**
- * @hotosm/hanko-auth Web Component (Lit Version)
- *
- * Smart authentication component that handles:
- * - Hanko SSO (Google, GitHub, Email)
- * - Optional OSM connection
- * - Session management
- * - Event dispatching
- * - URL fallback chain for production builds
- */
-
-import { LitElement, html, css } from "lit";
+/** HOTOSM Hanko auth web component. */
+
+import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { keyed } from "lit/directives/keyed.js";
 import { register } from "@teamhanko/hanko-elements";
@@ -203,7 +194,6 @@ export class HankoAuth extends LitElement {
   }
 
   // Private fields
-  private _trailingSlashCache: Record<string, boolean> = {};
   private _debugMode = false;
   private _lastSessionId: string | null = null;
   private _hanko: any = null;
@@ -234,28 +224,28 @@ export class HankoAuth extends LitElement {
     if (metaTag) {
       const content = metaTag.getAttribute("content");
       if (content) {
-        this.log("🔍 hanko-url auto-detected from <meta> tag:", content);
+        this.log("hanko-url auto-detected from <meta> tag:", content);
         return content;
       }
     }
 
     if ((window as any).HANKO_URL) {
       this.log(
-        "🔍 hanko-url auto-detected from window.HANKO_URL:",
+        "hanko-url auto-detected from window.HANKO_URL:",
         (window as any).HANKO_URL,
       );
       return (window as any).HANKO_URL;
     }
 
     const origin = window.location.origin;
-    this.log("🔍 hanko-url auto-detected from window.location.origin:", origin);
+    this.log("hanko-url auto-detected from window.location.origin:", origin);
     return origin;
   }
 
   connectedCallback() {
     super.connectedCallback();
     this._debugMode = this._checkDebugMode();
-    this.log("🔌 hanko-auth connectedCallback called");
+    this.log("hanko-auth connectedCallback called");
 
     // Inject Hot styles early, before any Hanko elements render
     this.injectHotStyles();
@@ -273,7 +263,7 @@ export class HankoAuth extends LitElement {
 
   // Use firstUpdated instead of connectedCallback to ensure React props are set
   firstUpdated() {
-    this.log("🔌 hanko-auth firstUpdated called");
+    this.log("hanko-auth firstUpdated called");
     this.log("  hankoUrl:", this.hankoUrl);
     this.log("  basePath:", this.basePath);
 
@@ -375,7 +365,7 @@ export class HankoAuth extends LitElement {
     if (!this.showProfile && !this.user) {
       // Window focused, we're in header mode, and no user is logged in
       // Re-check session in case user logged in
-      this.log("🎯 Window focused, re-checking session...");
+      this.log("Window focused, re-checking session...");
       this.checkSession();
     }
   };
@@ -387,7 +377,7 @@ export class HankoAuth extends LitElement {
     const customEvent = event as CustomEvent;
     if (!this.showProfile && !this.user && customEvent.detail?.user) {
       // Another component (e.g., login page) logged in
-      this.log("🔔 External login detected, updating user state...");
+      this.log("External login detected, updating user state...");
       this.user = customEvent.detail.user;
       this._broadcastState();
       // Also re-check OSM connection (only if required)
@@ -426,10 +416,6 @@ export class HankoAuth extends LitElement {
     return langTranslations[key] || translations.en[key] || key;
   }
 
-  private warn(...args: any[]) {
-    console.warn(...args);
-  }
-
   private logError(...args: any[]) {
     console.error(...args);
   }
@@ -437,24 +423,16 @@ export class HankoAuth extends LitElement {
   private getBasePath(): string {
     // Use basePath property directly (works with both attribute and React props)
     if (this.basePath) {
-      this.log("🔍 getBasePath() using basePath:", this.basePath);
+      this.log("getBasePath() using basePath:", this.basePath);
       return this.basePath;
     }
 
     // For single-page apps (like Portal), default to empty base path
     // The authPath already contains the full API path
-    this.log("🔍 getBasePath() using default: empty string");
+    this.log("getBasePath() using default: empty string");
     return "";
   }
 
-  private addTrailingSlash(path: string, basePath: string): string {
-    const needsSlash = this._trailingSlashCache[basePath];
-    if (needsSlash !== undefined && needsSlash && !path.endsWith("/")) {
-      return path + "/";
-    }
-    return path;
-  }
-
   // styles injected to ensure global availability
   private injectHotStyles() {
     const stylesheets = [
@@ -482,7 +460,7 @@ export class HankoAuth extends LitElement {
   private async init() {
     // Only primary instance should initialize
     if (!this._isPrimary) {
-      this.log("⏭️ Not primary, skipping init...");
+      this.log("Not primary, skipping init...");
       return;
     }
 
@@ -521,12 +499,12 @@ export class HankoAuth extends LitElement {
 
       // Set up session lifecycle event listeners (these persist across the component lifecycle)
       this._hanko.onSessionExpired(() => {
-        this.log("🕒 Hanko session expired event received");
+        this.log("Hanko session expired event received");
         this.handleSessionExpired();
       });
 
       this._hanko.onUserLoggedOut(() => {
-        this.log("🚪 Hanko user logged out event received");
+        this.log("Hanko user logged out event received");
         this.handleUserLoggedOut();
       });
 
@@ -553,7 +531,7 @@ export class HankoAuth extends LitElement {
   }
 
   private async checkSession() {
-    this.log("🔍 Checking for existing Hanko session...");
+    this.log("Checking for existing Hanko session...");
 
     if (!this._hanko) {
       this.log("Hanko instance not initialized yet");
@@ -585,6 +563,13 @@ export class HankoAuth extends LitElement {
             this.log(
               "Session validation returned is_valid:false - no valid session",
             );
+            if (this.user) {
+              this.user = null;
+              this.profilePictureUrl = "";
+              this.dispatchEvent(
+                new CustomEvent("logout", { bubbles: true, composed: true }),
+              );
+            }
             return;
           }
 
@@ -625,12 +610,12 @@ export class HankoAuth extends LitElement {
             if (needsSdkFallback) {
               this.log("Using SDK to get user with email");
               // Fallback to SDK method which has email
-              const user = await this._hanko.user.getCurrent();
+              const user = await this._hanko.getCurrentUser();
               this.user = {
-                id: user.id,
-                email: user.email,
-                username: user.username,
-                emailVerified: user.email_verified || false,
+                id: user.user_id,
+                email: user.emails?.[0]?.address || null,
+                username: user.username?.username || null,
+                emailVerified: user.emails?.[0]?.is_verified || false,
               };
             }
           } catch (userError) {
@@ -897,12 +882,9 @@ export class HankoAuth extends LitElement {
           this.log("Display name set to:", this.profileDisplayName);
         }
 
-        // picture_url is always set by the backend (Gravatar fallback); osm_avatar_url as secondary
-        const picUrl = profile.picture_url || profile.osm_avatar_url;
-        if (picUrl) {
-          this.profilePictureUrl = picUrl;
-          this.log("Profile picture set to:", this.profilePictureUrl);
-        }
+        const picUrl = profile.osm_avatar_url || profile.picture_url;
+        this.profilePictureUrl = picUrl || "";
+        this.log("Profile picture set to:", this.profilePictureUrl);
 
         // Set language from user profile if available
         if (profile.language) {
@@ -927,7 +909,7 @@ export class HankoAuth extends LitElement {
       this.user === null &&
       this.showProfile
     ) {
-      this.log("🔄 User logged out, re-attaching event listeners...");
+      this.log("User logged out, re-attaching event listeners...");
       this._currentHankoAuthElement = null;
       this.setupEventListeners();
     }
@@ -946,7 +928,7 @@ export class HankoAuth extends LitElement {
 
       if (hankoAuth) {
         this._currentHankoAuthElement = hankoAuth;
-        this.log("🎯 Attaching event listeners to hanko-auth element");
+        this.log("Attaching event listeners to hanko-auth element");
 
         hankoAuth.addEventListener("onSessionCreated", (e: any) => {
           this.log(`Hanko event: onSessionCreated`, e.detail);
@@ -1034,14 +1016,14 @@ export class HankoAuth extends LitElement {
           setTimeout(() => reject(new Error("SDK timeout")), 5000),
         );
         const user = (await Promise.race([
-          this._hanko.user.getCurrent(),
+          this._hanko.getCurrentUser(),
           timeoutPromise,
         ])) as any;
         this.user = {
-          id: user.id,
-          email: user.email,
-          username: user.username,
-          emailVerified: user.email_verified || false,
+          id: user.user_id,
+          email: user.emails?.[0]?.address || null,
+          username: user.username?.username || null,
+          emailVerified: user.emails?.[0]?.is_verified || false,
         };
         userInfoRetrieved = true;
         this.log("User info retrieved via SDK fallback");
@@ -1168,7 +1150,7 @@ export class HankoAuth extends LitElement {
         // This is a redirect response
         const redirectUrl = response.headers.get("Location") || response.url;
         this.log("Got redirect URL:", redirectUrl);
-        window.location.href = redirectUrl;
+window.location.href = redirectUrl;
       } else if (response.status >= 300 && response.status < 400) {
         const redirectUrl = response.headers.get("Location");
         this.log("Got redirect URL from header:", redirectUrl);
@@ -1219,7 +1201,7 @@ export class HankoAuth extends LitElement {
 
     if (this._hanko) {
       try {
-        await this._hanko.user.logout();
+        await this._hanko.logout();
         this.log("Hanko logout successful");
       } catch (error) {
         this.logError("Hanko logout failed:", error);
@@ -1386,47 +1368,9 @@ export class HankoAuth extends LitElement {
     // Close dropdown after selection
     this.closeDropdown();
   }
-  private oldHandleDropdownSelect(event: CustomEvent) {
-    const selectedValue = event.detail.item.value;
-    this.log("🎯 Dropdown item selected:", selectedValue);
-
-    if (selectedValue === "profile") {
-      // Profile page: standalone apps have their own, others use central login service
-      // loginUrl already includes /app, hankoUrl doesn't
-      const returnTo = this.redirectAfterLogin || window.location.origin;
-      const profileUrl = this.loginUrl
-        ? `${this.loginUrl}/profile`
-        : `${this.hankoUrl}/app/profile`;
-      window.location.href = `${profileUrl}?return_to=${encodeURIComponent(returnTo)}`;
-    } else if (selectedValue === "connect-osm") {
-      // Smart return_to: if already on a login page, redirect to home instead
-      const currentPath = window.location.pathname;
-      const isOnLoginPage = currentPath.includes("/app");
-      const returnTo = isOnLoginPage
-        ? window.location.origin
-        : window.location.href;
-
-      // Use the getter which handles all fallbacks correctly
-      const baseUrl = this.hankoUrl;
-      window.location.href = `${baseUrl}/app?return_to=${encodeURIComponent(
-        returnTo,
-      )}&osm_required=true`;
-    } else if (selectedValue === "logout") {
-      this.handleLogout();
-    }
-  }
-
-  private handleSkipOSM() {
-    this.dispatchEvent(new CustomEvent("osm-skipped"));
-    this.dispatchEvent(new CustomEvent("auth-complete"));
-    if (this.redirectAfterLogin) {
-      window.location.href = this.redirectAfterLogin;
-    }
-  }
-
   render() {
     this.log(
-      "🎨 RENDER - showProfile:",
+      "RENDER - showProfile:",
       this.showProfile,
       "user:",
       !!this.user,
@@ -1464,8 +1408,6 @@ export class HankoAuth extends LitElement {
       const initial = displayName ? displayName[0].toUpperCase() : "U";
 
       if (this.showProfile) {
-        // Show full profile view
-        // TODO check use cases
         return html`
           <div class="container">
             <div class="profile">
@@ -1672,13 +1614,12 @@ export class HankoAuth extends LitElement {
         `;
       }
     } else {
-      // Not logged in
+      // Not logged in.
       if (this.showProfile) {
-        // On login page - show full Hanko auth form
-        // Don't render until Hanko is registered to prevent 404 errors
+        // Login page mode: render full Hanko form after registration is ready.
         if (!this.hankoReady) {
           this.log(
-            "⏳ Waiting for Hanko registration before rendering form...",
+            "Waiting for Hanko registration before rendering form...",
           );
           return html`<span class="loading-placeholder"
             ><span class="loading-placeholder-text">${this.t("logIn")}</span
@@ -1717,9 +1658,7 @@ export class HankoAuth extends LitElement {
           </div>
         `;
       } else {
-        // In header - show login link
-        // Use redirectAfterLogin if set, otherwise use current URL
-        // Smart return_to: if already on a login page, redirect to home instead
+        // Header mode: render login link with a safe return_to target.
         const currentPath = window.location.pathname;
         const isOnLoginPage = currentPath.includes("/app");
         const returnTo =
@@ -1730,34 +1669,15 @@ export class HankoAuth extends LitElement {
         const autoConnectParam =
           urlParams.get("auto_connect") === "true" ? "&auto_connect=true" : "";
 
-        // Use the getter which handles all fallbacks correctly
         const baseUrl = this.hankoUrl;
-        this.log("🔗 Login URL base:", baseUrl);
+        this.log("Login URL base:", baseUrl);
 
-        // Use custom loginUrl if provided (for standalone mode), otherwise use ${hankoUrl}/app
+        // Use custom loginUrl when provided; fallback to {hankoUrl}/app.
         const loginBase = this.loginUrl || `${baseUrl}/app`;
         const loginUrl = `${loginBase}?return_to=${encodeURIComponent(
           returnTo,
         )}${this.osmRequired ? "&osm_required=true" : ""}${autoConnectParam}&lang=${this.lang}`;
 
-        /*  if (this.display === "bar") {
-          return html`<a
-            class="bar-trigger login-link ${this.buttonVariant} ${this.buttonColor}"
-            href="${loginUrl}"
-            @click=${(e: Event) => {
-              e.preventDefault();
-              window.location.href = loginUrl;
-            }}
-          >
-            <span class="bar-email">${this.t("logIn")}</span>
-            <img
-              src="${chevronDownIcon}"
-              class="bar-chevron"
-              alt=""
-            />
-          </a>`;
-        } */
-
         return html`<a
           class="login-link ${this.buttonVariant} ${this.buttonColor}"
           href="${loginUrl}"