Does someone has a working keycloak js adapter since 11.0.0?

Hello this post is related to: Javascript adapter promise error after upgrade to keycloak 11

My question is if someone has a working keycloak javascript adapter?
In my opinion it is completly broken. I testet it with 11.0.0 and now 11.0.2.

Testing:

<head>
    <script src="keycloak.js"></script>
    <script>
        var keycloak = new Keycloak({
            url: 'http://localhost:8080/auth',
            realm: 'springboot',
            clientId: 'login-app'
        });
        keycloak.init().then(function(authenticated) {
            alert(authenticated ? 'authenticated' : 'not authenticated');
        }).catch(function() {
            alert('failed to initialize');
        });
    </script>
</head>

Error:

Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null
    at check3pCookiesSupported (keycloak.js:1305)
    at keycloak.js:366

I get exactly the same error.

hopefully they will be a fix soon. I am thinking about to use a older keycloak version in the meantime, not ideal but the other solution is to implement it myself.

Ok, I was able to reproduce the scenario.
It seems to happen when you try to initialize the KC adapter in script block in the <head/> tag.
At this time, the document is not ready loaded and the part in the Keycloak JS adapter document.body.appendChild(...) will fail.

So, wrap your code in a function and execute in in the <body onload="..."> tag, or, move it to the end of the body of your html page. Then, the body is already available when executing the script and it will work.

I made a Gist with both options: https://gist.github.com/dasniko/d40cda68560beaf816eb106c06290ca9

IMHO it’s not a bug in Keycloak adapter, you just have to use it in the correct manner. Perhaps it’s worth pointing this out in the docs.

2 Likes

@dasniko you are my german hero, thank you :smiley:

As a backend guy without much JS knowledge, I wouldn’t have figured it out. Probably a good idea to meantion this in the documentation because I and probably also the other people, that have this problem, only copy pasted the docs code.

Greetings

Hi! We’ve prepared a fix and we’d be very grateful if you could check it works for you. Thank you!

Keyloak-js 11.0.2 adapter not working with Keycloak 11 and VueJS. I have a 404 error on https://keycloak/auth/realms/myrealm/protocol/openid-connect/3p-cookies/step1.html

I followed the instructions on https://www.keycloak.org/securing-apps/vue to secure my VueJS app.

I saw lot of developers with the same error on other websites. I tried your fix @vmuzikar but seems to not working…

@dcr31000 Hi! It seems like you’re using newer adapter with older Keycloak version. Also, there were some more fixes in this area. Could you please try it with current master branch?

@vmuzikar Hi, thanks for your reply.
My Keycloak server version is 11.0.2. I tried with keycloak.js on current master branch and have the same issue.

@dcr31000 Could you please create a ticket in our issue tracker. If possible, please specify as detailed steps to reproduce as possible. Thank you!

For me the issue was Content-Security-Policy under Ream Settings -> Security Defenses. It required listing out all frame-ancestors.

Something like this:
frame-src 'self'; frame-ancestors 'self' http://localhost:8000 localhost:* https://*.xyz.com; object-src 'none';

Can you please share screenshot of the changes you did .if any. We are facing the same issue.