Page reload issue for multiple keycloak intializations

Question

I have integrated Keycloak across all my applications. Recently, I had to create an application as a web component and embed it into another main application. Both applications are integrated with Keycloak.

When I first load the main application, Keycloak is initialized. Upon clicking a button, the web component is activated. This part works fine, and the web component initializes successfully. However, during the initialization, the web component triggers a page reload due to its Keycloak setup. While it doesn’t redirect to the login page (as the main application is already logged in, which is good), I want to avoid the page reload when activating the web component.

Is there a way to achieve this without sharing the Keycloak token or instance between applications, considering the potential risk of XSS attacks?

Thanks in advance for your help!

const keycloak = new Keycloak({
    url: "https://login-test.xxxxx.com", // Keycloak server URL
    realm: "xxxxx", // Your Keycloak realm
    clientId: "xxxxxxx", // Your Keycloak client ID
  });


  const initKeycloak = (onAuthenticatedCallback) => {
  keycloak
  .init({
     onLoad: "check-sso", // Ensure full-page redirect for login
     promiseType: "native",
     checkLoginIframe: false,
       })
  .then((authenticated) => {
   if (authenticated) {
    scheduleTokenRefresh(); // Schedule token refresh
    onAuthenticatedCallback();
    } else {
    console.warn("User is not authenticated");
    keycloak.login(); // Redirect to login
  }
  })
  .catch((error) => {
     console.error("Failed to initialize Keycloak", error);
     keycloak.login(); // Redirect on error
  });
  };