From 87a4bdc1a8a2daced6831c51e42d5f9b0345a0fb Mon Sep 17 00:00:00 2001
From: "dwi.firman" <dwi.firman@rssa.id>
Date: Mon, 2 Jun 2025 12:08:55 +0700
Subject: [PATCH] perbaikan keycloak dan hak akses pada sidebarItem, add axios,
 pinia, zod

---
 components/auth/LoginForm.vue                 | 48 ++++++------
 components/layout/full/Main.vue               |  8 +-
 .../layout/full/vertical-header/ProfileDD.vue | 10 +--
 layouts/default.vue                           | 66 ++++++++++++++++-
 middleware/auth.global.ts                     | 12 +++
 nuxt.config.ts                                |  2 +-
 package.json                                  | 17 +++--
 pages/auth/Login.vue                          | 57 ++++++++++++---
 pnpm-lock.yaml                                | 45 ++++++++----
 server/api/auth/login.js                      | 73 +++++++++++++++++++
 server/api/sidebarItem.ts                     | 19 +++++
 server/utils/auth.js                          | 29 ++++++++
 12 files changed, 323 insertions(+), 63 deletions(-)
 create mode 100644 middleware/auth.global.ts
 create mode 100644 server/api/auth/login.js
 create mode 100644 server/api/sidebarItem.ts
 create mode 100644 server/utils/auth.js

diff --git a/components/auth/LoginForm.vue b/components/auth/LoginForm.vue
index 488fa7f..8f55a28 100644
--- a/components/auth/LoginForm.vue
+++ b/components/auth/LoginForm.vue
@@ -1,23 +1,26 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 const { $encodeBase64 } = useNuxtApp();
-const checkbox = ref(true);
-const cookies = useCookie('user_token_profile');
-// const keycloak = async () => {
-//     const response = await $fetch(`/api/auth/login`, { method: 'POST', mode: 'no-cors' }).then((response) => {
-//         console.log(response)
-//         cookies.value = $encodeBase64('ini_token')
-//         window.location.href = response.callbackURL
-//     })
-// }
 
-const { signIn, getProviders } = useAuth()
-const providers = await getProviders()
+const loginKeycloack = async () => {
+    const cookies = useCookie('user_token');
+    try {
+        const response = await $fetch('/api/auth/login', { method: 'POST', mode: 'no-cors' }).then((response) => {
+            if (response.callbackURL !== null || response.callbackURL !== undefined || response.callbackURL !== '') {
+                cookies.value = $encodeBase64('ini_token_user');
+                window.location.href = response.callbackURL
+            }
+        });
+    } catch (error) {
+        console.error('Login failed:', error);
+    }
+}
+
 </script>
 
 <template>
     <v-row class="d-flex mb-3">
-        <v-col cols="12">
+        <!-- <v-col cols="12">
             <v-label class="font-weight-bold mb-1">Username</v-label>
             <v-text-field variant="outlined" density="compact" hide-details color="primary"></v-text-field>
         </v-col>
@@ -30,19 +33,16 @@ const providers = await getProviders()
             <div class="d-flex flex-wrap align-center">
                 <v-checkbox v-model="checkbox" color="primary" hide-details>
                     <template v-slot:label class="text-body-1">Remeber this Device</template>
-                </v-checkbox>
-                <div class="ml-sm-auto">
-                    <NuxtLink to="/" class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium">
-                        Forgot
-                        Password ?</NuxtLink>
-                </div>
-            </div>
-        </v-col>
+</v-checkbox>
+<div class="ml-sm-auto">
+    <NuxtLink to="/" class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium">
+        Forgot
+        Password ?</NuxtLink>
+</div>
+</div>
+</v-col> -->
         <v-col cols="12" class="pt-0">
-            <button v-for="provider in providers" :key="provider.id" class="login-button" @click="signIn('keycloak')">
-                Sign in with {{ provider.name }}
-            </button>
-            <!-- <v-btn @click="keycloak()" color="primary" size="large" block flat>Sign in</v-btn> -->
+            <v-btn @click="loginKeycloack" color="primary" size="large" block flat>Sign in</v-btn>
         </v-col>
     </v-row>
 </template>
diff --git a/components/layout/full/Main.vue b/components/layout/full/Main.vue
index 2734e1e..fdcae13 100644
--- a/components/layout/full/Main.vue
+++ b/components/layout/full/Main.vue
@@ -3,16 +3,18 @@ import { onMounted, ref, shallowRef, watch } from 'vue';
 import { useDisplay } from "vuetify";
 import sidebarItems from "@/components/layout/full/vertical-sidebar/sidebarItem";
 import { Menu2Icon } from "vue-tabler-icons";
+const props = defineProps({ items: { type: Object } })
+const sidebarMenu = ref('');
 
-const sidebarMenu = shallowRef(sidebarItems);
 
 const { mdAndDown } = useDisplay();
 const sDrawer = ref(true);
 onMounted(() => {
   sDrawer.value = !mdAndDown.value; // hide on mobile, show on desktop
 });
-watch(mdAndDown, (val) => {
-  sDrawer.value = !val;
+watch([mdAndDown, () => props.items], ([mdVal, items]) => {
+  sDrawer.value = !mdVal;
+  sidebarMenu.value = items;
 });
 </script>
 
diff --git a/components/layout/full/vertical-header/ProfileDD.vue b/components/layout/full/vertical-header/ProfileDD.vue
index 3b63f8f..63ae659 100644
--- a/components/layout/full/vertical-header/ProfileDD.vue
+++ b/components/layout/full/vertical-header/ProfileDD.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { UserIcon, MailIcon, ListCheckIcon } from 'vue-tabler-icons';
 const runtimeConfig = useRuntimeConfig();
-const user_profile = useCookie('user_token_profile');
-// const user_token = useCookie('user_token');
+const user_profile = useCookie('user_profile');
+const user_token = useCookie('user_token');
 const logout = async () => {
-    console.log('Logging out...');
     window.location.href = `${runtimeConfig.public.keycloakUrl}/realms/${runtimeConfig.public.keycloakRealm}/protocol/openid-connect/logout?client_id=${runtimeConfig.public.keycloakClient}&post_logout_redirect_uri=http://localhost:3000`;
-    //   user_token.value = null;
-    user_profile.value = null;
+    user_token.value = null;
+    localStorage.removeItem('userProfile')
+    localStorage.removeItem('sidebarItems')
     navigateTo('/auth/login')
 }
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 233ad09..b0e02c2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -12,13 +12,77 @@ useHead({
       : "Matdash - Nuxt3 Typescript based Free Admin Dashboard Template";
   },
 });
+
+
+const { $encodeBase64, $decodeBase64 } = useNuxtApp();
+const sidebarMenu = ref('');
+const sessionState = ref('');
+const issuer = ref('');
+const code = ref('');
+const cobaSetProfile = ref<any[]>([]);
+const runtimeconfig = useRuntimeConfig();
+const url = window.location.href;
+const urlParams = new URL(url).searchParams;
+sessionState.value = urlParams.get('session_state') || '';
+issuer.value = urlParams.get('iss') || '';
+code.value = urlParams.get('code') || '';
+
+const response = $fetch(`${issuer.value}/protocol/openid-connect/token`, {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/x-www-form-urlencoded', },
+  body: new URLSearchParams({
+    grant_type: 'authorization_code',
+    client_id: runtimeconfig.public.keycloakClient, // Ganti dengan client ID Anda
+    client_secret: runtimeconfig.public.keycloakSecretKey,
+    code: code.value,
+    redirect_uri: `${window.location.origin}`, // Ganti dengan redirect URI Anda
+  })
+}).then((response) => {
+  const reUserInfo = $fetch(`${issuer.value}/protocol/openid-connect/userinfo`, {
+    headers: {
+      Authorization: `Bearer ${response.access_token}`,
+    }
+  })
+    .then((response) => {
+      const idMongose = response.idMongose
+      const encodeProfile = $encodeBase64(JSON.stringify(response))
+      localStorage.setItem('userProfile', encodeProfile)
+      cobaSetProfile.value.push(encodeProfile)
+      $fetch(`/api/sidebarItem`, {
+        method: 'POST',
+        body: { key: idMongose }
+      })
+        .then((response) => {
+          localStorage.setItem('sidebarItems', $encodeBase64(JSON.stringify(response)))
+          sidebarMenu.value = response.items
+        }).catch((err) => {
+          loadSidebarItemLocalStorage()
+        })
+      // $fetch(`http://10.10.150.131:8080/api/login/${idMongose}`, {
+      //   headers: { 'Content-Type': 'application/json', },
+      //   mode: 'no-cors'
+      // })
+      //   .then((response) => {
+      //     console.log(response)
+      //   })
+    }).catch((err) => {
+      loadSidebarItemLocalStorage()
+    })
+}).catch((err) => {
+  loadSidebarItemLocalStorage()
+})
+
+function loadSidebarItemLocalStorage() {
+  const as = JSON.parse($decodeBase64(localStorage.getItem('sidebarItems')))
+  sidebarMenu.value = as.items
+}
 </script>
 
 <template>
   <v-locale-provider>
     <!-- <Topbar /> -->
     <v-app>
-      <LayoutFullMain />
+      <LayoutFullMain :items="sidebarMenu" />
       <v-main class="mr-md-4">
         <div class="mb-3 hr-layout bg-containerBg">
           <v-container fluid class="page-wrapper bg-background pt-md-8 rounded-xl">
diff --git a/middleware/auth.global.ts b/middleware/auth.global.ts
new file mode 100644
index 0000000..97fded3
--- /dev/null
+++ b/middleware/auth.global.ts
@@ -0,0 +1,12 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+    const token = useCookie('user_token').value;
+    // Jika tidak ada token dan bukan rute login, arahkan ke halaman login
+    if (!token && to.path !== '/auth/login') {
+        return navigateTo('/auth/login');
+    }
+
+    // Jika ada token dan mencoba mengakses halaman login, arahkan ke dashboard
+    if (token && to.path === '/auth/login') {
+        return navigateTo('/sample-page'); // Ganti '/dashboard' dengan rute dashboard yang sesuai
+    }
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 77d2ac5..49d138d 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -53,7 +53,7 @@ export default defineNuxtConfig({
     public: {
       keycloakUrl: 'https://auth.rssa.top',
       keycloakRealm: 'sandbox',
-      keycloakClient: 'coba-pendaftaran',
+      keycloakClient: 'keuangan-firman',
       keycloakSecretKey: '32HslhZ8Hn97SsbxcmowhXvmNZ9cPGNE',
       keycloakRedirectURI: 'http://localhost:3000',
 
diff --git a/package.json b/package.json
index 4aa03f0..484648f 100644
--- a/package.json
+++ b/package.json
@@ -5,30 +5,33 @@
   "private": true,
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "nuxt dev - 3002",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "openid-client": "^5.7.1",
-    "nuxt-auth-utils": "^0.5.16",
-    "cors": "^2.8.5",
     "@iconify/vue": "^4.1.1",
     "@mdi/font": "7.4.47",
     "@nuxt/vite-builder": "3.16.2",
     "@vueform/nuxt": "^1.13.0",
     "apexcharts": "4.5.0",
+    "axios": "^1.9.0",
+    "cors": "^2.8.5",
+    "nuxt-auth-utils": "^0.5.16",
+    "openid-client": "^5.7.1",
+    "pinia": "^3.0.2",
     "sass": "1.70.0",
     "vue": "3.5.13",
     "vue-tabler-icons": "2.21.0",
     "vue3-apexcharts": "1.5.2",
     "vue3-perfect-scrollbar": "1.6.1",
-    "vuetify": "3.7.18"
+    "vuetify": "3.7.18",
+    "zod": "^3.25.46"
   },
   "devDependencies": {
-    "nuxt": "3.16.2",
-    "@sidebase/nuxt-auth": "^0.10.1"
+    "@sidebase/nuxt-auth": "^0.10.1",
+    "nuxt": "3.16.2"
   },
   "overrides": {
     "nth-check": "2.1.1"
diff --git a/pages/auth/Login.vue b/pages/auth/Login.vue
index 255f10c..607b07c 100644
--- a/pages/auth/Login.vue
+++ b/pages/auth/Login.vue
@@ -1,9 +1,7 @@
 <template>
-  <div class="login-container">
-    <!-- Static gradient background with CSS animations instead of using directives -->
+  <!-- <div class="login-container">
     <div class="background-animation"></div>
 
-    <!-- Simple layout without nested component issues -->
     <div class="login-wrapper">
       <div class="login-card">
         <div class="card-header">
@@ -12,7 +10,7 @@
         </div>
 
         <div class="card-content">
-          <button v-for="provider in providers" :key="provider.id" class="login-button" @click="signIn(provider.id)">
+          <button v-for="provider in providers" :key="provider.id" class="login-button" @click="loginKeycloack">
             Sign in with {{ provider.name }}
           </button>
 
@@ -22,21 +20,62 @@
         </div>
       </div>
     </div>
+  </div> -->
+  <div class="authentication">
+    <v-container fluid class="pa-3">
+      <v-row class="h-100vh d-flex justify-center align-center">
+        <v-col cols="12" lg="4" xl="3" class="d-flex align-center">
+          <v-card rounded="md" elevation="10" class="px-sm-1 px-0 withbg mx-auto" max-width="500">
+            <v-card-item class="pa-sm-8">
+              <div class="d-flex justify-center py-4">
+                <LayoutFullLogo />
+              </div>
+              <div class="text-body-1 text-muted text-center mb-3">Finance Information System</div>
+              <AuthLoginForm class="mt-4" />
+              <h6 class="text-h6 text-muted font-weight-medium d-flex justify-center align-center mt-3">
+                <!-- New to Matdash?
+                <NuxtLink to="/auth/register"
+                  class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium pl-2">
+                  Create an account</NuxtLink> -->
+                <p>© {{ new Date().getFullYear() }} FIS. All rights reserved.</p>
+
+              </h6>
+            </v-card-item>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
 <script setup>
 definePageMeta({
-  layout: 'auth',
-  auth: {
-    unauthenticatedOnly: false,
-    navigateAuthenticatedTo: '/coba2',
-  },
+  // layout: 'auth',
+  layout: 'blank',
+  // auth: {
+  //   unauthenticatedOnly: false,
+  //   navigateAuthenticatedTo: '/coba2',
+  // },
 })
 
 const { signIn, getProviders } = useAuth()
 const providers = await getProviders()
 console.log(providers)
+const { $encodeBase64 } = useNuxtApp();
+
+const loginKeycloack = async () => {
+  const cookies = useCookie('user_token');
+  try {
+    const response = await $fetch('/api/auth/login', { method: 'POST', mode: 'no-cors' }).then((response) => {
+      if (response.callbackURL !== null || response.callbackURL !== undefined || response.callbackURL !== '') {
+        cookies.value = $encodeBase64('ini_token_user');
+        window.location.href = response.callbackURL
+      }
+    });
+  } catch (error) {
+    console.error('Login failed:', error);
+  }
+}
 </script>
 
 <style scoped>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0ec3563..1ae84f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   apexcharts:
     specifier: 4.5.0
     version: 4.5.0
+  axios:
+    specifier: ^1.9.0
+    version: 1.9.0
   cors:
     specifier: ^2.8.5
     version: 2.8.5
@@ -29,6 +32,9 @@ dependencies:
   openid-client:
     specifier: ^5.7.1
     version: 5.7.1
+  pinia:
+    specifier: ^3.0.2
+    version: 3.0.2(typescript@5.8.3)(vue@3.5.13)
   sass:
     specifier: 1.70.0
     version: 1.70.0
@@ -47,6 +53,9 @@ dependencies:
   vuetify:
     specifier: 3.7.18
     version: 3.7.18(typescript@5.8.3)(vue@3.5.13)
+  zod:
+    specifier: ^3.25.46
+    version: 3.25.46
 
 devDependencies:
   '@sidebase/nuxt-auth':
@@ -809,7 +818,7 @@ packages:
       unixify: 1.0.0
       urlpattern-polyfill: 8.0.2
       yargs: 17.7.2
-      zod: 3.25.23
+      zod: 3.25.46
     transitivePeerDependencies:
       - encoding
       - rollup
@@ -2183,6 +2192,12 @@ packages:
     resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
     dev: true
 
+  /@vue/devtools-api@7.7.6:
+    resolution: {integrity: sha512-b2Xx0KvXZObePpXPYHvBRRJLDQn5nhKjXh7vUhMEtWxz1AYNFOVIsh5+HLP8xDGL7sy+Q7hXeUxPHB/KgbtsPw==}
+    dependencies:
+      '@vue/devtools-kit': 7.7.6
+    dev: false
+
   /@vue/devtools-core@7.7.6(vite@6.3.5)(vue@3.5.13):
     resolution: {integrity: sha512-ghVX3zjKPtSHu94Xs03giRIeIWlb9M+gvDRVpIZ/cRIxKHdW6HE/sm1PT3rUYS3aV92CazirT93ne+7IOvGUWg==}
     peerDependencies:
@@ -2209,13 +2224,11 @@ packages:
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
       superjson: 2.2.2
-    dev: true
 
   /@vue/devtools-shared@7.7.6:
     resolution: {integrity: sha512-yFEgJZ/WblEsojQQceuyK6FzpFDx4kqrz2ohInxNj5/DnhoX023upTv4OD6lNPLAA5LLkbwPVb10o/7b+Y4FVA==}
     dependencies:
       rfdc: 1.4.1
-    dev: true
 
   /@vue/reactivity@3.5.13:
     resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
@@ -2609,7 +2622,6 @@ packages:
 
   /birpc@2.3.0:
     resolution: {integrity: sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==}
-    dev: true
 
   /bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
@@ -2979,7 +2991,6 @@ packages:
     engines: {node: '>=12.13'}
     dependencies:
       is-what: 4.1.16
-    dev: true
 
   /core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -4424,7 +4435,6 @@ packages:
   /is-what@4.1.16:
     resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
     engines: {node: '>=12.13'}
-    dev: true
 
   /is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
@@ -4851,7 +4861,6 @@ packages:
 
   /mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
-    dev: true
 
   /mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
@@ -5688,6 +5697,20 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /pinia@3.0.2(typescript@5.8.3)(vue@3.5.13):
+    resolution: {integrity: sha512-sH2JK3wNY809JOeiiURUR0wehJ9/gd9qFN2Y828jCbxEzKEmEt0pzCXwqiSTfuRsK9vQsOflSdnbdBOGrhtn+g==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 7.7.6
+      typescript: 5.8.3
+      vue: 3.5.13(typescript@5.8.3)
+    dev: false
+
   /pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
     dependencies:
@@ -6575,7 +6598,6 @@ packages:
 
   /rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
-    dev: true
 
   /rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
@@ -6905,7 +6927,6 @@ packages:
   /speakingurl@14.0.1:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /stable@0.1.8:
     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
@@ -7041,7 +7062,6 @@ packages:
     engines: {node: '>=16'}
     dependencies:
       copy-anything: 3.0.5
-    dev: true
 
   /supports-color@10.0.0:
     resolution: {integrity: sha512-HRVVSbCCMbj7/kdWF9Q+bbckjBHLtHMEoJWlkmYzzdwhYMkjkOwubLM6t7NbWKjgKamGDrWL1++KrjUO1t9oAQ==}
@@ -8016,6 +8036,5 @@ packages:
       readable-stream: 4.7.0
     dev: true
 
-  /zod@3.25.23:
-    resolution: {integrity: sha512-Od2bdMosahjSrSgJtakrwjMDb1zM1A3VIHCPGveZt/3/wlrTWBya2lmEh2OYe4OIu8mPTmmr0gnLHIWQXdtWBg==}
-    dev: true
+  /zod@3.25.46:
+    resolution: {integrity: sha512-IqRxcHEIjqLd4LNS/zKffB3Jzg3NwqJxQQ0Ns7pdrvgGkwQsEBdEQcOHaBVqvvZArShRzI39+aMST3FBGmTrLQ==}
diff --git a/server/api/auth/login.js b/server/api/auth/login.js
new file mode 100644
index 0000000..61aa89a
--- /dev/null
+++ b/server/api/auth/login.js
@@ -0,0 +1,73 @@
+import client from "~/server/utils/auth";
+import { sendRedirect } from 'h3';
+import cors from 'cors';
+
+export default defineEventHandler(async (event) => {
+    const runtimeconfig = useRuntimeConfig();
+    const redirectUri = `${runtimeconfig.public.keycloakRedirectURI}/callback`; // Ganti dengan URL yang sesuai jika perlu
+    const responseType = 'code';
+    const scope = 'openid';
+    // Apply CORS middleware
+    await new Promise((resolve, reject) => {
+        cors({
+            origin: redirectUri,
+            methods: ['POST'],
+        })(event.node.req, event.node.res, resolve);
+    });
+    // await new Promise((resolve, reject) => {
+    //   cors({
+    //     origin: runtimeConfig.public.keycloakRedirectURI,
+    //     methods: ['GET', 'POST'],
+    //   })(event.node.req, event.node.res, (err: any) => {
+    //     if (err) reject(err);
+    //     else resolve(true);
+    //   });
+    // });
+
+    const authClient = await client();
+    const authorizationUrl = authClient.authorizationUrl({
+        scope: 'openid profile email',
+        // scope: 'login-required',
+    });
+    // console.log(authorizationUrl)
+    // const baseURL = new URL(authorizationUrl)
+    // // console.log(baseURL.searchParams)
+    // const urlParam = baseURL.searchParams
+    // console.log(urlParam.get('code'))
+    //   if (event.node.req.url?.startsWith('/callback')) {
+    //     try {
+    //       const params = authClient.callbackParams(event.node.req);
+    //       const tokenSet = await authClient.callback(redirectUri, params, {
+    //         response_type: responseType,
+    //       });
+    //
+    //       const userInfo = await authClient.userinfo(tokenSet);
+    // console.log(userInfo);
+    // Simpan user info di session
+    // await setCookie(event).update({
+    //   user: {
+    //     id: userInfo.sub,
+    //     name: userInfo.name || userInfo.preferred_username,
+    //     email: userInfo.email,
+    //     roles: userInfo.roles || [],
+    //     accessToken: tokenSet.access_token,
+    //     refreshToken: tokenSet.refresh_token,
+    //   }
+    // });
+
+    // Redirect setelah login sukses
+    //   return sendRedirect(event, runtimeConfig.public.afterLoginRedirect || '/');
+    //
+    // } catch (error) {
+    //   console.error('Keycloak authentication error:', error);
+    //   throw createError({
+    //     statusCode: 401,
+    //     statusMessage: 'Authentication failed',
+    //   });
+    // }
+    // }
+    console.log(authorizationUrl)
+
+    return { callbackURL: authorizationUrl }
+    // return { callbackURL: authorizationUrl+`&response_type=${responseType}&scope=${scope}` }
+});
diff --git a/server/api/sidebarItem.ts b/server/api/sidebarItem.ts
new file mode 100644
index 0000000..2b6b7f2
--- /dev/null
+++ b/server/api/sidebarItem.ts
@@ -0,0 +1,19 @@
+import axios from "axios";
+
+export default defineEventHandler(async (event) => {
+  const read_body = await readBody(event)
+  console.log(`ini ${read_body}`)
+  try {
+    const response = await axios.get(`http://10.10.150.131:8080/api/login/${read_body.key}`)
+    // console.log(response.data.data)
+
+    return response.data.data
+  } catch (error) {
+    console.log(`Messages Err: ${error.response.data.message}  ||  nullable`)
+    throw createError({
+      statusCode: error.response?.status || 500,
+      statusMessage: error.message || 'Internal Server Error',
+    });
+  }
+
+})
diff --git a/server/utils/auth.js b/server/utils/auth.js
new file mode 100644
index 0000000..51f014e
--- /dev/null
+++ b/server/utils/auth.js
@@ -0,0 +1,29 @@
+import { Issuer } from 'openid-client';
+
+export default async function initializeAuth() {
+    const runtimeconfig = useRuntimeConfig();
+    try {
+        // console.log('Discovering Keycloak issuer...');
+        const baseUrl = typeof window !== 'undefined' ? window.location.origin : runtimeconfig.public.keycloakRedirectURI || 'http://localhost:3000';
+
+        // const keycloakIssuer = await Issuer.discover('http://localhost:8080/realms/cobalah');
+        const keycloakIssuer = await Issuer.discover(`${runtimeconfig.public.keycloakUrl}/realms/${runtimeconfig.public.keycloakRealm}`);
+        // const keycloakIssuer = await Issuer.discover(process.env.KEYCLOAK_ISSUER);
+        // console.log('Discovered issuer:', keycloakIssuer);
+
+        const client = new keycloakIssuer.Client({
+            client_id: `${runtimeconfig.public.keycloakClient}`,
+            // client_id: 'cobasaja',
+            // client_id: process.env.KEYCLOAK_CLIENT_ID,
+            redirect_uris: [`${baseUrl}`],
+            post_logout_redirect_uris: [`${baseUrl}`],
+            response_types: ['code'],
+        });
+
+        console.log('Client initialized successfully');
+        return client;
+    } catch (error) {
+        console.error('Error initializing OpenID client:', error);
+        throw error;
+    }
+}
\ No newline at end of file