Best Practices for Keycloak Initialization Before Vue Router Guards

[loic-bellinger]

Hello
I'm integrating Keycloak into a Vue 3 application that uses Vue Router 4. I'm using your plugin, and everything works fine. However, I'm wondering if there's a better, cleaner, or more idiomatic way to handle Keycloak initialization and Vue Router guards.

Here's my current setup:

main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from '@/App.vue'
import router from '@/router'
import { vueKeycloak } from '@josempgon/vue-keycloak'


(async () => {
  const app = createApp(App)
  if (import.meta.env.PROD) {
    await vueKeycloak.install(app, {
      config: {
        url: import.meta.env.VITE_KEYCLOAK_URL,
        realm: import.meta.env.VITE_KEYCLOAK_REALM,
        clientId: import.meta.env.VITE_KEYCLOAK_CLIENT
      },
      initOptions: {
        onLoad: 'login-required',
        silentCheckSsoRedirectUri: `${window.location.origin}/silent-check-sso.html`,
        checkLoginIframe: true
      }
    })
    router.keycloak = app.config.globalProperties.$keycloak
  }
  initializeTarteaucitron()
  app.use(createPinia())
  app.use(router)
  app.mount('#app')
})()

Here is my router config:

import { createRouter, createWebHistory } from 'vue-router'

const routes = []

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})


router.beforeEach(async (to) => {
  if (!router.keycloak.authenticated) {
    await router.keycloak.login()
  }
})

export default router

[JoseGoncalves]

Hi @loic-bellinger! The main purpose to use this Vue wrapper to the keycloak-js adapter is to minimize direct interactions with that adapter and have reactive references for the authentication state.
So the idea (and how I'm using it) is to have in your main App.vue component something like this:

<script setup>
import { useKeycloak } from '@josempgon/vue-keycloak';
const { isAuthenticated } = useKeycloak();
</script>

<template>
	<div v-if="isAuthenticated">
		<router-view />
	</div>
	<div v-else>
              <-- progress component !-->
	</div>
</template>

Nevertheless, this is for the default initialization behaviour, i.e. without initOptions set, which assigns login-required to the onLoad prop.
Never tested the wrapper with router guards and with a mix of public/private routes, but, if all your routes require authentication, don't see why you need to use check-sso.

[loic-bellinger]

You are right that login-required is best in my case. But i aslo need my silentCheckSsoRedirectUri, because my sso will be shared between 3 apps. If one user disconnect from App 1, it needs to be disconnected from App 2.

[JoseGoncalves]

Using check-sso you can try something like the following (not tested):

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

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

watch(isPending, pending => {
	if (!pending) keycloak.value.login();
});
</script>

<template>
	<div v-if="isAuthenticated">
		<router-view />
	</div>
	<div v-else>
              <-- progress component !-->
	</div>
</template>

[loic-bellinger]

That's interesting. I'll keep it in mind. I'm gonna close the discussion I think I have enough options to consider now. Thanks for your help!