@eventcatalog/core 2.43.5 → 2.44.1

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.43.5";
+var version = "2.44.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-FLVILMI6.js";
-import "../chunk-JVRNO62X.js";
+} from "../chunk-AUGREOCT.js";
+import "../chunk-HGLZ22GT.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.43.5";
+var version = "2.44.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-ROUO6U5X.js";
-import "../chunk-FLVILMI6.js";
-import "../chunk-JVRNO62X.js";
+} from "../chunk-ECUXDBJ7.js";
+import "../chunk-AUGREOCT.js";
+import "../chunk-HGLZ22GT.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-FLVILMI6.js → chunk-AUGREOCT.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-JVRNO62X.js";
+} from "./chunk-HGLZ22GT.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-ROUO6U5X.js → chunk-ECUXDBJ7.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-FLVILMI6.js";
+} from "./chunk-AUGREOCT.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-JVRNO62X.js → chunk-HGLZ22GT.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.43.5";
+var version = "2.44.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.43.5";
+var version = "2.44.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-JVRNO62X.js";
+} from "./chunk-HGLZ22GT.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.43.5";
+var version = "2.44.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-DCLTVJDP.js";
 import {
   log_build_default
-} from "./chunk-ROUO6U5X.js";
-import "./chunk-FLVILMI6.js";
+} from "./chunk-ECUXDBJ7.js";
+import "./chunk-AUGREOCT.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-EXAALOQA.js";
 import {
   VERSION
-} from "./chunk-JVRNO62X.js";
+} from "./chunk-HGLZ22GT.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

package/eventcatalog/auth.config.ts

@@ -7,6 +7,7 @@ import { isAuthEnabled, isSSR } from '@utils/feature';
 import Google from '@auth/core/providers/google';
 import Auth0 from '@auth/core/providers/auth0';
 import Entra from '@auth/core/providers/microsoft-entra-id';
+import jwt from 'jsonwebtoken';
 
 // Need to try and read the eventcatalog.auth.js file and get the auth providers from there
 const catalogDirectory = process.env.PROJECT_DIR || process.cwd();
