@aaqu/fromcubes-portal-react 0.1.0-alpha.2 → 0.1.0-alpha.4

package/LICENSE

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   Copyright 2026 aaqu
+   Copyright 2026 Mazur Albert Fromcubes
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -29,7 +29,7 @@ React portal node for Node-RED. Server-side JSX transpilation via esbuild. Tailw
 
 ```bash
 cd ~/.node-red
-npm install /path/to/fromcubes-portal-react
+npm install @aaqu/fromcubes-portal-react@alpha
 # restart Node-RED
 ```
 
@@ -117,4 +117,4 @@ No Babel, no Sucrase client, no Vue, no Vuetify, no Socket.IO.
 
 ## License
 
-MIT
+Apache-2.0

package/nodes/portal-react.html

@@ -45,7 +45,7 @@
       var libContent = [
         "declare var React: any;",
         "declare var ReactDOM: any;",
-        "declare function useNodeRed(): { data: any; send: (payload: any, topic?: string) => void };",
+        "declare function useNodeRed(): { data: any; send: (payload: any, topic?: string) => void; user: { userId?: string; userName?: string; username?: string; email?: string; role?: string; groups?: any[] } | null };",
       ].join("\n");
       console.log(PREFIX, "addExtraLib globals.d.ts");
       jsDef.addExtraLib(libContent, "file:///globals.d.ts");
@@ -660,7 +660,7 @@
       <div class="form-row" style="margin-bottom:0;">
         <div style="font-size:11px;opacity:.6;margin-bottom:4px;">
           <code>useNodeRed()</code> &rarr;
-          <code>{ data, send }</code> &nbsp;|&nbsp; Components from
+          <code>{ data, send, user }</code> &nbsp;|&nbsp; Components from
           <code>fc-portal-component</code> nodes auto-imported &nbsp;|&nbsp;
           Must export <code>&lt;App /&gt;</code> &nbsp;|&nbsp;
           <strong>Transpiled server-side at deploy</strong>
@@ -711,6 +711,31 @@
         </div>
       </div>
     </div>
+    <!-- ── Tab: Auth ── -->
+    <div id="fc-tab-auth" class="fc-tab-pane" style="display:none;">
+      <div class="form-row">
+        <label style="width:auto;">
+          <input
+            type="checkbox"
+            id="node-input-portalAuth"
+            style="width:auto;margin:0 8px 0 0;vertical-align:middle;"
+          />
+          Enable Portal Auth headers
+        </label>
+      </div>
+      <div class="form-row" style="padding-left:4px;">
+        <div style="font-size:11px;opacity:.6;line-height:1.5;">
+          Read <code>X-Portal-*</code> headers set by Nginx proxy and expose user data
+          via <code>useNodeRed()</code>.<br><br>
+          When enabled:<br>
+          &bull; <code>useNodeRed()</code> returns <code>{ data, send, user }</code> where
+          <code>user</code> contains <code>userId</code>, <code>userName</code>,
+          <code>username</code>, <code>email</code>, <code>role</code>, <code>groups</code><br>
+          &bull; Messages from WebSocket include <code>msg._client</code> with user data<br><br>
+          Requires <code>@aaqu/node-red-dashboard-2-portal-auth</code> Nginx setup.
+        </div>
+      </div>
+    </div>
   </div>
 
   <input type="hidden" id="node-input-componentCode" />
@@ -758,6 +783,7 @@
         pageTitle: { value: "Portal" },
         componentCode: { value: STARTER },
         customHead: { value: "" },
+        portalAuth: { value: false },
       },
       inputs: 1,
       outputs: 1,
@@ -798,6 +824,7 @@
         fcTabs.addTab({ id: "fc-tab-jsx", label: "JSX" });
         fcTabs.addTab({ id: "fc-tab-props", label: "Properties" });
         fcTabs.addTab({ id: "fc-tab-head", label: "Head HTML" });
+        fcTabs.addTab({ id: "fc-tab-auth", label: "Auth" });
         fcTabs.activateTab("fc-tab-jsx");
 
         // URL hint
@@ -1048,6 +1075,17 @@ const { data, send } = useNodeRed();
     by their component name.
   </p>
 
+  <h3>Portal Auth</h3>
+  <p>
+    When enabled in the Auth tab, reads <code>X-Portal-*</code> headers set by
+    an Nginx proxy (via <code>@aaqu/node-red-dashboard-2-portal-auth</code>) and
+    exposes user data:
+  </p>
+  <ul>
+    <li><code>useNodeRed()</code> returns <code>{ data, send, user }</code></li>
+    <li>Messages from WebSocket include <code>msg._client</code> with user info</li>
+  </ul>
+
   <h3>Custom Head HTML</h3>
   <p>
     Inject CDN links, fonts, or extra stylesheets into

package/nodes/portal-react.js

