[Question] How to connect Keycloak-js correctly with Quasar?

[Excel1]

I tried to using Keycloak-js with Quasar (Quasar CLI) to perform web-authentication and getting the token for the webservices.

At first i tried it with using https://www.npmjs.com/package/keycloak-js and with using https://github.com/dsb-norge/vue-keycloak-js.

Additionally i used the tutorial from https://blog.icod.de/2021/02/25/keycloak-js-client-with-quasar/ to get it work but it seems Quasar have a problem with "Vue" cause by using the following code in boot as keycloak.js i got "[Quasar] boot error: TypeError: Vue is undefined"

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()
      }
    })
  })
}

I was also reading #4758 and tried it to use but this didnt seem to work for me with the quasar cli. Also the token refresh didnt work and is missing in the named blogpost tutorial.

https://medium.com/keycloak/secure-vue-js-app-with-keycloak-94814181e344 There was also a tutorial for vue in general but this wont also work for the quasar cli.

So how to connect Keycloak-js correctly with Quasar? And make it sense to write a quasar-cli plugin to connect keycloak with quasar?

[metalsadman]

Please use github discussions for questions or post this in our discord.

[yusufkandemir]

The need for eslint-disable-next-line should be enough to get suspicious. You didn't provide much info, but I can say that you are using Quasar v2. In Vue 3, global API has been changed, so you need to follow this instead: https://github.com/dsb-norge/vue-keycloak-js#vue-3, instead of createApp(App), you would use the app parameter, in general, you can just replace Vue with app in your code.

[yusufkandemir]

After this point, as you figured, you have to work with vue-keycloak-js to solve the other issues you have mentioned. Good luck 👍

[Excel1]

Thank you!

import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
import axios, { AxiosRequestConfig } from 'axios';
import { boot } from 'quasar/wrappers';
// But i got TS2304: Cannot find name 'async'. / TS2339: Property 'store' does not exist on type 'BootFileParams '. (so i removed store)
export default async boot(({ app, router, store }) => {
  function registerTokenInterceptor () {
    axios.interceptors.request.use((config: AxiosRequestConfig) => {
      config.headers['Authorization'] = `Bearer ${app.config.globalProperties.$keycloak.token}`
 
      return config
// S2554: Expected 0-2 arguments, but got 3.
    }, null, { synchronous: true })
  }

  return new Promise(resolve => {
	  app.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: 'myurl',
	      realm: 'myrealm',
	      clientId: 'mylient',
	    },
	    onReady() {
	      registerTokenInterceptor()
	      resolve()
	    }
	  })
  })
})

Maybe i should not return null and do i miss an import for async?

[yusufkandemir]

I wasn't testing the code and blindly writing it, missed that part, it should be like this:

export default boot(async ({ app, router, store }) => {

Regarding the 0-2 arguments part, I was checking https://github.com/axios/axios#interceptors where they mention a similar example. There seems to be an issue about types: axios/axios#3842

[Excel1]

I m case i removed router and store too because they were unused (ESLint). Thank you for the help!

[yusufkandemir]

You are welcome, good luck 👍

[Excel1]

dsb-norge/vue-keycloak-js#93

[Excel1]

This is the new current state: dsb-norge/vue-keycloak-js#94
Maybe the last step to finish

[rkrajukhunt]

I am using this lib, I am stuck in mobile redirection

I build app using a quasar with keycloak auth, redirection is not working in ios, can anyone help on setup configuration

[JohannesBauer97]

I made it deprecated due to lack of time for support, raising number of bug reports and since Keycloak implements a standard protocol you can use any OAuth2/OIDC library to connect your Vue.js application.

When you found a good OAuth2 library for your use case, you can check out this Tutorial the configurations are mostly standardized, and this tutorial should help you, even when you use a different library.

[RotoHieu]

@Excel1 do you find anything solution for it yet? it's my turn stucking with this problem

[Excel1]

@RotoHieu
I have written with a Keycloak developer and they are no longer actively developing adapters to connect a client to keycloak. This is because they officially support the OIDC or oAuth protocol and therefore existing libraries can be used.

For this reason, I have so far used oidc-client.ts, which worked without any problems. A major disadvantage, however, is that the library does not support the Capacitor browser, for example, which uses the native browser APIs (which is required for an app to be published by Apple).

Therefore I am in contact with Badisi, who is currently working on a library based on the oidc-client.ts. It doesn't seem to work correctly for Quasar yet, but I'm sure this won't be a problem soon - the library is otherwise complete and very easy to implement.

Badisi/auth-js#47 (comment)

[RotoHieu]

@Excel1 great work. I spend a while to read all your message. Hope it can be used soon

I'm new to keycloak and now using keycloak-ionic (the previous employee use it)

My problem is that I can't control the logout. The logout function in boot file (keycloak.logout({redirectUri})) and it open a confirm logout page by the link with redirect-uri, after click confirm, it will navigate to another page without the redirect-uri-> can't watch the event with appUrlOpen to know if the user agree to logout or not. after logout, the session end (can check it in keycloak admin) but there still keycloak remain in app (don't know how to cancel the old keycloak). If I add post_logout_redirect_uri and id_token_hint to the uri and use Browser.open, the sign out page won't be open and the session is end but again the problem is that the keycloak in the app still exist

If there is a recommendation how to fix it, it will be great

[Excel1]

@RotoHieu honestly i dont know how keycloak-ionic works. In general i recommend to use general oidc libraries.

If you got logged off in keycloak but the session on the device remains then maybe a dirty workaround could be to redirect to logout and delete the session locally