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

166 lines
4.3 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
}
},
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!
},
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,
}
}
},
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",
},
},
},
},
},
},
});