Keycloak and React infinite redirect loop in local development environment

Question

I am maintaining an old React application that uses Keycloak as an identity provider.

In local development environment, upon successful login, the browser is stuck in what seems to be an infinite redirect loop between URLs looking like the following:

• http://localhost:3000 (React application URL)
• http://localhost:3000/#state=01e0e63d-9688-4d7b-913f-078605c2d1c2&session_state=fe8282ff-00f3-41b8-9d21-fa265d4ac6b7&code=98b9af84-2545-4a6e-9e29-3f14be14e51a.fe8282ff-00f3-41b8-9d21-fa265d4ac6b7.1566b4fb-81be-4a85-a31b-d72dfccb1f5b

The Keycloak version is 15.0.2. The project uses keycloak-js version 15.0.2. Updating Keycloak to a newer version is out of scope for now.

Here is the React Keycloak initialization code:

      <ReactKeycloakProvider
          authClient={keycloak}
          initOptions={{
            onLoad: "check-sso",
            silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html"
          }}
          LoadingComponent={<KeycloakLoadingComponent/>}
      >
        <AppContent/>
      </ReactKeycloakProvider>

The React application is not using <React.StrictMode>, so this isn't the issue.

I am observing this behavior in Chrome, Firefox and Edge.

The issue is not happening in either production or preproduction environment, only when developing locally.

I tried the solutions listed in these URLs:

• KeyCloak Login leads to infinite loop
• Keycloak infinite redirect
• https://github.com/mauriciovigolo/keycloak-angular/issues/289
• https://szoradi-balazs.medium.com/keycloak-login-infinite-loop-9005bcd9a915

I trie setting checkLoginIframe: false in the Keycloak initOptions but it did not solve the issue.

I also tried disabling SameSite security in Chrome but it is no longer possible apparently.

Answer 1

I did a complete re-install of Keycloak on my local machine, and it's now working. Don't know what was going on, but apparently the issue was with Keycloak's configuration.