@eventcatalog/core 2.42.9 → 2.43.0

package/eventcatalog/auth.config.ts

@@ -0,0 +1,142 @@
+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';
+
+// 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');
+    }
+
+    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 ? (
+                    <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>

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

@@ -0,0 +1,231 @@
+---
+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;
+let providers: string[] = [];
+
+try {
+  const authConfig = await import(/* @vite-ignore */ join(catalogDirectory, 'eventcatalog.auth.js'));
+  providers = Object.keys(authConfig.default.providers);
+  hasAuthConfigurationFile = true;
+} catch (error) {
+  hasAuthConfigurationFile = false;
+}
+
+// Check if we should show login (auth file exists, SSR enabled, auth enabled, and has providers)
+const shouldShowLogin = hasAuthConfigurationFile && isSSR() && isAuthEnabled() && providers.length > 0;
+
+// Check if configuration exists but no providers are set up
+const hasConfigButNoProviders = hasAuthConfigurationFile && isSSR() && isAuthEnabled() && providers.length === 0;
+
+if (session) {
+  return Astro.redirect('/');
+}
+
+// Provider configurations
+const providerConfig = {
+  github: {
+    name: 'GitHub',
+    icon: `<svg class="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+    </svg>`,
+  },
+  google: {
+    name: 'Google',
+    icon: `<svg class="mr-2 h-5 w-5" viewBox="0 0 24 24">
+      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+    </svg>`,
+  },
+  okta: {
+    name: 'Okta',
+    icon: `<svg class="mr-2 h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8zm-1-13h2v6h-2V7zm0 8h2v2h-2v-2z"></path>
+    </svg>`,
+  },
+};
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>Sign In | {title}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <style>
+      body {
+        font-family: 'Inter', sans-serif;
+      }
+    </style>
+  </head>
+  <body class="bg-gray-50 min-h-screen">
+    <!-- Header -->
+    <nav class="fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-100 py-3 z-10">
+      <div class="px-4 sm:px-4 lg:px-4">
+        <div class="flex justify-between items-center h-10">
+          <!-- Logo -->
+          <div class="flex-shrink-0 flex items-center">
+            {
+              logo && (
+                <a href="/" class="flex space-x-2 items-center">
+                  <img alt={logo.alt} src={logo.src} class="w-8 h-8" />
+                  <span class="hidden sm:inline-block text-lg font-bold">{title}</span>
+                </a>
+              )
+            }
+          </div>
+
+          <!-- GitHub Link -->
+          <div class="flex items-center">
+            <a
+              href="https://github.com/event-catalog/eventcatalog"
+              target="_blank"
+              class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600"
+            >
+              <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
+                <path
+                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                ></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Content with top padding to account for fixed header -->
+    <div class="flex min-h-screen flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8 pt-24 bg-gray-50">
+      {
+        shouldShowLogin ? (
+          <div class="w-full max-w-md space-y-8">
+            <div class="text-center">
+              <h2 class="text-3xl font-bold tracking-tight text-gray-900">Welcome to {title} EventCatalog</h2>
+              <p class="mt-2 text-gray-600">Sign in to your account</p>
+            </div>
+
+            <div class="mt-8 space-y-4">
+              {providers.map((provider) => {
+                const config = providerConfig[provider as keyof typeof providerConfig];
+                if (!config) return null;
+
+                return (
+                  <button
+                    data-provider={provider}
+                    class="provider-login-btn flex w-full items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-3 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2"
+                  >
+                    <Fragment set:html={config.icon} />
+                    Sign in with {config.name}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : hasConfigButNoProviders ? (
+          <div class="w-full max-w-2xl space-y-8">
+            <div class="text-center">
+              <h2 class="text-3xl font-bold tracking-tight text-gray-900">No Authentication Providers Configured</h2>
+              <p class="mt-4 text-lg text-gray-600">
+                Authentication is enabled but no providers are configured in your auth configuration file.
+              </p>
+            </div>
+
+            <div class="bg-white shadow-sm rounded-lg p-6 space-y-4">
+              <h3 class="text-lg font-semibold text-gray-900">To add authentication providers:</h3>
+              <ol class="list-decimal list-inside space-y-2 text-gray-700">
+                <li>
+                  Update your <code class="bg-gray-100 px-2 py-1 rounded text-sm">eventcatalog.auth.js</code> file to include at
+                  least one provider (GitHub, Google, Okta, etc.)
+                </li>
+                <li>Configure the provider with the necessary credentials and settings</li>
+                <li>Restart your EventCatalog server to apply the changes</li>
+              </ol>
+            </div>
+
+            <div class="text-center">
+              <a
+                href="#"
+                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Read Authentication Documentation
+              </a>
+            </div>
+          </div>
+        ) : (
+          <div class="w-full max-w-2xl space-y-8">
+            <div class="text-center">
+              <h2 class="text-3xl font-bold tracking-tight text-gray-900">Authentication Not Configured</h2>
+              <p class="mt-4 text-lg text-gray-600">
+                {!hasAuthConfigurationFile
+                  ? 'No authentication configuration file found.'
+                  : 'Authentication is not properly enabled.'}
+              </p>
+            </div>
+
+            <div class="bg-white shadow-sm rounded-lg p-6 space-y-4">
+              <h3 class="text-lg font-semibold text-gray-900">To enable authentication:</h3>
+              <ol class="list-decimal list-inside space-y-2 text-gray-700">
+                {!hasAuthConfigurationFile && (
+                  <li>
+                    Create an <code class="bg-gray-100 px-2 py-1 rounded text-sm">eventcatalog.auth.js</code> configuration file
+                    in your project root
+                  </li>
+                )}
+                {!isSSR() && (
+                  <li>
+                    Enable SSR (Server-Side Rendering) in your{' '}
+                    <code class="bg-gray-100 px-2 py-1 rounded text-sm">eventcatalog.config.js</code> file by setting{' '}
+                    <code class="bg-gray-100 px-2 py-1 rounded text-sm">output: 'server'</code>
+                  </li>
+                )}
+                {!isAuthEnabled() && (
+                  <li>
+                    Enable authentication in your{' '}
+                    <code class="bg-gray-100 px-2 py-1 rounded text-sm">eventcatalog.config.js</code> file by setting{' '}
+                    <code class="bg-gray-100 px-2 py-1 rounded text-sm">auth: {`{ enabled: true }`}</code>
+                  </li>
+                )}
+              </ol>
+            </div>
+
+            <div class="text-center">
+              <a
+                href="#"
+                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Read Authentication Documentation
+              </a>
+            </div>
+          </div>
+        )
+      }
+    </div>
+  </body>
+</html>
+
+<script>
+  import { signIn } from 'auth-astro/client';
+
+  // Add event listeners to all provider login buttons
+  const providerButtons = document.querySelectorAll('.provider-login-btn');
+
+  providerButtons.forEach((button) => {
+    const provider = button.getAttribute('data-provider');
+    if (provider) {
+      button.addEventListener('click', () => signIn(provider));
+    }
+  });
+</script>