Merge branch 'sam' into 'master'

done refresehed token

See merge request !23

layouts/components/NavbarTokenExpiredTime.vue

@@ -14,7 +14,7 @@ let timer: ReturnType<typeof setInterval>
 onMounted(() => {
 onMounted(() => {
   // Set tokenLifetime only once
   // Set tokenLifetime only once
   if (keycloakInstance.tokenParsed?.exp && keycloakInstance.tokenParsed?.iat)
   if (keycloakInstance.tokenParsed?.exp && keycloakInstance.tokenParsed?.iat)
-    tokenLifetime.value = keycloakInstance.tokenParsed.exp - keycloakInstance.tokenParsed.iat
+    tokenLifetime.value = keycloakInstance.refreshTokenParsed.exp - keycloakInstance.refreshTokenParsed.iat
 
 
   timer = setInterval(() => {
   timer = setInterval(() => {
     now.value = Math.floor(Date.now() / 1000)
     now.value = Math.floor(Date.now() / 1000)
@@ -26,29 +26,30 @@ onUnmounted(() => {
 })
 })
 
 
 const computedExpIn = computed(() => {
 const computedExpIn = computed(() => {
-  return authenticated.value && keycloakInstance.tokenParsed?.exp
-    ? Math.max(keycloakInstance.tokenParsed.exp - now.value, 0)
+  return authenticated.value && keycloakInstance.refreshTokenParsed?.exp
+    ? Math.max(keycloakInstance.refreshTokenParsed.exp - now.value, 0)
     : 0
     : 0
 })
 })
+
+const formattedExpIn = computed(() => {
+  const minutes = Math.floor(computedExpIn.value / 60)
+  const seconds = computedExpIn.value % 60
+
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+})
 </script>
 </script>
 
 
 <template>
 <template>
   <div
   <div
     v-if="authenticated"
     v-if="authenticated"
     class="me-4"
     class="me-4"
-    style="position: relative; block-size: 40px; inline-size: 40px;"
+    style="position: relative; block-size: 55px; inline-size: 55px;"
   >
   >
-    <VProgressCircular
-      :model-value="(computedExpIn / tokenLifetime) * 100"
-      :size="40"
-      :width="3"
-      color="primary"
-    />
     <div
     <div
       class="text-subtitle-1 font-weight-bold"
       class="text-subtitle-1 font-weight-bold"
       style="position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);"
       style="position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%);"
     >
     >
-      {{ computedExpIn }}
+      {{ formattedExpIn }}
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>

plugins/keycloak.ts

@@ -4,18 +4,11 @@ import keycloakInstance from '@/keycloak'
 export default defineNuxtPlugin(async nuxtApp => {
 export default defineNuxtPlugin(async nuxtApp => {
   const keycloakStore = useKeycloakStore()
   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 {
   try {
     const authenticated = await keycloakInstance.init({
     const authenticated = await keycloakInstance.init({
       onLoad: 'check-sso',
       onLoad: 'check-sso',
       checkLoginIframe: true,
       checkLoginIframe: true,
-      checkLoginIframeInterval: 5, // in seconds, default is 5
+      checkLoginIframeInterval: 5, // seconds
     })
     })
 
 
     keycloakStore.authenticated = authenticated
     keycloakStore.authenticated = authenticated
@@ -24,26 +17,39 @@ export default defineNuxtPlugin(async nuxtApp => {
       keycloakStore.refresh()
       keycloakStore.refresh()
       console.log('User is authenticated')
       console.log('User is authenticated')
 
 
-      // $router.push('/profile')
-      // console.log('Suppose to navigate To')
-
-      setInterval(() => {
+      setInterval(async () => {
         const now = Math.floor(Date.now() / 1000)
         const now = Math.floor(Date.now() / 1000)
-        const tokenExp = keycloakInstance.tokenParsed?.exp ?? 0
+        const accessTokenExp = keycloakInstance.tokenParsed?.exp ?? 0
+        const refreshTokenExp = keycloakInstance.refreshTokenParsed?.exp ?? 0
+
+        if (refreshTokenExp <= now) {
+          console.warn('Refresh token expired. Logging out...')
+          await keycloakInstance.logout({ redirectUri: `${window.location.origin}/login` })
+
+          return
+        }
 
 
-        if (tokenExp <= now) {
-          console.warn('Token expired. Logging out...')
-          keycloakInstance.logout({ redirectUri: `${window.location.origin}/login` })
+        // Refresh the token if the access token is close to expiring (e.g., within 60 seconds)
+        if (accessTokenExp - now < 60) {
+          try {
+            const refreshed = await keycloakInstance.updateToken(60)
+            if (refreshed) {
+              console.log('Access token refreshed')
+              keycloakStore.refresh() // update store data if necessary
             }
             }
             else {
             else {
-          // console.log('Token expires in:', tokenExp - now, 'seconds')
+              console.log('Access token still valid, no need to refresh')
+            }
+          }
+          catch (err) {
+            console.error('Failed to refresh token', err)
+            await keycloakInstance.logout({ redirectUri: `${window.location.origin}/login` })
           }
           }
-      }, 10_000)
+        }
+      }, 10_000) // check every 10 seconds
     }
     }
     else {
     else {
       console.log('User is not authenticated')
       console.log('User is not authenticated')
-
-      // $router.push('/login')
     }
     }
   }
   }
   catch (error) {
   catch (error) {