$keycloak with vue 3 and vue-router 4

[flangam]

$keycloak with vue 3 and vue-router 4

[Karkisushant]

@MarcelCode import { createApp } from "vue";

import App from "./App.vue";
import router from "./router";
import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
import type { KeycloakInstance } from "keycloak-js";
const app = createApp(App)
    .use(VueKeyCloak, {
        config: {
            realm: "dss",
            url: import.meta.env.VITE_KEYCLOAK_BASE_URL,
            clientId: "dss-frontend",
        },
        init: {
            onLoad: 'check-sso',
            silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
            checkLoginIframe: false,
            silentCheckSsoFallback: false,
            redirectUri: import.meta.env.VITE_APP_BASE_URL + '/console',
            token:token,
            refreshToken:refreshToken
        },
        onReady(keycloak: KeycloakInstance) {
            if (keycloak.authenticated) {
                console.log('Authenticatied')
            } 

            router.beforeEach((to, from, next) => {
                if (to.matched.some(record => record.meta.requiresAuth)) {
                    if (keycloak.authenticated) {
                        return next();
                    } else {
                        let loginUrl = keycloak.createLoginUrl();
                        window.location.replace(loginUrl)
                    }
                } else {
                    return next();
                }
            })

            app.use(router)
                .use(vuetify)
            app.mount("#app");
        }
    })

`

One way I was able to make it work was by using the router navigation guard this way

[Karkisushant]

@djdemarco Did you found any solutions to this issue ?

[MarcelCode]

It would be really great if someone can give an example how to use it with the router in vue3

[flangam]

@Karkisushant

@djdemarco Did you found any solutions to this issue ?

I moved on to using another library since we will be using Nuxt 3 for the framework. Also, in the future we might switch to another authentication provider other than Keycloak so it's best to use a library that can cater to a wide range of identity providers. I'm using this now instead: https://github.com/sidebase/nuxt-auth

Nuxt 3's support of its native auth module is still in the planning stages as stated here: https://github.com/sidebase/nuxt-auth. Hence the need to use another library for authentication.

[flangam]

I moved on to using another authentication library instead