Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Quasar - hashmode leads into wrong redirect by using vue-keycloak

See original GitHub issue

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 project (typescript_vue3 - hello_keycloak in the same repo, based on vue only) 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;

To Reproduce Steps to reproduce the behavior:

Setup keycloak init in the boot file
execute function $keycloak.login() by using a button
Log-In and get redirected - 404 Quasar Error Page with URL: 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

Expected behavior Like in the example project i should get redirected to home and the parameters in the url should disappear http://192.168.178.44:8080/#/

Platform (please complete the following information): Quasar Version: 2.0.2 @quasar/app Version: 3.0.2

Quasar mode:

SPA
SSR
PWA
Electron
Cordova
Capacitor
BEX

Tested on:

SPA
SSR
PWA
Electron
Cordova
Capacitor
BEX

OS: Arch Linux Node: 16.4 NPM: 7.17 Yarn: 1.22.10 Browsers: Firefox iOS: - Android: - Electron: -

Additional context It seems to be a router problem which exist by using quasar cause the https://github.com/dsb-norge/vue-keycloak-js/tree/master/examples/ are working completly fine.