Keycloak is not initialized in router middleware

[askareija]

I try to use vue router middleware for guarding routes that needs user to be authenticated. I try to get isPending value, but it's always return true. How to await keycloak initialization finished then guard the route app?

here's my main.ts code:

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import routes from "./routes";
import "./assets/css/index.css";
import { vueKeycloak } from "@baloise/vue-keycloak";
import { createPinia } from "pinia";

const app = createApp(App);
const router = createRouter({ history: createWebHistory(), routes: routes });
app.use(createPinia());

app.use(vueKeycloak, {
  initOptions: {
    checkLoginIframe: false,
    onLoad: "check-sso",
    silentCheckSsoRedirectUri:
      window.location.origin + "/assets/silent-check-sso.html",
  },
  config: {
    url: import.meta.env.VITE_SSO_URL,
    realm: import.meta.env.VITE_SSO_REALM,
    clientId: import.meta.env.VITE_SSO_CLIENT_ID,
  },
});
console.log('keycloak initialized. run application.')
console.log('START: using router')
app.use(router);
console.log('END: using router')

app.mount("#app");

here's my auth guard route middleware code (for now):

import { getToken, useKeycloak } from "@baloise/vue-keycloak";
const { keycloak, isPending, isAuthenticated } = useKeycloak();

const authGuard = async (to: any, from: any) => {
  console.log(isPending.value);
  try {
    console.log("is pending: ", isPending.value);
    if (!isPending.value) {
      console.log(`is pending is false.`);
      console.log(isAuthenticated.value);
      const token = await getToken();

      if (!isAuthenticated.value) {
        alert("Sesi anda sudah habis. Silakan untuk login kembali.");
        return "/";
      }
    }
  } catch (error) {
    alert(error);
    return "/";
  }
};

export default authGuard;