@@ -24,6 +24,7 @@ const reactHash = crypto
 module.exports = function (RED) {
   // ── Admin root prefix (for correct URLs when httpAdminRoot is set) ──
   const adminRoot = (RED.settings.httpAdminRoot || "/").replace(/\/$/, "");
+  const nodeRoot = (RED.settings.httpNodeRoot || "/").replace(/\/$/, "");
 
   // ── Shared state ──────────────────────────────────────────────
   // Component registry: populated by fc-portal-component canvas nodes at deploy time
@@ -133,6 +134,23 @@ module.exports = function (RED) {
     );
   }
 
+  function extractPortalUser(headers) {
+    const user = {};
+    if (headers["x-portal-user-id"]) user.userId = headers["x-portal-user-id"];
+    if (headers["x-portal-user-name"]) user.userName = headers["x-portal-user-name"];
+    if (headers["x-portal-user-username"]) user.username = headers["x-portal-user-username"];
+    if (headers["x-portal-user-email"]) user.email = headers["x-portal-user-email"];
+    if (headers["x-portal-user-role"]) user.role = headers["x-portal-user-role"];
+    if (headers["x-portal-user-groups"]) {
+      try {
+        user.groups = JSON.parse(headers["x-portal-user-groups"]);
+      } catch (_) {
+        user.groups = headers["x-portal-user-groups"];
+      }
+    }
+    return Object.keys(user).length > 0 ? user : null;
+  }
+
   function removeRoute(router, path) {
     if (!router || !router.stack) return;
     router.stack = router.stack.filter(
@@ -195,6 +213,7 @@ module.exports = function (RED) {
     const componentCode = config.componentCode || "";
     const pageTitle = config.pageTitle || "Portal";
     const customHead = config.customHead || "";
+    const portalAuth = config.portalAuth === true;
 
     // State
     const clients = new Set();
@@ -202,7 +221,7 @@ module.exports = function (RED) {
     let wsServer = null;
     let isClosing = false;
 
-    const wsPath = endpoint + "/_ws";
+    const wsPath = nodeRoot + endpoint + "/_ws";
 
     // ── Rebuild: transpile JSX + update page state ────────────
 
@@ -237,7 +256,8 @@ module.exports = function (RED) {
   const send = React.useCallback((payload, topic) => {
     window.__NR.send(payload, topic);
   }, []);
-  return { data, send };
+  const user = window.__NR._user || null;
+  return { data, send, user };
 }`,
         "",
         "// ── Library components ──",
@@ -277,6 +297,7 @@ module.exports = function (RED) {
         pageTitle,
         wsPath,
         customHead,
+        portalAuth,
       };
     }
 
@@ -304,6 +325,7 @@ module.exports = function (RED) {
             return;
           }
           const cssHash = await state.cssHashReady;
+          const user = state.portalAuth ? extractPortalUser(_req.headers) : null;
           res
             .type("text/html")
             .send(
@@ -313,6 +335,7 @@ module.exports = function (RED) {
                 state.wsPath,
                 state.customHead,
                 cssHash,
+                user,
               ),
             );
         });
@@ -350,11 +373,14 @@ module.exports = function (RED) {
         RED.server.on("upgrade", onUpgrade);
         upgradeHandlers[nodeId] = onUpgrade;
 
-        wsServer.on("connection", (ws) => {
+        wsServer.on("connection", (ws, request) => {
           if (isClosing) {
             ws.close();
             return;
           }
+          if (portalAuth) {
+            ws._portalUser = extractPortalUser(request.headers);
+          }
           clients.add(ws);
           updateStatus();
 
@@ -367,10 +393,14 @@ module.exports = function (RED) {
             try {
               const msg = JSON.parse(raw.toString());
               if (msg.type === "output") {
-                node.send({
+                const out = {
                   payload: msg.payload,
                   topic: msg.topic || "",
-                });
+                };
+                if (portalAuth && ws._portalUser) {
+                  out._client = ws._portalUser;
+                }
+                node.send(out);
               }
             } catch (e) {
               node.warn("Bad WS message: " + e.message);
@@ -533,7 +563,7 @@ module.exports = function (RED) {
 
   // ── Page builders ─────────────────────────────────────────────
 
-  function buildPage(title, transpiledJs, wsPath, customHead, cssHash) {
+  function buildPage(title, transpiledJs, wsPath, customHead, cssHash, user) {
     return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -560,7 +590,7 @@ body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a0a;color:#e0
 <div id="__cs" class="err">disconnected</div>
 <script>
 window.__NR={
-  _ws:null,_listeners:new Set(),_lastData:null,_retries:0,_wasConnected:false,
+  _ws:null,_listeners:new Set(),_lastData:null,_retries:0,_wasConnected:false,_user:${user ? escScript(JSON.stringify(user)) : 'null'},
   connect(){
     const p=location.protocol==='https:'?'wss:':'ws:';
     const ws=new WebSocket(p+'//'+location.host+'${wsPath}');

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@aaqu/fromcubes-portal-react",
-  "version": "0.1.0-alpha.2",
-  "description": "Fromcubes Portal - React for Node-RED",
+  "version": "0.1.0-alpha.4",
+  "description": "Fromcubes Portal - React for Node-RED with Tailwind CSS and auto complete",
   "keywords": [
     "node-red",
-    "react",
     "dashboard",
     "portal",
     "jsx",