@eventcatalog/core 2.42.10 → 2.43.1

package/eventcatalog/auth.config.ts

@@ -0,0 +1,156 @@
+import { defineConfig } from 'auth-astro';
+import { join } from 'node:path';
+import GitHub from '@auth/core/providers/github';
+import Okta from '@auth/core/providers/okta';
+import type { Account, Profile, User, Session } from '@auth/core/types';
+import { isAuthEnabled, isSSR } from '@utils/feature';
+import Google from '@auth/core/providers/google';
+import Auth0 from '@auth/core/providers/auth0';
+
+// 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();
+
+const getAuthProviders = async () => {
+  try {
+    const config = await import(/* @vite-ignore */ join(catalogDirectory, 'eventcatalog.auth.js'));
+    const authConfig = config.default;
+
+    const providers = [];
+
+    // GitHub provider
+    if (authConfig.providers?.github) {
+      const githubConfig = authConfig.providers.github;
+      providers.push(
+        GitHub({
+          clientId: githubConfig.clientId,
+          clientSecret: githubConfig.clientSecret,
+        })
+      );
+      console.log('✅ GitHub provider configured');
+    }
+
+    // Google provider
+    if (authConfig.providers?.google) {
+      const googleConfig = authConfig.providers.google;
+      providers.push(
+        Google({
+          clientId: googleConfig.clientId,
+          clientSecret: googleConfig.clientSecret,
+        })
+      );
+      console.log('✅ Google provider configured');
+    }
+
+    // Okta provider
+    if (authConfig.providers?.okta) {
+      const oktaConfig = authConfig.providers.okta;
+      providers.push(
+        Okta({
+          clientId: oktaConfig.clientId,
+          clientSecret: oktaConfig.clientSecret,
+          issuer: oktaConfig.issuer,
+        })
+      );
+      console.log('✅ Okta provider configured');
+    }
+
+    // Auth0 provider
+    if (authConfig.providers?.auth0) {
+      const auth0Config = authConfig.providers.auth0;
+      providers.push(
+        Auth0({
+          clientId: auth0Config.clientId,
+          clientSecret: auth0Config.clientSecret,
+          issuer: auth0Config.issuer,
+        })
+      );
+      console.log('✅ Auth0 provider configured');
+    }
+
+    if (providers.length === 0) {
+      console.warn('⚠️ No auth providers configured');
+    }
+
+    return providers;
+  } catch (error) {
+    console.log('No eventcatalog.auth.js found or error loading config:', (error as Error).message);
+    return [];
+  }
+};
+
+const getAuthConfig = async () => {
+  // If auth is disabled or we are not in SSR, return an empty config
+  if (!isAuthEnabled() || !isSSR()) {
+    return {
+      providers: [],
+    };
+  }
+  try {
+    const config = await import(/* @vite-ignore */ join(catalogDirectory, 'eventcatalog.auth.js'));
+    const authConfig = config.default;
+
+    // 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;
+      } catch (error) {
+        console.error('❌ Failed to load custom auth config:', error);
+        // Fall back to managed config
+      }
+    }
+
+    // Return managed auth config
+    const providers = await getAuthProviders();
+
+    return {
+      providers,
+      callbacks: {
+        async signIn({ user, account, profile }: { user: User; account: Account | null; profile?: Profile }) {
+          // Just allow everyone who can authenticate with the provider
+          return true;
+        },
+        async session({ session, token }: { session: Session; token: any }) {
+          // Add provider info to session
+          if (token?.provider) {
+            (session.user as any).provider = token.provider;
+          }
+          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;
+          }
+          return token;
+        },
+      },
+      pages: {
+        signIn: '/auth/login',
+        error: '/auth/error',
+      },
+      session: {
+        strategy: 'jwt' as const,
+        maxAge: authConfig?.session?.maxAge || 30 * 24 * 60 * 60, // 30 days default
+      },
+      debug: authConfig?.debug || false,
+    };
+  } catch (error) {
+    console.log(
+      'No auth config found, auth disabled. If you want to use auth, create a eventcatalog.auth.js file in your project directory.'
+    );
+    return {
+      providers: [],
+      pages: {
+        signIn: '/auth/disabled',
+      },
+    };
+  }
+};
+
+export default defineConfig(await getAuthConfig());

