I have a Nuxt3 app which I want to secure with Keycloak.For the integration, I use the keycloak-js library, which is defined as a plugin:
plugins/keycloak.client.ts
import Keycloak from 'keycloak-js';import type {KeycloakConfig} from 'keycloak-js';export default defineNuxtPlugin((nuxtApp) => { const runtimeConfig = useRuntimeConfig(); const initOptions: KeycloakConfig = { url: runtimeConfig.public.KEYCLOAK_URL!, realm: runtimeConfig.public.KEYCLOAK_REALM!, clientId: runtimeConfig.public.KEYCLOAK_CLIENT_ID!, }; const keycloak = new Keycloak(initOptions); nuxtApp.$keycloak = keycloak; keycloak .init({ onLoad: 'check-sso', }); console.log('KeyCloak Plugin Loaded: ', nuxtApp.$keycloak);});The console logs this correctly.
For test purposes, I have a simple app.vue:
app.vue
<script setup lang="ts">import Keycloak from 'keycloak-js';const keycloak: Keycloak = useNuxtApp()['$keycloak'] as Keycloak</script><template><div><div> Authenticated? {{keycloak.authenticated}}</div><br/><button @click="keycloak.login()">Login via Keycloak</button><button @click="keycloak.logout()">Logout from Keycloak</button></div></template>Logging in and out works and the log of the keycloak object shows the correct value.This page always displays false when I load it, even if authenticated shows up as true in the console.However, if I do a small change in the code and the app hot-reloads, the correct value is shown (until the next refresh).
What's more, if I do:
console.log(keycloak);console.log(keycloak.authenticated);The log of the complete object will show the value to be true, but the second log will show false.
I should add that Nuxt is quite new for me. With my half-knowledge, I tried:
- Different ways to import,
- Putting the code in onBeforeMount(),
- Declaring keycloak as a ref,
- Putting a watch on keycloak
SSR is disabled in the nuxt.config.ts.
I'm fresh out of ideas.
What am I missing?