Javascript adapter promise error after upgrade to keycloak 11

Securing applications
1

We upgraded to version 11 because of the SameSite cookie issue. But now our app cannot initiate keycloak using the javascript adapter.

We receive this error: Error: Uncaught (in promise): TypeError: Method Promise.prototype.then called on incompatible receiver [object Promise]

On line 365 of keycloak.js which is:
configPromise.then(function () {
check3pCookiesSupported().then(processInit)
.catch(function() {
promise.setError();
});
});

When our app is doing a keycloak.init() like this: keycloak.init({onLoad: ‘check-sso’})

This code was working in the older version and just broke after upgrading to 11. Any ideas how to resolve this?

2 Likes
2

have the same issue, has someone a idea?

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

Same issue for us as @tanya1218 is having.

4

did someone made an issue?

5

I just created an issue: https://issues.redhat.com/browse/KEYCLOAK-15158

6

What browser do you use? Does it happen on a different browser?

7

It happens in the latest version of Chrome. Also occurs in Firefox and Safari

8

does someone have a workaround or some new information?

9

Additonal post: Does someone has a working keycloak js adapter since 11.0.0?

10

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

11 
  <button
            onClick={() => {
 

              alert("User logged in");
              const keycloak = Keycloak({
                realm: "xxx",
                url: "https://xxxx/auth/",
                clientId: "xxxxx",
              });
              keycloak
                .init({ onLoad: "login-required" })
                .then((authenticated) => {
                  alert("in then of keycloak.init")
                  if (authenticated) {
                    alert("Authernicated");
                    alert(JSON.stringify(keycloak));
                    alert(authenticated);
                    
                    keycloak.loadUserInfo().then((userInfo) => {
                      alert(JSON.stringify(userInfo));
                    });
                     
                  } else {
                    alert("not");
                  }
                }).catch(e => console.log(e)); 
                
            }}
          >
            Login
          </button>

The above code is not working on first time invocation, only the first alert appears. Only on invoking the function the second time all alerts within the then portion appear. Can you tell me what is the mistake here? I don’t see any errors on the console

12

@snet Thank you for reporting this. I believe it is not related to the issue described in this thread. Could you please create a ticket in our JIRA so we’d be able to triage this more efficiently? See also our other community channels. Thank you.