Keycloak js issues with isTokenExpired and updateToken

Question

Im having some issues with Vue and Keycloak, I might understand something wrong about Keycloak which could cause the issues.

So I have a Login page by myself (I dont want to use Keycloaks sso) where you can enter a username + password. Here I handle getting the Token of a user from keycloak:

import { inject } from "vue";
import axios from "axios";

export default {
  setup() {
    const keycloak = inject("$keycloak"); 
    return { keycloak };
  },
   async login() {
  
  const url = "http://localhost:8090/realms/XXX/protocol/openid-connect/token";

 
  const data = new URLSearchParams();
  data.append("client_id", "XXX"); 
  data.append("username", this.username); 
  data.append("password", this.password); 
  data.append("grant_type", "password");
  data.append("client_secret", "XXX")

  try {

    const response = await axios.post(url, data, {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    });

    const token = response.data.access_token;
    const refreshToken = response.data.refresh_token;

    this.keycloak.token = token;
    this.keycloak.refreshToken = refreshToken;

    localStorage.setItem("access_token", token);
    localStorage.setItem("refresh_token", refreshToken);
    console.log("Benutzer erfolgreich angemeldet!");

    this.$router.push("/home");
  } catch (error) {
    console.error("Anmeldung fehlgeschlagen:", error);
    alert("Anmeldung fehlgeschlagen. Bitte überprüfen Sie Ihre Zugangsdaten.");
  }
},

my Rounter js looks like this:

import keycloak from "../components/login/keycloak.js";

const routes = [
    {
        path: '/', // Standard-Route
        name: 'Login',
        component: Login,
        meta: {
            isAuthenticated: false
        },
    },
    {
        path: '/home', 
        name: 'Home',
        component: Home,
        meta: {
            isAuthenticated: true
        },
    },
];

const router = createRouter({
    history: createWebHistory(), 
    routes,
});

//Überprüfung das der Benutzer authentifiziert ist!
router.beforeEach((to, from, next) => {
    const token = localStorage.getItem("access_token");
    const refresh = localStorage.getItem("refresh_token");

    if(refresh) {
        keycloak.refreshToken = refresh;
    }

    if(token) {
        keycloak.token = token;
    }

    console.log("TOKEN:",token);
    if (!token && to.name !== "Login" && to.name !== "/") {
        next({ name: "Login" });
    } else if (token && to.name !== "Login" && to.name !== "/") {
        console.log("Hey");
        console.log("Keycloak Instanz:", keycloak);
        console.log("Token: " + keycloak.token);
        console.log("Refresh: " + keycloak.refreshToken);
        console.log("Test:", keycloak.isTokenExpired(5));
        console.log("Test after");
        keycloak.updateToken(5).then(function(refreshed) {
            if(refreshed) {
                alert('Token was successfully refreshed');
                console.log('Token was successfully refreshed')
            }else {
                alert('Token is still valid');
                console.log('Token is still valid')
            }
            next();
        }).catch((error) => {
            console.error("Token-Update fehlgeschlagen:", error); 
            console.log("Aktueller Token:", token); 

            //localStorage.removeItem("access_token");
            next({ name: "Login" });
        });
    } else {
        next();
    }
});
export default router;

I have the issue that it crashes at the isTokenExpired method and on the keycloak.updateToken as well. Thats why I set the keycloak.token manually, the token was undefined before which I thought might cause the issue, however even with token + refresh token set, I still cant get past the isTokenExpired line.

heres the log of the browser console: [vite] connecting... client:742:9

[vite] connected. client:861:15

Benutzer ist nicht eingeloggt! main.js:24:21

TOKEN: ey.. (shorted for better readability)hVtgahEqgM6JhmT_OV31hr_z6tqxdxMq6jItvkbpPQ2ooUCKFjFrXEAow

vuetify_lib_components_VTextField_index__mjs.js:1074:17

Benutzer erfolgreich angemeldet! Login.vue:69:17

TOKEN: ey... (shorted for better readability)

Hey index.js:47:17

Keycloak Instanz:

Object { didInitialize: true, init: init(initOptions), login: login(options), createLoginUrl: async createLoginUrl(options), logout: logout(options), createLogoutUrl: createLogoutUrl(options), register: register(options), createRegisterUrl: async createRegisterUrl(options), createAccountUrl: createAccountUrl(options), accountManagement: accountManagement(), … }

index.js:48:17 Token: ey..... (shorted for better readability)

[Vue Router warn]: uncaught error during route navigation: vue-router.js:204:16

Not authenticated vue-router.js:2768:15

Uncaught (in promise) Not authenticated

Any help or tipps in which direction I should look would be appreciated!