Data Provider with API cookies
I hav an API that creates cookies which are used for authentication purpose (they contains jwt acces and refresh tokens). How can I tell my dataProvider to use that cookie whenever a request is sent to the API? The API and Refine backend are on two different sub-domains, I have cors allowing cross-domain origin and credentials set to true.
6 Replies
Hi @smilodon.x7. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To inform your data provider about the authentication credentials, you can send the authentication credentials with each request. After obtaining the authentication token, you can store it in cookies and send it with every request.
In refine, you can use the
dataProvider
property of the <Refine>
component to allow refine to communicate with the API. Here is an example of how to add a dataProvider to the refine component:
In the above code, axiosInstance
is imported from the authProvider.ts
file. This instance can be configured to include the authentication token in every request.
Here is an example of how to create an authProvider
:
In the above code, axiosInstance
is used to send a GET request to "/api/auth". You can modify this code to include the authentication token in the headers of every request.
For more information, you can refer to the refine's dataProvider prop component documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#dataprovider) and the refine's guide on using authentication with data provider (https://refine.dev/docs/guides-concepts/authentication/#usage-with-data-provider-).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@305970367405490186> kapa.ai is still learning and improving, please let us know how it did by reacting below
ratty-blush•13mo ago
Hello @smilodon.x7 as bot mentioned, you can pass a client to your data provider which reads cookies or you can swizzle and modify to read cookies and add to headers: https://refine.dev/docs/tutorial/understanding-dataprovider/swizzle/#what-is-swizzle
2. Create a data provider with swizzle | refine
What is swizzle?
unwilling-turquoiseOP•13mo ago
Hello @batuhanw , thank you for your help 🙂 My API does not check the tokens within the headers but directly from the cookies created in the login route. Am I doing it the wrong way? Should I make my API check the header instead, then get the tokens from the cookies inside my authProvider and use them later with my dataProvider? I'm new to Refine and API development so please forgive me my beginner level 🙂
ratty-blush•13mo ago
I think you can use
withCredentials
option to also send cookies: https://bobbyhadz.com/blog/javascript-axios-set-cookiesSet Cookies when making an Axios request in JS and Node | bobbyhadz
You can set the
withCredentials
property to true
in the configuration object to set cookies when making an Axios HTTP request.unwilling-turquoiseOP•13mo ago
@batuhanw I swizzled the dataProvider and added the withCredentials in the axios.ts file like this :
import { HttpError } from "@refinedev/core";
import axios from "axios";
const axiosInstance = axios.create({withCredentials: true});
axiosInstance.interceptors.response.use(
(response) => {
return response;
},
(error) => {
const customError: HttpError = {
...error,
message: error.response?.data?.message,
statusCode: error.response?.status,
};
return Promise.reject(customError);
}
);
I tried with axios.defaults.withCredentials = true just in case but it did not work either