StrictMode in react 18 provoke infinite loop when using @react-keycloak/web

[parweb]

I've just upgraded to react 18
after that the app continuously redirect to keycloak server then back to react then keycloak server (infinite loop)

so I debug this behavior
and when I remove react StrictMode all behave as intended

[sandrooco]

This also happens when only using keycloak-js- I couldn't find a solution yet.

[gguynn]

I've just upgraded to react 18 after that the app continuously redirect to keycloak server then back to react then keycloak server (infinite loop)

so I debug this behavior and when I remove react StrictMode all behave as intended

Same. Thanks for posting this issue.

[ccaspanello]

I've just upgraded to react 18 after that the app continuously redirect to keycloak server then back to react then keycloak server (infinite loop)

so I debug this behavior and when I remove react StrictMode all behave as intended

Same here. Thanks for posting. As a work around I put <StrictMode> inside the ReactKeycloakProvider

[SpeedySH]

Same here

[crow7m]

same here

[jagadeesh93]

Same here @panz3r

[jagadeesh93]

I've just upgraded to react 18 after that the app continuously redirect to keycloak server then back to react then keycloak server (infinite loop)
so I debug this behavior and when I remove react StrictMode all behave as intended

Same here. Thanks for posting. As a work around I put <StrictMode> inside the ReactKeycloakProvider

Even this dosen't works for me

[feleko]

same here

[ksdc-grantw]

I've just upgraded to react 18 after that the app continuously redirect to keycloak server then back to react then keycloak server (infinite loop)

so I debug this behavior and when I remove react StrictMode all behave as intended

Thanks @parweb

[Elvix10]

remove the strictMode work for me

[jdtoombs]

Anyone have any luck other than removing React.StrictMode?

[sandrooco]

I agree that it's not great to move AuthProvider outside of StrictMode but the following seems to be the leanest workaround at the moment.

const app = (
  <AuthProvider>
    <StrictMode>
      <Router>
        <I18nextProvider i18n={i18n}>
          <App />
        </I18nextProvider>
      </Router>
    </StrictMode>
  </AuthProvider>
);

[drkn]

Make sure to remove StrictMode from index.js after moving it to App - then it works fine.

[ChristianMaehler]

Same here. @sandrooco thanks for posting this workaround!

[mahmoodAtcom]

This is happening to me now when my react page is running on localhost:3000 and keyclock is on atcom-cc
but when i deploy my react app on kubernetes behind same hostname as keycloak is using which is atcom-cc this doesn't happen

[ksdc-grantw]

This is happening to me now when my react page is running on localhost:3000 and keyclock is on atcom-cc but when i deploy my react app on kubernetes behind same hostname as keycloak is using which is atcom-cc this doesn't happen

Thats because React's StrictMode is only applicable when your application ENV=development. When you deploy it, your environment is changed to production.

[mahmoodAtcom]

This is happening to me now when my react page is running on localhost:3000 and keyclock is on atcom-cc but when i deploy my react app on kubernetes behind same hostname as keycloak is using which is atcom-cc this doesn't happen

Thats because React's StrictMode is only applicable when your application ENV=development. When you deploy it, your environment is changed to production.

yup, removed StrictMode and it is working fine

[manuFL]

Any ETA for a fix?

[ohiageorge]

Yes, removed StrictMode and everything is working fine. Thanks @parweb

[mwiede]

from my point of view, removing StrictMode is a only a workaround.

I studied the page reactwg/react-18#18 and the fix, that we need for this library is described at the headline "Effects that should only run once can use a ref."

Basically, the keycloak initialization process has be independent from mounting or unmounting. When keycloak.init is called, this is waiting for the callback, but in the meantime, the components are unmounted from StrictMode logic and never reach the state of being authenticated. That is why it's doing an infinite loop now.

[TawalMc]

I've just upgraded to react 18 after that the app continuously redirect to keycloak server then back to react then keycloak server (infinite loop)
so I debug this behavior and when I remove react StrictMode all behave as intended

Same here. Thanks for posting. As a work around I put <StrictMode> inside the ReactKeycloakProvider

Thank you. This works fine for me.

[nonameolsson]

Is this the fix we need? keycloak/keycloak#12745

[mwiede]

@nonameolsson no this is not a problem of keycloak-js package, it's a react issue as described above.

[abuinitski]

@nonameolsson no this is not a problem of keycloak-js package, it's a react issue as described above.

Should we read this as "we bail out of supporting React 18 and further updates"? Apparently, it is well documented and described, why exactly React does this in strict mode, and why libraries should support this behavior.

[himanshu-martial]

Moving <React.StrictMode> and everything inside "ReactKeycloakProvider" saved my life.

[maximiliancsuk]

@nonameolsson no this is not a problem of keycloak-js package, it's a react issue as described above.

Should we read this as "we bail out of supporting React 18 and further updates"? Apparently, it is well documented and described, why exactly React does this in strict mode, and why libraries should support this behavior.

I think that's a misunderstanding. @mwiede meant that the fix mentioned by @nonameolsson does NOT fix this issue here. I believe he did NOT mean to say that this issue is not fixable within react-keycloak.

[ziiw]

My solution: I removed react-keycloak and just used keycloak-js. It's easy and fast to setup.

[phainamikaze]

Moving <React.StrictMode> and everything inside "ReactKeycloakProvider" saved my life.

this save my life too #savemylife .

[MaheeGamage]

I had the same issue with NextJS since I planned to use next export feature to get static web without a server. In NextJS you can enable and disable the react strict mode but can't put it inside another component. So anyone found a solution for NextJS without disabling react strict mode entirely?

[lcanavesio]

Hello.
I ended up creating a simple project. You can use it and tell me if it worked for you.
I tested on NextJS and React App.
npm install react-keycloak-js --save

[ThaJay]

Next.js
TypeScript
strict mode

These are industry standard these days. Unfortunately, the choice for Keycloak has been locked in from higher up. If it were up to me I would use something that works and gets updated.

Just another way to say this bug cost me way too much time and it could have been fixed almost 12 months ago.

[ThaJay]

@ziiw do you have an example of that? I will probably have it figured out by the time you are able to reply but for future search engine users it might be useful.

[Bessonov]

Just another way to say this bug cost me way too much time and it could have been fixed almost 12 months ago.

@ThaJay This isn't how open source works. Why didn't you fixed the bug? You can even hire some one and save money.

[ThaJay]

@Bessonov Yes I was a bit worked up yesterday. Regardless, I would expect the Keycloak people to maintain this and not leave it to "the community".

[jare25]

Hi everyone!

I'm facing infinite redirects after login. I'm using react 18, and I'm trying to deploy my app on azure static web app. On localhost everything works.

[himanshu-martial]

Hi @jare25,
Its a issue with react v18, to fix this keep your <ReactKeycloakProvider/> outside of StrictMode component, it will do the trick.

[mwiede]

Hi everyone!

I'm facing infinite redirects after login. I'm using react 18, and I'm trying to deploy my app on azure static web app. On localhost everything works.

@jare25 StrictMode is only relevant in development mode. Are you not deploying a production build?

[jare25]

Hi all.

I tried with StrictMode inside ReactKeycloakProvide, without StrictMode... I think that I did not configured staticwebsites.config.json (azure static web sites) as expected. I'm searching everywhere, but it seams that I'm only one who is trying to deploy @react-keycloak/web on azure...

Thanks for responding!

[sum117]

Same issue here.

[sum117]

You can fix it by placing the Strict mode INSIDE the provider.