React keycloak TypeError: kc.updateToken(...).success is not a function

Question

I was on keycloak implementation.

This is my keycloak init config:

const token = localStorage.getItem('kc_token');
const refreshToken = localStorage.getItem('kc_refreshToken');

export const keycloakInitConfig = {
  onLoad: 'login-required',
  promiseType: 'native',
  token,
  refreshToken,
};

And sometimes I got this error

TypeError: kc.updateToken(...).success is not a function

if anybody can help me, very thanks.

UPDATE 1:

                        kc.updateToken(-1).success(function() {
                            kc.onAuthSuccess && kc.onAuthSuccess();
                            initPromise.setSuccess();
                        }).error(function() {
                            kc.onAuthError && kc.onAuthError();
                            if (initOptions.onLoad) {
                                onLoad();
                            } else {
                                initPromise.setError();
                            }
                        });

I have this in node_modules and my keycloak-js version is 6.0.0.

UPDATE 2:

export const keycloakInitConfig = {
  onLoad: 'login-required',
  promiseType: 'native',
  token,
  refreshToken,
};

export const onKeycloakEvent = (store) => (event, error) => {
  console.log('event?????', event);
  if (event === 'onAuthSuccess') {
    keycloak.loadUserProfile()
      .then((userInfo) => {
        store.dispatch({
          type: actionTypes.SET_USER_INFO,
          payload: { user: userInfo },
        });
      })
      .catch((err) => {
        console.log('loadUserProfile: ', err);

        localStorage.removeItem('kc_token');
        localStorage.removeItem('kc_idToken');
        localStorage.removeItem('kc_refreshToken');

        store.dispatch({
          type: actionTypes.LOG_OUT,
        });

        keycloak.logout();
      });
  } else if (error) {
    console.log('onKeycloakEvent', event, error);
  }
};

export const onKeycloakTokens = (tokens) => {
  localStorage.setItem('kc_token', tokens.token);
  localStorage.setItem('kc_idToken', tokens.idToken);
  localStorage.setItem('kc_refreshToken', tokens.refreshToken);
};

And KeycloakProvider

ReactDOM.render(
  <KeycloakProvider
    keycloak={keycloak}
    initConfig={keycloakInitConfig}
    onEvent={onKeycloakEvent(store)}
    onTokens={onKeycloakTokens}
  >
    ...
  </KeycloakProvider>,
  document.getElementById('root'),
);

Answer 1

You are using the "old" .success() method, but you have configured using native promise types (promiseType: 'native') in init configuration.

Use the standard .then() method of standard Promise type, like in my example here, and it should work: https://github.com/dasniko/keycloak-reactjs-demo/blob/master/src/index.js#L48-L49

Answer 2

This is an issue with keycloak-js itself and it is set to be released with version 8.0.0 of keycloak-js.

Also react-keycloak is not using .success() internally.

See here for more details about the issue . KEYCLOAK-8938

I'd suggest you to avoid using promiseType: 'native' in your setup.