Keycloak | Cannot await on updateToken() in async function

Question

We are developing Spring application with React/Redux frontend. We successfully integrated it with Keycloak authentication service. However, we encountered unwanted behaviour after access token timed out. Our restMiddleware looks like this (simplified):

    function restMiddleware() {
    return (next) => async (action) => {
       try{

            await keycloak.updateToken(5);

            res = await fetch(restCall.url, {
                ...restCall.options, ...{
                    credentials: 'same-origin',
                    headers: {
                        Authorization: 'Bearer ' + keycloak.token
                    }
                }
            });

       }catch(e){}
    }

The problem is, that after token expires and updateToken() is executed, async function does not stop and invokes fetch() immediately, before new access token is received. This of course prevents fetch request from succeeding and causes response with code 401. updateToken() returns a Promise, so I see no reason why await would not work on it, which certainly is happening.

I confirmed that function in updateToken().success(*function*) will execute after successful token refresh and placing fetch() inside it would solve the problem, but because of our middleware construction I cannot do that. I developed this workaround:

    function refreshToken(minValidity) {

        return new Promise((resolve, reject) => {

            keycloak.updateToken(minValidity).success(function () {
                resolve()
            }).error(function () {
                reject()
            });
        });
    }

    function restMiddleware() {
    return (next) => async (action) => {
       try{
            await refreshToken(5);

            res = await fetch(restCall.url, {
                ...restCall.options, ...{
                    credentials: 'same-origin',
                    headers: {
                        Authorization: 'Bearer ' + keycloak.token
                    }
                }
            });

       }catch(e){}
    }

And it works, but it is not elegant.

The question is: why the first solution didn't worked? Why I cannot await on updateToken() and have to use updateToken().success() instead?

I suspect this might be a bug and to confirm this is the main purpose of this question.

Answer 1

Yes, as said, keycloak.js uses a homegrown promise implementation that is incompatible to the ES6 Promise. What I tend to do in my projetcs is a little helper like this one here (TypeScript).

export const keycloakPromise = <TSuccess>(keycloakPromise: KeycloakPromise<TSuccess, any>) => new Promise<TSuccess>((resolve, reject) =>
    keycloakPromise
        .success((result: TSuccess) => resolve(result))
        .error((e: any) => reject(e))
);

and use it like

keycloakPromise<KeycloakProfile>(keycloak.loadUserProfile())
    .then(userProfile => ...)
    .catch(() => ...)