Keycloak javascript adapter `keycloak.init` load 404 iframe

Question

I am trying to integrate Keycloak for my client side application using javascript adapter keycloak-js.

However, I can't seem to make it work. This is my code

const keycloak = new Keycloak({
    realm: 'my-realm',
    url: 'http://localhost:8080/auth/',
    clientId: 'my-client',
});

try {
    const authenticated = await keycloak.init();
    console.log(authenticated);
} catch (e) {
    console.log(e);
}

It doesn't return anything, not even error or anything from the callback. I only have GET http://localhost:8080/auth/realms/my-realm/protocol/openid-connect/3p-cookies/step1.html 404 (Not Found) Not sure what did I do wrong? I follow the documentation but I can't find anything about this behaviour If I type the url above in browser, I see this

Is there anything I can do?

EDIT: I managed to make it work using this code by matching keycloak server with keycloak-js version. Upgrading server and keycloak-js version to 11.0.2 does work for me as well as downgrading both version to 10.0.2

This is the client configuration that I'm using

In the code example above, I can see console.log(isAuthorised); return false in dev tools, and if I do const isAuthorised = await keycloak.init({ onLoad: 'login-required' });, It will redirect me to login page and redirect me back to this page after successful login. Hope this helps.

Answer 1

It's probably a version mismatch between keycloak-js and your keycloak server. I was using the newest keycloak-js version 11.0.0 with a keycloak server version of 10.0.1, which lead to this exact error. Downgrading keycloak-js on the client side to 10.0.2 did the trick for me. (Haven't tried to upgrade the keycloak server yet, but most likely works as well)