@variamosple/variamos-components 0.3.0 → 0.4.0

package/README.md

@@ -16,6 +16,8 @@ import { Header, SessionProvider } from "@variamosple/variamos-components";
 
 The user menu of the header has the class `variamos-header-options`; its id is generated, so tests and styles should use the class.
 
+The session lives in the httpOnly `authToken` cookie of the admin service: requests must send it (`credentials: "include"`, or `withCredentials` with axios). Since 0.4.0 the library never keeps the token in `localStorage`, and `SessionProvider` removes the copy that older versions kept there; a front end should not add an `Authorization` header from that storage.
+
 ## Development
 
 Requires Node 26 (`.nvmrc`, `.mise.toml`). `npm install` sets up the Git hooks: Biome and cspell on the staged files before a commit, the conventional commit format, and typecheck, lint and tests before a push.

package/dist/Components/Header/HeaderOptions.js

@@ -1,10 +1,10 @@
-import { jsxs as f, Fragment as T, jsx as r } from "react/jsx-runtime";
-import { useId as k, useState as m, useCallback as v, useEffect as C, useMemo as O } from "react";
+import { jsxs as f, Fragment as v, jsx as r } from "react/jsx-runtime";
+import { useId as C, useState as m, useCallback as O, useEffect as T, useMemo as U } from "react";
 import { NavDropdown as i } from "react-bootstrap";
-import { Events as h } from "../../Common/Events.js";
-import { isAllowedFor as U } from "../../Common/isAllowedFor.js";
+import { Events as b } from "../../Common/Events.js";
+import { isAllowedFor as j } from "../../Common/isAllowedFor.js";
 import "../../Context/AnalyticsContext.js";
-import { useMenu as j } from "../../Context/MenuContext.js";
+import { useMenu as k } from "../../Context/MenuContext.js";
 import "../../Context/NotificationContext.js";
 import { useRouter as x } from "../../Context/RouterContext.js";
 import { useSession as D } from "../../Context/SessionContext.js";
