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.

Wrong redirect by using vue-kecloak with quasar

See original GitHub issue

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;

Issue Analytics

State:
Created 2 years ago
Comments:14 (2 by maintainers)

Top GitHub Comments

2reactions

arcadeJHScommented, May 9, 2022

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],
  }

2reactions

nuclecommented, Jul 21, 2021

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