Browser looping when using `keycloak-js` v11

See original GitHub issue

Describe the bug I’m facing a strange issue. When navigating into my http://localhost:3000/#/hom, the provider create a infinite loop. It keep looping from http://localhost:3000/#/home to the following url : http://localhost:3000/#/home&state=30692c6b-e9e0-407a-b522-e0bdec324d66&session_state=e1ec5e6e-463c-43dc-9f7e-e7170a4f7422&code=7f5c9f74-efd2-4014-a7b6-819f06647cda.e1ec5e6e-463c-43dc-9f7e-e7170a4f7422.300185e4-3ad6-4e7d-8967-f9a4c617cad8

When using the keycloakProvider and Keycloak-js 11.0.2

To Reproduce Steps to reproduce the behavior:

  1. Install keycloak 11.0.2
  2. Install js dependencies to keycloak 11.0.2 (keycloak-js v11.0.2)
  3. configure your keycloak and your project as expected
  4. Go to http://localhost:3000/#/ (or /home)
  5. See looping behavior on the application

Expected behavior Init the component.

Desktop (please complete the following information):

  • OS: Ubuntu 20.04.1 LTS (Focal Fossa)
  • Browser Chrome / Firefox
  • Version Chrome 85

Additional information: I suspect that the keycloak.init() return something not expected by the provider and that cause a new request to initialize the keycloak instance again and again.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:5
  • Comments:44 (4 by maintainers)

github_iconTop GitHub Comments

41reactions
dreamwavecommented, Apr 25, 2022

Found a solution for the issue here when upgrading to React 18: https://github.com/react-keycloak/react-keycloak/issues/182

Strict mode now causes components to render twice in development to ensure reusable state. This probably causes the component to reload for some reason. https://reactjs.org/docs/strict-mode.html

Remove or move the StrictMode to solve infinite reloading.

6reactions
DallasP9124commented, Jun 16, 2022

The issue appears to be related to React.StrictMode as well. By moving the ReactKeycloakProvider.../> outside the <React.StrictMode.../> my problem was solved.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Keycloak causes loops in react application after I have just ...
The issue is linked to how React-keycloak verifies the issued token hasn't been revoked.For that is tries to load and verify a specific...
Read more >
Keycloak login, infinite loop - Szórádi Balázs - Medium
Users of our application started complaining recently, that they can no longer log in to our Keycloak authenticated site using Google Chrome ...
Read more >
[keycloak-dev] Infinite loop problem with authenticated users ...
[keycloak-dev] Infinite loop problem with authenticated users browsing out of root context.
Read more >
Beginner's Thread / Easy Questions (October 2021) : r/reactjs
I'm pretty comfortable with development in node/express/js etc. already, but wanted to focus on react. Don't get me wrong, the course is great, ......
Read more >
Keycloak Integration With Gatsby/React - Morioh
I am using the Docker image (v11.0.2) running on http://localhost:8080. ... With the help of “node.js”, we can use JavaScript outside of the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found