Sample code not keeping track of correct Bearer

[ReUnioN]

Describe the bug
I've used the useAxios(<baseUrl>) hook from the react-router example which works fine during the initial lifespan of the access token. After its expiration a new token is evaluated and stored within the keycloak instance. However, the useEffect hook maintaining the AxiosInstance header within the useAxios hook does not update the bearer token properly. Therefore the authentication header contains an outdated version of the bearer token resulting in subsequent web service calls to fail.

Piece taken from the example project

export const useAxios = (baseURL: string) => {
  const axiosInstance = useRef<AxiosInstance>();
  const {keycloak, initialized} = useKeycloak();
  const kcToken = keycloak?.token ?? '';

  useEffect(() => {
    axiosInstance.current = axios.create({
      baseURL,
      headers: {
        Authorization: initialized ? `Bearer ${kcToken}` : '',
      },
    });

    return () => {
      axiosInstance.current = undefined;
    };
  }, [baseURL, initialized, kcToken]);

  return axiosInstance;
};

I've came across a similar issue where you state that some of the variable changes, such as the token, do not cause re-renderings anymore. As you state, that behavior change addresses this issue. But then, how should i deal with this case in order to keep the bearer token up to date? I've managed to get the example working by evaluating the token upon each access. I am not sure if that is the suggested way of handling this issue.

Working example

export const useAxios = (baseURL: string) => {
  const axiosInstance = useRef<AxiosInstance>();
  const {keycloak, initialized} = useKeycloak();

  useEffect(() => {
    axiosInstance.current = axios.create({baseURL});

    return () => {
      axiosInstance.current = undefined;
    };
  }, [baseURL]);
  
  useEffect(() => {
      axiosInstance.current?.interceptors.request.use(function (config: AxiosRequestConfig) {
        config.headers = {
          ...config.headers,
          Authorization: `Bearer ${keycloak?.token ?? ''}`
        };
        return config;
      });
  }, [axiosInstance, initialized, keycloak, keycloak.authenticated]);

  return axiosInstance;
};

Furthermore i am uncertain if its correct to depend on the authenticated flag. Is that one updated if the user is logging out? Additionally i'd like to know how i should make use of the identity token within my app incase some of the claims change during the client session. We transport role information within the token and i'd like to update UI components upon changes within that token.

[aitoraznar]

The same happens to me. After token expires the useKeycloakdoesn't return the new token so the subsequent requests fail.
I can see the token being renewed but useKeycloak doesn't get it.

@ReUnioN possibly related to #116