Fix SSR and defensive coding for Keycloak integration

- Add proper SSR guards and error handling
- Make authentication middleware more defensive
- Add null checks in useUnifiedAuth composable
- Prevent JavaScript errors from breaking page load
- Prioritize Directus auth over Keycloak for stability

composables/useKeycloak.ts

@@ -9,7 +9,7 @@ export const useKeycloak = () => {
   const isInitialized = ref(false)
 
   const initKeycloak = async () => {
-    if (process.server) return
+    if (process.server) return false
 
     try {
       // Dynamically import keycloak-js

composables/useUnifiedAuth.ts

@@ -15,8 +15,8 @@ export const useUnifiedAuth = () => {
   
   // Create unified user object
   const user = computed<UnifiedUser | null>(() => {
-    // Check Keycloak user first
+    // Check Keycloak user first (safely)
-    if (keycloak.user.value) {
+    if (keycloak.user?.value) {
       const keycloakUser = keycloak.user.value;
       // Construct name from firstName and lastName if available
       let name = keycloakUser.name;

middleware/authentication.ts

@@ -5,36 +5,53 @@ export default defineNuxtRouteMiddleware(async (to) => {
   // Check if auth is required (default true unless explicitly set to false)
   const isAuthRequired = to.meta.auth !== false;
   
-  // Check Keycloak auth first
+  try {
-  const keycloak = useKeycloak();
+    // Check Directus auth first (more reliable)
-  
+    const { fetchUser, setUser } = useDirectusAuth();
-  // Initialize Keycloak if not already initialized
+    const directusUser = useDirectusUser();
-  if (!keycloak.isInitialized.value) {
+    
-    await keycloak.initKeycloak();
+    if (!directusUser.value) {
-  }
+      try {
-  
+        const user = await fetchUser();
-  if (keycloak.isAuthenticated.value) {
+        setUser(user.value);
-    // User authenticated with Keycloak
+      } catch (error) {
-    return;
+        // Ignore directus auth errors
-  }
+      }
+    }
 
-  // Fall back to Directus auth
+    if (directusUser.value) {
-  const { fetchUser, setUser } = useDirectusAuth();
+      // User authenticated with Directus
-  const directusUser = useDirectusUser();
+      return;
-  
+    }
-  if (!directusUser.value) {
-    const user = await fetchUser();
-    setUser(user.value);
-  }
 
-  if (directusUser.value) {
+    // Try Keycloak auth (only if we need it)
-    // User authenticated with Directus
+    if (isAuthRequired) {
-    return;
+      const keycloak = useKeycloak();
-  }
+      
+      // Only try to initialize if not already done
+      if (!keycloak.isInitialized.value) {
+        try {
+          await keycloak.initKeycloak();
+        } catch (error) {
+          console.error('Keycloak init failed:', error);
+        }
+      }
+      
+      if (keycloak.isAuthenticated.value) {
+        // User authenticated with Keycloak
+        return;
+      }
+    }
 
-  // No authentication found
+    // No authentication found
-  if (isAuthRequired) {
+    if (isAuthRequired) {
-    // Redirect to login page
+      // Redirect to login page
-    return navigateTo('/login');
+      return navigateTo('/login');
+    }
+  } catch (error) {
+    console.error('Auth middleware error:', error);
+    if (isAuthRequired) {
+      return navigateTo('/login');
+    }
   }
 });