CODEWITHSUNDEEP
urlvuejs3keycloakvue-router
interesting-name-here
interesting-name-here

Reputation: 1890

keycloak-js appending session data to url in vue3

keycloak-js appears to be appending session data when I refresh my vue3 application: https://my.domain/#/&state={state}&session={session} etc

I wouldn't have a problem with this except it's breaking my site when I refresh due to the incorrect url format.

I can't find where this appears to be trying to append the data in the url from.

Upvotes: 3

Views: 2019

Answers (2)

interesting-name-here
interesting-name-here

Reputation: 1890

It ended up being that keycloak-js appears to conflict with createWebHashHistory in vue-router. I've updated it to just use createWebHistory and now my site is working.

There is logic in keycloak-js that tries to determine if you're in a query string and I found the problem by stepping through that code in parseCallbackUrl.

Example: As stated, I ended up using createWebHistory instead of createWebHashHistory. I made the change in my router/index.js file in the createRouter method passing the history option:

import { createRouter, createWebHistory } from 'vue-router'

/* Other router code here */

const router = createRouter({
    history: createWebHistory(), // was createWebHashHistory() with matching import substitution
    routes
})

export default router

Upvotes: 3

charlycou
charlycou

Reputation: 1998

Here is a workaround to configure in router configuration. Credits from this thread.

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

Upvotes: 2

Related Questions