'Keycloak-js 'init()' not executing in React app

When I access my app, my Keycloak config is passed to the .init() function to initialize however when I do this, the app stalls and nothing renders on the page, I am not redirected to the keycloak page. The following method is called within index.js before anything is rendered and App should only render upon authentication

const initKeycloak = (onAuthenticatedCallback) => {
  _kc.init({
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
    pkceMethod: 'S256',
  })
    .then((authenticated) => {
      if (!authenticated) {
        doLogin();
      }
      onAuthenticatedCallback();
    })
    .catch(console.error);
};

When I run, nothing loads and the following is repeated over and over in the logs: [HMR] Waiting for update signal from WDS.... I am unable to reach the .then() part of the function. If i remove the auth code, page renders as normal.

NOTE: The keycloak server I am using is a deployed instance and not a local instance. I have checked versions of both keycloak server and keycloak-js and they match

Solution 1:^[1]

Add this :

<html>
   <body>
      <script>parent.postMessage(location.href, location.origin)</script>
   </body>
</html>

in your silent-check-sso.html

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Keycloak-js 'init()' not executing in React app

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]