@mundogamernetwork/shared-ui 1.16.3 → 1.16.5

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/nuxt.config.ts

@@ -72,28 +72,20 @@ export default defineNuxtConfig({
 	build: {
 		transpile: ['@vue-leaflet/vue-leaflet'],
 	},
-	// pusher-js's browser build is a webpack-bundled UMD file: `module.exports
-	// = factory()` where factory() internally does
-	// `__webpack_exports__["default"] = Pusher` and returns that object. To a
-	// real ES module consumer that looks exactly like "this CJS module wants
-	// default-export interop", but esbuild's static CJS/ESM detection doesn't
-	// reliably recognize that shape here — on some dep-graph paths (this repo
-	// doesn't import pusher-js directly, plugins/echo.client.ts here and in
-	// several consuming apps' own copies of the same plugin do) the raw dist
-	// file gets served to the browser as-is instead of through Vite's
-	// optimized/interop-wrapped dep cache, and `import Pusher from
-	// "pusher-js"` throws "does not provide an export named 'default'" at
-	// evaluation time — before the plugin's own pusherKey guard ever runs, so
-	// it takes the whole plugin down, and on hosts where that happens during
-	// app bootstrap it silently breaks ALL click handling on the page (every
-	// header dropdown, the sidebar toggle, everything — not just this
-	// plugin's own WebSocket setup). needsInterop forces Vite to always
-	// treat it as CJS needing the default-export wrapper, which is the fix
-	// Vite ships for exactly this class of mismatch.
+	// pusher-js's browser build is a webpack-bundled UMD file
+	// (module.exports = factory(), no real ESM default export). needsInterop
+	// here was an earlier attempt at fixing plugins/echo.client.ts's import of
+	// it — proven unreliable across consuming hosts (still crashed on a real,
+	// non-symlinked install even with this exact config). The actual fix now
+	// lives in echo.client.ts itself: it no longer imports pusher-js as a
+	// module at all, instead pulling its source in as a plain string
+	// (`?raw`) and executing it directly, letting the UMD wrapper's own
+	// browser-global fallback (`root["Pusher"] = factory()`) self-register
+	// window.Pusher. laravel-echo is still a real, safely-interoppable
+	// dynamic import, so it stays here.
 	vite: {
 		optimizeDeps: {
-			include: ["pusher-js", "laravel-echo"],
-			needsInterop: ["pusher-js"],
+			include: ["laravel-echo"],
 		},
 	},
 	components: [

package/package.json

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

package/plugins/echo.client.ts

@@ -1,6 +1,15 @@
-import Echo from "laravel-echo";
-import Pusher from "pusher-js";
 import axios from "axios";
+// Raw source, not a real import: pusher-js ships only a webpack-UMD bundle
+// (module.exports = factory(), no ESM default export), and Vite's CJS
+// interop for it doesn't reliably kick in across every consuming host —
+// including as a dynamic import, which still surfaced as an empty/unusable
+// module namespace object in testing (`Pusher is not a constructor`). The
+// UMD wrapper itself already knows how to self-register on `window` when no
+// module system is present (`else root["Pusher"] = factory()`, with `root`
+// passed in as `window` directly) — so instead of asking Vite/ESM to
+// understand this file at all, its source is pulled in as a plain string
+// and executed directly, letting that fallback branch do the work.
+import pusherSrc from "pusher-js/dist/web/pusher.js?raw";
 
 declare global {
 	interface Window {
@@ -13,7 +22,7 @@ export default defineNuxtPlugin({
 	name: "shared-ui-echo",
 	enforce: "post",
 	parallel: true,
-	setup(nuxtApp) {
+	async setup(nuxtApp) {
 	// Skip if already provided by the extending frontend's own Echo plugin
 	if (nuxtApp.$echo || window.Echo) {
 		return;
@@ -28,6 +37,20 @@ export default defineNuxtPlugin({
 		return;
 	}
 
+	// laravel-echo is a real ESM/CJS-interoppable package; a plain dynamic
+	// import is enough (and, unlike the static import this plugin used to
+	// have, confines any future interop failure to this plugin instead of
+	// crashing the whole client bundle before Vue mounts).
+	const EchoModule = await import("laravel-echo");
+	const Echo = (EchoModule as any).default ?? EchoModule;
+
+	// See the pusherSrc import comment above — self-registers window.Pusher.
+	if (!window.Pusher) {
+		// eslint-disable-next-line no-new-func
+		new Function(pusherSrc)();
+	}
+	const Pusher = window.Pusher;
+
 	const headers: Record<string, string> = {
 		Accept: "application/json",
 	};