blank-aquamarine•12mo ago

Problems Using Axios to Query from AWS API Gateway

Hi All, I am going through the docs and I setup a manual data provider so i can provide my AWS Cognito AccessToken as a bearer token under the Authorization header in Axios, but some reason, when my data provider makes the request with getList it doesn't send the proper headers. This is my code on my organizations page, that simply tries to list out all the organizations:

const { data: organizationData, isLoading: organizationIsLoading } = useList({
    resource: "organizations",
    queryOptions: {
      enabled: !!dataGridProps?.rows,
    },
  });

const { data: organizationData, isLoading: organizationIsLoading } = useList({
    resource: "organizations",
    queryOptions: {
      enabled: !!dataGridProps?.rows,
    },
  });

And in my data provider for getList, I added the following to try to setup the Auth headers:

const { data, headers } = await axiosInstance.get(`${url}?${stringify(query)}&${stringify(queryFilters)}`, {
      headers: {
        "Content-Type": "application/json; charset=utf-8",
        Accept: "application/json",
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    });

const { data, headers } = await axiosInstance.get(`${url}?${stringify(query)}&${stringify(queryFilters)}`, {
      headers: {
        "Content-Type": "application/json; charset=utf-8",
        Accept: "application/json",
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
    });

Also, I cannot seem to be able to console.log anything from within my dataProvider functions, in an attempt to debug what's going on, like getList, is this normal?

4 Replies

kapa.ai•12mo ago

Hi @nick_montoya. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems like you're on the right track with setting up the Authorization header in Axios. However, there might be a few things you could check to troubleshoot your issue: 1. Token Retrieval: Ensure that the token is being correctly retrieved from localStorage. You can check this by logging the token outside of the axios call. 2. Axios Instance: In the extracts, it's shown that the Authorization header is often set up during the creation of the axios instance, using either axios.create() or axiosInstance.interceptors.request.use(). This is done to include the token in all API calls made with this instance. Here's an example from the extracts:

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {
  const token = JSON.parse(localStorage.getItem("auth"));
  if (request.headers) {
    request.headers["Authorization"] = `Bearer ${token}`;
  } else {
    request.headers = {
      Authorization: `Bearer ${token}`,
    };
  }
  return request;
});

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {
  const token = JSON.parse(localStorage.getItem("auth"));
  if (request.headers) {
    request.headers["Authorization"] = `Bearer ${token}`;
  } else {
    request.headers = {
      Authorization: `Bearer ${token}`,
    };
  }
  return request;
});

(Source: refine.dev docs (https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider)) 3. Console Logging: If you're unable to see any console logs from within your dataProvider functions, it could be due to an error occurring before the console.log statement is reached. Try placing console.log statements at the very beginning of your functions to see if they're being called at all. If you're still having trouble, it might be helpful to review the refine.dev documentation (https://refine.dev/docs) or seek help from the refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

<@263527875506995202> kapa.ai is still learning and improving, please let us know how it did by reacting below

blank-aquamarine•12mo ago

I forgot to import my local dataProvider and not the one used from refine, Auth header is now being added okay, but getting still not getting a hit on my server

mute-gold•12mo ago

Hello @nick_montoya The example of Strapi-v4 will make it easier for you. https://github.com/refinedev/refine/blob/next/examples/data-provider-strapi-v4/src/App.tsx#L48 Let me explain it like this; we pass an axiosInstance to the Auth provider. We will use this instance to pass the Header parameter. When the login is successful, we can pass it this way.

if (status === 200) {
    localStorage.setItem(TOKEN_KEY, data.jwt);

    // set header axios instance
    axiosInstance.defaults.headers.common[
        "Authorization"
    ] = `Bearer ${data.jwt}`;

    return {
        success: true,
        redirectTo: "/",
    };
}

if (status === 200) {
    localStorage.setItem(TOKEN_KEY, data.jwt);

    // set header axios instance
    axiosInstance.defaults.headers.common[
        "Authorization"
    ] = `Bearer ${data.jwt}`;

    return {
        success: true,
        redirectTo: "/",
    };
}

Next, we need to write something similar in the check method. https://github.com/refinedev/refine/blob/next/examples/data-provider-strapi-v4/src/App.tsx#L92