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

Excel1 · 2021-07-13T08:33:59Z

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:

Tested on:

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.

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

Excel1 · 2021-07-20T08:51:40Z

Update:
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-08-03T18:41:13Z

After the upgrade, I have the same problem.
History mode: correct
Hash: incorrect

Excel1 · 2021-08-08T09:16:21Z

@nucle The question now is whether it is a quasar or library problem.

rstoenescu · 2021-10-15T14:57:27Z

It's not related to Quasar.
Is this package compatible with Vue Router? (Vue 3 works with Vue Router 4)

Excel1 · 2021-10-15T15:59:51Z

@rstoenescu

The package works (in beta) already with Vue 3 (Vue Router 4). https://github.com/dsb-norge/vue-keycloak-js

And the examples also works with no problem. Just with quasar i got the redirection problem

rstoenescu · 2021-10-15T17:19:42Z

The "hello" example requires vue 2 and vue-router 3, and the ts-vue3 example does not uses vue-router.

nucle · 2021-10-17T09:36:35Z

Hi,

i have the same problem but i don't use the vue-keycloak-js package. I am using the plain Js version from Keycloak. I saw u updated the vue3 router. I will try it again on Monday. Then i can tell u if i have the problem.

rstoenescu · 2021-10-17T12:05:47Z

There's nothing special about Quasar in regards to routing when compared to a regular vue-cli app with vue-router. So whatever the problem is, it's not related to Quasar.

Now, I'd like to help investigate so we can raise a ticket to the appropriate repository. Unfortunately, time is limited because of the many other tickets related directly to a Quasar issue. So someone please create a basic repo with this wonder package and vue 3 + vue-router 4 (configured in hash mode). If there's no problem, we can start investigating from there. But again, as Quasar does not handle routing by itself (it lets vue-router do it, and its configuration matters), if done right then this should be reproducible from the a basic repo with vue3+vue-router4.

Due to the lack of time, a repo like requested above would help move things forward.

My guess on the problem: vue-keycloak-js just changes the window.location.href and does not triggers a window.reload() -- as it's kind of requested when working with a vue + vue-router setup in hash mode (it's just how vue-router works, outside of Quasar's reach which doesn't touches routing).

@nucle Saying "I have the same problem but I don't use vue-keycloak-js" is not the same problem and it's not really helpful for investigation. The details matter. If you are referring to the boot files and the redirect() method then this has been solved in "@quasar/app" v3.1.4. However, that bug has nothing to do with what vue-keycloak-js does. The boot's redirect() method that can be called only by you in a Quasar boot file and all it does is just a dumb URL redirect.

muei · 2021-10-20T06:35:49Z

Why colosed ?

import { boot } from "quasar/wrappers"
import * as Keycloak from "keycloak-js"

const initOptions = {
  //- responseMode: "fragment",
  //- flow: "standard",
  checkLoginIframe: false,
  onLoad: "login-required",
  // onLoad: "check-sso",
  // responseMode: 'fragment',
  // flow: 'standard'
}
const keycloak = Keycloak({
  url: "",
  realm: "",
  clientId: "",
})

export default boot(async ({ app, router, store }) => {
  return new Promise((resolve, reject) => {
    keycloak
      .init(initOptions)
      .then((authenticated) => {
        console.log("Init Success. Authenticated: " + authenticated)
        if (!authenticated) {
          window.location.reload()
        } else {
          resolve(authenticated)
        }
      })
      .catch((error) => {
        console.error(error)
        window.location.reload()
        // reject(error)
      })
  })
})

If use vueRouterMode is 'history', the url contains state=173865a1-7bda-40da-90ee-ae71b10bbc8d&session_state=5c54da1c-9399-4ff6-952e-52e5989b1453&code=d911497c-c8bf-4de7-903e-bd49350d3104.5c54da1c-9399-4ff6-952e-52e5989b1453.f8befc37-a20b-446e-99bd-84dba149fcf7, else is 'hash', will redirect 404

Excel1 · 2021-10-31T23:27:42Z

@rstoenescu i also opened a ticket at thier repostiory: dsb-norge/vue-keycloak-js#94 - but their we got redirected to quasar: "But again this does not seem like an issue with this plugin or keycloak/js in itself"

muei · 2021-11-01T03:37:24Z

