Solved Problem login by Appjs

layouts/components/DefaultLayoutWithHorizontalNav.vue

 <script lang="ts" setup>
-import { HorizontalNavLayout } from '@layouts'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { useKeycloakStore } from '@/@core/stores/keycloakStore'
-import keycloakInstance from '@/keycloak'
-
 import Footer from '@/layouts/components/Footer.vue'
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
 import NavbarTokenExpiredTime from '@/layouts/components/NavbarTokenExpiredTime.vue'
 import UserProfile from '@/layouts/components/UserProfile.vue'
 import navItems from '@/navigation/horizontal'
+import { HorizontalNavLayout } from '@layouts'
 
 // Keycloak & state
-const keycloakStore = useKeycloakStore()
-const authenticated = computed(() => keycloakStore.authenticated)
-
-const now = ref(Math.floor(Date.now() / 1000))
-const tokenLifetime = ref(0)
-
-let timer: ReturnType<typeof setInterval>
-
-onMounted(() => {
-  // Set tokenLifetime only once on mount
-  if (keycloakInstance.tokenParsed?.exp && keycloakInstance.tokenParsed?.iat)
-    tokenLifetime.value = keycloakInstance.tokenParsed.exp - keycloakInstance.tokenParsed.iat
-
-  // Start timer
-  timer = setInterval(() => {
-    now.value = Math.floor(Date.now() / 1000)
-  }, 1000)
-})
-
-onUnmounted(() => {
-  clearInterval(timer)
-})
-
-// Computed expiration values
-const computedExpIn = computed(() => {
-  return authenticated.value && keycloakInstance.tokenParsed?.exp
-    ? Math.max(keycloakInstance.tokenParsed?.exp - now.value, 0)
-    : 0
-})
 </script>
 
 <template>
@@ -77,23 +44,7 @@ const computedExpIn = computed(() => {
       <NavbarThemeSwitcher />
       <!-- <NavbarShortcuts /> -->
       <!-- <NavBarNotifications class="me-2" /> -->
-      <!--
-        <div class="pa-4">
-        <VAlert
-        v-if="authenticated"
-        type="info"
-        border="start"
-        variant="outlined"
-        class="mb-4"
-        >
-        <h3 class="text-h6 font-weight-bold">
-        Access token expires in {{ computedExpIn }} sec,
-        Refresh token in {{ computedRefExpIn }} sec,
-        Session: {{ computedSessionTimer }}
-        </h3>
-        </VAlert>
-        </div>
-      -->
+
       <UserProfile />
     </template>
 

middleware/acl.global.ts

-import { defineNuxtRouteMiddleware, navigateTo } from "nuxt/app"
-import { useKeycloakStore } from "~/@core/stores/keycloakStore"
+import { defineNuxtRouteMiddleware, navigateTo } from 'nuxt/app'
+import { useKeycloakStore } from '~/@core/stores/keycloakStore'
 
-export default defineNuxtRouteMiddleware((to) => {
+export default defineNuxtRouteMiddleware(to => {
   const keycloakStore = useKeycloakStore()
 
   if (process.client) {
     const isLoginPage = to.path === '/login'
 
     // Jika belum login dan bukan sedang menuju halaman login, redirect ke login
-    if (!keycloakStore.authenticated && !isLoginPage) {
+    if (!keycloakStore.authenticated && !isLoginPage)
       return navigateTo('/login')
-    }
 
     // Kalau sudah login dan mencoba ke /login, bisa arahkan ke dashboard atau home
-    if (keycloakStore.authenticated && isLoginPage) {
-      return navigateTo('/') // atau ke '/dashboard' misalnya
-    }
+    if (keycloakStore.authenticated && isLoginPage)
+      return navigateTo('/profile') // atau ke '/dashboard' misalnya
   }
-})
\ No newline at end of file
+})

plugins/keycloak.ts

@@ -4,9 +4,18 @@ import keycloakInstance from '@/keycloak'
 export default defineNuxtPlugin(async nuxtApp => {
   const keycloakStore = useKeycloakStore()
 
+  /* `const {  } = nuxtApp` is a destructuring assignment in JavaScript/TypeScript. In this
+  case, it is extracting the `` property from the `nuxtApp` object and assigning it to a new
+  constant named ``. This allows you to access the `` object directly without having
+  to use `nuxtApp.` every time. It's a shorthand way of accessing nested properties in
+  objects. */
+  // const { $router } = nuxtApp
+
   try {
     const authenticated = await keycloakInstance.init({
       onLoad: 'check-sso',
+      checkLoginIframe: true,
+      checkLoginIframeInterval: 5, // in seconds, default is 5
     })
 
     keycloakStore.authenticated = authenticated
@@ -14,7 +23,9 @@ export default defineNuxtPlugin(async nuxtApp => {
     if (authenticated) {
       keycloakStore.refresh()
       console.log('User is authenticated')
-      navigateTo('/profile')
+
+      // $router.push('/profile')
+      // console.log('Suppose to navigate To')
 
       setInterval(() => {
         const now = Math.floor(Date.now() / 1000)
@@ -25,13 +36,14 @@ export default defineNuxtPlugin(async nuxtApp => {
           keycloakInstance.logout({ redirectUri: `${window.location.origin}/login` })
         }
         else {
-          console.log('Token expires in:', tokenExp - now, 'seconds')
+          // console.log('Token expires in:', tokenExp - now, 'seconds')
         }
       }, 10_000)
     }
     else {
       console.log('User is not authenticated')
-      navigateTo('/login')
+
+      // $router.push('/login')
     }
   }
   catch (error) {