Wrong redirect by using vue-kecloak with quasar #94

Excel1 · 2021-07-09T16:15:50Z

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;

The text was updated successfully, but these errors were encountered:

baltom · 2021-07-12T05:57:34Z

I don't have any good explanation. To me it does seem like keycloak and this plugin is doing what is expected.

Also your "catch all" route can just be * instead. You could also comment it out and try to debug some route matching with the different router guards. But again this does not seem like an issue with this plugin or keycloak/js in itself

Excel1 · 2021-07-12T14:08:37Z

Thank you for help. Commenting out unfortunately did not make a difference. I also believe that keycloakjs does not cause the error. I'll check the Quasar repository.

nucle · 2021-07-15T06:52:50Z

@Excel1 could u solve it?

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

Excel1 · 2021-07-15T06:57:22Z

@nucle No problem :)
Unfortunately I could not solve it yet. If you have time you can check it out.
Thanks for helping!

Excel1 · 2021-07-20T08:00:01Z

@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.

nucle · 2021-07-21T12:00:33Z

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

BR

Excel1 · 2021-11-18T22:29:57Z

@baltom Maybe this Question should be opened again, cause we found out that this is a problem by keycloak-js:
Quasar - hashmode leads into wrong redirect by using vue-keycloak

baltom · 2021-11-19T06:11:07Z

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 #1 im guessing you are hitting the same issue

muei · 2021-12-09T09:25:55Z

What's going on now? Have you solved it?

Excel1 · 2021-12-09T09:37:06Z

@muei No, currently im using history-mode as workaround.

lcmuniz · 2022-04-13T11:16:23Z

I'm going through the same problem but only on the application's internal routes. In the root route "/" history mode works but any other route (eg http://localhost:8080/#/route1) the state query is added and breaks the application (eg http://localhost:8080/# /route1&state=12...)

I tried 'hash' and 'history' modes and neither worked. I'm using vue-router 4.0.0 and vue-keycloak-js 2.1.3-beta.

The code from the 'boot/keycloak.js' file:

export default boot(async ({ app, router, store }) => {
  async function tokenInterceptor() {
    axios.interceptors.request.use(
      (config) => {
        config.headers.Authorization = `Bearer ${app.config.globalProperties.$keycloak.token}`;
        return config;
      },
      (error) => {
        return Promise.reject(error);
      }
    );
  }

  return new Promise((resolve) => {
    app.use(VueKeyCloak, {
      init: {
        onLoad: "check-sso", 
        window.location.origin + "/silent-check-sso.html"
      },
      config: {
        url: "https://my-server/auth/",
        realm: "my-real",
        clientId: "test",
      },
      onReady: (keycloak) => {
        tokenInterceptor();
        resolve();
      },
    });
  });
});

arcadeJHS · 2022-05-09T08:19:37Z

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

Nighthree · 2022-05-24T03:37:27Z

@arcadeJHS Thank you for the solution, it saved me. This problem has been bothering me for a long time. I tried to modify your solution to meet my needs.

main.js :

import { createApp } from 'vue';

import Keycloak from 'keycloak-js';

import App from './App.vue';
import router from './router';

// keycloak init options
const initOptions = {
  url: 'https://oauth.drshinetech.com/auth/',
  realm: 'EnterpriseService',
  clientId: process.env.VUE_APP_KEYCLOAK_CLIENT,
  onLoad: 'login-required',
}
const _keycloak = Keycloak(initOptions);


// get router.push() needs URL value
const getVueRoute = () => {
  // get URL
  const location = window.location.href;
  // Return '/' without hash  
  if (!location.includes('#')) return '/';

  // Get URL string after hash 
  const start = location.indexOf('#');
  const end = location.length - 1;
  let vueRoute = location.substring(start + 1, end);
  // Check if all keycloak params exist
  // And custom route query should avoid keycloak query
  const keycloakParams = [
    vueRoute.includes('&code'),
    vueRoute.includes('&state'),
    vueRoute.includes('&session_state')
  ];
  const state = keycloakParams.every((item) => item);
  // if state=true, replace URL
  if (state) {
    vueRoute = vueRoute
      .replace(/[&\?]code=[^&\$]*/, "")
      .replace(/[&\?]state=[^&\$]*/, "")
      .replace(/[&\?]session_state=[^&\$]*/, "");
  }
  return vueRoute;
}

export const app = createApp(App);
_keycloak.init({ checkLoginIframe: false, onLoad: initOptions.onLoad }).then(async (auth) => {
  app.config.globalProperties.$keycloak = _keycloak;
  app.use(store);
  app.use(router);
  app.mount('#app');
  const vuePushRoute = getVueRoute();
  await router.push(vuePushRoute);
});

Roriz · 2022-07-14T12:32:50Z

This solution looks more like a work around them a solution, maybe this problem is related with the keycloak himself: keycloak/keycloak#8959

Anniel07 · 2023-03-17T22:04:42Z

@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

NoudH · 2023-11-06T09:28:45Z

This issue has indeed to do with Vue Router conflicting with Keycloak (see keycloak keycloak/keycloak#14742).
We can circumvent this by not immediately creating the router on import, but instead through a function that is called in onReady.

Based on this comment we used to following solution:

router/index.ts

const initializeRouter = () => {
  const router = createRouter({
     // Options
  })

  router.beforeEach(() => {...})
  
  router.afterEach(() => {...})

  return router
}

export default initializeRouter

main.ts

import initializeRouter from '@/router'

const app = createApp(App)

// Other app.use statements
app.use(...)

app.use(VueKeyCloak, {
  config: {
   // config
  },
  init: {
    // init options
  },
  onReady: () => {
    app.use(initializeRouter())
    app.mount('#app')
  },
})

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $keycloak: VueKeycloakInstance
  }
}