package/eventcatalog/src/components/Header.astro

@@ -3,6 +3,13 @@ import catalog from '@utils/eventcatalog-config/catalog';
 import Search from '@components/Search.astro';
 import { buildUrl } from '@utils/url-builder';
 import { showEventCatalogBranding, showCustomBranding } from '@utils/feature';
+import { getSession } from 'auth-astro/server';
+import { isAuthEnabled, isSSR } from '@utils/feature';
+
+let session = null;
+if (isAuthEnabled()) {
+  session = await getSession(Astro.request);
+}
 
 const logo = {
   src: ('/' + (catalog?.logo?.src || 'logo.png')).replace(/^\/+/, '/'),
@@ -27,35 +34,94 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
       </div>
 
       <div class="hidden lg:block flex-grow w-6/12 px-10">
-        <Search />
+        <!-- Page find only works on static builds, disable for SSR builds for now -->
+        {!isSSR() && <Search />}
       </div>
 
       <div class="hidden md:block w-3/12">
         {
-          showEventCatalogBranding() && (
-            <ul class="flex space-x-8 justify-end pr-2">
-              <li>
-                <a href="https://discord.com/invite/3rjaZMmrAm">
-                  <img src={buildUrl('/icons/discord.svg', true)} class="h-7 w-7" />
-                </a>
-              </li>
-              <li>
-                <a href="https://github.com/event-catalog/eventcatalog">
-                  <img src={buildUrl('/icons/github.svg', true)} class="h-7 w-7" />
-                </a>
-              </li>
-            </ul>
-          )
-        }
-        {
-          showCustomBranding() && !showEventCatalogBranding() && (
-            <ul class="flex space-x-8 justify-end pr-2">
-              <li>
-                <a href={repositoryUrl} class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600">
-                  <img src={buildUrl('/icons/github.svg', true)} class="h-7 w-7" />
-                </a>
-              </li>
-            </ul>
+          session ? (
+            <div class="flex justify-end pr-2">
+              <div class="relative">
+                <button
+                  id="profile-menu-button"
+                  type="button"
+                  class="flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-full"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                >
+                  {session.user?.image && !session.user?.image?.includes('googleusercontent.com') ? (
+                    <img
+                      src={session.user.image}
+                      alt={session.user?.name || 'User'}
+                      class="h-8 w-8 rounded-full border-2 border-gray-200 hover:border-gray-300 transition-colors"
+                    />
+                  ) : (
+                    <div class="h-8 w-8 rounded-full border-2 border-gray-200 hover:border-gray-300 transition-colors bg-gray-100 flex items-center justify-center text-sm font-medium text-gray-600">
+                      {session.user?.name
+                        ? session.user.name
+                            .split(' ')
+                            .map((n) => n[0])
+                            .join('')
+                            .substring(0, 2)
+                            .toUpperCase()
+                        : 'U'}
+                    </div>
+                  )}
+                </button>
+                <div
+                  id="profile-dropdown"
+                  class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 border border-gray-100"
+                >
+                  <div class="px-4 py-2 text-sm text-gray-700 border-b border-gray-100">
+                    <div class="font-medium">{session.user?.name || 'User'}</div>
+                    {session.user?.email && <div class="text-gray-500">{session.user.email}</div>}
+                  </div>
+                  <button
+                    id="signout-btn"
+                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
+                  >
+                    Sign out
+                  </button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div class="flex items-center space-x-4 justify-end pr-2">
+                {isAuthEnabled() && (
+                  <button
+                    id="okta-signin-btn"
+                    class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                  >
+                    Sign In
+                  </button>
+                )}
+                {showEventCatalogBranding() && (
+                  <ul class="flex space-x-8">
+                    <li>
+                      <a href="https://discord.com/invite/3rjaZMmrAm">
+                        <img src={buildUrl('/icons/discord.svg', true)} class="h-7 w-7" />
+                      </a>
+                    </li>
+                    <li>
+                      <a href="https://github.com/event-catalog/eventcatalog">
+                        <img src={buildUrl('/icons/github.svg', true)} class="h-7 w-7" />
+                      </a>
+                    </li>
+                  </ul>
+                )}
+                {showCustomBranding() && !showEventCatalogBranding() && (
+                  <ul class="flex space-x-8">
+                    <li>
+                      <a href={repositoryUrl} class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600">
+                        <img src={buildUrl('/icons/github.svg', true)} class="h-7 w-7" />
+                      </a>
+                    </li>
+                  </ul>
+                )}
+              </div>
+            </>
           )
         }
       </div>
@@ -100,12 +166,46 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
 <script>
   const menuToggle = document.getElementById('menu-toggle');
   const mobileMenu = document.getElementById('mobile-menu');
+  import { signOut } from 'auth-astro/client';
 
   if (menuToggle && mobileMenu) {
     menuToggle.addEventListener('click', () => {
       mobileMenu.classList.toggle('hidden');
     });
   }
+
+  // Profile dropdown functionality
+  const profileButton = document.getElementById('profile-menu-button');
+  const profileDropdown = document.getElementById('profile-dropdown');
+
+  if (profileButton && profileDropdown) {
+    profileButton.addEventListener('click', (e) => {
+      e.stopPropagation();
+      profileDropdown.classList.toggle('hidden');
+      profileButton.setAttribute('aria-expanded', !profileDropdown.classList.contains('hidden') ? 'true' : 'false');
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!profileButton.contains(e.target as Node) && !profileDropdown.contains(e.target as Node)) {
+        profileDropdown.classList.add('hidden');
+        profileButton.setAttribute('aria-expanded', 'false');
+      }
+    });
+
+    // Close dropdown on escape key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && !profileDropdown.classList.contains('hidden')) {
+        profileDropdown.classList.add('hidden');
+        profileButton.setAttribute('aria-expanded', 'false');
+        profileButton.focus();
+      }
+    });
+
+    document.getElementById('signout-btn')?.addEventListener('click', async () => {
+      await signOut();
+    });
+  }
 </script>
 
 <style>

