@eventcatalog/core 4.12.0-beta.9 → 4.12.1

package/dist/docs/development/guides/resources/schemas/04-explore-schemas/01-schema-explorer.md

@@ -11,21 +11,22 @@ import AddedIn from '@site/src/components/MDX/AddedIn';
 
 The Schema Explorer lets your teams quickly find the schema, understand who owns it, and who is producing or consuming it (see [demo](https://demo.eventcatalog.dev/schemas)).
 
-![Example](../img/schema-explorer.png)
+![Schema Explorer with a list of schemas on the left and the Review Submitted schema open on the right](../img/schema-explorer.png)
 
 Using the Schema Explorer, you can:
 
 - Quickly find schemas in your Architecture
-- View diffs between versions of your schemas
-- Quickly find who is consuming or producing your schemas
-- Schema ownership to query who owns a schema
+- Read usage examples written by the team that owns the schema
+- See who is producing or consuming a schema, and which flows it is part of
+- Compare versions of your schemas
+- See schema ownership and where the schema comes from
 - Get API (GET) access to your schemas for mocking or testing
 
 ### How to use the Schema Explorer?
 
 You can access the Schema Explorer from the sidebar, or by going to the `/schemas/explorer` page.
 
-The page will take all the schemas from your EventCatalog and render them in a searchable list.
+The page will take all the schemas from your EventCatalog and render them in a searchable list. Select a schema to open it on the right.
 
 :::tip Schema Path
 You need to set the `schemaPath` in your schema frontmatter to the path to your schema file for Events, Queries and Commands.
@@ -33,19 +34,84 @@ You need to set the `schemaPath` in your schema frontmatter to the path to your
 For services you need to specify the path to your specification file in the `specifications` frontmatter.
 :::
 
-![Example](../img/schema-explorer-2.png)
-
 ##### Filters
-You can use the filters to quickly find schemas in your Architecture. You can filter by name, message type and schema format.
 
-##### Schema Preview
+Use the search box to find schemas by name. Select the filter button next to it to filter by type (events, commands, queries, or specifications) and by schema format.
 
-The schema preview will show you a preview of the schema in a readable format, you can use the `Schema` button to switch between different views of your schema (if they are supported, JSON or Avro).
+<img src={require('../img/schema-explorer-2.png').default} alt="Schema Explorer search box and filters for type and format" style={{ width: '100%', maxWidth: '360px' }} />
 
-##### API Access
+##### Schema pages
+
+Every message schema also has its own page at `/schemas/{type}/{id}/{version}`, for example `/schemas/events/OrderCreated/1.0.0`. Share this link when you want someone to look at one schema.
+
+### Schema tabs
+
+<AddedIn version="4.11.0" />
+
+Each schema is split into tabs. EventCatalog only shows a tab when there is something to show, for example the **Flows** tab only appears when the message is part of a flow.
+
+| Tab | What it shows |
+| --- | ------------- |
+| **Schema** | The raw schema, with syntax highlighting and a copy button. |
+| **Properties** | A readable view of the schema properties (JSON Schema, Avro and Protobuf). |
+| **Examples** | [Usage examples](/docs/development/guides/resources/messages/add-usage-examples) stored in the message's `examples/` folder. |
+| **Producers & Consumers** | A graph of the services that produce and consume the message. |
+| **Flows** | The [flows](/docs/development/guides/resources/flows/introduction) the message is part of. |
+| **Versions** | Every version of the schema, with a side-by-side comparison. |
+| **Details** | Schema metadata: format, version, file, source, and owners. |
+| **API** | API access to the schema (EventCatalog Scale). |
+
+##### Link to a tab
+
+The selected tab is stored in the `tab` query parameter, so you can link straight to it.
+
+```txt
+/schemas/events/OrderCreated/1.0.0?tab=examples
+```
+
+| Tab | `tab` value |
+| --- | ----------- |
+| Schema | `schema` (default) |
+| Properties | `properties` |
+| Examples | `examples` |
+| Producers & Consumers | `producers-consumers` |
+| Flows | `flows` |
+| Versions | `versions` |
+| Details | `details` |
+| API | `api` |
+
+If the tab does not exist for that message, EventCatalog opens the **Schema** tab.
+
+##### Examples
+
+The **Examples** tab shows the examples your team has written for the message. Examples written in Markdown or MDX can explain the scenario and show code in several languages.
 
-For EventCatalog Scale users, you can get API (GET) access to your schemas for mocking or testing. 
+![Examples tab showing a written example next to a code group](../img/schema-explorer-examples.png)
+
+To add examples, see [Add usage examples](/docs/development/guides/resources/messages/add-usage-examples).
 
 ##### Producers and Consumers
 
-The producers and consumers section will show you who is producing or consuming the schema. You can click on the producer or consumer to see more information about them.
+The **Producers & Consumers** tab shows the services that produce and consume the message, using the same graph as the message page. Click on a producer or consumer to see more information about them.
+
+![Producers and Consumers tab showing the Review API publishing Review Submitted, which the Review Moderation Worker subscribes to](../img/schema-explorer-producers-consumers.png)
+
+##### Flows
+
+The **Flows** tab shows the flows the message is part of. If the message is used in more than one flow, pick the flow from the dropdown. Use **Open flow** to go to the flow page.
+
+![Flows tab showing the Review Submission flow](../img/schema-explorer-flows.png)
+
+##### Versions
+
+The **Versions** tab lists every version of the schema. Select a version to view it, or pick a **From** and **To** version to compare them side by side. Use **Expand** to open the comparison in a larger view.
+
+You can also switch versions from the version dropdown next to the schema name.
+
+##### Details
+
+The **Details** tab shows the schema name, format, message type, version, file, and owners. When a schema comes from an external source, the tab also shows where it came from.
+
+##### API Access
+
+For EventCatalog Scale users, you can get API (GET) access to your schemas for mocking or testing. See [Schema API](/docs/development/guides/resources/schemas/schema-api).

package/dist/docs/development/upgrading/upgrading.md

@@ -38,7 +38,11 @@ To upgrade your EventCatalog you can find the packages `@eventcatalog/core` your
 Once you upgrade the version number, run `npm install` to install the latest updates.
 
 :::tip
-If you don't see the changes you expect, try removing the `.eventcatalog-core` folder, `node_modules` folder and install fresh again.
+If you don't see the changes you expect, try removing the `.astro` folder, the `.eventcatalog-core` folder (if your project has one) and the `node_modules` folder, then install fresh again.
+:::
+
+:::info
+From EventCatalog 4.12, EventCatalog no longer creates a `.eventcatalog-core` folder. If your project still has one from an older version, you can delete it once any older EventCatalog processes have stopped.
 :::
 
 ### Having problems?
@@ -46,9 +50,10 @@ If you don't see the changes you expect, try removing the `.eventcatalog-core` f
 Trying to upgrade and having issues? Try these steps
 
 1. Delete `node_modules` folder
-1. Delete `.eventcatalog-core` folder
+1. Delete `.astro` folder
+1. Delete `.eventcatalog-core` folder (if you have one)
 1. Delete `package-lock.json` (if you have one).
-1. Run `npm run i`
+1. Run `npm install`
 1. Verify if issues are fixed
 
 Still having issues?

package/dist/docs/development/upgrading/v4.md

@@ -43,7 +43,7 @@ Before upgrading, we recommend:
 
 1. Create a branch for the upgrade.
 1. Upgrade `@eventcatalog/core`.
-1. Remove `.eventcatalog-core`, `node_modules`, and your lock file if the catalog does not pick up the new version.
+1. Remove `.astro`, `.eventcatalog-core` (if you have one), `node_modules`, and your lock file if the catalog does not pick up the new version.
 1. Run your catalog locally and check custom pages, custom navigation, and visualiser links.
 
 ## Removed

package/dist/eventcatalog.cjs

@@ -181,7 +181,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.12.0-beta.9";
+var version = "4.12.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -1,6 +1,7 @@
 import {
   log_build_default
-} from "./chunk-4S47JELQ.js";
+} from "./chunk-UWSBZYF5.js";
+import "./chunk-HH6GPY4H.js";
 import "./chunk-ZAZHAVKB.js";
 import {
   runMigrations
@@ -10,18 +11,17 @@ import {
   FederationConflictError,
   FederationDiagnosticError,
   federateCatalog
-} from "./chunk-U4YJSTGV.js";
-import "./chunk-WRNH5C3U.js";
-import "./chunk-5EPNFDT5.js";
-import "./chunk-A2RZR3U4.js";
-import "./chunk-SDZQJTJW.js";
-import "./chunk-352FGP6W.js";
-import "./chunk-R7Z5ALYI.js";
+} from "./chunk-WRLNLWPW.js";
 import {
   getFederationDiagnosticCounts,
   getVisibleFederationDiagnostics
 } from "./chunk-JJPB6EOZ.js";
 import "./chunk-FV56YFM4.js";
+import "./chunk-WRNH5C3U.js";
+import "./chunk-5EPNFDT5.js";
+import "./chunk-A2RZR3U4.js";
+import "./chunk-SDZQJTJW.js";
+import "./chunk-352FGP6W.js";
 import {
   getProjectOutDir,
   isAuthEnabled,
@@ -30,10 +30,10 @@ import {
 } from "./chunk-MDWB5HLO.js";
 import {
   generate
-} from "./chunk-K3DWGBGQ.js";
+} from "./chunk-EVXNBTRA.js";
 import {
   logger
-} from "./chunk-GNFKUOXD.js";
+} from "./chunk-DZZDBFUM.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-36RYTYT5.js";
@@ -47,7 +47,7 @@ import {
 import {
   watch
 } from "./chunk-U63GDPPY.js";
-import "./chunk-YOIPWS7L.js";
+import "./chunk-R7Z5ALYI.js";
 import {
   getAstroConfigPath
 } from "./chunk-VIJJ7JKH.js";
@@ -63,7 +63,7 @@ import {
 } from "./chunk-LFQJXLHG.js";
 import {
   VERSION
-} from "./chunk-UIHG2TPV.js";
+} from "./chunk-HHZFKWX7.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/federation/federate.js

