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
This commit is contained in:
Matt 2025-06-14 15:01:45 +02:00
parent a797c13867
commit 8c7bf4cc00
3 changed files with 48 additions and 31 deletions

View File

@ -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

View File

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

View File

@ -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
const keycloak = useKeycloak();
// Initialize Keycloak if not already initialized
if (!keycloak.isInitialized.value) {
await keycloak.initKeycloak();
}
if (keycloak.isAuthenticated.value) {
// User authenticated with Keycloak
return;
}
try {
// Check Directus auth first (more reliable)
const { fetchUser, setUser } = useDirectusAuth();
const directusUser = useDirectusUser();
if (!directusUser.value) {
try {
const user = await fetchUser();
setUser(user.value);
} catch (error) {
// Ignore directus auth errors
}
}
// Fall back to Directus auth
const { fetchUser, setUser } = useDirectusAuth();
const directusUser = useDirectusUser();
if (!directusUser.value) {
const user = await fetchUser();
setUser(user.value);
}
if (directusUser.value) {
// User authenticated with Directus
return;
}
if (directusUser.value) {
// User authenticated with Directus
return;
}
// Try Keycloak auth (only if we need it)
if (isAuthRequired) {
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
if (isAuthRequired) {
// Redirect to login page
return navigateTo('/login');
// No authentication found
if (isAuthRequired) {
// Redirect to login page
return navigateTo('/login');
}
} catch (error) {
console.error('Auth middleware error:', error);
if (isAuthRequired) {
return navigateTo('/login');
}
}
});