export default app

This will correctly remove the Keycloak hashes from the URL.

Ali-Javanmardi · 2024-06-26T15:32:31Z

@NoudH Thanks,

Your solution : #94 (comment) worked great.

MiguelAleixo · 2024-07-05T16:31:49Z

This: https://github.com/gnieser/vue-keycloak/blob/master/src/router/index.js resolve this problem, only change router index file, for me work perfectly

lln78 · 2024-10-23T08:07:01Z

A simpler solution : when you init your vue-keycloak instance, add "responseMode: 'query'"
As explain in keycloak/keycloak#26405 (comment) it's a keycloak feature (and default) to respond with hash parameters that cause the problem with hash router.

export default boot(async ({ app, router, store }) => {
  app.use(VueKeyCloak, {
    init: {
      onLoad: 'check-sso',
      useNonce: false,
      checkLoginIframe: false,
      silentCheckSsoFallback: false,
      silentCheckSsoRedirectUri:
        window.location.origin + '/silent-check-sso.html',
      responseMode: 'query',
    },

Excel1 mentioned this issue Jul 26, 2021

404 Errors - Loading Keycloak Loginpage react-keycloak/react-keycloak#150

Closed

Excel1 mentioned this issue Oct 31, 2021

Quasar - hashmode leads into wrong redirect by using vue-keycloak quasarframework/quasar#10062

Closed

14 tasks

baltom closed this as completed Nov 17, 2021

TravisRick mentioned this issue Apr 30, 2024

Url parameters are not removed after first login JoseGoncalves/vue-keycloak#7

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wrong redirect by using vue-kecloak with quasar #94

Wrong redirect by using vue-kecloak with quasar #94

Excel1 commented Jul 9, 2021

baltom commented Jul 12, 2021

Excel1 commented Jul 12, 2021

nucle commented Jul 15, 2021

Excel1 commented Jul 15, 2021

Excel1 commented Jul 20, 2021

nucle commented Jul 21, 2021

Excel1 commented Nov 18, 2021

baltom commented Nov 19, 2021

muei commented Dec 9, 2021

Excel1 commented Dec 9, 2021

lcmuniz commented Apr 13, 2022

arcadeJHS commented May 9, 2022

Nighthree commented May 24, 2022

Roriz commented Jul 14, 2022

Anniel07 commented Mar 17, 2023

NoudH commented Nov 6, 2023 •

edited

Loading

Ali-Javanmardi commented Jun 26, 2024

MiguelAleixo commented Jul 5, 2024

lln78 commented Oct 23, 2024 •

edited

Loading

Wrong redirect by using vue-kecloak with quasar #94

Wrong redirect by using vue-kecloak with quasar #94

Comments

Excel1 commented Jul 9, 2021

baltom commented Jul 12, 2021

Excel1 commented Jul 12, 2021

nucle commented Jul 15, 2021

Excel1 commented Jul 15, 2021

Excel1 commented Jul 20, 2021

nucle commented Jul 21, 2021

Excel1 commented Nov 18, 2021

baltom commented Nov 19, 2021

muei commented Dec 9, 2021

Excel1 commented Dec 9, 2021

lcmuniz commented Apr 13, 2022

arcadeJHS commented May 9, 2022

Nighthree commented May 24, 2022

Roriz commented Jul 14, 2022

Anniel07 commented Mar 17, 2023

NoudH commented Nov 6, 2023 • edited Loading

Ali-Javanmardi commented Jun 26, 2024

MiguelAleixo commented Jul 5, 2024

lln78 commented Oct 23, 2024 • edited Loading

NoudH commented Nov 6, 2023 •

edited

Loading

lln78 commented Oct 23, 2024 •

edited

Loading