How to make DataManager UrlAdaptor make requests to server with credentials

Question

Hi,I have a Node.js backend server and for react kanban board I'm using a data manager to get and update data. I have implemented authentication with passport in the backend. How do I make the adaptor include the credentials with the request. Like axios has withCredentials flag.Since the adaptor is not passing the credentials, the server is not responding with the Json file. If I make the request with Axios, I get the data and can populate the cards. Axios Example: axios .get("http://localhost:8000/sheet/getAllData", { withCredentials: true, }) .then((response) => response.json()) .then((usefulData) => { setData(usefulData); }) .catch((e) => { // console.error(`An error occurred: ${e}`); });My React functional component:const Kanban = () => { let data = new DataManager({ url: "http://localhost:8000/sheet/getAllData", adaptor: new UrlAdaptor(), crossDomain: true, }); console.log(data); return ( );};

Vinitha Jeyakumar · Answer

Hi Kunal,The behavior of URL Adaptor is different from the Axios. You can use the headers property of Data Manager to send the required details in the request header.    var headers = [{isValid:true}];    let data = new ej.data.DataManager({        url: "Home/UrlDataSource",        headers: headers,adaptor: new ej.data.UrlAdaptor    });Screenshot:Regards,Vinitha

Kunal · Answer

That doesn't solve the problem. Setting header won't include credentials with the request. I need to specify to include credentials when making the request. The cookie is HTTP only so I can't access the cookie and set it in headers myself. Can I make a custom adaptor that uses axios to make requests? I can't find any example of that. Could you help me with that?

Kunal · Answer

I want to change withCredentials to true in httpRequest inside requests. This is my data manager logged on console.

Vinitha Jeyakumar · Answer

Hi Kunal,Query 1. " Can I make a custom adaptor that uses axios to make requests?"We can’t achieve your requirement by using the custom Adaptor. But it can be achieved by sending your own request for data operation. here, you can make own request and send it to the server for all the data operations.For every action like update, delete and edit, Kanban actionComplete event will get triggered and using that event arguments, you can get the data of the changed cards and update them to the database using your custom service.Please check the sample below for your reference.Sample: https://stackblitz.com/edit/react-3w5r43-tpymgy?file=index.jsQuery 2. "I want to change withCredentials to true in httpRequest inside requests. This is my data manager logged on console"Since we couldn't achieve your requirement using Data manager as we suggested in the above query. this is also not possible here.Regards,Vinitha

Sidney Carlini Junior | Martinelli Labs · Answer

For those who still have problems with httpOnly cookies/axios withCredentials, we achieve the solution by creating an CustomAdaptor. Take a look on the actual code:

Now the adaptor runs well even with crossDomain + secure + httpOnly access_token.

CustomAdaptor:

class CustomAdaptor extends ODataV4Adaptor {
  beforeSend(dm: DataManager, request: Request, settings: Fetch): void {
    const newFetchRequest = new Request(settings.url, {
      method: settings.fetchRequest.method,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      credentials: 'include',
    });
 
    settings.fetchRequest = newFetchRequest;
  }
}

CustomAdaptor use example:

  getAllODataAdaptor(url: string) {
    return new DataManager({
      url: url,
      adaptor: new CustomAdaptor(),
      crossDomain: true,
    });
  }

Vinitha Jeyakumar · Answer

Hi Sidney Carlini Junior,Thanks for your suggestion.Regards,Vinitha