title: Keycloak javascript adapter `keycloak.init` load 404 iframe
body: <p>I am trying to integrate Keycloak for my client side application using javascript adapter <code>keycloak-js</code>.</p>
  <p>However, I can't seem to make it work. This is my code</p>
  <pre><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);
  }
  </code></pre>
  <p>It doesn't return anything, not even error or anything from the callback. I only have
  <code>GET http://localhost:8080/auth/realms/my-realm/protocol/openid-connect/3p-cookies/step1.html 404 (Not Found)</code>
  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</p>
  <p><a href="https://i.stack.imgur.com/RaNXv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RaNXv.png" alt="enter image description here" /></a></p>
  <p>Is there anything I can do?</p>
  <p><strong>EDIT:</strong> I managed to make it work using this code by matching keycloak server with keycloak-js version. <strong>Upgrading server and keycloak-js version to 11.0.2 does work for me as well as downgrading both version to 10.0.2</strong></p>
  <p>This is the client configuration that I'm using
  <a href="https://i.stack.imgur.com/uZ0h4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uZ0h4.png" alt="enter image description here" /></a></p>
  <p>In the code example above, I can see <code>console.log(isAuthorised);</code> return <code>false</code> in dev tools, and if I do <code>const isAuthorised = await keycloak.init({ onLoad: 'login-required' });</code>, It will redirect me to login page and redirect me back to this page after successful login. Hope this helps.</p>