@@ -2,15 +2,15 @@ import {
   FederationConflictError,
   FederationDiagnosticError,
   federateCatalog
-} from "../chunk-U4YJSTGV.js";
+} from "../chunk-WRLNLWPW.js";
+import "../chunk-JJPB6EOZ.js";
+import "../chunk-FV56YFM4.js";
 import "../chunk-WRNH5C3U.js";
 import "../chunk-5EPNFDT5.js";
 import "../chunk-A2RZR3U4.js";
 import "../chunk-SDZQJTJW.js";
 import "../chunk-352FGP6W.js";
 import "../chunk-R7Z5ALYI.js";
-import "../chunk-JJPB6EOZ.js";
-import "../chunk-FV56YFM4.js";
 import "../chunk-RFIXKATC.js";
 export {
   FederationConflictError,

package/dist/generate.cjs

@@ -112,7 +112,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.12.0-beta.9";
+var version = "4.12.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-K3DWGBGQ.js";
-import "./chunk-GNFKUOXD.js";
-import "./chunk-UIHG2TPV.js";
+} from "./chunk-EVXNBTRA.js";
+import "./chunk-DZZDBFUM.js";
+import "./chunk-HHZFKWX7.js";
 import "./chunk-RFIXKATC.js";
 export {
   generate

package/dist/runtime-dependencies/manifest.json

@@ -65,9 +65,6 @@
   "astro/logger/node": "astro__logger__node.mjs",
   "astro/types": "astro__types.mjs",
   "astro/zod": "astro__zod.mjs",
-  "auth-astro": "auth-astro.mjs",
-  "auth-astro/client": "auth-astro__client.mjs",
-  "auth-astro/server": "auth-astro__server.mjs",
   "boxen": "boxen.mjs",
   "commander": "commander.mjs",
   "cross-env": "cross-env.mjs",
@@ -123,6 +120,7 @@
   "remark-gfm": "remark-gfm.mjs",
   "rimraf": "rimraf.mjs",
   "semver": "semver.mjs",
+  "set-cookie-parser": "set-cookie-parser.mjs",
   "shelljs": "shelljs.mjs",
   "sonner": "sonner.mjs",
   "sql.js": "sql.js.mjs",

package/dist/runtime-dependencies/set-cookie-parser.mjs

@@ -0,0 +1,3 @@
+export * from "set-cookie-parser";
+import * as dependency from "set-cookie-parser";
+export default dependency.default;

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.12.0-beta.9";
+var version = "4.12.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-GNFKUOXD.js";
-import "../chunk-UIHG2TPV.js";
+} from "../chunk-DZZDBFUM.js";
+import "../chunk-HHZFKWX7.js";
 export {
   logger
 };

