@calimero-network/mero-react 4.0.0 → 4.1.0

package/README.md

@@ -91,6 +91,8 @@ Props (`MeroProviderConfig & { children }`):
 | `packageVersion` | `string` | No | Specific version (defaults to latest) |
 | `registryUrl` | `string` | No | Registry URL override |
 | `timeoutMs` | `number` | No | HTTP request timeout (default 30000) |
+| `allowedNodeUrls` | `string[]` | No | Origins the OAuth callback may authenticate against. The initiated node is always trusted; this allowlist additionally permits direct-callback entry. A callback `node_url` matching neither is rejected. |
+| `tokenStore` | `TokenStore` | No | Pluggable access/refresh token store. Defaults to localStorage. Pass a `MemoryTokenStore` or cookie-backed store for sensitive deployments (localStorage tokens are XSS-readable). |
 
 Modes and their permissions:
 
@@ -100,7 +102,7 @@ Modes and their permissions:
 | `MultiContext` | `context:create`, `context:list`, `context:execute` | Apps managing multiple contexts |
 | `Admin` | `admin` | Admin dashboards, dev tools |
 
-Auth flow: when `connectToNode(url)` is called, the provider redirects to the node's auth page. After login, the node redirects back with tokens in the URL hash. The provider processes these once (StrictMode-safe via ref) and sets `isAuthenticated = true`.
+Auth flow: when `connectToNode(url)` is called, the provider redirects to the node's auth page. After login, the node redirects back with tokens in the URL hash. The provider processes these once (StrictMode-safe via ref) and sets `isAuthenticated = true`. The callback's `node_url` is validated against the node login was initiated with (or `allowedNodeUrls`); a `node_url` matching neither is rejected.
 
 Online detection: the provider opens an SSE connection to the node after auth. `isOnline` reflects the SSE connection state — no polling.
 

package/dist/index.cjs

@@ -473,6 +473,59 @@ function CalimeroLogo({
   );
 }
 
