I have an ApiConfiguration file which manages the middleware for API requests to the backend.

I have a login component that sets the bearer token to the document.cookie

and I am able to make requests to api by this config (OPEN API CLI GENERATOR)

    export const userApi = new UserApi(configuration).withPreMiddleware(
  (context): any => {
    // Always get update the Api Configuration with new Bearer Token.
    let newBearer: string | undefined;
    newBearer = Cookies.get("bearer");
    // TODO: use JWT-DECODE compare the expiration date and use refresh HOOK
    const doesBearerExist = apiConfigParams?.headers?.Authorization;
    if (!doesBearerExist) {
      context.init.headers = { Authorization: "bearer " + newBearer };
    }
    return context;
  },
);

One major problem I am having is, when I set new bearer token to document, this config does not retrieve the latest token unless I manually refresh the web client.

How do I set new bearer token? I'm not sure?

Either listening to changes? or making a function that gets called every time token changes? (How does that work?)

Thanks