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 () => {
     </Button>
   </form>
 
+  <a href="/auth/keycloak/login">Login with Keycloak</a>
   <Button @click="onSSO" target="_blank">
     Login SSO
   </Button>
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",