Keycloak JS library: iframe redirect when already logged in

Question

I’m working on an SPA that uses keycloak.js to interact with my Keycloak server. I initialize the Keycloak object with onload = ‘check-sso’ and checkLoginIFrame enabled.

If I perform the following steps:

• Load my site
• Click my “login” button (call Keycloak.login())
• get redirected to Keycloak’s login page, login, get redirected back to my app
• Reload my site

I observe that when the site reloads, it does a quick redirection (the URL briefly changes from mysite.com to mysite.com/#state=….. then back to mysite.com). I would like to avoid having this redirection when I’m already logged in.

By debugging the code, I found out why this happens:

• The login-status-iframe.html page is essentially just a wrapper for some static JS to manage a cookie that stores the auth tokens.
• Its main method checkState(...) is called (via a message from keycloak.js) during initialization…with no token (sessionState is empty since keycloak.js is not aware of the cookie).
• The login iFrame’s code reads the cookie and creates an XHR request to mykeycloak.com/.../login-status-iframe.html/init?... (with the cookie in the request headers).
• When it gets a 204 response (which I take to mean: the cookie is valid, everything’s OK), it compares the token (from the cookie) with what it was given from keycloak.js (i.e. nothing).
• Since they are not equal, it responds to the callback with ‘changed’.
• This is interpreted in keycloak.js to mean that (the token changed?) and thus it calls doLogin(false), which is where it changes the URL, creating the unwanted redirect.

So my questions are thus:

• Where is the documentation for API for the call to login-status-iframe.html/init?
• Would it be possible to do something like:
  • Have the login-status-iframe return the token, when the KC server informs it that the token is still valid (e.g. ‘update XXXXX’ instead of ‘changed’)
  • keycloak.js would then take this and update its token, without having to call doLogin()

Answer 1

I have checked that this happens after 5 seconds and only with development server (ng serve in Angular SPA), which matches the default time of checkLoginIframeInterval.

I have tried setting checkLoginIframeInterval = false in the init() method and it fixes the loop issue but I'm afraid of side effects, I would rather update the keycloak.js file.

https://www.keycloak.org/docs/latest/securing_apps/

• checkLoginIframe - Set to enable/disable monitoring login state (default is true).
• checkLoginIframeInterval - Set the interval to check login state (default is 5 seconds).

Answer 2

It will be helpful if you keep the version of keycloak same with keycloak.js. I faced with the infinite redirection as well, the version of keycloak I use is 11.0.1, well the keycloak.js was an old version. So I replace it with the file from keycloak-js-adapter-dist-11.0.1.zip(downloaded from https://www.keycloak.org/archive/downloads-11.0.1.html). Then the infinite redirection problem has gone.