@@ -23,8 +24,7 @@ const getAuthProviders = async () => {
       const githubConfig = authConfig.providers.github;
       providers.push(
         GitHub({
-          clientId: githubConfig.clientId,
-          clientSecret: githubConfig.clientSecret,
+          ...githubConfig,
         })
       );
       console.log('✅ GitHub provider configured');
@@ -35,8 +35,7 @@ const getAuthProviders = async () => {
       const googleConfig = authConfig.providers.google;
       providers.push(
         Google({
-          clientId: googleConfig.clientId,
-          clientSecret: googleConfig.clientSecret,
+          ...googleConfig,
         })
       );
       console.log('✅ Google provider configured');
@@ -47,9 +46,12 @@ const getAuthProviders = async () => {
       const oktaConfig = authConfig.providers.okta;
       providers.push(
         Okta({
-          clientId: oktaConfig.clientId,
-          clientSecret: oktaConfig.clientSecret,
-          issuer: oktaConfig.issuer,
+          authorization: {
+            params: {
+              scope: 'openid email profile groups',
+            },
+          },
+          ...oktaConfig,
         })
       );
       console.log('✅ Okta provider configured');
@@ -60,22 +62,27 @@ const getAuthProviders = async () => {
       const auth0Config = authConfig.providers.auth0;
       providers.push(
         Auth0({
-          clientId: auth0Config.clientId,
-          clientSecret: auth0Config.clientSecret,
-          issuer: auth0Config.issuer,
+          authorization: {
+            params: {
+              scope: 'openid email profile groups',
+            },
+          },
+          ...auth0Config,
         })
       );
       console.log('✅ Auth0 provider configured');
     }
 
-    // Microsoft Entra ID provider
     if (authConfig.providers?.entra) {
       const entraConfig = authConfig.providers.entra;
       providers.push(
         Entra({
-          clientId: entraConfig.clientId,
-          clientSecret: entraConfig.clientSecret,
-          issuer: entraConfig.issuer,
+          authorization: {
+            params: {
+              scope: 'openid profile email',
+            },
+          },
+          ...entraConfig,
         })
       );
       console.log('✅ Microsoft Entra ID provider configured');
@@ -87,7 +94,6 @@ const getAuthProviders = async () => {
 
     return providers;
   } catch (error) {
-    console.log('No eventcatalog.auth.js found or error loading config:', (error as Error).message);
     return [];
   }
 };
@@ -105,7 +111,6 @@ const getAuthConfig = async () => {
 
     // If custom auth config is specified (Enterprise feature)
     if (authConfig?.customAuthConfig) {
-      console.log('🚀 Loading custom auth configuration:', authConfig.customAuthConfig);
       try {
         const customConfig = await import(/* @vite-ignore */ join(catalogDirectory, authConfig.customAuthConfig));
         return customConfig.default;
@@ -125,6 +130,45 @@ const getAuthConfig = async () => {
           // Just allow everyone who can authenticate with the provider
           return true;
         },
+        async jwt({ token, account, profile }: { token: any; account: Account | null; profile?: Profile }) {
+          // Persist provider info in JWT
+          if (account && profile) {
+            token.provider = account.provider;
+            token.login = (profile as any).login || (profile as any).preferred_username;
+
+            // Handle groups from different providers
+            if (account.provider === 'microsoft-entra-id') {
+              token.groups = (profile as any).roles || (profile as any).groups || [];
+            } else if (account.provider === 'okta') {
+              // For Okta, try profile first, then decode access token
+              token.groups = (profile as any).groups || [];
+              token.roles = (profile as any).roles || [];
+
+              // If no groups in profile, decode the access token
+              if ((!token.groups || token.groups.length === 0) && account.access_token) {
+                try {
+                  // Import jwt at the top of your file if not already imported
+                  const decodedAccessToken = jwt.decode(account.access_token);
+
+                  if (decodedAccessToken && typeof decodedAccessToken === 'object') {
+                    token.groups = (decodedAccessToken as any).groups || [];
+                    token.roles = (decodedAccessToken as any).roles || [];
+                  }
+                } catch (error) {
+                  console.error('🔍 Error decoding Okta access token:', error);
+                }
+              }
+            } else if (account.provider === 'auth0') {
+              token.groups = (profile as any)['https://eventcatalog.dev/groups'] || [];
+              token.roles = (profile as any)['https://eventcatalog.dev/roles'] || [];
+            }
+
+            // Store access token for potential API calls
+            token.accessToken = account.access_token;
+          }
+
+          return token;
+        },
         async session({ session, token }: { session: Session; token: any }) {
           // Add provider info to session
           if (token?.provider) {
@@ -133,15 +177,23 @@ const getAuthConfig = async () => {
           if (token?.login) {
             (session.user as any).username = token.login;
           }
-          return session;
-        },
-        async jwt({ token, account, profile }: { token: any; account: Account | null; profile?: Profile }) {
-          // Persist provider info in JWT
-          if (account && profile) {
-            token.provider = account.provider;
-            token.login = (profile as any).login || (profile as any).preferred_username;
+
+          // Add groups to session
+          if (token?.groups) {
+            (session.user as any).groups = token.groups;
           }
-          return token;
+
+          // Add roles if available
+          if (token?.roles) {
+            (session.user as any).roles = token.roles;
+          }
+
+          // Add access token to session
+          if (token?.accessToken) {
+            (session as any).accessToken = token.accessToken;
+          }
+
+          return session;
         },
       },
       pages: {

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -103,6 +103,7 @@ if (collection === 'domain-context-map') {
     client:only="react"
     linksToVisualiser={linksToVisualiser}
     links={links}
+    mode={mode}
   />
 </div>
 

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -12,9 +12,13 @@ import {
   type Edge,
   type Node,
   useReactFlow,
+  getNodesBounds,
+  getViewportForBounds,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { HistoryIcon } from 'lucide-react';
+import { toPng } from 'html-to-image';
+import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
 // Nodes and edges
 import ServiceNode from './Nodes/Service';
 import FlowNode from './Nodes/Flow';
@@ -31,11 +35,11 @@ import CustomNode from './Nodes/Custom';
 import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
 import type { CollectionTypes } from '@types';
-import DownloadButton from './DownloadButton';
 import { buildUrl } from '@utils/url-builder';
 import ChannelNode from './Nodes/Channel';
 import { CogIcon } from '@heroicons/react/20/solid';
 import { useEventCatalogVisualiser } from 'src/hooks/eventcatalog-visualizer';
+import VisualiserSearch, { type VisualiserSearchRef } from './VisualiserSearch';
 interface Props {
   nodes: any;
   edges: any;
@@ -47,6 +51,7 @@ interface Props {
   includeKey?: boolean;
   linksToVisualiser?: boolean;
   links?: { label: string; url: string }[];
+  mode?: 'full' | 'simple';
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -62,6 +67,7 @@ const NodeGraphBuilder = ({
   includeKey = true,
   linksToVisualiser = false,
   links = [],
+  mode = 'full',
 }: Props) => {
   const nodeTypes = useMemo(
     () => ({
@@ -92,7 +98,8 @@ const NodeGraphBuilder = ({
   const [isAnimated, setIsAnimated] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
   const { hideChannels, toggleChannelsVisibility } = useEventCatalogVisualiser({ nodes, edges, setNodes, setEdges });
-  const { fitView } = useReactFlow();
+  const { fitView, getNodes } = useReactFlow();
+  const searchRef = useRef<VisualiserSearchRef>(null);
 
   const resetNodesAndEdges = useCallback(() => {
     setNodes((nds) =>
@@ -200,10 +207,59 @@ const NodeGraphBuilder = ({
 
   const handlePaneClick = useCallback(() => {
     setIsSettingsOpen(false);
+    searchRef.current?.hideSuggestions();
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
 
+  const handleNodeSelect = useCallback(
+    (node: Node) => {
+      handleNodeClick(null, node);
+    },
+    [handleNodeClick]
+  );
+
+  const handleSearchClear = useCallback(() => {
+    resetNodesAndEdges();
+    fitView({ duration: 800 });
+  }, [resetNodesAndEdges, fitView]);
+
+  const downloadImage = useCallback((dataUrl: string, filename?: string) => {
+    const a = document.createElement('a');
+    a.setAttribute('download', `${filename || 'eventcatalog'}.png`);
+    a.setAttribute('href', dataUrl);
+    a.click();
+  }, []);
+
+  const handleExportVisual = useCallback(() => {
+    const imageWidth = 1024;
+    const imageHeight = 768;
+    const nodesBounds = getNodesBounds(getNodes());
+    const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
+    const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
+    const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2, 0);
+
+    // Hide settings panel and controls during export
+    setIsSettingsOpen(false);
+    const controls = document.querySelector('.react-flow__controls') as HTMLElement;
+    if (controls) controls.style.display = 'none';
+
+    toPng(document.querySelector('.react-flow__viewport') as HTMLElement, {
+      backgroundColor: '#f1f1f1',
+      width,
+      height,
+      style: {
+        width: width.toString(),
+        height: height.toString(),
+        transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
+      },
+    }).then((dataUrl: string) => {
+      downloadImage(dataUrl, title);
+      // Restore controls
+      if (controls) controls.style.display = 'block';
+    });
+  }, [getNodes, downloadImage, title]);
+
   const handleLegendClick = useCallback(
     (collectionType: string, groupId?: string) => {
       const updatedNodes = nodes.map((node: Node<any>) => {
@@ -304,50 +360,55 @@ const NodeGraphBuilder = ({
       className="relative"
     >
       <Panel position="top-center" className="w-full pr-6 ">
-        <div className="flex space-x-2 justify-between  items-center">
-          <div>
-            <button
-              onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-              className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
-              aria-label="Open settings"
-            >
-              <CogIcon className="h-5 w-5 text-gray-600" />
-            </button>
-          </div>
-          {title && (
-            <span className="block shadow-sm bg-white text-xl z-10 text-black px-4 py-2 border-gray-200 rounded-md border opacity-80">
-              {title}
-            </span>
-          )}
-          <div className="flex justify-end space-x-2">
-            <DownloadButton filename={title} addPadding={false} />
-            {/* // Dropdown for links */}
-            {links.length > 0 && (
-              <div className="relative flex items-center -mt-1">
-                <span className="absolute left-2 pointer-events-none flex items-center h-full">
-                  <HistoryIcon className="h-4 w-4 text-gray-600" />
-                </span>
-                <select
-                  value={links.find((link) => window.location.href.includes(link.url))?.url || links[0].url}
-                  onChange={(e) => navigate(e.target.value)}
-                  className="appearance-none pl-7 pr-6 py-0 text-[14px] bg-white rounded-md border border-gray-200 hover:bg-gray-100/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
-                  style={{ minWidth: 120, height: '26px' }}
-                >
-                  {links.map((link) => (
-                    <option key={link.url} value={link.url}>
-                      {link.label}
-                    </option>
-                  ))}
-                </select>
-                <span className="absolute right-2 pointer-events-none">
-                  <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                  </svg>
-                </span>
-              </div>
+        <div className="flex space-x-2 justify-between items-center">
+          <div className="flex space-x-2">
+            <div>
+              <button
+                onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+                className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+                aria-label="Open settings"
+              >
+                <CogIcon className="h-5 w-5 text-gray-600" />
+              </button>
+            </div>
+            {title && (
+              <span className="block shadow-sm bg-white text-xl z-10 text-black px-4 py-1.5 border-gray-200 rounded-md border opacity-80">
+                {title}
+              </span>
             )}
           </div>
+          {mode === 'full' && (
+            <div className="flex justify-end space-x-2 w-96">
+              <VisualiserSearch ref={searchRef} nodes={nodes} onNodeSelect={handleNodeSelect} onClear={handleSearchClear} />
+            </div>
+          )}
         </div>
+        {links.length > 0 && (
+          <div className="flex justify-end mt-3">
+            <div className="relative flex items-center -mt-1">
+              <span className="absolute left-2 pointer-events-none flex items-center h-full">
+                <HistoryIcon className="h-4 w-4 text-gray-600" />
+              </span>
+              <select
+                value={links.find((link) => window.location.href.includes(link.url))?.url || links[0].url}
+                onChange={(e) => navigate(e.target.value)}
+                className="appearance-none pl-7 pr-6 py-0 text-[14px] bg-white rounded-md border border-gray-200 hover:bg-gray-100/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+                style={{ minWidth: 120, height: '26px' }}
+              >
+                {links.map((link) => (
+                  <option key={link.url} value={link.url}>
+                    {link.label}
+                  </option>
+                ))}
+              </select>
+              <span className="absolute right-2 pointer-events-none">
+                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </span>
+            </div>
+          </div>
+        )}
       </Panel>
 
       {isSettingsOpen && (
@@ -396,6 +457,15 @@ const NodeGraphBuilder = ({
               </div>
               <p className="text-[10px] text-gray-500">Show or hide channels in the visualizer.</p>
             </div>
+            <div className="pt-4 border-t border-gray-200">
+              <button
+                onClick={handleExportVisual}
+                className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+              >
+                <DocumentArrowDownIcon className="w-4 h-4" />
+                <span>Export Visual</span>
+              </button>
+            </div>
           </div>
         </div>
       )}
@@ -437,6 +507,7 @@ interface NodeGraphProps {
   footerLabel?: string;
   linksToVisualiser?: boolean;
   links?: { label: string; url: string }[];
+  mode?: 'full' | 'simple';
 }
 
 const NodeGraph = ({
@@ -451,6 +522,7 @@ const NodeGraph = ({
   footerLabel,
   linksToVisualiser = false,
   links = [],
+  mode = 'full',
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
@@ -482,6 +554,7 @@ const NodeGraph = ({
             includeKey={includeKey}
             linksToVisualiser={linksToVisualiser}
             links={links}
+            mode={mode}
           />
 
           {showFooter && (

package/eventcatalog/src/components/MDX/NodeGraph/VisualiserSearch.tsx

@@ -0,0 +1,207 @@
+import { useState, useCallback, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import type { Node } from '@xyflow/react';
+
+interface VisualiserSearchProps {
+  nodes: Node[];
+  onNodeSelect: (node: Node) => void;
+  onClear: () => void;
+  onPaneClick?: () => void;
+}
+
+export interface VisualiserSearchRef {
+  hideSuggestions: () => void;
+}
+
+const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
+  ({ nodes, onNodeSelect, onClear, onPaneClick }, ref) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [filteredSuggestions, setFilteredSuggestions] = useState<Node[]>([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+    const searchInputRef = useRef<HTMLInputElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const hideSuggestions = useCallback(() => {
+      setShowSuggestions(false);
+      setSelectedSuggestionIndex(-1);
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        hideSuggestions,
+      }),
+      [hideSuggestions]
+    );
+
+    const getNodeDisplayName = useCallback((node: Node) => {
+      // @ts-ignore
+      const name = node.data?.message?.data?.name || node.data?.service?.data?.name || node.data?.name || node.id;
+      // @ts-ignore
+      const version = node.data?.message?.data?.version || node.data?.service?.data?.version || node.data?.version;
+      return version ? `${name} (v${version})` : name;
+    }, []);
+
+    const getNodeTypeColorClass = useCallback((nodeType: string) => {
+      const colorClasses: { [key: string]: string } = {
+        events: 'bg-orange-600 text-white',
+        services: 'bg-pink-600 text-white',
+        flows: 'bg-teal-600 text-white',
+        commands: 'bg-blue-600 text-white',
+        queries: 'bg-green-600 text-white',
+        channels: 'bg-gray-600 text-white',
+        externalSystem: 'bg-pink-600 text-white',
+        actor: 'bg-yellow-500 text-white',
+        step: 'bg-gray-700 text-white',
+        user: 'bg-yellow-500 text-white',
+        custom: 'bg-gray-500 text-white',
+      };
+      return colorClasses[nodeType] || 'bg-gray-100 text-gray-700';
+    }, []);
+
+    const handleSearchChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const query = event.target.value;
+        setSearchQuery(query);
+
+        if (query.length > 0) {
+          const filtered = nodes.filter((node) => {
+            const nodeName = getNodeDisplayName(node);
+            return nodeName.toLowerCase().includes(query.toLowerCase());
+          });
+          setFilteredSuggestions(filtered);
+          setShowSuggestions(true);
+          setSelectedSuggestionIndex(-1);
+        } else {
+          setFilteredSuggestions(nodes);
+          setShowSuggestions(true);
+          setSelectedSuggestionIndex(-1);
+        }
+      },
+      [nodes, getNodeDisplayName]
+    );
+
+    const handleSearchFocus = useCallback(() => {
+      if (searchQuery.length === 0) {
+        setFilteredSuggestions(nodes);
+      }
+      setShowSuggestions(true);
+      setSelectedSuggestionIndex(-1);
+    }, [nodes, searchQuery]);
+
+    const handleSuggestionClick = useCallback(
+      (node: Node) => {
+        setSearchQuery(getNodeDisplayName(node));
+        setShowSuggestions(false);
+        onNodeSelect(node);
+      },
+      [onNodeSelect, getNodeDisplayName]
+    );
+
+    const handleSearchKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (!showSuggestions || filteredSuggestions.length === 0) return;
+
+        switch (event.key) {
+          case 'ArrowDown':
+            event.preventDefault();
+            setSelectedSuggestionIndex((prev) => (prev < filteredSuggestions.length - 1 ? prev + 1 : 0));
+            break;
+          case 'ArrowUp':
+            event.preventDefault();
+            setSelectedSuggestionIndex((prev) => (prev > 0 ? prev - 1 : filteredSuggestions.length - 1));
+            break;
+          case 'Enter':
+            event.preventDefault();
+            if (selectedSuggestionIndex >= 0) {
+              handleSuggestionClick(filteredSuggestions[selectedSuggestionIndex]);
+            }
+            break;
+          case 'Escape':
+            setShowSuggestions(false);
+            setSelectedSuggestionIndex(-1);
+            break;
+        }
+      },
+      [showSuggestions, filteredSuggestions, selectedSuggestionIndex, handleSuggestionClick]
+    );
+
+    const clearSearch = useCallback(() => {
+      setSearchQuery('');
+      setShowSuggestions(false);
+      setFilteredSuggestions([]);
+      setSelectedSuggestionIndex(-1);
+      onClear();
+      if (searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    }, [onClear]);
+
+    // Close suggestions when clicking outside
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+          setShowSuggestions(false);
+          setSelectedSuggestionIndex(-1);
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, []);
+
+    return (
+      <div ref={containerRef} className="w-full max-w-md mx-auto relative">
+        <div className="relative">
+          <input
+            ref={searchInputRef}
+            type="text"
+            placeholder="Search nodes..."
+            value={searchQuery}
+            onChange={handleSearchChange}
+            onKeyDown={handleSearchKeyDown}
+            onFocus={handleSearchFocus}
+            className="w-full px-4 py-2 pr-10 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+          {searchQuery && (
+            <button
+              onClick={clearSearch}
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+              aria-label="Clear search"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+        {showSuggestions && filteredSuggestions.length > 0 && (
+          <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-md shadow-lg z-50 max-h-60 overflow-y-auto">
+            {filteredSuggestions.map((node, index) => {
+              const nodeName = getNodeDisplayName(node);
+              const nodeType = node.type || 'unknown';
+              return (
+                <div
+                  key={node.id}
+                  onClick={() => handleSuggestionClick(node)}
+                  className={`px-4 py-2 cursor-pointer flex items-center justify-between hover:bg-gray-100 ${
+                    index === selectedSuggestionIndex ? 'bg-purple-50' : ''
+                  }`}
+                >
+                  <span className="text-sm font-medium text-gray-900">{nodeName}</span>
+                  <span className={`text-xs capitalize px-2 py-1 rounded ${getNodeTypeColorClass(nodeType)}`}>{nodeType}</span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+VisualiserSearch.displayName = 'VisualiserSearch';
+
+export default VisualiserSearch;

package/eventcatalog/src/middleware-auth.ts

@@ -0,0 +1,283 @@
+// src/middleware/auth.ts
+import type { MiddlewareHandler } from 'astro';
+import { getSession } from 'auth-astro/server';
+import { isAuthEnabled } from '@utils/feature';
+import jwt from 'jsonwebtoken';
+
+// Define the types in this file
+export interface NormalizedUser {
+  id: string;
+  email: string;
+  name?: string;
+  picture?: string;
+  roles: string[];
+  permissions: string[];
+  groups: string[];
+  metadata: Record<string, any>;
+  provider: 'auth0' | 'okta' | 'microsoft' | 'google' | 'unknown';
+  raw: {
+    user: any;
+    token: any;
+  };
+}
+
+// Type the locals object with matching utilities
+interface TypedLocals {
+  session: any;
+  user: NormalizedUser;
+  hasRole: (role: string) => boolean;
+  hasPermission: (permission: string) => boolean;
+  hasGroup: (group: string) => boolean;
+  findMatchingRule: (rules: Record<string, () => boolean>, pathname: string) => (() => boolean) | null;
+  matchesPattern: (pattern: string, pathname: string) => boolean;
+}
+
+// Wildcard matching utilities
+export function matchesPattern(pattern: string, pathname: string): boolean {
+  const regexPattern = pattern
+    .replace(/\*/g, '[^/]+') // * matches any characters except /
+    .replace(/\*\*/g, '.*'); // ** matches any characters including /
+
+  const regex = new RegExp(`^${regexPattern}$`);
+  return regex.test(pathname);
+}
+
+function calculateSpecificity(pattern: string): number {
+  let score = 0;
+  score += (pattern.length - (pattern.match(/\*/g) || []).length) * 10;
+  score -= (pattern.match(/\*/g) || []).length * 5;
+  return score;
+}
+
+export function findMatchingRule(rules: Record<string, () => boolean>, pathname: string) {
+  const matches = [];
+
+  for (const [pattern, rule] of Object.entries(rules)) {
+    if (matchesPattern(pattern, pathname)) {
+      matches.push({ pattern, rule, specificity: calculateSpecificity(pattern) });
+    }
+  }
+
+  // Sort by specificity (most specific first)
+  matches.sort((a, b) => b.specificity - a.specificity);
+
+  return matches.length > 0 ? matches[0].rule : null;
+}
+
+export const authMiddleware: MiddlewareHandler = async (context, next) => {
+  const { request, redirect, locals } = context;
+  const url = new URL(request.url);
+  const pathname = url.pathname;
+
+  // If auth is disabled and we are on an auth route, redirect to home
+  if (!isAuthEnabled() && pathname.includes('/auth')) {
+    return redirect('/');
+  }
+
+  // Auth is disabled, skip auth check
+  if (!isAuthEnabled()) {
+    return next();
+  }
+
+  // Skip system/browser requests
+  const systemRoutes = ['/.well-known/', '/favicon.ico', '/robots.txt', '/sitemap.xml', '/_astro/', '/__astro'];
+  const publicRoutes = ['/auth/login', '/auth/signout', '/auth/error', '/api/auth'];
+
+  if (
+    pathname.startsWith('/_') ||
+    systemRoutes.some((route) => pathname.startsWith(route)) ||
+    pathname.startsWith('/.well-known/') ||
+    publicRoutes.some((route) => pathname.startsWith(route))
+  ) {
+    return next();
+  }
+
+  try {
+    const session = await getSession(request);
+
+    if (!session) {
+      const callbackUrl = encodeURIComponent(pathname + url.search);
+      return redirect(`/auth/login?callbackUrl=${callbackUrl}`);
+    }
+
+    // Normalize user data across providers
+    const normalizedUser = normalizeUserData(session);
+
+    // Type assertion for locals
+    const typedLocals = locals as TypedLocals;
+
+    // Add session and normalized user to locals
+    typedLocals.session = session;
+    typedLocals.user = normalizedUser;
+
+    // Add helper functions for customer middleware
+    typedLocals.hasRole = (role: string) => normalizedUser.roles.includes(role);
+    typedLocals.hasPermission = (permission: string) => normalizedUser.permissions.includes(permission);
+    typedLocals.hasGroup = (group: string) => {
+      return normalizedUser.groups.includes(group);
+    };
+
+    // Add wildcard matching utilities to locals
+    typedLocals.findMatchingRule = findMatchingRule;
+    typedLocals.matchesPattern = matchesPattern;
+  } catch (error) {
+    console.error('Session error:', error);
+    const callbackUrl = encodeURIComponent(pathname + url.search);
+    return redirect(`/auth/login?callbackUrl=${callbackUrl}`);
+  }
+
+  return next();
+};
+
+// Normalize user data from different providers
+function normalizeUserData(session: any): NormalizedUser {
+  const user = session.user;
+  const accessToken = session.accessToken;
+  let decodedToken = null;
+
+  if (accessToken) {
+    try {
+      decodedToken = jwt.decode(accessToken);
+    } catch (e) {
+      console.warn('Could not decode access token');
+    }
+  }
+
+  const provider = detectProvider(session);
+
+  switch (provider) {
+    case 'auth0':
+      return normalizeAuth0User(user, decodedToken);
+    case 'okta':
+      return normalizeOktaUser(user, decodedToken);
+    case 'microsoft':
+      return normalizeMicrosoftUser(user, decodedToken);
+    case 'google':
+      return normalizeGoogleUser(user, decodedToken);
+    default:
+      return normalizeGenericUser(user, decodedToken);
+  }
+}
+
+function detectProvider(session: any): string {
+  const account = session.account;
+  if (account?.provider) return account.provider;
+
+  if (session.user?.sub?.startsWith('auth0|')) return 'auth0';
+  if (session.user?.iss?.includes('okta.com') || session.user?.provider?.includes('okta')) return 'okta';
+  if (session.user?.iss?.includes('microsoft')) return 'microsoft';
+  if (session.user?.iss?.includes('google')) return 'google';
+
+  return 'unknown';
+}
+
+function normalizeAuth0User(user: any, token: any): NormalizedUser {
+  return {
+    id: user.sub || user.id,
+    email: user.email,
+    name: user.name,
+    picture: user.picture,
+    roles: token?.['https://eventcatalog.dev/roles'] || [],
+    permissions: token?.permissions || [],
+    groups: token?.['https://eventcatalog.dev/groups'] || [],
+    metadata: token?.['https://eventcatalog.dev/app_metadata'] || {},
+    provider: 'auth0',
+    raw: { user, token },
+  };
+}
+
+function normalizeOktaUser(user: any, token: any): NormalizedUser {
+  // Try to get groups from multiple sources
+  let groups: string[] = [];
+  let roles: string[] = [];
+
+  // Source 1: User object (from session)
+  if (user.groups && Array.isArray(user.groups)) {
+    groups = user.groups;
+  }
+
+  // Source 2: Decoded token (from access token)
+  if ((!groups || groups.length === 0) && token?.groups && Array.isArray(token.groups)) {
+    groups = token.groups;
+  }
+
+  // Source 3: Roles
+  if (user.roles && Array.isArray(user.roles)) {
+    roles = user.roles;
+  } else if (token?.roles && Array.isArray(token.roles)) {
+    roles = token.roles;
+  }
+
+  return {
+    id: user.sub || user.id,
+    email: user.email,
+    name: user.name,
+    picture: user.picture,
+    roles: roles,
+    permissions: [],
+    groups: groups,
+    metadata: {
+      department: token?.department || user.department,
+      title: token?.title || user.title,
+      locale: token?.locale || user.locale,
+    },
+    provider: 'okta',
+    raw: { user, token },
+  };
+}
+
+function normalizeMicrosoftUser(user: any, token: any): NormalizedUser {
+  // Groups should now be available directly on the user object from the session callback
+  const groups = user.groups || token?.groups || [];
+  const roles = user.roles || token?.roles || [];
+
+  return {
+    id: user.sub || user.oid,
+    email: user.email || user.preferred_username,
+    name: user.name,
+    picture: user.picture,
+    roles: roles,
+    permissions: [],
+    groups: groups,
+    metadata: {
+      department: token?.extension_Department,
+      jobTitle: token?.jobTitle,
+      companyName: token?.companyName,
+    },
+    provider: 'microsoft',
+    raw: { user, token },
+  };
+}
+
+function normalizeGoogleUser(user: any, token: any): NormalizedUser {
+  return {
+    id: user.sub || user.id,
+    email: user.email,
+    name: user.name,
+    picture: user.picture,
+    roles: [],
+    permissions: [],
+    groups: [],
+    metadata: {
+      domain: token?.hd,
+      locale: token?.locale,
+    },
+    provider: 'google',
+    raw: { user, token },
+  };
+}
+
+function normalizeGenericUser(user: any, token: any): NormalizedUser {
+  return {
+    id: user.sub || user.id || user.email,
+    email: user.email,
+    name: user.name,
+    picture: user.picture,
+    roles: user.roles || token?.roles || [],
+    permissions: user.permissions || token?.permissions || [],
+    groups: user.groups || token?.groups || [],
+    metadata: {},
+    provider: 'unknown',
+    raw: { user, token },
+  };
+}

package/eventcatalog/src/middleware.ts

@@ -1,62 +1,47 @@
-// src/middleware.ts
 import type { MiddlewareHandler } from 'astro';
-import { getSession } from 'auth-astro/server';
-import { isAuthEnabled } from '@utils/feature';
-
-export const onRequest: MiddlewareHandler = async (context, next) => {
-  const { request, redirect, locals } = context;
-  const url = new URL(request.url);
-  const pathname = url.pathname;
-
-  // If auth is disabled and we are on an auth route, redirect to home
-  if (!isAuthEnabled() && pathname.includes('/auth')) {
-    return redirect('/');
-  }
-
-  // Auth is disabled, skip auth check
-  if (!isAuthEnabled()) {
-    return next();
+import { authMiddleware } from './middleware-auth.ts';
+import { sequence } from 'astro:middleware';
+import { join } from 'node:path';
+import { isSSR } from '@utils/feature';
+
+// Try to load customer's custom RBAC middleware
+let customerRbacMiddleware: MiddlewareHandler | null = null;
+
+try {
+  const catalogDirectory = process.env.PROJECT_DIR || process.cwd();
+  const customerMiddleware = await import(/* @vite-ignore */ join(catalogDirectory, 'middleware.ts'));
+  customerRbacMiddleware = customerMiddleware.rbacMiddleware;
+
+  if (!isSSR()) {
+    // Tell user they need to build in SSR mode
+    console.log(
+      '🔴 Found custom middleware.ts file. To use RBAC, you need to build in SSR mode, by setting output: "server" in your eventcatalog.config.js file.'
+    );
+  } else {
+    console.log('✅ Loaded custom RBAC middleware');
   }
+} catch (error) {
+  console.log('Error loading custom RBAC middleware:', error);
+  // Just silently fail, we don't want to block the app
+}
 
-  // Skip system/browser requests
-  const systemRoutes = ['/.well-known/', '/favicon.ico', '/robots.txt', '/sitemap.xml', '/_astro/', '/__astro'];
+const errorHandlingMiddleware: MiddlewareHandler = async (context, next) => {
+  const response = await next();
 
-  // Skip auth check for these routes
-  const publicRoutes = ['/auth/login', '/auth/signout', '/auth/error', '/api/auth'];
+  if (response.status === 403) {
+    const params = new URLSearchParams({
+      path: context.url.pathname,
+      returnTo: context.url.pathname + context.url.search,
+    });
 
-  // Skip static files, system routes, and browser requests
-  if (
-    pathname.startsWith('/_') ||
-    systemRoutes.some((route) => pathname.startsWith(route)) ||
-    pathname.startsWith('/.well-known/')
-  ) {
-    return next();
+    return context.redirect(`/unauthorized?${params.toString()}`);
   }
 
-  // Skip public routes
-  if (publicRoutes.some((route) => pathname.startsWith(route))) {
-    return next();
-  }
+  return response;
+};
 
-  try {
-    // Check if user is logged in
-    const session = await getSession(request);
-
-    if (!session) {
-      const callbackUrl = encodeURIComponent(pathname + url.search);
-      return redirect(`/auth/login?callbackUrl=${callbackUrl}`);
-    }
-
-    // Add session to locals for pages to use
-    // @ts-ignore
-    locals.session = session;
-    // @ts-ignore
-    locals.user = session.user;
-  } catch (error) {
-    console.error('Session error:', error);
-    const callbackUrl = encodeURIComponent(pathname + url.search);
-    return redirect(`/auth/login?callbackUrl=${callbackUrl}`);
-  }
+const middlewareChain = customerRbacMiddleware
+  ? [errorHandlingMiddleware, authMiddleware, customerRbacMiddleware]
+  : [errorHandlingMiddleware, authMiddleware];
 
-  return next();
-};
+export const onRequest = isSSR() ? sequence(...middlewareChain) : undefined;

package/eventcatalog/src/pages/auth/login.astro

@@ -1,11 +1,9 @@
 ---
 import config from '@config';
 const { title, logo } = config;
-import { getSession } from 'auth-astro/server';
 import { join } from 'node:path';
 import { isAuthEnabled, isSSR } from '@utils/feature';
 
-const session = await getSession(Astro.request);
 const catalogDirectory = process.env.PROJECT_DIR || process.cwd();
 
 let hasAuthConfigurationFile = false;
@@ -25,10 +23,20 @@ const shouldShowLogin = hasAuthConfigurationFile && isSSR() && isAuthEnabled() &
 // Check if configuration exists but no providers are set up
 const hasConfigButNoProviders = hasAuthConfigurationFile && isSSR() && isAuthEnabled() && providers.length === 0;
 
-if (session) {
+// If we are not in SSR mode, redirect to home
+if (!isSSR() || !isAuthEnabled()) {
   return Astro.redirect('/');
 }
 
+// If we are in SSR mode, check if the user is already logged in
+if (isSSR() && isAuthEnabled()) {
+  const { getSession } = await import(/* @vite-ignore */ 'auth-astro/server');
+  const session = await getSession(Astro.request);
+  if (session) {
+    return Astro.redirect('/');
+  }
+}
+
 // Provider configurations
 const providerConfig = {
   github: {

package/eventcatalog/src/pages/unauthorized/index.astro

@@ -0,0 +1,84 @@
+---
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+---
+
+<VerticalSideBarLayout title="Unauthorized - EventCatalog">
+  <div class="flex h-[calc(100vh-120px)] bg-white">
+    <main class="flex w-full items-center justify-center bg-white text-center sm:p-12">
+      <div class="w-full max-w-xl text-center">
+        <div class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-red-100">
+          <svg
+            class="h-9 w-9 text-red-600"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+          </svg>
+        </div>
+
+        <h1 class="text-3xl font-bold text-gray-800 mb-4">Access Denied</h1>
+
+        <p class="max-w-md mx-auto text-base text-gray-500 mb-8">You don't have permission to access this resource.</p>
+
+        <!-- Client-side path display -->
+        <div
+          id="path-container"
+          class="hidden mb-8 w-full max-w-lg mx-auto rounded-lg border border-gray-200 bg-gray-100 p-4 text-left"
+        >
+          <p class="mb-2 text-sm font-medium text-gray-600">Requested path:</p>
+          <code id="requested-path" class="break-all font-mono text-sm text-gray-800"></code>
+        </div>
+
+        <div class="flex flex-col sm:flex-row gap-4 justify-center">
+          <button
+            onclick="history.back()"
+            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+            </svg>
+            Go Back
+          </button>
+
+          <a
+            href="/dashboard"
+            class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          >
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
+            </svg>
+            Go to Dashboard
+          </a>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Client-side script -->
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      // Get query parameters on the client side
+      const url = new URL(window.location.href);
+      const path = url.searchParams.get('path');
+
+      if (path) {
+        const pathContainer = document.getElementById('path-container');
+        const requestedPath = document.getElementById('requested-path');
+
+        if (pathContainer && requestedPath) {
+          requestedPath.textContent = path;
+          pathContainer.classList.remove('hidden');
+        }
+      }
+    });
+  </script>
+</VerticalSideBarLayout>

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.43.5",
+  "version": "2.44.1",
   "publishConfig": {
     "access": "public"
   },
@@ -74,6 +74,7 @@
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",
     "js-yaml": "^4.1.0",
+    "jsonwebtoken": "^9.0.2",
     "langchain": "^0.3.19",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "4.6.2",
@@ -104,6 +105,7 @@
     "@types/dagre": "^0.7.52",
     "@types/diff": "^5.2.2",
     "@types/js-yaml": "^4.0.9",
+    "@types/jsonwebtoken": "^9.0.10",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.merge": "4.6.9",
     "@types/node": "^20.14.2",