Keycloak | Cannot await on updateToken() in async function

user_7099789 0
Viewed 6944

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.

keycloak reactjs jboss javascript
3 Answers

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(() => ...)
user_29663310

The promiseType option upon initialization of the keycloak client defaults to legacy.

If you change it to native then you should get an ES6 promise after the refreshToken invocation

    keycloak
      .init({
        onLoad: 'login-required',
        promiseType: 'native',
      })
      .then(() => {//...})
      .catch((err) => {//...})
user_60519820
Related