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

151 lines
3.7 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 },
modules: ["nuxt-directus", "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}'],
navigateFallbackDenylist: [/^\/api\//],
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]
}
}
}
],
skipWaiting: true,
clientsClaim: true
},
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
}
},
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",
},
},
},
},
},
},
});