vue.jsgoogle-chromeincognito-mode

How to stop Vue.js reloading every 5 seconds in Chrome? Does not happen in incognito mode


I have a VueJS app. One day, it started reloading infinitely, approximately once every 5 seconds.

Here are the steps I took to debug the issue:

Command to run the app:

nvm use 20 && vite

I'm not really sure which part of my app could be the cause and I'm really confused about why the issue doesn't occur in incognito mode. The only thing I can think of is that my app uses keycloak.

Main.ts:

import { createApp } from 'vue';
import './style.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'vue-multiselect/dist/vue-multiselect.css';
import App from './App.vue';
import router from '@/router';
import keycloak from './keycloak';
import axios from 'axios';
import { store } from './store';

keycloak.init({ onLoad: 'login-required' }).then((auth) => {
  if (!auth) {
    window.location.reload();
  } else {
    axios.defaults.baseURL = import.meta.env.VITE_APP_BACKEND;
    axios.defaults.headers.common["Authorization"] = `Bearer ${keycloak.token}`;
    axios.post('/sync_account');

    const app = createApp(App);
    
    app.use(router);
    app.use(store);
    
    app.mount('#app');
  }
}).catch((err) => {
  console.error("Authentication Failed: ", err);
});

It seems like the reload could be caused by keycloak, since when the app reloads, the following three requests are made:

  1. https://KEYCLOAK_SERVER/auth/realms/REALM/protocol/openid-connect/login-status-iframe.html/init?client_id=APP_NAME&origin=http%3A%2F%2Flocalhost%3A5173 (response is 204 No Content)
  2. Another request to keycloak, this time with a code to the auth endpoint (response is 302 Found)
  3. http://localhost:5173/ (the location of the app itself)

Specs:

How can I further narrow down what the issue is?


Solution

  • This question is a duplicate of Keycloak JS library: iframe redirect when already logged in

    The solution was to upgrade the version of keycloak-js in package.json to match the version of Keycloak I'm using:

    "keycloak-js": "^25.0.0",
    

    enter image description here