Uploaded image for project: 'Keycloak'
  1. Keycloak
  2. KEYCLOAK-8921

Keycload.js init error with axios

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed (View Workflow)
    • Priority: Minor
    • Resolution: Done
    • Affects Version/s: 4.6.0.Final
    • Fix Version/s: 4.8.2.Final
    • Component/s: Adapter - JavaScript
    • Labels:
      None
    • Environment:

      OS : Window 10
      UAA server : Keycload 4.6.0-Final server running on localhost:8080
      Fontend : ReactJs app
      -"axios": "^0.18.0",
      -"keycloak-js": "4.6.0",
      -"react": "^16.4.0",
      Browser : Chrome

    • Steps to Reproduce:
      Hide

      1. Create an reactjs client using keycloak adapter JS 4.6.0 and axios 0.18.
      2. Set the init code as in the description and start the app.

      Show
      1. Create an reactjs client using keycloak adapter JS 4.6.0 and axios 0.18. 2. Set the init code as in the description and start the app.
    • Docs QE Status:
      NEW
    • QE Status:
      NEW

      Description

      An reactJS app use Keycloak as Uaa server. axios for Http call clent.

      Configuration : add Kc.update in the Axio.interceptors.

      kc.init(

      {onLoad: 'login-required', token, refreshToken}

      )
      .success(authenticated => {
      if (authenticated)

      { store.getState().keycloak = kc; updateLocalStorage(); ReactDOM.render(app, document.getElementById("app")); }

      });

      axios.interceptors.request.use(config => (
      kc.updateToken(5)
      .success(refreshed => {
      if (refreshed)

      { updateLocalStorage() }

      config.headers.Authorization = 'Bearer ' + kc.token;
      console.info(Promise.resolve(config))
      return Promise.resolve(config)
      })
      .error(() =>

      { kc.login(); }

      )
      ));

      Error :
      When the app starts , an JS running error occured in the console. The root cause is triggered by keycloak.init=> loadConfig. Check the stacktrace in the filed attached.

      Constact :
      if we return config objet instead of promise Object, no error. Such as
      axios.interceptors.request.use(config => {
      config.headers =

      { Authorization: 'Bearer ' + kc.token }

      ;
      return config;
      });

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                leidijian XU Jian
              • Votes:
                0 Vote for this issue
                Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: