update integrasi

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>

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=' +