Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[question] Why and how do I prevent a blank page when the Keycloak server is not available? Vue, Keycloak, Quasar #179

Open
Excel1 opened this issue Oct 9, 2023 · 0 comments

Comments

@Excel1
Copy link

Excel1 commented Oct 9, 2023

Im relative new to vue and i am trying to connect my Vue Application based on Quasar with Keycloak. I followed this tutorial and used the dsb-norge/vue-keycloak-js library.

Everything works in case, the Keycloak server is reachable.

Now, of course, it is possible that the server is unreachable for some reason, such as DNS problems. In this case i got a blank white page instead of showing the page without working login button. With using the onInit Option from the library i can catch the error but very lately and still the page is blank.

How can the page still loaded and show content just without a working login button if the keycloak server is unreachable/not able to process my request?

//keycloak.ts
import VueKeyCloak from '@dsb-norge/vue-keycloak-js'
import { boot } from 'quasar/wrappers';
import { VueKeycloakInstance } from '@dsb-norge/vue-keycloak-js/dist/types';
import { api } from 'boot/axios';
import {InternalAxiosRequestConfig} from 'axios';

export default boot(async ({ app}) => {
  function registerTokenInterceptor () {
    app.provide('keycloak', app.config.globalProperties.$keycloak);

    api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
      if (app.config.globalProperties.$keycloak.authenticated) {
        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: {
        checkLoginIframe: false, // or 'login-required'
        flow: 'standard',
        onLoad: 'check-sso',
        pkceMethod: 'S256',
        silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html'
      },
      config: {
        url: 'http://localhost:8080/auth',
        realm: 'master',
        clientId: 'testclient',
      },
      logout: {
        redirectUri: 'http://localhost:9000',
      },
      onReady() {
        registerTokenInterceptor()
        resolve()
      }
    })
  })
})

declare module '@vue/runtime-core' {

  interface ComponentCustomProperties  {
    $keycloak: VueKeycloakInstance
  }
}```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant