Calling login() on Keycloak instance does not change isAuthenticated to true

[straurob]

I'm trying to integrate the keycloak-js (vue-keycloak resp.) into my Quasar 2 application based on Vue 3.

This is how I setup the Keycloak instance:

import { boot } from 'quasar/wrappers';
import { vueKeycloak } from '@baloise/vue-keycloak';

export default boot(({ app }) => {
  app.use(vueKeycloak, {
    initOptions: {
      pkceMethod: 'S256',
      onLoad: null,
    },
    config: {
      url: process.env.AUTH_SERVER_URL,
      realm: process.env.AUTH_REALM,
      clientId: process.env.AUTH_CLIENT_ID,
    },
  });
});

onLoad: null was added as the app provides a login and logout button which shall trigger the keycloak functions.

The following code shows the component which shall trigger the login() function.

<template >
    <q-icon name="login" size="md" @click="login"></q-icon>
</template>

<script>
import { computed, defineComponent } from 'vue';
import { useKeycloak } from '@baloise/vue-keycloak';

export default defineComponent({
  name: 'Login',
  setup() {
    const keycloak = useKeycloak();

    async function login() {
      if (!keycloak.isAuthenticated.value) {
        await keycloak.keycloak.login({ redirectUri: 'http://localhost:8093/#' });
      }
      console.log(`authenticated? ${keycloak.isAuthenticated.value}`);
    }
    return { login };
  },
});
</script>

When calling the login() function, then the user is redirected to the Keycloak login form. A successful login also created a session on the Keycloak admin interface.

However there are two behaviors I don't understand:

1. The console.log() does not print anything. It looks as if the statement is not reached at all.
2. After the successful login, the user gets redirected to an URL like this: http://localhost:8093/#/&state=10fa51fd-e7f0-427b-8ee3-671902457ec0&session_state=05025f56-a4da-4cdd-b844-cf5353a06e39&code=33ffa310-8fea-423e-9add-05a232b3eec0.05025f56-a4da-4cdd-b844-cf5353a06e39.fe33e875-5d8b-4c99-81cc-a72067a4bf3a. Here I would have expected 'http://localhost:8093/#.

[Tusko]

const { isAuthenticated, hasFailed, isPending, username, keycloak } = useKeycloak();

works fine

[2stootjes]

Libary seems uncomplete and undocumented. Same issue with the URL. also "Error: Could not read access token" when not using login-required. Routeguards don't work. no documentation about that... alot of issues