package/eventcatalog/auth.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig } from 'auth-astro';
+import { defineConfig } from '@utils/auth-astro/config';
 import { join } from 'node:path';
 import GitHub from '@auth/core/providers/github';
 import Okta from '@auth/core/providers/okta';
@@ -22,9 +22,8 @@ const getAuthProviders = async () => {
     // GitHub provider
     if (authConfig.providers?.github) {
       const githubConfig = authConfig.providers.github;
-      // GitHub sends an RFC 9207 `iss` parameter on OAuth callbacks. Pin the issuer so
-      // validation works even when the resolved @auth/core copy predates the upstream
-      // default (auth-astro's peer range can hoist an older @auth/core in user projects).
+      // GitHub sends an RFC 9207 `iss` parameter on OAuth callbacks. Pin the issuer,
+      // including for GitHub Enterprise base URLs, so validation works.
       const githubBaseUrl = githubConfig?.enterprise?.baseUrl ?? 'https://github.com';
       providers.push(
         GitHub({

package/eventcatalog/src/components/Header.astro

@@ -8,7 +8,7 @@ import {
   isEventCatalogChatVisible,
   isEventCatalogChatEnabled,
 } from '@utils/feature';
-import { getSession } from 'auth-astro/server';
+import { getSession } from '@utils/auth-astro/server';
 import { isAuthEnabled, isSSR } from '@utils/feature';
 import { EnvironmentDropdown } from './EnvironmentDropdown';
 import ChatPanelButton from './ChatPanel/ChatPanelButton';
@@ -28,6 +28,27 @@ const logo = {
 };
 
 const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalog/eventcatalog';
+
+const user = session?.user as { name?: string; email?: string; image?: string; provider?: string } | undefined;
+const userName = user?.name || user?.email || 'User';
+const userInitials =
+  userName
+    .split(/[\s@.]+/)
+    .filter(Boolean)
+    .map((part) => part[0])
+    .join('')
+    .substring(0, 2)
+    .toUpperCase() || 'U';
+// Google avatar URLs are blocked by some browsers' tracking protection, so fall back to initials
+const userImage = user?.image && !user.image.includes('googleusercontent.com') ? user.image : undefined;
+const providerNames: Record<string, string> = {
+  github: 'GitHub',
+  google: 'Google',
+  okta: 'Okta',
+  auth0: 'Auth0',
+  'microsoft-entra-id': 'Microsoft Entra ID',
+};
+const providerName = user?.provider ? providerNames[user.provider] || user.provider : undefined;
 ---
 
 <nav
@@ -58,46 +79,90 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                 <button
                   id="profile-menu-button"
                   type="button"
-                  class="flex items-center focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 rounded-full"
+                  class="group flex items-center gap-1 rounded-full p-0.5 pr-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] hover:bg-[rgb(var(--ec-dropdown-hover))] aria-expanded:bg-[rgb(var(--ec-dropdown-hover))] transition-colors focus:outline-hidden focus-visible:ring-2 focus-visible:ring-[rgb(var(--ec-accent))]"
                   aria-expanded="false"
-                  aria-haspopup="true"
-                  aria-label="User menu"
+                  aria-haspopup="menu"
+                  aria-controls="profile-dropdown"
+                  aria-label={`Account menu for ${userName}`}
                 >
-                  {session.user?.image && !session.user?.image?.includes('googleusercontent.com') ? (
+                  {userImage ? (
                     <img
-                      src={session.user.image}
-                      alt={session.user?.name || 'User'}
-                      class="h-9 w-9 rounded-full border-2 border-gray-200 hover:border-gray-400 transition-all shadow-xs"
+                      src={userImage}
+                      alt=""
+                      class="h-8 w-8 rounded-full object-cover ring-1 ring-[rgb(var(--ec-page-border))]"
                     />
                   ) : (
-                    <div class="h-9 w-9 rounded-full border-2 border-gray-200 hover:border-gray-400 transition-all bg-gray-100 hover:bg-gray-200 flex items-center justify-center text-sm font-medium text-gray-600 shadow-xs">
-                      {session.user?.name
-                        ? session.user.name
-                            .split(' ')
-                            .map((n) => n[0])
-                            .join('')
-                            .substring(0, 2)
-                            .toUpperCase()
-                        : 'U'}
-                    </div>
+                    <span class="h-8 w-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] ring-1 ring-[rgb(var(--ec-page-border))] flex items-center justify-center text-xs font-semibold">
+                      {userInitials}
+                    </span>
                   )}
+                  <svg
+                    viewBox="0 0 24 24"
+                    class="h-4 w-4 transition-transform group-aria-expanded:rotate-180"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
                 </button>
                 <div
                   id="profile-dropdown"
-                  class="ec-hidden absolute right-0 mt-2 w-48 bg-[rgb(var(--ec-dropdown-bg))] rounded-lg shadow-md py-1 z-50 border-2 border-[rgb(var(--ec-dropdown-border))] overflow-hidden"
+                  role="menu"
+                  aria-labelledby="profile-menu-button"
+                  class="ec-hidden absolute right-0 mt-2 w-64 bg-[rgb(var(--ec-dropdown-bg))] rounded-xl shadow-lg z-50 border border-[rgb(var(--ec-dropdown-border))] overflow-hidden"
                 >
-                  <div class="px-4 py-2 text-sm text-[rgb(var(--ec-dropdown-text))] border-b border-[rgb(var(--ec-dropdown-border))]">
-                    <div class="font-semibold">{session.user?.name || 'User'}</div>
-                    {session.user?.email && (
-                      <div class="text-[rgb(var(--ec-icon-color))] text-xs mt-0.5">{session.user.email}</div>
+                  <div class="flex items-center gap-3 px-4 py-3 border-b border-[rgb(var(--ec-dropdown-border))]">
+                    {userImage ? (
+                      <img
+                        src={userImage}
+                        alt=""
+                        class="h-10 w-10 shrink-0 rounded-full object-cover ring-1 ring-[rgb(var(--ec-page-border))]"
+                      />
+                    ) : (
+                      <span class="h-10 w-10 shrink-0 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] flex items-center justify-center text-sm font-semibold">
+                        {userInitials}
+                      </span>
                     )}
+                    <div class="min-w-0">
+                      <div class="truncate text-sm font-semibold text-[rgb(var(--ec-dropdown-text))]">{userName}</div>
+                      {user?.email && user.email !== userName && (
+                        <div class="truncate text-xs font-normal text-[rgb(var(--ec-page-text-muted))]">{user.email}</div>
+                      )}
+                      {providerName && (
+                        <div class="truncate text-xs font-normal text-[rgb(var(--ec-page-text-muted))]">
+                          Signed in with {providerName}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div class="p-1">
+                    <button
+                      id="signout-btn"
+                      type="button"
+                      role="menuitem"
+                      class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm font-medium text-[rgb(var(--ec-dropdown-text))] hover:bg-[rgb(var(--ec-dropdown-hover))] focus:outline-hidden focus-visible:bg-[rgb(var(--ec-dropdown-hover))] transition-colors"
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        class="h-4 w-4 text-[rgb(var(--ec-icon-color))]"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        aria-hidden="true"
+                      >
+                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                        <polyline points="16 17 21 12 16 7" />
+                        <line x1="21" x2="9" y1="12" y2="12" />
+                      </svg>
+                      Sign out
+                    </button>
                   </div>
-                  <button
-                    id="signout-btn"
-                    class="block w-full text-left px-4 py-2 text-sm text-[rgb(var(--ec-dropdown-text))] hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors font-medium"
-                  >
-                    Sign out
-                  </button>
                 </div>
               </div>
             </div>
@@ -210,9 +275,15 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
 <!-- Spacer to prevent content from being hidden under the fixed header -->
 
 <script>
-  import { signOut } from 'auth-astro/client';
+  import { signOut } from '@utils/auth-astro/client';
 
   function initializeHeader() {
+    // ClientRouter fires astro:page-load on the first load too, and the header persists across
+    // navigations. Bind once per element so clicks don't toggle the menus open and shut again.
+    const header = document.getElementById('eventcatalog-header');
+    if (!header || header.dataset.initialized === 'true') return;
+    header.dataset.initialized = 'true';
+
     const menuToggle = document.getElementById('menu-toggle');
     const mobileMenu = document.getElementById('mobile-menu');
 
@@ -261,10 +332,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
     }
   }
 
-  // Initialize on first load
   initializeHeader();
-
-  // Re-initialize after Astro view transitions (needed because of transition:persist on header)
   document.addEventListener('astro:page-load', initializeHeader);
 </script>
 

package/eventcatalog/src/enterprise/auth/[...auth].ts

@@ -3,6 +3,6 @@
  * See /packages/core/eventcatalog/src/enterprise/LICENSE
  */
 
-import { AstroAuth } from 'auth-astro/server';
+import { AstroAuth } from '@utils/auth-astro/server';
 export const prerender = false;
 export const { GET, POST } = AstroAuth();

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

@@ -5,7 +5,7 @@ const { title, logo } = config;
 import { join } from 'node:path';
 import { isAuthEnabled, isSSR } from '@utils/feature';
 import { buildUrl } from '@utils/url-builder';
-import { getSession } from 'auth-astro/server';
+import { getSession } from '@utils/auth-astro/server';
 
 const catalogDirectory = process.env.PROJECT_DIR || process.cwd();
 
@@ -408,7 +408,7 @@ const providerConfig = {
 </html>
 
 <script>
-  import { signIn } from 'auth-astro/client';
+  import { signIn } from '@utils/auth-astro/client';
 
   // Add event listeners to all provider login buttons
   const providerButtons = document.querySelectorAll('.provider-login-btn');

package/eventcatalog/src/enterprise/auth/middleware/middleware-auth.ts

@@ -5,7 +5,7 @@
 
 // src/middleware/auth.ts
 import type { MiddlewareHandler } from 'astro';
-import { getSession } from 'auth-astro/server';
+import { getSession } from '@utils/auth-astro/server';
 import { isAuthEnabled, isEventCatalogMCPAuthEnabled } from '@utils/feature';
 import jwt from 'jsonwebtoken';
 import { isLLMSTxtEnabled } from '@utils/feature';

package/eventcatalog/src/utils/auth-astro/client.ts

@@ -0,0 +1,89 @@
+/**
+ * Adapted from auth-astro 4.2.0 (MIT, https://github.com/nowaythatworked/auth-astro).
+ * See ./config.ts for why this lives in Core.
+ */
+
+interface AstroSignInOptions extends Record<string, unknown> {
+  /** Where to send the user after signing in. Defaults to the current page. */
+  callbackUrl?: string;
+  /** Redirect after signing in. Defaults to `true`. */
+  redirect?: boolean;
+  /** Base path for authentication. Defaults to `/api/auth`. */
+  prefix?: string;
+}
+
+interface AstroSignOutParams {
+  /** Where to send the user after signing out. Defaults to the current page. */
+  callbackUrl?: string;
+  /** Base path for authentication. Defaults to `/api/auth`. */
+  prefix?: string;
+}
+
+/**
+ * Starts a sign-in flow for a provider. Adds the CSRF token to the request.
+ */
+export async function signIn(providerId?: string, options?: AstroSignInOptions, authorizationParams?: Record<string, string>) {
+  const { callbackUrl = window.location.href, redirect = true } = options ?? {};
+  const { prefix = '/api/auth', ...opts } = options ?? {};
+
+  const isCredentials = providerId === 'credentials';
+  const isEmail = providerId === 'email';
+  const isSupportingReturn = isCredentials || isEmail;
+
+  const signInUrl = `${prefix}/${isCredentials ? 'callback' : 'signin'}/${providerId}`;
+  const _signInUrl = `${signInUrl}?${new URLSearchParams(authorizationParams)}`;
+
+  const csrfTokenResponse = await fetch(`${prefix}/csrf`);
+  const { csrfToken } = await csrfTokenResponse.json();
+
+  const res = await fetch(_signInUrl, {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'X-Auth-Return-Redirect': '1',
+    },
+    body: new URLSearchParams({
+      ...(opts as Record<string, string>),
+      csrfToken,
+      callbackUrl,
+    }),
+  });
+
+  const data = await res.clone().json();
+  const error = new URL(data.url).searchParams.get('error');
+
+  if (redirect || !isSupportingReturn || !error) {
+    window.location.href = data.url ?? callbackUrl;
+    // The browser does not reload when only the hash changes
+    if (data.url.includes('#')) window.location.reload();
+    return;
+  }
+
+  return res;
+}
+
+/**
+ * Signs the user out by removing the session cookie. Adds the CSRF token to the request.
+ */
+export async function signOut(options?: AstroSignOutParams) {
+  const { callbackUrl = window.location.href, prefix = '/api/auth' } = options ?? {};
+  const csrfTokenResponse = await fetch(`${prefix}/csrf`);
+  const { csrfToken } = await csrfTokenResponse.json();
+  const res = await fetch(`${prefix}/signout`, {
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'X-Auth-Return-Redirect': '1',
+    },
+    body: new URLSearchParams({
+      csrfToken,
+      callbackUrl,
+    }),
+  });
+  const data = await res.json();
+
+  const url = data.url ?? callbackUrl;
+  window.location.href = url;
+  // The browser does not reload when only the hash changes
+  if (url.includes('#')) window.location.reload();
+}