table

how do i pass token on refine api using my custom axios?

3 Replies

Hi @reactt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•2y ago

---------------------- To pass a token on refine API using your custom axios instance, you can follow these steps: 1. Create an axios instance. 2. Implement a refresh token mechanism using the axios-auth-refresh package (optional). 3. Set the Authorization header with the token for your axios instance. Here's an example from the extracted information:

import axios from "axios";
import createAuthRefreshInterceptor from "axios-auth-refresh";

const axiosInstance = axios.create();

// Function that will be called to refresh authorization (optional)
const refreshAuthLogic = (failedRequest) =>
  axiosInstance
    .post(`${API_URL}/auth/token/refresh`)
    .then((tokenRefreshResponse) => {
      localStorage.setItem("token", tokenRefreshResponse.data.token);

      failedRequest.response.config.headers["Authorization"] =
        "Bearer " + tokenRefreshResponse.data.token;

      return Promise.resolve();
    });

// Instantiate the interceptor (optional)
createAuthRefreshInterceptor(axiosInstance, refreshAuthLogic);

// Set the Authorization header with the token
const token = localStorage.getItem("token");
if (token) {
  axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${token}`;
}

import axios from "axios";
import createAuthRefreshInterceptor from "axios-auth-refresh";

const axiosInstance = axios.create();

// Function that will be called to refresh authorization (optional)
const refreshAuthLogic = (failedRequest) =>
  axiosInstance
    .post(`${API_URL}/auth/token/refresh`)
    .then((tokenRefreshResponse) => {
      localStorage.setItem("token", tokenRefreshResponse.data.token);

      failedRequest.response.config.headers["Authorization"] =
        "Bearer " + tokenRefreshResponse.data.token;

      return Promise.resolve();
    });

// Instantiate the interceptor (optional)
createAuthRefreshInterceptor(axiosInstance, refreshAuthLogic);

// Set the Authorization header with the token
const token = localStorage.getItem("token");
if (token) {
  axiosInstance.defaults.headers.common["Authorization"] = `Bearer ${token}`;
}

In this example, the axiosInstance is created and the Authorization header is set with the token from localStorage. If you want to implement a refresh token mechanism, you can use the axios-auth-refresh package as shown in the example. Source: Create Auth Provider From Scratch (https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

2. Create Auth Provider From Scratch | refine

This section will show you how to create an auth provider from scratch. We'll use mock data to be able to focus on the auth provider methods. When you understand the logic of auth provider, you can easly integrate third-party authentication services or your own custom auth provider which includes many possible strategies like JWT, OAuth, etc.

kapa.ai•2y ago

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