@mundogamernetwork/shared-ui 1.16.4 → 1.16.6

package/components/ui/MgHeaderUIUser.vue

@@ -60,9 +60,35 @@ const handleToggleOnline = () => {
 <template>
 	<div ref="refDiv" :class="{ 'ui-config-user': true, 'signed-in': signedIn }">
 		<div ref="wrapper" class="ui-config-user__content">
-			<MgLoginRegisterMenu v-if="!signedIn" :dropdown="false" />
-
-			<div v-else class="signed-in-menu">
+			<!--
+				This MUST render a different root tag than MgLoginRegisterMenu's
+				own root (a <div>) — a plain :key difference is NOT enough here.
+				signedIn always starts false and flips true only after the async
+				/auth/user check resolves (SSR never has the session, so every
+				load — not just a race — renders guest first, then the real
+				state client-side). When both branches are <div>s, whatever
+				code path handles that guest→signed-in swap (traced to Vue's
+				hydration-mismatch recovery, not the plain runtime v-if/v-else
+				patch — a distinct :key on each branch demonstrably did NOT
+				stop it) reuses the existing DOM node instead of replacing it:
+				the node keeps MgLoginRegisterMenu's own class
+				("mg-login-register") and scope attribute while only its
+				children get patched to the signed-in markup. Result: the
+				signed-in content renders styled by the GUEST component's CSS
+				(340px guest width instead of 240px, and .username/
+				.btn-primary-outline/.status-toggle never match their real
+				".signed-in-menu" ancestor selector, so they fall through to
+				unstyled/inherited color instead of var(--active) — text goes
+				near-invisible on any host whose global default text color is
+				dark, e.g. jobs-frontend's Bootstrap default). A genuinely
+				different tag (section, not div) forces a real replace — this
+				was verified against a live reproduction, not just reasoned
+				about; do not "simplify" this back to <div> without re-testing
+				the actual guest→signed-in transition, not just a hard reload.
+			-->
+			<MgLoginRegisterMenu v-if="!signedIn" key="guest" :dropdown="false" />
+
+			<section v-else key="signed-in" class="signed-in-menu">
 				<div class="row info-row ps-0">
 					<div class="col-auto px-3">
 						<div v-if="!user?.avatar_url" class="no-avatar-wrapper">
@@ -130,7 +156,7 @@ const handleToggleOnline = () => {
 						{{ $t("account_menu.buttons.logout") }}
 					</button>
 				</div>
-			</div>
+			</section>
 		</div>
 	</div>
 </template>

package/composables/useLogout.ts

@@ -1,41 +1,56 @@
-import { default as AuthService } from "../services/authService";
-
 export function useLogout() {
 	const authStore = useAuthStore();
 	const runtimeConfig = useRuntimeConfig();
 	const accountsBaseUrl = runtimeConfig.public.mgSharedUi?.accountsBaseUrl || runtimeConfig.public.accountsBaseUrl;
+	// Same host login uses (see MgLoginRegisterMenu's goLogin) — the platform's
+	// own API, not accountsBaseUrl. That's where OAuthLogoutController's real
+	// /logout route lives.
+	const apiBase = (
+		(runtimeConfig.public.mgSharedUi?.apiBaseURL as string) ||
+		(runtimeConfig.public.apiBaseURL as string) ||
+		(import.meta.env.VITE_API_BASE_URL as string) ||
+		""
+	).replace(/\/api\/v1\/?$/, "");
 
 	const performLogout = async (redirectTo?: string) => {
-		try {
-			await AuthService.logout();
-		} catch {
-			// continue with cleanup even if server call fails
-		}
-
-		// Clear auth state
+		// Clear client-visible auth state immediately so the UI doesn't sit in
+		// a signed-in state while the real server-side logout below completes.
 		authStore.clearUser();
 		authStore.$reset();
-
-		// Clear cookies client-side
-		if (typeof document !== "undefined") {
-			const cookiesToClear = ["oauth_token", "browser_id", "mundo_gamer_network_session", "XSRF-TOKEN"];
-			cookiesToClear.forEach((name) => {
-				document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
-				document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=${window.location.hostname};`;
-				document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.${window.location.hostname};`;
-			});
-		}
-
-		// Clear localStorage auth data
 		if (typeof localStorage !== "undefined") {
 			["accessToken", "userData", "userAbility"].forEach((key) => {
 				localStorage.removeItem(key);
 			});
 		}
 
-		// Redirect
 		const target = redirectTo || `${accountsBaseUrl}/login`;
-		window.location.href = target;
+
+		if (typeof document === "undefined" || !apiBase) {
+			if (typeof window !== "undefined") window.location.href = target;
+			return;
+		}
+
+		// The real session is an httpOnly `oauth_token` cookie set by the
+		// platform's own API — document.cookie can never read or clear an
+		// httpOnly cookie, on any domain. Only a real server response can clear
+		// it (a Set-Cookie header the browser actually honors), which means a
+		// genuine top-level POST navigation to that API's own /logout route,
+		// not an axios/fetch call whose response body a script merely inspects.
+		// POST is required (the route isn't registered for GET) and CSRF is
+		// already exempted server-side for exactly this cross-origin case.
+		const form = document.createElement("form");
+		form.method = "POST";
+		form.action = `${apiBase}/logout`;
+		form.style.display = "none";
+
+		const redirectField = document.createElement("input");
+		redirectField.type = "hidden";
+		redirectField.name = "redirect_to";
+		redirectField.value = target;
+		form.appendChild(redirectField);
+
+		document.body.appendChild(form);
+		form.submit();
 	};
 
 	return { performLogout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.16.4",
+  "version": "1.16.6",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",