Fix redirect loop on logout and session expired

Author: hg1g

auth-libs/web-component/dist/hanko-auth.esm.js

@@ -4502,9 +4502,12 @@ let ge = class extends Ut {
       } catch (n) {
         this.logError("Hanko logout failed:", n);
       }
-    this._clearAuthState(), this.log(
+    if (this._clearAuthState(), this.log(
       "✅ Logout complete - component will re-render with updated state"
-    ), this.redirectAfterLogout && (this.log("🔄 Redirecting after logout to:", this.redirectAfterLogout), window.location.href = this.redirectAfterLogout);
+    ), this.redirectAfterLogout) {
+      const n = window.location.href.replace(/\/$/, ""), e = this.redirectAfterLogout.replace(/\/$/, "");
+      n !== e && !n.startsWith(e + "#") ? (this.log("🔄 Redirecting after logout to:", this.redirectAfterLogout), window.location.href = this.redirectAfterLogout) : this.log("⏭️ Already on logout target, skipping redirect");
+    }
   }
   /**
    * Clear all auth state - shared between logout and session expired handlers
@@ -4542,19 +4545,22 @@ let ge = class extends Ut {
     } catch (n) {
       this.logError("❌ OSM disconnect failed:", n);
     }
-    this._clearAuthState(), this.log("✅ Session cleanup complete"), this.redirectAfterLogout && (this.log(
-      "🔄 Redirecting after session expired to:",
-      this.redirectAfterLogout
-    ), window.location.href = this.redirectAfterLogout);
+    if (this._clearAuthState(), this.log("✅ Session cleanup complete"), this.redirectAfterLogout) {
+      const n = window.location.href.replace(/\/$/, ""), e = this.redirectAfterLogout.replace(/\/$/, "");
+      n !== e && !n.startsWith(e + "#") ? (this.log(
+        "🔄 Redirecting after session expired to:",
+        this.redirectAfterLogout
+      ), window.location.href = this.redirectAfterLogout) : this.log("⏭️ Already on logout target, skipping redirect");
+    }
   }
   handleUserLoggedOut() {
     this.log("🚪 User logged out in another window/tab"), this.handleSessionExpired();
   }
   handleDropdownSelect(n) {
     const e = n.detail.item.value;
     if (this.log("🎯 Dropdown item selected:", e), e === "profile") {
-      const t = this.hankoUrl, o = this.redirectAfterLogin || window.location.origin;
-      window.location.href = `${t}/app/profile?return_to=${encodeURIComponent(o)}`;
+      const t = this.loginUrl || this.hankoUrl, o = this.redirectAfterLogin || window.location.origin;
+      window.location.href = `${t}/profile?return_to=${encodeURIComponent(o)}`;
     } else if (e === "connect-osm") {
       const i = window.location.pathname.includes("/app") ? window.location.origin : window.location.href, s = this.hankoUrl;
       window.location.href = `${s}/app?return_to=${encodeURIComponent(

auth-libs/web-component/dist/hanko-auth.iife.js

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",
   "type": "module",
   "main": "dist/hanko-auth.umd.js",

auth-libs/web-component/dist/hanko-auth.umd.js

@@ -1292,10 +1292,16 @@ export class HankoAuth extends LitElement {
       "✅ Logout complete - component will re-render with updated state",
     );
 
-    // Redirect after logout if configured
+    // Redirect after logout if configured (but not if already there)
     if (this.redirectAfterLogout) {
-      this.log("🔄 Redirecting after logout to:", this.redirectAfterLogout);
-      window.location.href = this.redirectAfterLogout;
+      const currentUrl = window.location.href.replace(/\/$/, "");
+      const targetUrl = this.redirectAfterLogout.replace(/\/$/, "");
+      if (currentUrl !== targetUrl && !currentUrl.startsWith(targetUrl + "#")) {
+        this.log("🔄 Redirecting after logout to:", this.redirectAfterLogout);
+        window.location.href = this.redirectAfterLogout;
+      } else {
+        this.log("⏭️ Already on logout target, skipping redirect");
+      }
     }
     // Otherwise let Lit's reactivity handle the re-render
   }
@@ -1384,13 +1390,19 @@ export class HankoAuth extends LitElement {
 
     this.log("✅ Session cleanup complete");
 
-    // Redirect after session expired if configured
+    // Redirect after session expired if configured (but not if already there)
     if (this.redirectAfterLogout) {
-      this.log(
-        "🔄 Redirecting after session expired to:",
-        this.redirectAfterLogout,
-      );
-      window.location.href = this.redirectAfterLogout;
+      const currentUrl = window.location.href.replace(/\/$/, ""); // Remove trailing slash
+      const targetUrl = this.redirectAfterLogout.replace(/\/$/, "");
+      if (currentUrl !== targetUrl && !currentUrl.startsWith(targetUrl + "#")) {
+        this.log(
+          "🔄 Redirecting after session expired to:",
+          this.redirectAfterLogout,
+        );
+        window.location.href = this.redirectAfterLogout;
+      } else {
+        this.log("⏭️ Already on logout target, skipping redirect");
+      }
     }
     // Otherwise component will re-render and show login button
   }
@@ -1406,11 +1418,11 @@ export class HankoAuth extends LitElement {
     this.log("🎯 Dropdown item selected:", selectedValue);
 
     if (selectedValue === "profile") {
-      // Profile page lives on the login site
-      // Pass return URL so profile can navigate back to the app
-      const baseUrl = this.hankoUrl;
+      // Profile page lives on the login site (or standalone app's login page)
+      // Use loginUrl if set (standalone mode), otherwise hankoUrl
+      const baseUrl = this.loginUrl || this.hankoUrl;
       const returnTo = this.redirectAfterLogin || window.location.origin;
-      window.location.href = `${baseUrl}/app/profile?return_to=${encodeURIComponent(returnTo)}`;
+      window.location.href = `${baseUrl}/profile?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;