Q: 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

A: 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!
