vue-keycloak-js: Wrong redirect by using vue-kecloak with quasar

Finally i got it working with quasar. But i got at least one problem: If i logged in i will be redirected to the following url which leads to the 404 quasar error page instead to http://192.168.178.44:8080/.

http://192.168.178.44:8080/#/&state=671a7344-b7a0-4779-8fde-da8c99c6aa4a&session_state=a5598f7f-c11c-41f3-a777-883ac33f6ca1&code=c88b4a26-4bc4-4aca-93b5-5305b490ac37.a5698g7f-c11c-41f3-a777-883ac93f6ca1.3cb8d30d-4783-425a-bf33-3d79613bed10

In the example vue3-keycloak it redirects correctly. I checked the router but i could not get the error source.

boot/keycloak.ts

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

export default boot(async ({ app}) => {
  function registerTokenInterceptor () {
    axios.interceptors.request.use((config: AxiosRequestConfig) => {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/restrict-template-expressions
      config.headers['Authorization'] = `Bearer ${app.config.globalProperties.$keycloak.token}`

      return config
    }, error => {
      return Promise.reject(error)
    }) //null, { synchronous: true })
  }

  return new Promise(resolve => {
    app.use(VueKeyCloak, {
      init: {
        onLoad: 'check-sso', // or 'login-required'
        flow: 'standard',
        pkceMethod: 'S256',
        silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
        checkLoginIframe: false
      },
      config: {
        url: 'https://my.keycloak.com/auth',
        realm: 'myrealm',
        clientId: 'myclientid',
      },
      onReady() {
        registerTokenInterceptor()
        resolve()
      }
    })
  })
})

public/slient-check-sso.html

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

routes.ts

import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [{ path: '', component: () => import('pages/Index.vue') }],
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/Error404.vue'),
  },
];

export default routes;

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (2 by maintainers)

Most upvoted comments

@nucle I think i found the problem. Its the routermode:

quasar.conf.js

build: {
      vueRouterMode: 'history', // available values: 'hash', 'history'

By using “hash” i will get redirected wrong:

By using “history” i will get redirected correctly: http://192.168.178.44:8080/#state=671a7344-b7a0-4779-8fde-da8c99c6aa4a&session_state=a5598f7f-c11c-41f3-a777-883ac33f6ca1&code=c88b4a26-4bc4-4aca-93b5-5305b490ac37.a5698g7f-c11c-41f3-a777-883ac93f6ca1.3cb8d30d-4783-425a-bf33-3d79613bed10

But this only happens by using quasar. By using the vue-typescript example in router hashmode it works correctly. And also without parameters in url.

Excel1 on Jul 20, 2021

Hi, trying resolving the same issue I come to the following solution in my router config code:

const removeKeycloakStateQuery = (to, from) => {
  const cleanPath = to.path
    .replace(/[&\?]code=[^&\$]*/, "")
    .replace(/[&\?]state=[^&\$]*/, "")
    .replace(/[&\?]session_state=[^&\$]*/, "");

  return { path: cleanPath, query: {}, hash: to.hash };
};

// ...
  {
    path: "/:catchAll(.*)*",
    component: () => import("src/pages/component.vue"),
    beforeEnter: [removeKeycloakStateQuery],
  }

arcadeJHS on May 9, 2022

@Excel1 great! We should verify the problem and when that’s the case we have to create a ticket. I will check this too.

nucle on Jul 21, 2021

@nucle I think i found the problem. Its the routermode:

quasar.conf.js
build: {
      vueRouterMode: 'history', // available values: 'hash', 'history'
By using “hash” i will get redirected wrong:

http://192.168.178.44:8080/#/&state=671a7344-b7a0-4779-8fde-da8c99c6aa4a&session_state=a5598f7f-c11c-41f3-a777-883ac33f6ca1&code=c88b4a26-4bc4-4aca-93b5-5305b490ac37.a5698g7f-c11c-41f3-a777-883ac93f6ca1.3cb8d30d-4783-425a-bf33-3d79613bed10

By using “history” i will get redirected correctly: http://192.168.178.44:8080/#state=671a7344-b7a0-4779-8fde-da8c99c6aa4a&session_state=a5598f7f-c11c-41f3-a777-883ac33f6ca1&code=c88b4a26-4bc4-4aca-93b5-5305b490ac37.a5698g7f-c11c-41f3-a777-883ac93f6ca1.3cb8d30d-4783-425a-bf33-3d79613bed10

But this only happens by using quasar. By using the vue-typescript example in router hashmode it works correctly. And also without parameters in url.

Excellet I have a whole day to fix this problem, your solution help me a lot

Anniel07 on Mar 17, 2023

Indeed, i didn’t catch that this was/is a hash issue in vue-router. In which case it’s a duplicate of our first registered issue https://github.com/dsb-norge/vue-keycloak-js/issues/1 im guessing you are hitting the same issue

baltom on Nov 19, 2021

@Excel1 could u solve it?

Sorry i had no time. But i could take a look today. Should i check it?

nucle on Jul 15, 2021