Angular v15 with Keycloak infinite redirect loop after login

I am working on configuring my Angular 15 application to work with Keycloak locally. When I hit localhost:4200, I get redirected to Keycloak login screen (expected). Once I successfully login, I am thrown into an infinite redirect loop and my Angular app never initalizes. Here is what I am using:

• Angular: 15.2.0
• keycloak-angular: 13.1.0 (installed version per https://www.npmjs.com/package/keycloak-angular)
• keycloak-js: 21.0.2
• Keycloak (running via Docker container): 26.3.3

Once I get past the Keycloak login screen, I can see the loop calling this over and over again until I stop it. Each call is successful:

http://localhost:8080/realms/keycloak-test/protocol/openid-connect/token


In my app.module, I have this configuration:

keycloak.init({
config: {
url: 'http://localhost:8080',
realm: 'keycloak-test',
clientId: 'frontend',
},
loadUserProfileAtStartUp: true,
initOptions: {
onLoad: 'login-required',
pkceMethod: 'S256',
silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html',
checkLoginIframe: false,
redirectUri: 'http://localhost:4200',
responseMode: 'query',
},
enableBearerInterceptor: true,
bearerExcludedUrls: ['/assets'],
});


providers: [
{
provide: APP_INITIALIZER,
useFactory: initializeKeycloak,
deps: [KeycloakService],
multi: true,
},
],


I have seen a few other posts about this, and it seems like adding "checkLoginIframe: false" has worked for some people, but this does not work for me.

The other strange this is that I also have a standalone Angular v20 application as well, which works just fine. It hits my same Keycloak container and has never had an infinite redirect loop issue.

I can't help but wonder if I maybe need to use an older version of Keycloak (again, using 26.3.3)?

I have tried tweaking my keycloak.init() with so many different configurations but I can't seem to break out of the infinite loop and no forum I have found has been able to help.

Continue reading...