From 98910563b807fdb0ddf50f53f3888d55463009d2 Mon Sep 17 00:00:00 2001 From: ari Date: Wed, 19 Nov 2025 16:47:23 +0700 Subject: [PATCH] update integrasi --- app/components/app/auth/login.vue | 1 + app/components/content/auth/login.vue | 70 +++++++++++++++++++++------ app/middleware/auth.global.ts | 5 +- nuxt.config.ts | 48 ++++++++++++------ package.json | 4 +- 5 files changed, 94 insertions(+), 34 deletions(-) diff --git a/app/components/app/auth/login.vue b/app/components/app/auth/login.vue index a10200eb..d7f549dd 100644 --- a/app/components/app/auth/login.vue +++ b/app/components/app/auth/login.vue @@ -84,6 +84,7 @@ const onSSO = (async () => { + Login with Keycloak diff --git a/app/components/content/auth/login.vue b/app/components/content/auth/login.vue index 5489fef5..27aeef5f 100644 --- a/app/components/content/auth/login.vue +++ b/app/components/content/auth/login.vue @@ -50,28 +50,20 @@ const state = reactive({ }) async function onSSO() { + console.log("=================== on SSO! ===================") const config = useRuntimeConfig() - const initOptions = { + const keycloak = new Keycloak({ url: config.public.KEYCLOAK_URL, realm: config.public.KEYCLOAK_REALM, - clientId: config.public.KEYCLOAK_ID, - onLoad: 'login-required' - } + clientId: config.public.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID, + }); - const keycloak = new Keycloak(initOptions) - keycloak - .init({ onLoad: initOptions.onLoad }) - .then((auth) => { - if (!auth) { - window.location.reload() - } else { - // store.setup(keycloak) - state.loggedIn = true - } - }) + try { + await keycloak.init({ onLoad: 'login-required' }); // Or 'login-required' + const nuxtApp = useNuxtApp() + nuxtApp.provide('keycloak', keycloak); - if (state.loggedIn) { const result = await xfetch('/api/v1/authentication/login-fes', 'POST', { data: keycloak, }) @@ -91,8 +83,54 @@ async function onSSO() { apiErrors.value.general = result.error?.message || result.message || 'Login failed' } } + } catch (error) { + console.error('Keycloak initialization failed:', error); } + // const initOptions = { + // url: config.public.KEYCLOAK_URL, + // realm: config.public.KEYCLOAK_REALM, + // clientId: config.public.KEYCLOAK_ID, + // onLoad: 'login-required' + // } + + // const keycloak = new Keycloak(initOptions) + // console.log("=================== balik gak se! ===================") + // keycloak + // .init({ onLoad: initOptions.onLoad }) + // .then((auth) => { + // console.log(auth) + // if (!auth) { + // window.location.reload() + // } else { + // // store.setup(keycloak) + // state.loggedIn = true + // } + // }) + + console.log("=================== onto login fes! ===================") + // if (state.loggedIn) { + // const result = await xfetch('/api/v1/authentication/login-fes', 'POST', { + // data: keycloak, + // }) + + // if (result.success) { + // const { data: rawdata, meta } = result.body + // if (meta.status === 'verified') { + // login(rawdata) + // navigateTo('/') + // } + // } else { + // if (result.errors) { + // Object.entries(result.errors).forEach( + // ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message), + // ) + // } else { + // apiErrors.value.general = result.error?.message || result.message || 'Login failed' + // } + // } + // } + // const urlSSO = // config.public.KEYCLOAK_ISSUER + // '/protocol/openid-connect/auth?client_id=' + diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts index e985520e..64d53a2f 100644 --- a/app/middleware/auth.global.ts +++ b/app/middleware/auth.global.ts @@ -2,10 +2,13 @@ export default defineNuxtRouteMiddleware((to) => { if (to.meta.public) return const { $pinia } = useNuxtApp() + const oidc = useOidcAuth(); + if (import.meta.client) { const userStore = useUserStore($pinia) - if (!userStore.isAuthenticated) { + if (!userStore.isAuthenticated && !oidc.loggedIn) { return navigateTo('/auth/login') + // oidc.login('dev'); } } }) diff --git a/nuxt.config.ts b/nuxt.config.ts index 588c79b8..06532995 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -11,9 +11,9 @@ export default defineNuxtConfig({ X_AP_CODE: process.env.X_AP_CODE || 'rssa-sso', X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah', SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo', - KEYCLOAK_ID: process.env.KEYCLOAK_ID || 'portal-simrs-new', - KEYCLOAK_SECRET: process.env.KEYCLOAK_SECRET || 'awoiehrw3w8942341k1ln4', - KEYCLOAK_ISSUER: process.env.KEYCLOAK_ISSUER || 'https://auth.dev.rssa.id/realms/sandbox', + NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID || 'portal-simrs-new', + NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET || 'awoiehrw3w8942341k1ln4', + NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL || 'https://auth.dev.rssa.id/realms/sandbox', KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT || 'http://localhost:3000', //test KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox', @@ -26,9 +26,9 @@ export default defineNuxtConfig({ X_AP_CODE: process.env.X_AP_CODE || 'rssa-sso', X_AP_SECRET_KEY: process.env.X_AP_SECRET_KEY || 'sapiperah', SSO_CONFIRM_URL: process.env.SSO_CONFIRM_URL || 'https://auth.rssa.top/realms/sandbox/protocol/openid-connect/userinfo', - KEYCLOAK_ID: process.env.KEYCLOAK_ID || 'portal-simrs-new', - KEYCLOAK_SECRET: process.env.KEYCLOAK_SECRET || 'awoiehrw3w8942341k1ln4', - KEYCLOAK_ISSUER: process.env.KEYCLOAK_ISSUER || 'https://auth.dev.rssa.id/realms/sandbox', + NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID || 'portal-simrs-new', + NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET || 'awoiehrw3w8942341k1ln4', + NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL || 'https://auth.dev.rssa.id/realms/sandbox', KEYCLOAK_LOGOUT_REDIRECT: process.env.KEYCLOAK_LOGOUT_REDIRECT || 'http://localhost:3000', //test KEYCLOAK_REALM: process.env.KEYCLOAK_REALM || 'sandbox', @@ -68,25 +68,31 @@ export default defineNuxtConfig({ '@nuxtjs/color-mode', '@nuxtjs/tailwindcss', 'shadcn-nuxt', + 'nuxt-oidc-auth', ], - css: ['@unocss/reset/tailwind.css', '~/assets/css/main.css'], - - colorMode: { - classSuffix: '', + oidc: { + defaultProvider: 'keycloak', + keycloak: { + audience: 'account', + baseUrl: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_BASE_URL, // change to your OP addrress + clientId: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID, + clientSecret: process.env.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_SECRET, + redirectUri: process.env.KEYCLOAK_LOGOUT_REDIRECT, // optional + }, + middleware: { + globalMiddlewareEnabled: true, + customLoginPage: true + } }, + css: ['@unocss/reset/tailwind.css', '~/assets/css/main.css'], + features: { // For UnoCSS inlineStyles: false, }, - eslint: { - config: { - standalone: false, - }, - }, - imports: { dirs: ['./app/lib'], }, @@ -95,5 +101,15 @@ export default defineNuxtConfig({ componentDir: './app/components/pub/ui', }, + colorMode: { + classSuffix: '', + }, + + eslint: { + config: { + standalone: false, + }, + }, + compatibilityDate: '2025-07-15', }) diff --git a/package.json b/package.json index d260052d..95a51b70 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "embla-carousel": "^8.5.2", "embla-carousel-vue": "^8.5.2", "h3": "^1.15.4", - "keycloak-js": "^26.2.1", + "nuxt-openid-connect": "^0.8.1", "pinia": "^3.0.3", "pinia-plugin-persistedstate": "^4.4.1", "tailwindcss-animate": "^1.0.7" @@ -51,9 +51,11 @@ "eslint-config-prettier": "^9.1.0", "eslint-plugin-format": "^1.0.1", "happy-dom": "^18.0.1", + "keycloak-js": "^26.2.1", "lucide-vue-next": "^0.482.0", "next-auth": "~4.21.1", "nuxt": "^4.0.3", + "nuxt-oidc-auth": "1.0.0-beta.5", "playwright-core": "^1.54.2", "prettier": "^3.6.2", "prettier-plugin-tailwindcss": "^0.5.14",