redirectUri: ${process.env.VUE_APP_PACKAGE_ID}://home,

you don’t explain what goes there.
How does the adapter know the app “domain”?

From the keycloak documentation:

I don’t see them in your package.json .

Did you test that this works?

Here is the code: https://github.com/marchalb/qkeycloak

I hope it helps …

Since I’m not using hash mode (re: your issue on github) I don’t have any issues so far with it

Thanks for posting a link to your Github issue regarding this in v2. Let’s hope someone from their team can help with it.
Being stuck on the redirection URL like this means something failed.
Check console log, http requests and responses. I usually have 3rd party cookies disabled and that also plays a role.
Not using https on the keycloak server side might also be an issue since OIDC requires HTTPS and Chrome especially can be a princess when it comes to http and https and especially localhost.

I realized it to late that this is only for Quasar v.1.

I tried to create a Version for Quasar v.2. It works with only one redirection error.

https://github.com/quasarframework/quasar/issues/10062

Something like
{ Vue, router, store, app } as PluginInitializerObject

But you’ll have to ask the Quasar guys for details.

2. Line 4 in keycloak.js you pass the {Vue,router,store,app} object so there Vue should be referenced. You don’t have to import Vue in this file since the reference is passed in this object.

Only reason I can think of is that you’re using Quasar v2 and this is for Quasar v1. I have not done anything with v2 yet.

I tried also to connect kecloak-js with quasar by using our tutorial but i cant get it work…

By using your code:
#boot/keycloak.js#
import VueKeyCloak from ‘@dsb-norge/vue-keycloak-js’
import axios from ‘axios’

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default async ({ Vue, router, store, app }) => {
// eslint-disable-next-line @typescript-eslint/require-await
async function tokenInterceptor () {
axios.interceptors.request.use(config => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions
config.headers.Authorization = Bearer ${Vue.prototype.$keycloak.token}
return config
}, error => {
return Promise.reject(error)
})
}

return new Promise(resolve => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
Vue.use(VueKeyCloak, {
init: {
onLoad: ‘login-required’, // or ‘check-sso’
flow: ‘standard’,
pkceMethod: ‘S256’,
silentCheckSsoRedirectUri: window.location.origin + ‘/silent-check-sso.html’,
checkLoginIframe: false // otherwise it would reload the window every so seconds
},
config: {
url: ‘url’,
realm: ‘realm’,
clientId: ‘clientId’
},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
onReady: (keycloak) => {
void tokenInterceptor()
resolve()
}
})
})
}
###

by using this i get console error:
[Quasar] boot error: TypeError: Vue is undefined

Also i dont get it, why you use ‘silent-check-sso.html’ instead of redirecting directly to the mainpage

And i cant read out how to use it… maybe iam using it wrong:
###

import {
defineComponent
} from ‘vue’;

export default defineComponent({
name: ‘LoginComponent’
});

###

Additionally the auth token didnt get refreshed like
###
setInterval(() => {
keycloak
// If token is expiring in that many secs, from now, refresh it
.updateToken(70)
.then((refreshed) => {
if (refreshed) {
console.log(“Keycloak Token refreshed” + refreshed);
} else {
console.log(
“Keycloak Token not refreshed, valid for another ” +
Math.round(
keycloak.tokenParsed.exp +
keycloak.timeSkew –
new Date().getTime() / 1000
) +
” seconds”
);
}
})
.catch(() => {
console.log(“Failed to refresh Keycloak Token”);
});
// Recheck if the token is expired in order to refresh it (millis)
}, 60000);
### from https://github.com/quasarframework/quasar/issues/4758

Have a great day! 🙂