keycloak

There’s NextAuth.js from vercel, which was made for next.js

Recently it was adapted for svelte-kit.

The announcement post:
https://vercel.com/blog/announcing-sveltekit-auth

The keycloak provider doc:
https://next-auth.js.org/providers/keycloak

The example repository:
https://github.com/nextauthjs/sveltekit-auth-example

Well it does work, on first sight. Sign in, Sign out, requiring auth for pages, it all works.
However you need a confidential client.
And this token then isn’t compatible with the server side API (RESTful/GraphQL) which expects a non-confidential client.
Also it doesn’t use the SignIn page from the keycloak server, but its own “sign in with keycloak” page.
Roles are not present and no documentation about how to change the scope.
Yes, it can probably be adjusted, but it’s not documented.

Why does Svelte not have a SPA mode?
Why do I have to write a SSR/universal “app” when using Svelte?

So you’d like to use openid-connect (oidc), especially keycloak (kc) in your Quasar app.

There’s a package, @dsb-norge/vue-keycloak-js . I’d recommend you fork it and create your own version with the keycloak-js version that matches your Keycloak server. However it also works with just the version used in this git repository.

The git repository is available at
https://github.com/dsb-norge/vue-keycloak-js

This is for Quasar v1

Alright let’s get started.

1. Create a file named silent-check-sso.html with the following content:

<html>
<body>
<script>
  parent.postMessage(location.href, location.origin)
</script>
</body>
</html>

<html>

<body>

parent.postMessage(location.href, location.origin)

</script>

</body>

</html>

Put that file in the public directory as its path is
public/silent-check-sso.html.

2. Create boot/keycloak.js

import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
import axios from 'axios'

export default async ({ Vue, router, store, app }) => {
  async function tokenInterceptor () {
    axios.interceptors.request.use(config => {
      config.headers.Authorization = `Bearer ${Vue.prototype.$keycloak.token}`
      return config
    }, error => {
      return Promise.reject(error)
    })
  }

  return new Promise(resolve => {
    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: 'https://your.keycloak.installation/auth',
        realm: 'your-realm-name',
        clientId: 'your-client-id'
      },
      onReady: (keycloak) => {
        tokenInterceptor()
        resolve()
      }
    })
  })
}

import VueKeyCloak from '@dsb-norge/vue-keycloak-js'

import axios from 'axios'

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

async function tokenInterceptor () {

axios.interceptors.request.use(config => {

config.headers.Authorization = `Bearer ${Vue.prototype.$keycloak.token}`

return config

}, error => {

return Promise.reject(error)

})

}

return new Promise(resolve => {

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: 'https://your.keycloak.installation/auth',

realm: 'your-realm-name',

clientId: 'your-client-id'

onReady: (keycloak) => {

tokenInterceptor()

resolve()

}

})

}

3. Reference the created boot file in quasar.conf.js

// ...
    boot: [
      'i18n',
      'axios',
      'keycloak'
    ],
// ...

// ...

boot: [

'i18n',

'axios',

'keycloak'

// ...

And that’s really all there is to it.

After this is done you can access the keycloak object via $keycloak in your template.

This is for Qusasar v2:

Thanks a bunch to Excel1 and yusufkandemir for figuring it out.

First you have to upgrade or use the v2 branch of @dsb-norge/vue-keycloak-js.
e.g. npm i @dsb-norge/vue-keycloak-js@2
or use your own fork

But essentially you do whatever you would do for v1 only the boot/keycloak.js file is different

The boot/keycloak.js file

import { boot } from 'quasar/wrappers'
import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
import axios from 'axios'

export default boot(async ({ app, router, store }) => {
  async function tokenInterceptor () {
    axios.interceptors.request.use(config => {
      config.headers.Authorization = `Bearer ${app.config.globalProperties.$keycloak.token}`
      return config
    }, error => {
      return Promise.reject(error)
    })
  }

  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
      },
      config: {
        url: 'https://my.keylcoak.domain/auth',
        realm: 'my.realm',
        clientId: 'my-client_id'
      },
      onReady: (keycloak) => {
        tokenInterceptor()
        resolve()
      }
    })
  })
})

import { boot } from 'quasar/wrappers'

import VueKeyCloak from '@dsb-norge/vue-keycloak-js'

import axios from 'axios'

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

async function tokenInterceptor () {

axios.interceptors.request.use(config => {

config.headers.Authorization = `Bearer ${app.config.globalProperties.$keycloak.token}`

return config

}, error => {

return Promise.reject(error)

})

}

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

config: {

url: 'https://my.keylcoak.domain/auth',

realm: 'my.realm',

clientId: 'my-client_id'

onReady: (keycloak) => {

tokenInterceptor()

resolve()

}

})

and of course don’t forget to add it to the boot array in quasar.conf.js

Tag: keycloak

Svelte-kit and Keycloak OIDC

The way is clear for Vue 3 with Keycloak

Keycloak-js client with Quasar (now updated for v2)