I added a `onBeforeInit` and `onComplete` callback

[benny-noumena]

Hi Jose

I was in need of a way to initialise the router only after the authentication is completed. First I was using the onReady callback on the keycloak instance but then decided to do it after the initialisation as otherwise graphql for me would try to connect before it was authenticated.

Anyway.... would love to get this in or adjust it to your comments.

Best Benny

[JoseGoncalves]

Hi @benny-noumena. Don't see the need to setup callbacks to do what you need because you can use instead an async plugin initialization. An example of that kind of initialization is presented in https://github.com/JoseGoncalves/vue-keycloak/issues/7#issuecomment-2079205917

[benny-noumena]

Many thanks! Great, how did I not saw this :) Could you mark the correct solution in that thread? Maybe mention it in the README would be great, as I guess this is a common problem to wait until auth has finished before initialising the router. DSB Norge added a onReady callback. Still think it would be nice to have the flexibility to access the keycloak instance before the auth is started.

Async solves the onComplete but not the onBeforeInit case.

What are your thought on this?

[JoseGoncalves]

I will add to the README info on how to wait for the plugin initialization before proceeding with the Vue app setup.

I don't see the need also for the onBeforeInit callback, because you can register keycloak-js callbacks in your src/App.vue file like this:

<script setup>
import { useKeycloak } from '@josempgon/vue-keycloak';

const { keycloak } = useKeycloak();

keycloak.onReady = authenticated => console.log('[App] onReady:', authenticated);

keycloak.onTokenExpired = () => console.log('[App] onTokenExpired');
</script>

[benny-noumena]

Yes, that is what I tried but you can not do it for the first authentication cycle as the instance is created and the authentication immediately started right afterwards. Or did I do something wrong?

https://github.com/JoseGoncalves/vue-keycloak/blob/6b9541b25682234dba4c1f1640b478c2038e443a/src/plugin.ts#L39

[JoseGoncalves]

Yes, but, if you initialize your app synchronously (i.e., without async/await) you can setup keycloak-js callbacks in your main Vue SFC in the way I've indicated previously.

Nevertheless, the idea behind this Vue plugin is to be a minimal keycloak-js wrapper that provides Vue reactive data for most of the common authentication needs when interacting with Keycloak, without using callbacks. If you find any use case were the reactive data provided is not enough, please indicate me and I will consider making changes to support that use case.

[benny-noumena]

As I said, I would need a onReady callback that fires before the first attempt to authenticate and this is not possible or at least I did not figured out a way to achieve this. Having callbacks is not an anti-pattern in my mind. Having this would make it easy to achieve both. Either a onReady or being able to authenticate before the router without using top-level async. I use async for now and this is ok as long as I have only private routes. I do guess there are a log of usecases where there is a mix. All these will throw an error in the console.

I don't like the idea that I can not control when the authentication is started. I do think this is a shortcoming of the original code.

But hey, I don't mind. I either keep my branch or don't use it at all.

Many thanks