port-nimara-client-portal/middleware/authentication.ts

64 lines
1.7 KiB
TypeScript
Raw Normal View History

export default defineNuxtRouteMiddleware(async (to) => {
// Skip auth for SSR
if (import.meta.server) return;
2025-02-16 13:10:19 +01:00
// Check if auth is required (default true unless explicitly set to false)
const isAuthRequired = to.meta.auth !== false;
try {
Implement Official Keycloak JS Adapter with Proxy-Aware Configuration MAJOR ENHANCEMENT: Complete Keycloak integration with proper HTTPS/proxy handling ## Core Improvements: ### 1. Enhanced Configuration (nuxt.config.ts) - Added proxy trust configuration for nginx environments - Configured baseUrl for production HTTPS enforcement - Added debug mode configuration for development ### 2. Proxy-Aware Keycloak Composable (composables/useKeycloak.ts) - Intelligent base URL detection (production vs development) - Force HTTPS redirect URIs in production environments - Enhanced debugging and logging capabilities - Proper PKCE implementation for security - Automatic token refresh mechanism ### 3. Dual Authentication System - Updated middleware to support both Directus and Keycloak - Enhanced useUnifiedAuth for seamless auth source switching - Maintains backward compatibility with existing Directus users ### 4. OAuth Flow Implementation - Created proper callback handler (pages/auth/callback.vue) - Comprehensive error handling and user feedback - Automatic redirect to dashboard on success ### 5. Enhanced Login Experience (pages/login.vue) - Restored SSO login button with proper error handling - Maintained existing Directus login form - Clear separation between auth methods with visual divider ### 6. Comprehensive Testing Suite (pages/dashboard/keycloak-test.vue) - Real-time configuration display - Authentication status monitoring - Interactive testing tools - Detailed debug logging system ## Technical Solutions: **Proxy Detection**: Automatically detects nginx proxy and uses correct HTTPS URLs **HTTPS Enforcement**: Forces secure redirect URIs in production **Error Handling**: Comprehensive error catching with user-friendly messages **Debug Capabilities**: Enhanced logging for troubleshooting **Security**: Implements PKCE and secure token handling ## Infrastructure Compatibility: - Works with nginx reverse proxy setups - Compatible with Docker container networking - Handles SSL termination at proxy level - Supports both development and production environments This implementation specifically addresses the HTTP/HTTPS redirect URI mismatch that was causing 'unauthorized_client' errors in the proxy environment.
2025-06-14 15:26:26 +02:00
// Check Directus auth first (most 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 for public pages
if (!isAuthRequired) {
return;
}
}
}
2025-02-16 13:10:19 +01:00
if (directusUser.value) {
// User authenticated with Directus
return;
}
2025-02-16 13:10:19 +01:00
Implement Official Keycloak JS Adapter with Proxy-Aware Configuration MAJOR ENHANCEMENT: Complete Keycloak integration with proper HTTPS/proxy handling ## Core Improvements: ### 1. Enhanced Configuration (nuxt.config.ts) - Added proxy trust configuration for nginx environments - Configured baseUrl for production HTTPS enforcement - Added debug mode configuration for development ### 2. Proxy-Aware Keycloak Composable (composables/useKeycloak.ts) - Intelligent base URL detection (production vs development) - Force HTTPS redirect URIs in production environments - Enhanced debugging and logging capabilities - Proper PKCE implementation for security - Automatic token refresh mechanism ### 3. Dual Authentication System - Updated middleware to support both Directus and Keycloak - Enhanced useUnifiedAuth for seamless auth source switching - Maintains backward compatibility with existing Directus users ### 4. OAuth Flow Implementation - Created proper callback handler (pages/auth/callback.vue) - Comprehensive error handling and user feedback - Automatic redirect to dashboard on success ### 5. Enhanced Login Experience (pages/login.vue) - Restored SSO login button with proper error handling - Maintained existing Directus login form - Clear separation between auth methods with visual divider ### 6. Comprehensive Testing Suite (pages/dashboard/keycloak-test.vue) - Real-time configuration display - Authentication status monitoring - Interactive testing tools - Detailed debug logging system ## Technical Solutions: **Proxy Detection**: Automatically detects nginx proxy and uses correct HTTPS URLs **HTTPS Enforcement**: Forces secure redirect URIs in production **Error Handling**: Comprehensive error catching with user-friendly messages **Debug Capabilities**: Enhanced logging for troubleshooting **Security**: Implements PKCE and secure token handling ## Infrastructure Compatibility: - Works with nginx reverse proxy setups - Compatible with Docker container networking - Handles SSL termination at proxy level - Supports both development and production environments This implementation specifically addresses the HTTP/HTTPS redirect URI mismatch that was causing 'unauthorized_client' errors in the proxy environment.
2025-06-14 15:26:26 +02:00
// Check Keycloak auth if authentication is required
if (isAuthRequired) {
const keycloak = useKeycloak();
// Initialize Keycloak if not already done
if (!keycloak.isInitialized.value) {
try {
const authenticated = await keycloak.initKeycloak();
if (authenticated) {
// User authenticated with Keycloak
return;
}
} catch (error) {
console.error('Keycloak initialization failed:', error);
// Continue to login redirect
}
} else if (keycloak.isAuthenticated.value) {
// User already authenticated with Keycloak
return;
}
}
// 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');
}
2025-02-16 13:10:19 +01:00
}
});