update

app/components/app/auth/login.vue

@@ -14,6 +14,7 @@ const props = defineProps<Props>()
 const emit = defineEmits<{
   submit: [data: any]
   sso: []
+  response: [state: string]
 }>()
 
 const { handleSubmit, defineField, errors, meta } = useForm({
@@ -45,6 +46,14 @@ const onSSO = (async () => {
   }
 });
 
+const test = useRoute()
+const responseSSO = test.hash
+
+if (responseSSO != null && responseSSO != '') {
+  console.log("Getting Response SSO...")
+  await emit('response', responseSSO)
+}
+
 </script>
 
 <template>
@@ -85,7 +94,10 @@ const onSSO = (async () => {
   </form>
 
   <a href="/auth/keycloak/login">Login with Keycloak</a>
+
   <Button @click="onSSO" target="_blank">
     Login SSO
   </Button>
+
+  <span>success {{ responseSSO }}</span>
 </template>

app/components/content/auth/login.vue

@@ -60,29 +60,11 @@ async function onSSO() {
   });
 
   try {
-    await keycloak.init({ onLoad: 'login-required' }); // Or 'login-required'
+    const authenticatedResult = await keycloak.init({ onLoad: 'login-required' }); // Or 'login-required'
+    // seelah line ini aku mek paham logic e tapi faktane dunno
     const nuxtApp = useNuxtApp()
     nuxtApp.provide('keycloak', keycloak);
 
-    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'
-      }
-    }
   } catch (error) {
     console.error('Keycloak initialization failed:', error);
   }
@@ -144,10 +126,36 @@ async function onSSO() {
   //   external: true
   // })
 }
+
+async function onResponseSSO(authenticatedResult: string) {
+  console.log("=================== onto login fes!!! ===================")
+  console.log(authenticatedResult)
+    if (authenticatedResult) {
+      const result = await xfetch('/api/v1/authentication/login-fes', 'POST', {
+        data: authenticatedResult,
+      })
+
+      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'
+        }
+      }
+    }
+}
 </script>
 
 <template>
-  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" @sso="onSSO" />
+  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" @sso="onSSO" @response="onResponseSSO" />
 </template>
 
 <style scoped></style>

app/pages/auth/sso.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blank',
+  public: true,
+})
+
+const test = useRoute()
+const temp = test.hash
+</script>
+
+<template>
+ <span>success {{ temp }}</span>
+</template>