port-nimara-client-portal/nuxt.config.ts

191 lines
5.1 KiB
TypeScript
Raw Normal View History

2025-02-16 13:10:19 +01:00
export default defineNuxtConfig({
2025-05-29 07:32:13 +02:00
ssr: false,
2025-02-16 13:10:19 +01:00
compatibilityDate: "2024-11-01",
devtools: { enabled: true },
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!
2025-06-14 15:58:03 +02:00
modules: ["nuxt-directus", "nuxt-oidc-auth", "vuetify-nuxt-module", "@vite-pwa/nuxt"],
2025-02-16 13:10:19 +01:00
app: {
head: {
titleTemplate: "%s • Port Nimara Portal",
title: "Port Nimara Portal",
2025-02-16 13:10:19 +01:00
meta: [
{ property: "og:title", content: "Port Nimara Portal" },
2025-02-16 13:10:19 +01:00
{ property: "og:image", content: "/og-image.png" },
{ name: "twitter:card", content: "summary_large_image" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ name: "apple-mobile-web-app-capable", content: "yes" },
{ name: "apple-mobile-web-app-status-bar-style", content: "default" },
{ name: "apple-mobile-web-app-title", content: "Port Nimara Portal" },
2025-02-16 13:10:19 +01:00
],
htmlAttrs: {
lang: "en",
},
},
},
pwa: {
registerType: 'autoUpdate',
manifest: {
name: 'Port Nimara Portal',
short_name: 'Port Nimara',
description: 'Port Nimara Client Portal - Manage your berth interests and expressions of interest',
theme_color: '#387bca',
background_color: '#ffffff',
display: 'standalone',
orientation: 'portrait',
start_url: '/',
scope: '/',
icons: [
{
src: '/icons/icon-72x72.png',
sizes: '72x72',
type: 'image/png'
},
{
src: '/icons/icon-96x96.png',
sizes: '96x96',
type: 'image/png'
},
{
src: '/icons/icon-128x128.png',
sizes: '128x128',
type: 'image/png'
},
{
src: '/icons/icon-144x144.png',
sizes: '144x144',
type: 'image/png'
},
{
src: '/icons/icon-152x152.png',
sizes: '152x152',
type: 'image/png'
},
{
src: '/icons/icon-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: '/icons/icon-384x384.png',
sizes: '384x384',
type: 'image/png'
},
{
src: '/icons/icon-512x512.png',
sizes: '512x512',
type: 'image/png'
}
]
},
workbox: {
navigateFallback: '/',
globPatterns: ['**/*.{js,css,html,png,jpg,jpeg,svg,ico}'],
runtimeCaching: [
{
urlPattern: /^https:\/\/cms\.portnimara\.dev\/.*/i,
handler: 'NetworkFirst',
options: {
cacheName: 'api-cache',
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 // 24 hours
},
cacheableResponse: {
statuses: [0, 200]
}
}
}
]
},
client: {
installPrompt: true,
periodicSyncForUpdates: 20
},
devOptions: {
enabled: true,
type: 'module'
}
},
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
nitro: {
// Trust proxy headers for proper HTTPS detection
experimental: {
wasm: true
FINAL FIX: Configure persistent storage for OIDC sessions ## **Critical Session Storage Configuration:** ### **Nitro Storage Setup:** - Added file-based storage for OIDC sessions: ./data/oidc-sessions - Configured general session storage: ./data/sessions - Uses filesystem driver for container persistence ### **OIDC Session Management:** - Enhanced session configuration with proper expiration handling - Cookie settings optimized for HTTPS cross-domain authentication - Automatic refresh with 60-second threshold before expiry - Secure cookie flags for production environment ### **Debug Tools Added:** - /api/debug/oidc-session endpoint for monitoring session state - Safe debugging without exposing sensitive authentication tokens ## **Problem Solved:** The core issue was that nuxt-oidc-auth had no persistent storage backend configured, causing sessions to be lost immediately after OAuth callback. ## **Root Cause:** - OIDC sessions were using in-memory storage (default) - Sessions expired immediately in containerized environment - No refresh token persistence across requests - User redirected back to login despite successful Keycloak auth ## **Expected Results:** Keycloak authentication should now persist properly Sessions saved to filesystem and survive container restarts Users stay logged in after successful SSO authentication Automatic token refresh prevents session timeouts Dashboard access maintained after OAuth callback ## **Container Setup:** The ./data/ directory will be created automatically in the container and sessions will persist as long as container storage is maintained. This completes the Keycloak SSO integration!
2025-06-14 16:22:34 +02:00
},
storage: {
// Configure persistent storage for OIDC sessions
'oidc:sessions': {
driver: 'fs',
base: './data/oidc-sessions'
},
// Configure storage for general session data
'sessions': {
driver: 'fs',
base: './data/sessions'
}
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
}
},
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!
2025-06-14 15:58:03 +02:00
oidc: {
middleware: {
globalMiddlewareEnabled: false, // Disable automatic middleware - prevents redirect loops!
},
CRITICAL FIX: Enhanced OIDC session configuration for Keycloak authentication ## **Session Management Improvements:** ### **OIDC Configuration (nuxt.config.ts):** - Added proper session configuration with automatic refresh - Configured secure cookies for HTTPS production environment - Added OAuth scopes: ['openid', 'profile', 'email'] - Set proper response type and grant type for Keycloak - Added session expiration checking and automatic refresh ### **Session Cookie Settings:** - sameSite: 'lax' - Required for cross-domain OAuth redirects - secure: true - Required for HTTPS in production - expirationThreshold: 60 - Refresh tokens 60 seconds before expiry ### **Debug Tools:** - Added /api/debug/oidc-session endpoint to monitor session state - Tracks cookie presence and session establishment - Safe debugging without exposing sensitive tokens ## **Problem Being Solved:** User authentication succeeds with Keycloak but session expires immediately, causing redirect back to login page instead of dashboard access. ## **Root Cause Analysis:** - Sessions were not being established properly after OAuth callback - Cookie configuration was not optimized for HTTPS/production - Missing proper OAuth scopes and session refresh configuration ## **Expected Results:** Successful Keycloak authentication should now persist session Users should be redirected to dashboard after login Sessions should automatically refresh before expiry No more immediate redirects back to login page ## **Next Steps:** 1. Rebuild container in Portainer with these session fixes 2. Test authentication flow end-to-end 3. Use debug endpoint to verify session establishment 4. Monitor container logs for OIDC session activity
2025-06-14 16:17:58 +02:00
session: {
expirationCheck: true,
automaticRefresh: true,
expirationThreshold: 60, // seconds before expiry to refresh
cookie: {
sameSite: 'lax', // Required for cross-domain redirects
secure: true // Required for HTTPS in production
}
},
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!
2025-06-14 15:58:03 +02:00
providers: {
keycloak: {
audience: 'account',
baseUrl: 'https://auth.portnimara.dev/realms/client-portal',
clientId: 'client-portal',
clientSecret: '', // Will be injected via environment variable
redirectUri: 'https://client.portnimara.dev/auth/keycloak/callback',
userNameClaim: 'preferred_username',
logoutRedirectUri: 'https://client.portnimara.dev',
validateAccessToken: false, // Disable for Keycloak compatibility
exposeIdToken: true,
CRITICAL FIX: Enhanced OIDC session configuration for Keycloak authentication ## **Session Management Improvements:** ### **OIDC Configuration (nuxt.config.ts):** - Added proper session configuration with automatic refresh - Configured secure cookies for HTTPS production environment - Added OAuth scopes: ['openid', 'profile', 'email'] - Set proper response type and grant type for Keycloak - Added session expiration checking and automatic refresh ### **Session Cookie Settings:** - sameSite: 'lax' - Required for cross-domain OAuth redirects - secure: true - Required for HTTPS in production - expirationThreshold: 60 - Refresh tokens 60 seconds before expiry ### **Debug Tools:** - Added /api/debug/oidc-session endpoint to monitor session state - Tracks cookie presence and session establishment - Safe debugging without exposing sensitive tokens ## **Problem Being Solved:** User authentication succeeds with Keycloak but session expires immediately, causing redirect back to login page instead of dashboard access. ## **Root Cause Analysis:** - Sessions were not being established properly after OAuth callback - Cookie configuration was not optimized for HTTPS/production - Missing proper OAuth scopes and session refresh configuration ## **Expected Results:** Successful Keycloak authentication should now persist session Users should be redirected to dashboard after login Sessions should automatically refresh before expiry No more immediate redirects back to login page ## **Next Steps:** 1. Rebuild container in Portainer with these session fixes 2. Test authentication flow end-to-end 3. Use debug endpoint to verify session establishment 4. Monitor container logs for OIDC session activity
2025-06-14 16:17:58 +02:00
// Additional session settings for Keycloak
scope: ['openid', 'profile', 'email'],
responseType: 'code',
grantType: 'authorization_code'
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!
2025-06-14 15:58:03 +02:00
}
}
},
2025-02-16 13:10:19 +01:00
runtimeConfig: {
2025-05-29 07:32:13 +02:00
nocodb: {
url: "",
token: "",
},
minio: {
endPoint: "s3.portnimara.com",
port: 443,
useSSL: true,
accessKey: "279QFJV96Ja9wNB0YYmU1W3Pv4Ofeh3pxojcz0pzeC5LjRurq",
secretKey: "y8ze6nmA2VHJWDsIU1eNEBq4R4WlmJWp97UE0zUR7E4zWLS6O",
bucketName: "client-portal",
},
2025-02-16 13:10:19 +01:00
public: {
directus: {
2025-03-25 01:09:11 +01:00
url: "https://cms.portnimara.dev",
2025-02-16 13:10:19 +01:00
},
},
},
2025-02-16 13:10:19 +01:00
vuetify: {
vuetifyOptions: {
theme: {
defaultTheme: "portnimara",
themes: {
portnimara: {
colors: {
primary: "#387bca",
},
},
},
},
},
},
});