simrsx-fe/app/components/content/auth/login.vue

<script setup lang="ts">
import { z } from 'zod'
import Keycloak from 'keycloak-js'
// import { useKeycloak } from '@/stores/keycloak'

const loginSchema = z.object({
  name: z.string().min(3, 'Please enter a valid username'),
  password: z.string().min(3, 'Password must be at least 3 characters'),
})

const { login } = useUserStore()

type LoginFormData = z.infer<typeof loginSchema>

const isLoading = ref(false)
const apiErrors = ref<Record<string, string>>({})

async function onSubmit(data: LoginFormData) {
  isLoading.value = true

  const result = await xfetch('/api/v1/authentication/login', 'POST', {
    name: data.name,
    password: data.password,
  })

  if (result.success) {
    const { data: rawdata, meta } = result.body
    if (meta.status === 'verified') {
      await login(rawdata)
      await 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'
    }
  }

  isLoading.value = false
}

const config = useRuntimeConfig()
// const store = useKeycloak()

const state = reactive({
    loggedIn: false
})

async function onSSO() {
  console.log("=================== on SSO! ===================")
  const config = useRuntimeConfig()

  const keycloak = new Keycloak({
      url: config.public.KEYCLOAK_URL,
      realm: config.public.KEYCLOAK_REALM,
      clientId: config.public.NUXT_OIDC_PROVIDERS_KEYCLOAK_CLIENT_ID,
  });

  try {
    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);

  } 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=' +
  //   config.public.KEYCLOAK_ID +
  //   '&scope=openid%20email%20profile&response_type=code&redirect_uri=' +
  //   config.public.KEYCLOAK_LOGOUT_REDIRECT +
  //   '%2Fapi%2Fauth%2Fcallback%2Fkeycloak&state=AKf-WHWdL822V3LaNS5MSFzJ96-VHp6FUXlXxIAzXXM&code_challenge=nXOcGLLlA1NtXI4RM4hL59iP_I_yQAsUDd5sAOkKBF4&code_challenge_method=S256'
  // await navigateTo(urlSSO,
  // {
  //   open: { target: '_blank' },
  //   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" @response="onResponseSSO" />
</template>

<style scoped></style>