@antelopejs/dms-frontend 0.5.1 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-frontend",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Frontend-agnostic loader for AntelopeJS DMS, shipping the Vue 3 renderer (Vite, Inertia, SSR)",
   "keywords": [
     "antelope",

package/templates/vue/frontend-module.ts

@@ -537,11 +537,54 @@ function parseRoute(runtime: DmsFrontendRuntime, url: string): DmsRoute {
   };
 }
 
+function hasSameEntries(
+  left: Record<string, string>,
+  right: Record<string, string>,
+): boolean {
+  const keys = Object.keys(left);
+  return (
+    keys.length === Object.keys(right).length &&
+    keys.every((key) => right[key] === left[key])
+  );
+}
+
+// Every parse builds a new query, params and matched: assigning them as they
+// come would re-run each watcher of the route on every call of useDmsRoute,
+// though the URL did not change. They are only replaced when their content did.
 function updateRoute(runtime: DmsFrontendRuntime, url: string): void {
   // The meta is the page's, not the URL's: a page declares it, then reads its
   // route, and the middleware the meta selected must still find it.
-  const { meta: _pageMeta, ...location } = parseRoute(runtime, url);
-  Object.assign(runtime.route, location);
+  const {
+    meta: _pageMeta,
+    query,
+    params,
+    matched,
+    ...location
+  } = parseRoute(runtime, url);
+  const route = runtime.route;
+  if (!hasSameEntries(query, route.query)) route.query = query;
+  if (!hasSameEntries(params, route.params)) route.params = params;
+  if (matched.length !== route.matched.length) route.matched = matched;
+  Object.assign(route, location);
+}
+
+const URL_BASE = "http://frontend.local";
+
+// The URL the browser shows: it may be ahead of the route, which follows
+// Inertia's page, when a component wrote it in place (history.replaceState).
+function currentUrl(runtime: DmsFrontendRuntime): string {
+  if (runtime.isServer || typeof window === "undefined")
+    return new URL(runtime.route.fullPath, URL_BASE).href;
+  return window.location.href;
+}
+
+// One spelling per URL: `a b`, `a+b` and `a%20b` are the same query, as are
+// `:` and `%3A`. The origin is kept, so a URL of another site never matches
+// the current one, whatever its path.
+function normalizeUrl(url: string, base: string): string {
+  const parsed = new URL(url, base);
+  const search = parsed.searchParams.toString();
+  return `${parsed.origin}${parsed.pathname}${search ? `?${search}` : ""}${parsed.hash}`;
 }
 
 function locationToUrl(
@@ -645,10 +688,13 @@ export function useDmsRoute(pattern?: string): DmsRoute {
 
 export function useDmsRouter(): DmsRouter {
   const runtime = useDmsRuntime();
-  const navigate = (to: RouteLocationRaw, options?: DmsNavigationOptions) =>
-    locationToUrl(runtime, to) === runtime.route.fullPath
+  const navigate = (to: RouteLocationRaw, options?: DmsNavigationOptions) => {
+    const current = currentUrl(runtime);
+    return normalizeUrl(locationToUrl(runtime, to), current) ===
+      normalizeUrl(current, current)
       ? Promise.resolve()
       : visit(runtime, to, options);
+  };
   return {
     currentRoute: computed(() => runtime.route),
     push: navigate,

package/templates/vue/server/auth/session.mjs

@@ -14,6 +14,32 @@ const MAX_AGE = 60 * 60 * 24 * 30;
 const UUID =
   /^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
 
+/**
+ * A suffix that keeps this instance's cookies apart from another's on the same
+ * host. Browsers scope cookies by hostname, not port: without it, two DMS
+ * frontends on localhost:3000 and localhost:3001 would overwrite each other's
+ * session, each failing to decrypt the other's and signing the user out. The
+ * suffix follows the backend, so a restart keeps the cookies it wrote.
+ */
+function cookieScope() {
+  const backendUrl = (process.env.DMS_API_BASE_URL ?? "").trim();
+  let canonical = backendUrl;
+  try {
+    const url = new URL(backendUrl);
+    if (url.hostname === "localhost" || url.hostname === "[::1]")
+      url.hostname = "127.0.0.1";
+    canonical = url.toString().replace(/\/$/, "");
+  } catch {
+    // Not a URL: the raw string still tells two backends apart.
+  }
+  return createHash("sha256").update(canonical).digest("hex").slice(0, 12);
+}
+
+/** The name `name` takes in this instance's cookie jar. */
+export function scopedCookieName(name) {
+  return `${name}_${cookieScope()}`;
+}
+
 function key() {
   const secret = process.env.DMS_SESSION_SECRET;
   if (!secret || secret.length < 32)
@@ -54,10 +80,11 @@ function decode(value) {
 }
 
 function cookieValue(request, name) {
+  const scoped = scopedCookieName(name);
   const cookies = request.headers.cookie?.split(";") ?? [];
   return cookies
     .map((part) => part.trim().split("="))
-    .find(([key]) => key === name)?.[1];
+    .find(([key]) => key === scoped)?.[1];
 }
 
 /**
@@ -83,7 +110,8 @@ function lifetime(persistent) {
   return persistent ? MAX_AGE : undefined;
 }
 
-function appendCookie(response, cookie) {
+function appendCookie(response, name, value, cookieAttributes) {
+  const cookie = `${scopedCookieName(name)}=${value}; ${cookieAttributes}`;
   const current = response.getHeader("set-cookie");
   response.setHeader(
     "set-cookie",
@@ -122,12 +150,14 @@ export function setRequestSession(request, session) {
 export function writeSession(response, session) {
   appendCookie(
     response,
-    `${SESSION_COOKIE}=${encode(session)}; ${attributes(lifetime(isPersistent(session)))}`,
+    SESSION_COOKIE,
+    encode(session),
+    attributes(lifetime(isPersistent(session))),
   );
 }
 
 export function clearSession(response) {
-  appendCookie(response, `${SESSION_COOKIE}=; ${attributes(0)}`);
+  appendCookie(response, SESSION_COOKIE, "", attributes(0));
 }
 
 export function readAccounts(request) {
@@ -139,7 +169,9 @@ function writeAccountIndex(response, accounts) {
   const persistent = Object.values(accounts).some(isPersistent);
   appendCookie(
     response,
-    `${ACCOUNT_INDEX_COOKIE}=${encode(accounts)}; ${attributes(lifetime(persistent))}`,
+    ACCOUNT_INDEX_COOKIE,
+    encode(accounts),
+    attributes(lifetime(persistent)),
   );
 }
 
@@ -156,7 +188,9 @@ export function storeAccount(request, response, session, accountId) {
   writeAccountIndex(response, accounts);
   appendCookie(
     response,
-    `${accountCookieName(id)}=${encode({ refreshToken: session.refreshToken, ...accountDescriptor })}; ${attributes(lifetime(accountDescriptor.persistent))}`,
+    accountCookieName(id),
+    encode({ refreshToken: session.refreshToken, ...accountDescriptor }),
+    attributes(lifetime(accountDescriptor.persistent)),
   );
   return accountDescriptor;
 }
@@ -186,10 +220,7 @@ export function removeAccount(request, response, accountId) {
   delete accounts[accountId];
   writeAccountIndex(response, accounts);
   if (UUID.test(accountId ?? ""))
-    appendCookie(
-      response,
-      `${accountCookieName(accountId)}=; ${attributes(0)}`,
-    );
+    appendCookie(response, accountCookieName(accountId), "", attributes(0));
 }
 
 export function readSealedCookie(request, name) {
@@ -204,12 +235,9 @@ export function writeSealedCookie(
   maxAge,
   path = "/auth/oauth",
 ) {
-  appendCookie(
-    response,
-    `${name}=${encode(value)}; ${attributes(maxAge, path)}`,
-  );
+  appendCookie(response, name, encode(value), attributes(maxAge, path));
 }
 
 export function clearSealedCookie(response, name, path = "/auth/oauth") {
-  appendCookie(response, `${name}=; ${attributes(0, path)}`);
+  appendCookie(response, name, "", attributes(0, path));
 }