MAJOR: Replace keycloak-js with nuxt-oidc-auth for seamless SSO integration

##  **SOLUTION: Migrate to Server-Side OIDC Authentication**

This completely replaces the problematic keycloak-js client-side implementation
with nuxt-oidc-auth, eliminating all CORS and iframe issues.

###  **Benefits:**
- **No more CORS errors** - Server-side OAuth flow
- **No iframe dependencies** - Eliminates cross-domain issues
- **Works with nginx proxy** - No proxy configuration conflicts
- **Better security** - Tokens handled server-side
- **Cleaner integration** - Native Nuxt patterns
- **Maintains Directus compatibility** - Dual auth support

###  **Installation & Configuration:**
- Added
uxt-oidc-auth module to nuxt.config.ts
- Configured Keycloak provider with proper OIDC settings
- Updated environment variables for security keys

###  **Code Changes:**

#### **Authentication Flow:**
- **middleware/authentication.ts** - Updated to check both Directus + OIDC auth
- **composables/useUnifiedAuth.ts** - Migrated to use useOidcAuth()
- **pages/login.vue** - Updated SSO button to use oidcLogin('keycloak')

#### **Configuration:**
- **nuxt.config.ts** - Added OIDC provider configuration
- **.env.example** - Updated with nuxt-oidc-auth environment variables
- Removed old Keycloak runtime config

#### **Cleanup:**
- Removed keycloak-js dependency from package.json
- Deleted obsolete files:
  - composables/useKeycloak.ts
  - pages/auth/callback.vue
  - server/utils/keycloak-oauth.ts
  - server/api/debug/ directory

###  **Authentication Routes (Auto-Generated):**
- /auth/keycloak/login - SSO login endpoint
- /auth/keycloak/logout - SSO logout endpoint
- /auth/keycloak/callback - OAuth callback (handled automatically)

###  **Security Setup Required:**
Environment variables needed for production:
- NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET
- NUXT_OIDC_TOKEN_KEY (base64 encoded 32-byte key)
- NUXT_OIDC_SESSION_SECRET (48-character random string)
- NUXT_OIDC_AUTH_SESSION_SECRET (48-character random string)

###  **Expected Results:**
 SSO login should work without CORS errors
 Compatible with nginx proxy setup
 Maintains existing Directus authentication
 Server-side session management
 Automatic token refresh

Ready for container rebuild and production testing!
This commit is contained in:
2025-06-14 15:58:03 +02:00
parent c29f64b50b
commit 0ae190b255
12 changed files with 1693 additions and 779 deletions

View File

@@ -5,8 +5,12 @@ export default defineNuxtRouteMiddleware(async (to) => {
// Check if auth is required (default true unless explicitly set to false)
const isAuthRequired = to.meta.auth !== false;
if (!isAuthRequired) {
return;
}
try {
// Check Directus auth first (most reliable)
// Check Directus auth first
const { fetchUser, setUser } = useDirectusAuth();
const directusUser = useDirectusUser();
@@ -15,10 +19,7 @@ export default defineNuxtRouteMiddleware(async (to) => {
const user = await fetchUser();
setUser(user.value);
} catch (error) {
// Ignore directus auth errors for public pages
if (!isAuthRequired) {
return;
}
// Directus auth failed, continue to check OIDC
}
}
@@ -27,37 +28,19 @@ export default defineNuxtRouteMiddleware(async (to) => {
return;
}
// 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;
}
// Check OIDC auth (Keycloak)
const { user: oidcUser, loggedIn } = useOidcAuth();
if (loggedIn.value && oidcUser.value) {
// User authenticated with Keycloak via OIDC
return;
}
// No authentication found
if (isAuthRequired) {
// Redirect to login page
return navigateTo('/login');
}
// No authentication found, redirect to login
return navigateTo('/login');
} catch (error) {
console.error('Auth middleware error:', error);
if (isAuthRequired) {
return navigateTo('/login');
}
return navigateTo('/login');
}
});