@y.sharipkanov/api-client

A lightweight, configurable API client wrapper for Axios with automatic access token refreshing, React context support, and built-in HTTP-only cookie handling.

Features

• ✅ Built on Axios
• 🔁 Automatic access token refresh with retry logic
• 🍪 Uses withCredentials: true for secure HTTP-only cookie-based auth
• 🧠 React Context (ApiProvider and useApi) for easy integration in React apps
• 🔌 Easily extensible and framework-agnostic at the core

How Interceptors and Automatic Token Refresh Work:

• The client uses Axios interceptors to catch HTTP 401 Unauthorized responses.
• On 401, it attempts to refresh the access token by POSTing to the refreshTokenURL.
• While refreshing, any other requests that fail with 401 are queued and retried after refresh completes.
• If the refresh fails (e.g., refresh token expired), the original request errors out.
• This ensures seamless token renewal without manual token management in your app.

Installation

npm install @y.sharipkanov/api-client

Usage

✅ In a React App

Wrap your app with ApiProvider and use the useApi hook to access the client.

Setup provider:

import React from 'react';
import { ApiProvider } from '@y.sharipkanov/api-client';

const App = () => (
  <ApiProvider baseURL="https://api.example.com" refreshTokenURL="/auth/refresh">
    {/* Your app components here */}
  </ApiProvider>
);

Standalone Usage (Without React)

You can use the ApiClient class directly to make API calls with built-in token refresh support.

import { ApiClient } from '@y.sharipkanov/api-client';

// Create an instance with your API base URL and the refresh token endpoint
const api = new ApiClient({
  baseURL: 'https://api.example.com',
  refreshTokenURL: '/auth/refresh',
});

async function getUser() {
  try {
    // Make a GET request to fetch user data
    const response = await api.instance.get('/user/me');
    console.log(response.data);
  } catch (error) {
    // Handle errors, such as failed requests or token refresh failure
    console.error('Request failed', error);
  }
}

getUser();

Usage with TanStack Query

You can integrate the ApiClient with TanStack Query for data fetching and caching by creating a custom hook that uses your API client inside query functions.

Example: Fetch user data with useQuery

import { useQuery } from '@tanstack/react-query';
import { useApi } from '@y.sharipkanov/api-client';

function useUser() {
  const { instance } = useApi();

  return useMutation({
    mutationFn: (data: YOUR_DATA_TYPE) => instance.post('/your-url', data),
  });
}

License

MIT