mauriciovigolo / keycloak-angular

Easy Keycloak setup for Angular applications.
MIT License
714 stars 272 forks source link

Infinite Reload #339

Open khan990 opened 3 years ago

khan990 commented 3 years ago

Bug Report or Feature Request (mark with an x)

- [x] bug report 
- [ ] feature request

Versions.

keycloak-angular@8.2.0 keycloak-js@14.0.0

Repro steps.

We have the following microfrontend architecture: image

Keycloak on host gets initialised and authenticated. While in the angular elements it does not initialises and triggers a reload. We are using the following configuration in all our 3 instances (similar to described in keycloak-angular docs):

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: 'http://localhost:8080/auth',
        realm: 'your-realm',
        clientId: 'your-client-id',
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/assets/silent-check-sso.html',
      },
    });
}

The log given by the failure.

Nothing helpful. Logs are generated only by host and not by elements:

[WDS] Live Reloading enabled.
keycloak.js:1738 [KEYCLOAK] Estimated time difference between browser and server is 1 seconds
keycloak.js:1738 [KEYCLOAK] Token expires in 298 s

Desired functionality.

I would expect that angular elements initialise their instance seamlessly. Or may be I am missing something. Any hint would be appreciated.

givan2code commented 2 years ago

I believe this may be a duplicate of https://github.com/mauriciovigolo/keycloak-angular/issues/289 but I agree that this is a serious issue that could stand to get some immediate attention.

At the very least, remove the automatic extension of CanActivate

KyleHutchings commented 10 months ago

To anybody looking through this thread, I had a similar issue with Keycloak causing infinite redirects after following the basic tutorial in the README. I tried numerous solutions found online including:

Ultimately none of these solved the issue.

In the end I discovered (when moving the login call out of the guard) that the this.authenticated check in the guard would always return false, even after successful logins. This implied to me there was an issue with the init rather than the guard. For me the solution then became adding an await to the keycloak.init. i.e. replacing:

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        ...
      },
      initOptions: {
        ...
      }
    });
}

with

function initializeKeycloak(keycloak: KeycloakService) {
  return async () => {
    await keycloak.init({
      config: {
        ...
      },
      initOptions: {
        ...
      },
    });
  };
}