Yes, I'm not sure whether is "vue-router 4.x"'s problem, but my project used "quasar": "^1.0.5" is normal, no happend this issue.

rstoenescu · 2021-11-05T12:42:26Z

Quasar v1 is used along VueRouter 3.

Like I asked in my previous post, someone please create a basic repo with this wonder package and vue 3 + vue-router 4 (configured in hash mode).

This would prove it's a Quasar issue. But like I explained, I'm 99.99% sure it isn't.
Without this proof I cannot commit time to this ticket as there are many other Quasar things that I need to take care of. Hope you understand and value my time.

gnieser · 2021-11-10T16:49:33Z

Hello,

I am facing the same issue hence I am not using dsb-norge/vue-keycloak-js, but keycloak-js directly from keycloak.org.
I have a reproducer here: https://github.com/gnieser/quasar-keycloak with some basic explanation in README.md
The reproducer works in history mode, when switched to hash mode, it will fail.

rstoenescu · 2021-11-10T18:05:39Z

@gnieser

Took a look at it and it's exactly what I expected. Vue Router v4 (in hash mode) + keycloak-js !== LOVE. Has nothing to do with Quasar. Again, routing is handled exclusively by Vue Router.

If anyone is still stubborn to understand this, I can create an equivalent project (to this one from above, https://github.com/gnieser/quasar-keycloak ) without Quasar in it.

gnieser · 2021-11-11T09:39:51Z

Agreed. Let me demonstrate this for you: https://github.com/gnieser/vue-keycloak
The issue boils down to keycloak fragment response mode and vue-router hash history mode.

Excel1 · 2021-11-11T22:07:08Z

@rstoenescu so we need to open a ticket for keycloak-js to fix the compatibility problems with Vue Router v4, right?

hawkeye64 · 2021-11-11T23:08:28Z

Yes

Excel1 added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Jul 13, 2021

Excel1 changed the title ~~Quasuar - wrong redirect by using vue-keycloak~~ Quasar - wrong redirect by using vue-keycloak Jul 19, 2021

Excel1 changed the title ~~Quasar - wrong redirect by using vue-keycloak~~ Quasar - hashmode leads into wrong redirect by using vue-keycloak Jul 23, 2021

ianlchapman-noodlelive mentioned this issue Sep 7, 2021

Redirect option in boot files does not work #10592

Closed

rstoenescu closed this as completed Oct 15, 2021

Excel1 mentioned this issue Nov 18, 2021

Wrong redirect by using vue-kecloak with quasar dsb-norge/vue-keycloak-js#94

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Excel1 commented Jul 13, 2021 •

edited

Excel1 commented Jul 20, 2021

nucle commented Aug 3, 2021

Excel1 commented Aug 8, 2021

rstoenescu commented Oct 15, 2021

Excel1 commented Oct 15, 2021

rstoenescu commented Oct 15, 2021

nucle commented Oct 17, 2021

rstoenescu commented Oct 17, 2021

muei commented Oct 20, 2021 •

edited

Excel1 commented Oct 31, 2021

muei commented Nov 1, 2021

rstoenescu commented Nov 5, 2021

gnieser commented Nov 10, 2021

rstoenescu commented Nov 10, 2021

gnieser commented Nov 11, 2021

Excel1 commented Nov 11, 2021

hawkeye64 commented Nov 11, 2021

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

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

Comments

Excel1 commented Jul 13, 2021 • edited

Excel1 commented Jul 20, 2021

nucle commented Aug 3, 2021

Excel1 commented Aug 8, 2021

rstoenescu commented Oct 15, 2021

Excel1 commented Oct 15, 2021

rstoenescu commented Oct 15, 2021

nucle commented Oct 17, 2021

rstoenescu commented Oct 17, 2021

muei commented Oct 20, 2021 • edited

Excel1 commented Oct 31, 2021

muei commented Nov 1, 2021

rstoenescu commented Nov 5, 2021

gnieser commented Nov 10, 2021

rstoenescu commented Nov 10, 2021

gnieser commented Nov 11, 2021

Excel1 commented Nov 11, 2021

hawkeye64 commented Nov 11, 2021

Excel1 commented Jul 13, 2021 •

edited

muei commented Oct 20, 2021 •

edited