Newbie question...component rendered before auth kicks in

Hi there,

I’m new to Vue and I’m trying to plug this module in. I’m using the following code:

createApp(App)
    .use(VueKeycloakJs, {
        init: {
            onLoad: 'login-required',
        },
        config: {
            url: 'http://localhost:8080/auth',
            clientId: 'xxx',
            realm: 'xxx'
        },
        onReady (keycloak) {
            console.log('Keycloak ready', keycloak)
            keycloak.updateToken(60).then(() => {
                console.log("Token refreshed")
            })
        }
    })
    .use(router)
    .use(logger)
    .mount('#app');

In one of my components I have this bit of code:

const app = getCurrentInstance()
const props = app.appContext.config.globalProperties.$keycloak
log.info(`Hello`, props);

What I’m noticing is that log statement outputs before the auth kicks in resulting in all the properties being empty. It’s worth mentioning I’m using vite as well so whenever I try ‘Vue.propotype.$keycloak’ I get a different error.

I would expect the first middleware to kick in first and then subsequent ones. I mean this could be a user error issue so any help would be appreciated.

Thanks

[baltom]

It’s probably the easiest solution to the problem. But it also slows down the initial “time to draw” of your application. As in it will stay white until your keycloak responds and the plugin loads fully. Which may be no problem for you though

[baltom]

Yeah something like that. So you’ll be able to show to the end user that your app has started but is still “doing something”