How to refresh an expired JWT

When your JWT expires, the embedded session will stop working, which means that no new data can be loaded without first creating a new JWT. Depending on how you’ve implemented your dashboards, you may be generating a new JWT when your customer refreshes the page. But if you want to create JWTs with short expiration times and want to avoid requiring your users to refresh on expiration, you can add an event listener to be notified when the JWT is about to expire and respond with a new one.

For more information, see the examples below, or our documentation on Custom Events

Iframe

const messageListener = (e) => {
  switch (e.data.event) {
    case "customerJwtExpired":
      // generate a new JWT here
      const jwt = "my-new-jwt";

      var exploIframe = document.getElementById("explo-iframe");
      exploIframe.contentWindow.postMessage(
        {
          event: "updateCustomerJwt",
          detail: { jwt },
        },
        "*"
      );
      break;
  }
};

window.addEventListener("message", messageListener);

Web Component

const listener = (e) => {
  // generate a new JWT here
  const jwt = "my-new-jwt";

  window.dispatchEvent(
    new CustomEvent("updateCustomerJwt", { detail: { jwt } })
  );
};

window.addEventListener("customerJwtExpired", listener);