package/eventcatalog/src/middleware.ts

@@ -0,0 +1,62 @@
+// 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();
+  }
+
+  // Skip system/browser requests
+  const systemRoutes = ['/.well-known/', '/favicon.ico', '/robots.txt', '/sitemap.xml', '/_astro/', '/__astro'];
+
+  // Skip auth check for these routes
+  const publicRoutes = ['/auth/login', '/auth/signout', '/auth/error', '/api/auth'];
+
+  // Skip static files, system routes, and browser requests
+  if (
+    pathname.startsWith('/_') ||
+    systemRoutes.some((route) => pathname.startsWith(route)) ||
+    pathname.startsWith('/.well-known/')
+  ) {
+    return next();
+  }
+
+  // Skip public routes
+  if (publicRoutes.some((route) => pathname.startsWith(route))) {
+    return next();
+  }
+
+  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}`);
+  }
+
+  return next();
+};

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

@@ -0,0 +1,55 @@
+---
+// src/pages/auth/error.astro
+
+const { searchParams } = new URL(Astro.request.url);
+const error = searchParams.get('error');
+
+const errorMessages = {
+  Configuration: 'There is a problem with the server configuration.',
+  AccessDenied: 'You do not have permission to access this resource.',
+  Verification: 'The verification token has expired or has already been used.',
+  Default: 'An error occurred during authentication.',
+};
+
+// @ts-ignore
+const errorMessage = errorMessages[error] || errorMessages.Default;
+---
+
+<main title="Authentication Error - EventCatalog">
+  <div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-md w-full space-y-8 text-center">
+      <div>
+        <svg class="mx-auto h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+          ></path>
+        </svg>
+        <h2 class="mt-6 text-3xl font-bold text-gray-900">Authentication Error</h2>
+        <p class="mt-2 text-sm text-gray-600">
+          {errorMessage}
+        </p>
+      </div>
+
+      <div class="space-y-4">
+        <a
+          href="/auth/login"
+          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        >
+          Try Again
+        </a>
+
+        <a
+          href="/"
+          class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+        >
+          Back to Home
+        </a>
+      </div>
+
+      {error && <div class="mt-8 text-xs text-gray-400">Error code: {error}</div>}
+    </div>
+  </div>
+</main>