🔐 React Native에서 Axios + JWT 토큰 자동 갱신 및 요청 재시도 처리하기

React Native 앱에서 JWT 인증을 사용하는 중, accessToken이 만료되어 401 에러가 발생하는 문제가 있었고,
이로 인해 특정 요청이 처리되지 않거나 앱 동작이 멈추는 사례가 자주 발견되었습니다.

처음에는 토큰 갱신이 정상적으로 작동한다고 판단했지만, 실제 서비스에서는 동시 요청 처리, 재시도 누락, 무한 루프 등 다양한 문제가 발생할 수 있다는 것을 확인했습니다.
이를 해결하기 위해, Axios 인터셉터를 기반으로 토큰을 갱신하고, 실패한 요청을 자동으로 재시도하는 구조를 설계했습니다.

---

🎯 구현 목표

1. accessToken이 만료되었을 때 refreshToken을 통해 새로운 토큰을 받아옴
2. 해당 시점에 실패한 요청은 큐에 보관하고, 새 토큰으로 재실행
3. 갱신 중에는 추가 갱신 요청 없이 큐에만 쌓도록 제어
4. 갱신 실패 시에는 안전하게 로그아웃 처리

---

1. Axios 인스턴스 및 인터셉터 구성

// apiClient.ts
import axios from 'axios';

export const apiClient = axios.create({ baseURL: BASE_URL });

apiClient.interceptors.request.use(
  (config) => config,
  (error) => Promise.reject(error)
);

apiClient.interceptors.response.use(
  (response) => response,
  (error) => handleJwtError(error, apiClient)
);

---

2. 401 에러 감지 및 갱신 진입

// handleJwtError.ts
export const handleJwtError = (error: unknown, client: AxiosInstance) => {
  if (!(error instanceof AxiosError)) return;

  const { config, response } = error;
  const requestUrl = config?.url;

  if (response?.status === 401) {
    // refreshToken 자체 요청인 경우 무한 루프 방지
    if (requestUrl?.includes('/auth/token/refresh')) {
      return Promise.reject(error);
    }

    return attemptTokenRefreshAndRetry(config, client);
  }

  return Promise.reject(error);
};

---

3. 요청 재시도를 위한 큐 구조 정의

let isRefreshing = false;

const pendingRequests: Array<{
  resolve: (token: string) => void;
  reject: (error: unknown) => void;
}> = [];

const flushQueue = (error: any, newToken: string | null = null) => {
  pendingRequests.forEach(({ resolve, reject }) => {
    if (error) reject(error);
    else if (newToken) resolve(newToken);
  });
  pendingRequests.length = 0;
};

---

4. 토큰 갱신 + 실패 요청 재실행 처리

// attemptTokenRefreshAndRetry.ts
export const attemptTokenRefreshAndRetry = async (originalConfig: any, client: AxiosInstance) => {
  if (!originalConfig) return Promise.reject(new Error('Missing config'));

  if (isRefreshing) {
    return new Promise((resolve, reject) => {
      pendingRequests.push({ resolve, reject });
    }).then((token) => {
      originalConfig.headers.Authorization = `Bearer ${token}`;
      return client(originalConfig);
    });
  }

  isRefreshing = true;

  try:
    const refreshToken = await getRefreshTokenFromStorage();
    if (!refreshToken) throw new Error('No refresh token found');

    const { accessToken, refreshToken: newRefreshToken } = await requestNewToken(refreshToken);

    await saveTokensToStorage(accessToken, newRefreshToken);
    client.defaults.headers.common.Authorization = `Bearer ${accessToken}`;

    flushQueue(null, accessToken);

    originalConfig.headers.Authorization = `Bearer ${accessToken}`;
    return client(originalConfig);
  } catch (err) {
    flushQueue(err, null);
    await clearTokenStorage();
    handleLogout();
    return Promise.reject(err);
  } finally {
    isRefreshing = false;
  }
};

---

🔁 전체 흐름 요약

1. 401 Unauthorized 응답이 오면 attemptTokenRefreshAndRetry로 진입
2. 첫 번째 요청만 refresh API를 호출
3. 동시에 실패한 요청들은 큐에 보관
4. 새 accessToken 발급 후, 큐에 있는 요청들을 순차적으로 재시도
5. 갱신 실패 시 로그아웃 및 토큰 삭제

---

✅ 효과

• 중복 갱신 요청 차단: 갱신 중에는 큐에만 쌓이고 중복 호출 없음
• 요청 자동 복구: 실패한 요청도 사용자 인지 없이 복구됨
• UX 개선: 로그인 만료를 체감하지 않도록 처리
• 보안 처리: 갱신 실패 시 즉시 로그아웃 및 초기화

---

📌 참고 함수 (핵심 로직 외부 추상화 예시)

const getRefreshTokenFromStorage = () => SecureStore.getItemAsync('refresh_token');
const saveTokensToStorage = (access: string, refresh: string) => {
  return Promise.all([
    SecureStore.setItemAsync('access_token', access),
    SecureStore.setItemAsync('refresh_token', refresh),
  ]);
};
const clearTokenStorage = () => {
  return Promise.all([
    SecureStore.deleteItemAsync('access_token'),
    SecureStore.deleteItemAsync('refresh_token'),
  ]);
};
const handleLogout = () => {
  store.dispatch(SignOut());
  reset({ routes: [{ name: 'Auth', params: { screen: 'Landing' } }] });
};

---

> 밀린걸 몰아쓰지 않도록 하자...!