+// src/utils/nodeDiscovery.ts
+var DEFAULT_LOCAL_NODE_PORTS = [2428, 2429, 2528, 2529];
+var LOCAL_HOST = "localhost";
+var DEFAULT_PROBE_TIMEOUT_MS = 2e3;
+function localNodeUrl(port) {
+  return `http://${LOCAL_HOST}:${port}`;
+}
+function nodeEndpoint(baseUrl, path) {
+  const base = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
+  return new URL(path, base).toString();
+}
+async function probeNodeHealth(baseUrl, options = {}) {
+  const { timeoutMs = DEFAULT_PROBE_TIMEOUT_MS, signal } = options;
+  if (signal?.aborted) return false;
+  const controller = new AbortController();
+  const onAbort = () => controller.abort();
+  const listenerAdded = !!signal;
+  if (listenerAdded) signal.addEventListener("abort", onAbort, { once: true });
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  try {
+    const url = nodeEndpoint(baseUrl, "admin-api/health");
+    const res = await fetch(url, {
+      method: "GET",
+      signal: controller.signal
+    });
+    if (!res.ok) return false;
+    try {
+      const body = await res.json();
+      const status = body?.data?.status !== void 0 ? body?.data?.status : body?.status;
+      if (status === void 0) return true;
+      return typeof status === "string" && status.toLowerCase() === "alive";
+    } catch {
+      return true;
+    }
+  } catch {
+    return false;
+  } finally {
+    clearTimeout(timer);
+    if (listenerAdded) signal.removeEventListener("abort", onAbort);
+  }
+}
+async function discoverLocalNodes(options = {}) {
+  const { ports = DEFAULT_LOCAL_NODE_PORTS, timeoutMs, signal } = options;
+  const results = await Promise.all(
+    ports.map(async (port) => {
+      const url = localNodeUrl(port);
+      const ok = await probeNodeHealth(url, { timeoutMs, signal });
+      return ok ? url : null;
+    })
+  );
+  return results.filter((url) => url !== null);
+}
+
 // src/theme.ts
 var defaultMeroTheme = Object.freeze({
   primary: "#a5ff11",
@@ -521,6 +574,8 @@ function themeToCssVars(theme) {
 function cssVar(theme, key) {
   return `var(${MERO_CSS_VARS[key]}, ${theme[key]})`;
 }
+var DEFAULT_LOCAL_NODE_URL = "http://node1.127.0.0.1.nip.io";
+var CUSTOM_SELECTION = "__custom__";
 function isValidUrl(urlString) {
   if (!urlString || urlString.trim() === "") {
     return false;
@@ -549,6 +604,9 @@ function isValidUrl(urlString) {
     return false;
   }
 }
+function displayNodeUrl(url) {
+  return url.replace(/^https?:\/\//, "").replace(/\/+$/, "");
+}
 function tint(color, percent) {
   return `color-mix(in srgb, ${color} ${percent}%, transparent)`;
 }
@@ -653,10 +711,60 @@ function buildStyles(t) {
       transition: "all 0.15s ease"
     },
     radioLabelActive: {
-      borderColor: accent,
+      border: `1px solid ${accent}`,
+      backgroundColor: accentGlow,
+      color: text
+    },
+    radioList: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "0.5rem",
+      marginBottom: "1rem"
+    },
+    radioItem: {
+      display: "flex",
+      alignItems: "center",
+      gap: "0.625rem",
+      color: text,
+      cursor: "pointer",
+      padding: "0.75rem 1rem",
+      borderRadius: radius,
+      border: `1px solid ${border}`,
+      backgroundColor: bgSecondary,
+      transition: "all 0.15s ease",
+      fontSize: "0.875rem"
+    },
+    radioItemActive: {
+      // Override the full `border` shorthand (not just borderColor) so React
+      // never has to mix shorthand + longhand on the same element.
+      border: `1px solid ${accent}`,
       backgroundColor: accentGlow,
       color: text
     },
+    radioIndicator: {
+      flexShrink: 0,
+      width: "1rem",
+      height: "1rem",
+      borderRadius: "50%",
+      border: `2px solid ${border}`,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    radioIndicatorActive: {
+      border: `2px solid ${accent}`
+    },
+    radioDot: {
+      width: "0.5rem",
+      height: "0.5rem",
+      borderRadius: "50%",
+      backgroundColor: accent
+    },
+    nodeMeta: {
+      marginLeft: "auto",
+      fontSize: "0.75rem",
+      color: textSecondary
+    },
     input: {
       width: "100%",
       padding: "0.75rem 1rem",
@@ -682,6 +790,29 @@ function buildStyles(t) {
     localInfoCode: {
       color: accent
     },
+    noNodeInfo: {
+      color: textSecondary,
+      fontSize: "0.875rem",
+      textAlign: "center",
+      padding: "0.75rem",
+      backgroundColor: bgSecondary,
+      borderRadius: radius,
+      marginBottom: "1rem",
+      border: `1px solid ${border}`
+    },
+    toolbar: {
+      display: "flex",
+      justifyContent: "center",
+      marginBottom: "1rem"
+    },
+    rescan: {
+      background: "none",
+      border: "none",
+      color: accent,
+      cursor: "pointer",
+      fontSize: "0.8125rem",
+      padding: "0.25rem 0.5rem"
+    },
     buttonGroup: {
       display: "flex",
       justifyContent: "center"
@@ -709,6 +840,15 @@ function buildStyles(t) {
       padding: "2rem",
       color: textSecondary
     },
+    discovering: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "0.75rem",
+      padding: "1rem",
+      color: textSecondary,
+      fontSize: "0.875rem"
+    },
     spinner: {
       width: "2rem",
       height: "2rem",
@@ -716,6 +856,14 @@ function buildStyles(t) {
       borderTopColor: accent,
       borderRadius: "50%",
       animation: "meroSpin 1s linear infinite"
+    },
+    spinnerSmall: {
+      width: "1.5rem",
+      height: "1.5rem",
+      border: `3px solid ${border}`,
+      borderTopColor: accent,
+      borderRadius: "50%",
+      animation: "meroSpin 1s linear infinite"
     }
   };
 }
@@ -724,11 +872,14 @@ function LoginModal({
   onClose,
   connectionType,
   isOpen,
-  theme
+  theme,
+  localNodePorts = DEFAULT_LOCAL_NODE_PORTS
 }) {
   const [nodeType, setNodeType] = react.useState("local");
-  const [nodeUrl, setNodeUrl2] = react.useState("");
-  const [isValid, setIsValid] = react.useState(true);
+  const [selected, setSelected] = react.useState(CUSTOM_SELECTION);
+  const [discovered, setDiscovered] = react.useState([]);
+  const [discovering, setDiscovering] = react.useState(false);
+  const [customUrl, setCustomUrl] = react.useState("");
   const [loading, setLoading] = react.useState(false);
   const [error, setError] = react.useState(null);
   const resolved = react.useMemo(() => resolveMeroTheme(theme), [theme]);
@@ -743,7 +894,7 @@ function LoginModal({
   react.useEffect(() => {
     const savedUrl = localStorage.getItem("mero:node_url");
     if (savedUrl) {
-      setNodeUrl2(savedUrl);
+      setCustomUrl(savedUrl);
     }
   }, []);
   react.useEffect(() => {
@@ -753,25 +904,56 @@ function LoginModal({
       setNodeType("remote");
     }
   }, [connectionType]);
+  const [scanNonce, setScanNonce] = react.useState(0);
+  const portsKey = react.useMemo(() => localNodePorts.join(","), [localNodePorts]);
+  const remoteActive = isOpen && shouldShowRemote && nodeType === "remote";
   react.useEffect(() => {
-    if (nodeType === "remote") {
-      setIsValid(isValidUrl(nodeUrl));
-    } else {
-      setIsValid(true);
+    if (!remoteActive) {
+      return;
     }
-  }, [nodeUrl, nodeType]);
+    const controller = new AbortController();
+    let active = true;
+    setDiscovering(true);
+    setDiscovered([]);
+    setError(null);
+    discoverLocalNodes({ ports: localNodePorts, signal: controller.signal }).then((nodes) => {
+      if (!active) return;
+      setDiscovered(nodes);
+      setSelected(nodes.length > 0 ? nodes[0] : CUSTOM_SELECTION);
+    }).catch(() => {
+      if (active) setSelected(CUSTOM_SELECTION);
+    }).finally(() => {
+      if (active) setDiscovering(false);
+    });
+    return () => {
+      active = false;
+      controller.abort();
+    };
+  }, [remoteActive, portsKey, scanNonce]);
+  const isCustom = selected === CUSTOM_SELECTION;
+  const hasDiscovered = discovered.length > 0;
+  const canConnect = !loading && (nodeType === "local" ? true : discovering ? false : isCustom ? isValidUrl(customUrl) : true);
+  const canConnectRef = react.useRef(canConnect);
+  canConnectRef.current = canConnect;
   const handleConnect = react.useCallback(async () => {
-    if (!isValid) return;
+    const targetUrl = nodeType === "local" ? DEFAULT_LOCAL_NODE_URL : selected === CUSTOM_SELECTION ? customUrl : selected;
+    const usingDiscovered = nodeType === "remote" && selected !== CUSTOM_SELECTION;
+    if (nodeType === "remote" && !usingDiscovered && !isValidUrl(targetUrl)) {
+      return;
+    }
+    const normalizedUrl = targetUrl.replace(/\/+$/, "");
+    if (usingDiscovered) {
+      onConnect(normalizedUrl);
+      return;
+    }
     setLoading(true);
     setError(null);
-    const baseUrl = nodeType === "local" ? "http://node1.127.0.0.1.nip.io" : nodeUrl;
     try {
       const response = await fetch(
-        new URL("admin-api/is-authed", baseUrl).toString()
+        nodeEndpoint(normalizedUrl, "admin-api/is-authed")
       );
       if (response.ok || response.status === 401) {
         setLoading(false);
-        const normalizedUrl = baseUrl.replace(/\/+$/, "");
         onConnect(normalizedUrl);
       } else {
         throw new Error(`Connection failed: ${response.statusText}`);
@@ -781,10 +963,108 @@ function LoginModal({
       setError("Failed to connect. Please check the URL and try again.");
       setLoading(false);
     }
-  }, [isValid, nodeType, nodeUrl, onConnect]);
+  }, [nodeType, selected, customUrl, onConnect]);
   if (!isOpen) {
     return null;
   }
+  const showManualInput = isCustom;
+  const renderRadio = (value, label, meta) => {
+    const active = selected === value;
+    return (
+      // Selection is driven solely by the radio input's `onChange` — clicking
+      // anywhere on the wrapping label forwards to the input, and keyboard
+      // users can tab to / arrow through the (visually hidden but focusable)
+      // input. A label `onClick` here would double-fire `setSelected`.
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          "data-testid": `node-option-${value === CUSTOM_SELECTION ? "custom" : displayNodeUrl(value)}`,
+          style: {
+            ...styles.radioItem,
+            ...active ? styles.radioItemActive : {}
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "radio",
+                name: "mero-node",
+                value,
+                checked: active,
+                onChange: () => setSelected(value),
+                style: { position: "absolute", opacity: 0 }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  ...styles.radioIndicator,
+                  ...active ? styles.radioIndicatorActive : {}
+                },
+                children: active && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.radioDot })
+              }
+            ),
+            label,
+            meta && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.nodeMeta, children: meta })
+          ]
+        },
+        value
+      )
+    );
+  };
+  const renderRemoteView = () => {
+    if (discovering) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.discovering, "data-testid": "node-discovering", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.spinnerSmall }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Searching for local nodes..." })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.info, children: hasDiscovered ? "Select a discovered node, or enter a node URL manually." : "No local node found. Enter a node URL to continue." }),
+      hasDiscovered && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: styles.radioList,
+          role: "radiogroup",
+          "aria-label": "Available nodes",
+          children: [
+            discovered.map(
+              (url) => renderRadio(url, displayNodeUrl(url), "local")
+            ),
+            renderRadio(CUSTOM_SELECTION, "Enter node URL manually")
+          ]
+        }
+      ),
+      showManualInput && /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: customUrl,
+          onChange: (e) => setCustomUrl(e.target.value),
+          placeholder: "https://your-node-url.calimero.network",
+          style: styles.input,
+          "data-testid": "node-url-input",
+          autoFocus: !hasDiscovered,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && canConnectRef.current) {
+              handleConnect();
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.toolbar, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          style: styles.rescan,
+          onClick: () => setScanNonce((n) => n + 1),
+          "data-testid": "rescan-button",
+          children: "\u21BB Rescan local nodes"
+        }
+      ) })
+    ] });
+  };
   const modalContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
         @keyframes meroSpin { to { transform: rotate(360deg); } }
