Production Axios Setup - Interceptors & Token Refresh

npm install axios

import axios, { AxiosInstance, InternalAxiosRequestConfig, AxiosError } from 'axios';
import * as SecureStore from 'expo-secure-store';

// ---- Create instance ----
export const apiClient: AxiosInstance = axios.create({
  baseURL: process.env.EXPO_PUBLIC_API_URL ?? 'https://api.example.com',
  timeout: 10_000,
  headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
});

// ---- Request interceptor: attach access token ----
apiClient.interceptors.request.use(async (config: InternalAxiosRequestConfig) => {
  const token = await SecureStore.getItemAsync('access_token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  if (__DEV__) console.log(`[API] ${config.method?.toUpperCase()} ${config.url}`);
  return config;
});

// ---- Response interceptor: handle 401 and refresh token ----
let isRefreshing = false;
let refreshQueue: Array<{ resolve: (token: string) => void; reject: (err: unknown) => void }> = [];

function processQueue(error: unknown, token: string | null = null) {
  refreshQueue.forEach(({ resolve, reject }) => {
    if (error) reject(error);
    else if (token) resolve(token);
  });
  refreshQueue = [];
}

apiClient.interceptors.response.use(
  response => response,
  async (error: AxiosError) => {
    const originalRequest = error.config as InternalAxiosRequestConfig & { _retry?: boolean };

    if (error.response?.status !== 401 || originalRequest._retry) {
      return Promise.reject(error);
    }

    if (isRefreshing) {
      // Queue concurrent requests until token is refreshed
      return new Promise((resolve, reject) => {
        refreshQueue.push({
          resolve: (token: string) => {
            originalRequest.headers.Authorization = `Bearer ${token}`;
            resolve(apiClient(originalRequest));
          },
          reject,
        });
      });
    }

    originalRequest._retry = true;
    isRefreshing = true;

    try {
      const refreshToken = await SecureStore.getItemAsync('refresh_token');
      if (!refreshToken) throw new Error('No refresh token');

      const { data } = await axios.post(`${apiClient.defaults.baseURL}/auth/refresh`, { refreshToken });
      const newToken: string = data.accessToken;

      await SecureStore.setItemAsync('access_token', newToken);
      apiClient.defaults.headers.common.Authorization = `Bearer ${newToken}`;
      processQueue(null, newToken);

      originalRequest.headers.Authorization = `Bearer ${newToken}`;
      return apiClient(originalRequest);
    } catch (refreshError) {
      processQueue(refreshError, null);
      await SecureStore.deleteItemAsync('access_token');
      await SecureStore.deleteItemAsync('refresh_token');
      // Signal auth context to log user out
      // authEventEmitter.emit('LOGOUT');
      return Promise.reject(refreshError);
    } finally {
      isRefreshing = false;
    }
  }
);

// services/postService.ts
interface Post { id: string; title: string; body: string; userId: string; }
interface CreatePostDto { title: string; body: string; }
interface PaginatedResponse<T> { data: T[]; total: number; page: number; hasNextPage: boolean; }

export const postService = {
  getPosts: (page = 1, limit = 20) =>
    apiClient.get<PaginatedResponse<Post>>('/posts', { params: { page, limit } }).then(r => r.data),

  getPost: (id: string) =>
    apiClient.get<Post>(`/posts/${id}`).then(r => r.data),

  createPost: (dto: CreatePostDto) =>
    apiClient.post<Post>('/posts', dto).then(r => r.data),

  updatePost: (id: string, dto: Partial<CreatePostDto>) =>
    apiClient.patch<Post>(`/posts/${id}`, dto).then(r => r.data),

  deletePost: (id: string) =>
    apiClient.delete(`/posts/${id}`).then(r => r.data),
};