keycloak / keycloak-web

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Vue3 keycloak.init fails

jacegrantham opened this issue · comments

commented

Describe the bug

Initializing keycloak-js adapter in Vue3 fails, triggering catch block.

import { createApp } from 'vue'
import Keycloak from 'keycloak-js'

let initOptions = {
  url: 'http://127.0.0.1:8080/', realm: 'keycloak-demo', clientId: 'app-vue', onLoad: 'login-required'
}

let keycloak = Keycloak(initOptions);

const app = createApp(App)

keycloak.init({ onLoad: initOptions.onLoad }).then((auth) => {
  // this code never executes
  if (!auth) {
    window.location.reload();
  } else {
    app.mount('#app'); // new vue3 method to initialize vue app https://vuejs.org/guide/essentials/application.html
  }.catch(() => {
  // this catch block executes
  console.log('Authentication Failed')
})

Corresponding documentation for keycloak setup with vue, these docs refer to vue2, there are no docs that i can find for vue3 https://github.com/keycloak/keycloak-web/blob/main/guides/securing-apps/vue.adoc

Version

18.0.1

Expected behavior

keycloak.init successfully initializes inside a vue3 application

Actual behavior

keycloak.init fails, triggering catch block

How to Reproduce?

Follow this guide to setup keycloak-js with vue, install vue3 https://github.com/keycloak/keycloak-web/blob/main/guides/securing-apps/vue.adoc

Anything else?

No response