Keycloak login, infinite loop

Users of our application started complaining recently, that they can no longer log in to our Keycloak authenticated site using Google Chrome. Surprisingly we could not reproduce the issue even though we were using exactly the same browser version.

Our application environment:

• Angular 9.1
• Keycloak server 9.0.0
• Keycloak Angular 7.3.1
• Keycloak.js 9.0.0 (Has to be the same version as the server)

Based on user logs, the token was successfully retrieved from Keycloak after login, but after redirect back to the application, the refresh of the token failed with an Http 400 error. This cycle was repeating over and over. Finally, we found that the problem can be reproduced in incognito mode.

When using modes ‘login-required’ or ‘check-sso’ in Keycloak’s init method, Keycloak Javascript Adapter sets an iframe that checks at timed intervals whether the user is authenticated. This iframe contains a script that needs access to the KEYCLOAK_SESSION cookie set previously by Keycloak on authentication.

It looks like, for some yet unknown reason, some of our user's Chrome session has no access to this session cookie. As a result, the user is redirected back to the Keycloak login.

In incognito mode, it is understandable why this issue is happening. As in incognito mode, cookies are still used, but everything starts “fresh” when the session is started. So after the redirect to the application, there will be no cookies found, so we get redirected back to login.

If you happen to know the reason why this is happening for some but not all of our users, please drop a comment below.

We finally fixed this by disabling iframe check on login during Keycloak init like:

this.keycloak.init({
    config: {
        url: 'http://192.168.10.1:8080/auth',
        realm: 'my_realm',
        clientId: 'my_client'
    },
    initOptions: {
        onLoad: 'login-required',
        checkLoginIframe: false
    }
});

Update: while upgrading to ng 10.1 the endless loop problem came back, this time it turned out that the problem was with my dependencies. The documentation of the keycloak-angular package says that for Angular 10.x.x apps you have to use keycloak-angular 8.x.x with a keycloak-js version which matches your keycloak server version. It turns out that using the combo of keycloak-angular 8.x.x with keycloak-js 9.x.x produces the endless looping. Using vesion 10.x.x for keycloak-js solved the problem. I think this has to do with packaging, CommonJS packages are no longer recommended in ng 10, and I believe that the new version of keycloak-angular needs a new differently packed keycloak-js.