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

updateToken method's documentation states that it returns a Promise, but it actually isn't a thenable and thus the await keyword does not think it as a valid Promise. This is how I would put it. :)

Your solution seems elegant to me and I have done the exact same thing also to correctly continue on a Promise chain after calling the updateToken function.

Keycloak JavaScript adapter documentation: https://keycloak.gitbooks.io/documentation/securing_apps/topics/oidc/javascript-adapter.html