keycloak fix

components/layout/full/vertical-header/ProfileDD.vue

@@ -1,5 +1,15 @@
 <script setup lang="ts">
+import { signOut } from "next-auth/react";
 import { profileDD } from "@/_mockApis/headerData";
+
+const { data, status, getCsrfToken, getProviders } = useAuth()
+const runtimeConfig = useRuntimeConfig()
+const logout = async () => {
+  await signOut()
+  const LogOutKeycloakURL = `${runtimeConfig.public.keycloakUrl}/realms/${runtimeConfig.public.keycloakRealm}/protocol/openid-connect`
+  const logOutURL = `${LogOutKeycloakURL}/logout?client_id=${runtimeConfig.public.keycloakClient}&post_logout_redirect_uri=${encodeURIComponent(window.location.origin)}/auth/login`;
+  window.location.href = logOutURL
+}
 </script>
 
 <template>
@@ -8,19 +18,9 @@ import { profileDD } from "@/_mockApis/headerData";
   <!-- ---------------------------------------------- -->
   <v-menu open-on-hover open-on-click>
     <template v-slot:activator="{ props }">
-      <v-btn
-        variant="text"
-        class="custom-hover-primary"
-        color="primary"
-        v-bind="props"
-        icon
-      >
+      <v-btn variant="text" class="custom-hover-primary" color="primary" v-bind="props" icon>
         <v-avatar size="35">
-          <img
-            src="@/assets/images/profile/user-1.jpg"
-            width="35"
-            alt="Julia"
-          />
+          <img src="@/assets/images/profile/user-1.jpg" width="35" alt="Julia" />
         </v-avatar>
       </v-btn>
     </template>
@@ -34,30 +34,23 @@ import { profileDD } from "@/_mockApis/headerData";
             <h6 class="text-subtitle-1">
               David McMichael <span class="text-success text-caption">Pro</span>
             </h6>
-            <span class="text-subtitle-1 textSecondary"
-              >david@wrappixel.com</span
-            >
+            <span class="text-subtitle-1 textSecondary">david@wrappixel.com</span>
           </div>
         </div>
         <v-divider></v-divider>
-        <perfect-scrollbar
-          style="height: calc(100vh - 240px); max-height: 240px"
-        >
+        <perfect-scrollbar style="height: calc(100vh - 240px); max-height: 240px">
           <v-list class="py-0 theme-list mt-3" lines="one">
-            <v-list-item
-              v-for="item in profileDD"
-              :key="item.title"
-              class="py-0 px-2 rounded-md custom-text-primary"
-              color="primary"
-              :to="item.href"
-            >
+            <v-list-item v-for="item in profileDD" :key="item.title" class="py-0 px-2 rounded-md custom-text-primary"
+              color="primary" :to="item.href">
               <div class="d-flex gap-3 align-center">
                 <p class="text-subtitle-1 heading custom-title">
                   {{ item.title }}
                 </p>
                 <v-chip size="small" color="error" v-if="item.badge">4</v-chip>
               </div>
+
             </v-list-item>
+            <v-btn @click="logout" color="primary" variant="outlined" block>Logout</v-btn>
           </v-list>
         </perfect-scrollbar>
       </div>