@@ -20,66 +20,65 @@ const c = {}, y = [
   "Account/Security",
   "Other"
 ], $ = ({
-  adminApiUrl: b
+  adminApiUrl: h
 }) => {
-  const { user: o, isAuthenticated: n, logout: S } = D(), { options: d } = j(), { navigate: M } = x(), I = k(), [B, s] = m(!1), [E, p] = m(!1), [A, l] = m(null), w = b || (c == null ? void 0 : c.VITE_ADMIN_API_URL) || "/v1", e = v(() => {
+  const { user: t, isAuthenticated: n, logout: M } = D(), { options: d } = k(), { navigate: S } = x(), B = C(), [E, s] = m(!1), [I, p] = m(!1), [A, l] = m(null), w = h || (c == null ? void 0 : c.VITE_ADMIN_API_URL) || "/v1", e = O(() => {
     l(null), s(!0);
   }, []);
-  C(() => (h.subscribe("openReportBugModal", e), () => {
-    h.unsubscribe(
+  T(() => (b.subscribe("openReportBugModal", e), () => {
+    b.unsubscribe(
       "openReportBugModal",
       e
     );
   }), [e]);
-  const R = async (t, u) => {
+  const R = async (o, u) => {
     p(!0), l(null);
-    const g = await N(t, u, {
+    const g = await N(o, u, {
       adminApiUrl: w,
-      reporterEmail: o == null ? void 0 : o.email,
-      authToken: localStorage.getItem("authToken")
+      reporterEmail: t == null ? void 0 : t.email
     });
     p(!1), g ? l(g) : s(!1);
-  }, a = O(
-    () => (d ?? []).filter((t) => U(t, o)),
-    [d, o]
+  }, a = U(
+    () => (d ?? []).filter((o) => j(o, t)),
+    [d, t]
   );
-  return a.length === 0 && !n ? null : /* @__PURE__ */ f(T, { children: [
+  return a.length === 0 && !n ? null : /* @__PURE__ */ f(v, { children: [
     /* @__PURE__ */ f(
       i,
       {
-        title: (o == null ? void 0 : o.name) || "Options",
-        id: I,
+        title: (t == null ? void 0 : t.name) || "Options",
+        id: B,
         className: "variamos-header-options",
         children: [
-          a.map((t) => /* @__PURE__ */ r(
+          a.map((o) => /* @__PURE__ */ r(
             i.Item,
             {
               onClick: () => {
-                if (t.location.endsWith("#report-bug")) {
+                if (o.location.endsWith("#report-bug")) {
                   e();
                   return;
                 }
-                M(t.location, {
-                  target: F(t.target)
+                S(o.location, {
+                  target: F(o.target)
                 });
               },
-              children: t.title
+              children: o.title
             },
-            t.title
+            o.title
           )),
           n && a.length > 0 ? /* @__PURE__ */ r(i.Divider, {}) : null,
-          n ? /* @__PURE__ */ r(i.Item, { onClick: S, children: "Logout" }) : null
+          n ? /* @__PURE__ */ r(i.Item, { onClick: M, children: "Logout" }) : null
         ]
       }
     ),
     /* @__PURE__ */ r(
       L,
       {
-        show: B,
+        show: E,
         onHide: () => s(!1),
-        onSubmit: (t, u) => void R(t, u),
+        onSubmit: (o, u) => void R(o, u),
         categories: y,
-        isSubmitting: E,
+        isSubmitting: I,
         errorMessage: A
       }
     )

package/dist/Components/Header/submitBugReport.d.ts

@@ -6,10 +6,9 @@ export interface BugReport {
 export interface BugReportSender {
     adminApiUrl: string;
     reporterEmail?: string;
-    authToken?: string | null;
     fetchImpl?: typeof fetch;
 }
 /** The bug route, next to the versioned API: ".../v1" and ".../" give "/bugs". */
 export declare const bugReportUrl: (adminApiUrl: string) => string;
 /** Sends the report; resolves to null once sent, or to the message to show. */
-export declare function submitBugReport(report: BugReport, file: File | undefined, { adminApiUrl, reporterEmail, authToken, fetchImpl }: BugReportSender): Promise<string | null>;
+export declare function submitBugReport(report: BugReport, file: File | undefined, { adminApiUrl, reporterEmail, fetchImpl }: BugReportSender): Promise<string | null>;

package/dist/Components/Header/submitBugReport.js

@@ -1,23 +1,22 @@
-import { fieldOf as p } from "../../Common/fieldOf.js";
-const c = "Failed to submit bug. Please try again.", u = (t) => `${t.replace(/\/v1$/, "").replace(/\/$/, "")}/bugs`;
-async function f(t, a, { adminApiUrl: d, reporterEmail: n, authToken: i, fetchImpl: l = fetch }) {
+import { fieldOf as s } from "../../Common/fieldOf.js";
+const p = "Failed to submit bug. Please try again.", l = (t) => `${t.replace(/\/v1$/, "").replace(/\/$/, "")}/bugs`;
+async function m(t, n, { adminApiUrl: c, reporterEmail: a, fetchImpl: d = fetch }) {
   const e = new FormData();
-  e.append("title", t.title), e.append("description", t.description), e.append("priority", "medium"), e.append("category", t.category), n && e.append("reporterEmail", n), a && e.append("file", a);
+  e.append("title", t.title), e.append("description", t.description), e.append("priority", "medium"), e.append("category", t.category), a && e.append("reporterEmail", a), n && e.append("file", n);
   try {
-    const r = await l(u(d), {
+    const r = await d(l(c), {
       method: "POST",
-      headers: i ? { Authorization: `Bearer ${i}` } : {},
       body: e,
       credentials: "include"
-    }), s = await r.json();
-    if (r.ok && !p(s, "errorCode")) return null;
-    const o = p(s, "message");
-    return typeof o == "string" && o !== "" ? o : c;
+    }), i = await r.json();
+    if (r.ok && !s(i, "errorCode")) return null;
+    const o = s(i, "message");
+    return typeof o == "string" && o !== "" ? o : p;
   } catch (r) {
-    return console.error(r), c;
+    return console.error(r), p;
   }
 }
 export {
-  u as bugReportUrl,
-  f as submitBugReport
+  l as bugReportUrl,
+  m as submitBugReport
 };

package/dist/Context/NotificationContext.js

@@ -1,6 +1,6 @@
 import { jsx as ve } from "react/jsx-runtime";
-import { createContext as Ee, useMemo as P, useEffect as ke, useContext as Te } from "react";
-import { createAccessTokenProvider as Ae, accessTokenUrl as Oe } from "./notificationAccessToken.js";
+import { createContext as Ee, useMemo as P, useEffect as ke, useContext as Ae } from "react";
+import { createAccessTokenProvider as Te, accessTokenUrl as Oe } from "./notificationAccessToken.js";
 import { createNotificationApi as Re, notificationItemOf as Ce } from "./notificationApi.js";
 import { useSession as Se } from "./SessionContext.js";
 import { useNotificationList as Be, useNotificationChanges as Ne, useNotificationPreferences as xe } from "./useNotificationState.js";
@@ -116,10 +116,10 @@ function Ue() {
   });
 }
 let I;
-function T(n) {
+function A(n) {
   return n.reduce((e, t) => e + t.length, 0);
 }
-function A(n, e) {
+function T(n, e) {
   if (n[0].length === e)
     return n.shift();
   const t = new Uint8Array(e);
@@ -136,28 +136,28 @@ function Ve(n, e) {
     transform(o, c) {
       for (t.push(o); ; ) {
         if (s === 0) {
-          if (T(t) < 1)
+          if (A(t) < 1)
             break;
-          const h = A(t, 1);
+          const h = T(t, 1);
           r = (h[0] & 128) === 128, i = h[0] & 127, i < 126 ? s = 3 : i === 126 ? s = 1 : s = 2;
         } else if (s === 1) {
-          if (T(t) < 2)
+          if (A(t) < 2)
             break;
-          const h = A(t, 2);
+          const h = T(t, 2);
           i = new DataView(h.buffer, h.byteOffset, h.length).getUint16(0), s = 3;
         } else if (s === 2) {
-          if (T(t) < 8)
+          if (A(t) < 8)
             break;
-          const h = A(t, 8), l = new DataView(h.buffer, h.byteOffset, h.length), f = l.getUint32(0);
+          const h = T(t, 8), l = new DataView(h.buffer, h.byteOffset, h.length), f = l.getUint32(0);
           if (f > Math.pow(2, 21) - 1) {
             c.enqueue(F);
             break;
           }
           i = f * Math.pow(2, 32) + l.getUint32(4), s = 3;
         } else {
-          if (T(t) < i)
+          if (A(t) < i)
             break;
-          const h = A(t, i);
+          const h = T(t, i);
           c.enqueue(W(r ? h : I.decode(h), e)), s = 0;
         }
         if (i === 0 || i > n) {
@@ -1422,7 +1422,7 @@ const kt = Number.isInteger || function(n) {
 function re(n) {
   return Object.prototype.toString.call(n) === "[object Object]";
 }
-const Tt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Decoder: z,
   Encoder: vt,
@@ -1435,7 +1435,7 @@ function y(n, e, t) {
     n.off(e, t);
   };
 }
-const At = Object.freeze({
+const Tt = Object.freeze({
   connect: 1,
   connect_error: 1,
   disconnect: 1,
@@ -1560,7 +1560,7 @@ class _e extends u {
    */
   emit(e, ...t) {
     var s, i, r;
-    if (At.hasOwnProperty(e))
+    if (Tt.hasOwnProperty(e))
       throw new Error('"' + e.toString() + '" is a reserved event name');
     if (t.unshift(e), this._opts.retries && !this.flags.fromQueue && !this.flags.volatile)
       return this._addToQueue(t), this;
@@ -2067,7 +2067,7 @@ class H extends u {
       max: this.reconnectionDelayMax(),
       jitter: this.randomizationFactor()
     }), this.timeout(t.timeout == null ? 2e4 : t.timeout), this._readyState = "closed", this.uri = e;
-    const i = t.parser || Tt;
+    const i = t.parser || At;
     this.encoder = new i.Encoder(), this.decoder = new i.Decoder(), this._autoConnect = t.autoConnect !== !1, this._autoConnect && this.open();
   }
   reconnection(e) {
@@ -2313,10 +2313,10 @@ Object.assign(B, {
 const we = Ee(
   void 0
 ), Ot = (n) => async () => {
-  const t = await (n == null ? void 0 : n.get()) ?? localStorage.getItem("authToken");
+  const e = await (n == null ? void 0 : n.get());
   return {
     "Content-Type": "application/json",
-    ...t ? { Authorization: `Bearer ${t}` } : {}
+    ...e ? { Authorization: `Bearer ${e}` } : {}
   };
 }, Pt = ({
   apiUrl: n,
@@ -2325,7 +2325,7 @@ const we = Ee(
 }) => {
   var Z;
   const s = (Z = Se().user) == null ? void 0 : Z.id, i = P(
-    () => e ? Ae({ url: Oe(e) }) : null,
+    () => e ? Te({ url: Oe(e) }) : null,
     [e]
   ), r = P(
     () => s ? Re({
@@ -2389,7 +2389,7 @@ const we = Ee(
   );
   return /* @__PURE__ */ ve(we.Provider, { value: be, children: t });
 }, qt = () => {
-  const n = Te(we);
+  const n = Ae(we);
   if (n === void 0)
     throw new Error(
       "useNotifications must be used within a NotificationProvider"

package/dist/Context/SessionContext.js

@@ -1,90 +1,91 @@
-import { jsx as A } from "react/jsx-runtime";
-import { createContext as N, useState as v, useEffect as g, useContext as R } from "react";
-import { Events as G } from "../Common/Events.js";
-import { usePageVisibility as L } from "../Hooks/usePageVisibility.js";
-const S = N(void 0), I = "guestId", s = (t) => {
-  t && G.publish("variamosNavigate", t);
-}, _ = (t) => {
-  t && localStorage.setItem("authToken", t);
+import { jsx as G } from "react/jsx-runtime";
+import { createContext as L, useState as g, useEffect as d, useContext as T } from "react";
+import { Events as _ } from "../Common/Events.js";
+import { usePageVisibility as j } from "../Hooks/usePageVisibility.js";
+import { forgetStoredSessionToken as s } from "./storedSessionToken.js";
+const I = L(void 0), w = "guestId", E = (r) => {
+  r && _.publish("variamosNavigate", r);
 };
-function f(t, i) {
-  var a, c, d;
-  return t != null && t.errorCode ? (i(null), !1) : (_((a = t == null ? void 0 : t.data) == null ? void 0 : a.authToken), i(((c = t == null ? void 0 : t.data) == null ? void 0 : c.user) ?? null), s((d = t == null ? void 0 : t.data) == null ? void 0 : d.redirect), !0);
+function f(r, i) {
+  var a, c;
+  return r != null && r.errorCode ? (i(null), !1) : (i(((a = r == null ? void 0 : r.data) == null ? void 0 : a.user) ?? null), E((c = r == null ? void 0 : r.data) == null ? void 0 : c.redirect), !0);
 }
-const w = "Sign in error.", U = ({
-  loginUrl: t,
+const S = "Sign in error.", V = ({
+  loginUrl: r,
   getSessionInfo: i,
   requestSignUp: a,
   requestSignIn: c,
-  requestSignInAsGuest: d,
-  requestLogout: E,
-  children: y
+  requestSignInAsGuest: l,
+  requestLogout: y,
+  children: C
 }) => {
-  const [l, e] = v(null), [C, o] = v(!0), u = l !== null, h = L();
-  g(() => {
-    o(!0), i().then((n) => f(n, e)).catch(() => {
+  const [h, e] = g(null), [x, o] = g(!0), u = h !== null, m = j();
+  d(() => {
+    s();
+  }, []), d(() => {
+    o(!0), i().then((t) => f(t, e)).catch(() => {
       e(null);
     }).finally(() => o(!1));
-  }, [i]), g(() => {
-    if (!(u && h)) return;
-    const n = () => {
-      i().then((k) => f(k, e)).catch(() => {
+  }, [i]), d(() => {
+    if (!(u && m)) return;
+    const t = () => {
+      i().then((R) => f(R, e)).catch(() => {
         e(null);
       });
     };
-    n();
-    const r = setInterval(n, 6e4);
-    return () => clearInterval(r);
-  }, [u, h, i]);
-  const m = (n) => i().then((r) => (f(r, e) || n.withError(
-    r.errorCode ?? 500,
-    r.message ?? w
-  ), n)).catch(() => (e(null), n.withError(500, w))), x = (n) => {
+    t();
+    const n = setInterval(t, 6e4);
+    return () => clearInterval(n);
+  }, [u, m, i]);
+  const v = (t) => i().then((n) => (f(n, e) || t.withError(
+    n.errorCode ?? 500,
+    n.message ?? S
+  ), t)).catch(() => (e(null), t.withError(500, S))), P = (t) => {
     if (!a)
       throw new Error("requestSignUp is not defined.");
-    return o(!0), a(n).finally(() => o(!1));
-  }, P = (n) => {
+    return o(!0), a(t).finally(() => o(!1));
+  }, b = (t) => {
     if (!c)
       throw new Error("requestSignIn is not defined.");
-    return o(!0), c(n).then(
-      (r) => r != null && r.errorCode ? r : m(r)
+    return o(!0), c(t).then(
+      (n) => n != null && n.errorCode ? n : v(n)
     ).finally(() => o(!1));
-  }, T = () => {
-    if (!d)
+  }, A = () => {
+    if (!l)
       throw new Error("requestSignInAsGuest is not defined.");
-    return o(!0), d(localStorage.getItem(I)).then((n) => {
-      var r;
-      return n != null && n.errorCode ? n : (localStorage.setItem(I, ((r = n == null ? void 0 : n.data) == null ? void 0 : r.id) || ""), m(n));
+    return o(!0), l(localStorage.getItem(w)).then((t) => {
+      var n;
+      return t != null && t.errorCode ? t : (localStorage.setItem(w, ((n = t == null ? void 0 : t.data) == null ? void 0 : n.id) || ""), v(t));
     }).finally(() => o(!1));
-  }, b = () => {
-    E().then(() => {
-      localStorage.removeItem("authToken"), s(t), setTimeout(() => {
+  }, N = () => {
+    y().then(() => {
+      s(), E(r), setTimeout(() => {
         e(null);
       }, 200);
     });
   };
-  return /* @__PURE__ */ A(
-    S.Provider,
+  return /* @__PURE__ */ G(
+    I.Provider,
     {
       value: {
-        user: l,
+        user: h,
         isAuthenticated: u,
-        logout: b,
-        signUp: x,
-        signIn: P,
-        signInAsGuest: T,
-        isLoading: C
+        logout: N,
+        signUp: P,
+        signIn: b,
+        signInAsGuest: A,
+        isLoading: x
       },
-      children: y
+      children: C
     }
   );
-}, V = () => {
-  const t = R(S);
-  if (t === void 0)
+}, z = () => {
+  const r = T(I);
+  if (r === void 0)
     throw new Error("useSession must be used within a SessionProvider");
-  return t;
+  return r;
 };
 export {
-  U as SessionProvider,
-  V as useSession
+  V as SessionProvider,
+  z as useSession
 };

package/dist/Context/notificationAccessToken.d.ts

@@ -10,8 +10,6 @@ export interface NotificationAccessToken {
 export declare function accessTokenUrl(adminApiUrl: string): string;
 export interface AccessTokenProviderOptions {
     url: string;
-    /** Session token of the platform, sent to the admin service. */
-    getSessionToken?: () => string | null;
     fetchImpl?: typeof fetch;
     now?: () => number;
     /** A token is renewed this long before it expires. */
@@ -26,4 +24,4 @@ export interface AccessTokenProvider {
  * Keeps one token in memory, renews it shortly before it expires, and
  * shares a single request between concurrent callers.
  */
-export declare function createAccessTokenProvider({ url, getSessionToken, fetchImpl, now, refreshMarginMs, }: AccessTokenProviderOptions): AccessTokenProvider;
+export declare function createAccessTokenProvider({ url, fetchImpl, now, refreshMarginMs, }: AccessTokenProviderOptions): AccessTokenProvider;

package/dist/Context/notificationAccessToken.js

@@ -1,31 +1,27 @@
-import { fieldOf as o } from "../Common/fieldOf.js";
-function g(t) {
+import { fieldOf as s } from "../Common/fieldOf.js";
+function d(t) {
   return `${t.replace(/\/+$/, "").replace(/\/v1$/, "")}/v1/notifications/access-token`;
 }
-function h({
+function k({
   url: t,
-  getSessionToken: s = () => localStorage.getItem("authToken"),
-  fetchImpl: u = (...e) => fetch(...e),
-  now: f = Date.now,
-  refreshMarginMs: p = 6e4
+  fetchImpl: o = (...e) => fetch(...e),
+  now: i = Date.now,
+  refreshMarginMs: u = 6e4
 }) {
   let e = null, n = null;
-  const k = async () => {
+  const f = async () => {
     try {
-      const a = s(), c = await u(t, {
-        credentials: "include",
-        headers: a ? { Authorization: `Bearer ${a}` } : {}
-      });
+      const c = await o(t, { credentials: "include" });
       if (!c.ok) return null;
-      const l = o(await c.json(), "data"), r = o(l, "token"), i = Date.parse(String(o(l, "expiresAt")));
-      return typeof r != "string" || Number.isNaN(i) ? null : (e = { token: r, expiresAt: i }, r);
+      const l = s(await c.json(), "data"), r = s(l, "token"), a = Date.parse(String(s(l, "expiresAt")));
+      return typeof r != "string" || Number.isNaN(a) ? null : (e = { token: r, expiresAt: a }, r);
     } catch {
       return null;
     }
   };
   return {
     get() {
-      return e && f() < e.expiresAt - p ? Promise.resolve(e.token) : (n ?? (n = k().finally(() => {
+      return e && i() < e.expiresAt - u ? Promise.resolve(e.token) : (n ?? (n = f().finally(() => {
         n = null;
       })), n);
     },
@@ -35,6 +31,6 @@ function h({
   };
 }
 export {
-  g as accessTokenUrl,
-  h as createAccessTokenProvider
+  d as accessTokenUrl,
+  k as createAccessTokenProvider
 };

package/dist/Context/storedSessionToken.d.ts

@@ -0,0 +1,8 @@
+/** Key under which versions before 0.4.0 kept the session token. */
+export declare const STORED_TOKEN_KEY = "authToken";
+/**
+ * Removes the session token that versions before 0.4.0 kept in the browser
+ * storage, where any script of the page can read it. The session lives in
+ * the httpOnly cookie of the admin service alone (EV-117).
+ */
+export declare function forgetStoredSessionToken(storage?: Pick<Storage, "removeItem"> | undefined): void;

package/dist/Context/storedSessionToken.js

@@ -0,0 +1,11 @@
+const e = "authToken";
+function n(o = globalThis.localStorage) {
+  try {
+    o == null || o.removeItem(e);
+  } catch {
+  }
+}
+export {
+  e as STORED_TOKEN_KEY,
+  n as forgetStoredSessionToken
+};

package/dist/Model/SessionInfoResponse.d.ts

@@ -1,6 +1,5 @@
 import { SessionUser } from './SessionUser';
 export interface SessionInfoResponse {
     user: SessionUser;
-    authToken?: string;
     redirect?: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@variamosple/variamos-components",
   "private": false,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",