reactjstypescriptkeycloakkeycloak-js

React-Keycloak keeps refreshing

I am trying to use keycloak to secure a React application. I am using two packages: React-keycloak and keycloak-js.

This is my keycloak provider

    <ReactKeycloakProvider
      authClient={keycloak}
      onEvent={eventLogger}
      onTokens={tokenLogger}

    >
      <Foo></Foo>
    </ReactKeycloakProvider>

and this my keycloak object:

const keycloak = new Keycloak({
  url: "http://XXX.XXX.XXX.XXX:8080",
  realm: "testrealm",
  clientId: "testclient",
});

If I have no login cookie, i will be directed to the Keycloak login page. I can then login and return to my application. Now the page is constantly refreshed again and again as it tries to call urls like this:

http://localhost:3000/#state=6b9c8273-3e7a-46d8-81e6-89d83a539d81&session_state=cb1b6069-b99a-4346-b0bf-6ea37e80900c&code=2b1ce5bb-ec49-4c1e-942e-9b70c74c36ee.cb1b6069-b99a-4346-b0bf-6ea37e80900c.d8e66d53-2283-4ead-b4f4-c11ddd5aa2a6

I have tried different init options including:

initOptions={{ onLoad: "login-required"}}
initOptions={{ checkLoginIframe: false }}

but nothing seems to work.

No examples I find seem to do anything more than this so I'm not sure if it's a bug, if I'm missing some configuration, or whatever else.

I'm currently using versions: @react-keycloak/web@3.4.0 keycloak-js@19.0.1

but have used both newer and older version, with no success.

a similar issue: Page keeps refreshing and changing the query parameter 'state' and 'session' in URL when implementing React with keycloak

Solution

  • UPDATE: https://github.com/react-keycloak/react-keycloak/issues/182

    I am using React 18.0 where StrictMode causes useEffect to be called twice. This seems to be a breaking change for the ReactKeycloakProvider+keycloak.js. The workaround is to move StrictMode inside the ReactKeycloakProvider instead of around the whole application!