@@ -792,7 +1072,7 @@ function LoginModal({
         @keyframes meroSlideIn { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
       ` }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...themeVars, ...styles.overlay }, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.content, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: styles.closeButton, onClick: onClose, children: "\xD7" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { style: styles.closeButton, onClick: onClose, "aria-label": "Close", children: "\xD7" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.header, children: [
         /* @__PURE__ */ jsxRuntime.jsx(CalimeroLogo, { size: 44, color: cssVar(resolved, "primary") }),
         /* @__PURE__ */ jsxRuntime.jsx("h1", { style: styles.title, children: "Connect to Calimero" })
@@ -801,12 +1081,13 @@ function LoginModal({
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Connecting to node..." }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.spinner })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.info, children: shouldShowRadioGroup ? "Select your Calimero node type to continue." : connectionType === "local" /* Local */ ? "Connect to your local Calimero node." : "Enter your remote Calimero node URL." }),
+        shouldShowRadioGroup && /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.info, children: "Select your Calimero node type to continue." }),
         error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles.error, children: error }),
         shouldShowRadioGroup && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.radioGroup, children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
+              "data-testid": "node-type-local",
               style: {
                 ...styles.radioLabel,
                 ...nodeType === "local" ? styles.radioLabelActive : {}
@@ -830,6 +1111,7 @@ function LoginModal({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
+              "data-testid": "node-type-remote",
               style: {
                 ...styles.radioLabel,
                 ...nodeType === "remote" ? styles.radioLabelActive : {}
@@ -851,34 +1133,22 @@ function LoginModal({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: shouldShowRemote && nodeType === "remote" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "text",
-            value: nodeUrl,
-            onChange: (e) => setNodeUrl2(e.target.value),
-            placeholder: "https://your-node-url.calimero.network",
-            style: styles.input,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" && isValid) {
-                handleConnect();
-              }
-            }
-          }
-        ) : shouldShowLocal ? /* @__PURE__ */ jsxRuntime.jsxs("p", { style: styles.localInfo, children: [
+        nodeType === "local" && shouldShowLocal && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: styles.localInfo, children: [
           "Using default local node: ",
           /* @__PURE__ */ jsxRuntime.jsx("br", {}),
-          /* @__PURE__ */ jsxRuntime.jsx("code", { style: styles.localInfoCode, children: "http://node1.127.0.0.1.nip.io" })
-        ] }) : null }),
+          /* @__PURE__ */ jsxRuntime.jsx("code", { style: styles.localInfoCode, children: DEFAULT_LOCAL_NODE_URL })
+        ] }),
+        nodeType === "remote" && shouldShowRemote && renderRemoteView(),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.buttonGroup, children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: handleConnect,
-            disabled: !isValid || loading,
+            disabled: !canConnect,
             style: {
               ...styles.button,
-              ...!isValid || loading ? styles.buttonDisabled : {}
+              ...!canConnect ? styles.buttonDisabled : {}
             },
+            "data-testid": "connect-button",
             children: "Connect"
           }
         ) })
@@ -2670,6 +2940,7 @@ exports.AppMode = AppMode;
 exports.CalimeroLogo = CalimeroLogo;
 exports.ConnectButton = ConnectButton;
 exports.ConnectionType = ConnectionType;
+exports.DEFAULT_LOCAL_NODE_PORTS = DEFAULT_LOCAL_NODE_PORTS;
 exports.LoginModal = LoginModal;
 exports.MERO_CSS_VARS = MERO_CSS_VARS;
 exports.MeroContext = MeroContext;
@@ -2683,11 +2954,15 @@ exports.clearContextIdentity = clearContextIdentity;
 exports.clearNodeUrl = clearNodeUrl;
 exports.cssVar = cssVar;
 exports.defaultMeroTheme = defaultMeroTheme;
+exports.discoverLocalNodes = discoverLocalNodes;
 exports.getApplicationId = getApplicationId;
 exports.getContextId = getContextId;
 exports.getContextIdentity = getContextIdentity;
 exports.getNodeUrl = getNodeUrl;
+exports.localNodeUrl = localNodeUrl;
 exports.localStorageTokenStorage = localStorageTokenStorage;
+exports.nodeEndpoint = nodeEndpoint;
+exports.probeNodeHealth = probeNodeHealth;
 exports.resolveMeroTheme = resolveMeroTheme;
 exports.setApplicationId = setApplicationId;
 exports.setContextId = setContextId;