SecureStore를 사용한 엑세스 토큰 재발급

기존 웹 환경에서는 HttpOnly 쿠키를 사용해 리프레시 토큰을 관리했습니다. 하지만 리액트 네이티브에서 **웹뷰(WebView)**를 사용하는 경우, 웹뷰가 초기화되기 때문에 쿠키 기반의 리프레시 토큰 관리가 불가능합니다.

따라서 모바일 앱에서는 리프레시 토큰을 앱 내 SecureStore와 같은 안전한 저장소에 저장하고 이를 활용해 엑세스 토큰을 재발급받는 방식을 사용해야 합니다.

SecureStore 사용 이유

• AsyncStorage처럼 데이터를 저장할 수 있지만, 암호화를 지원하여 민감한 정보를 안전하게 저장할 수 있습니다.
• 안드로이드: Keystore
• iOS: Keychain

Bearer 토큰 전송 방식

• 요청 헤더의 Authorization 필드에 Bearer <token> 형태로 리프레시 토큰을 전달합니다.

GraphQL과 HTTP 통신

• GraphQLClient를 사용해 엑세스 토큰 재발급 요청을 간결하게 처리합니다.

예시 코드

import { gql, GraphQLClient } from "graphql-request";

const RESTORE_ACCESS_TOKEN = gql`
  mutation restoreAccessToken {
    restoreAccessToken {
      accessToken
    }
  }
`;

export const getAccessToken = async ({ refreshToken }) => {
  try {
    const graphQLClient = new GraphQLClient(
      "<https://main-hybrid.codebootcamp.co.kr/graphql>",
      { headers: { Authorization: `Bearer ${refreshToken}` } }
    );
    const result = await graphQLClient.request(RESTORE_ACCESS_TOKEN);
    const newAccessToken = result.restoreAccessToken.accessToken;
    return newAccessToken;
  } catch (error) {
    if (error instanceof Error) console.log(error.message);
  }
};

• 리프레시 토큰 가져오기:

  SecureStore에서 저장된 리프레시 토큰을 읽어옵니다.

  const refreshToken = await SecureStore.getItemAsync("refreshToken");
  

• GraphQL 요청 준비:

  리프레시 토큰을 포함하여 Authorization 헤더를 설정한 GraphQLClient를 생성합니다.

  const graphQLClient = new GraphQLClient(
    "<https://main-hybrid.codebootcamp.co.kr/graphql>",
    { headers: { Authorization: `Bearer ${refreshToken}` } }
  );
  

• 엑세스 토큰 재발급 요청:

  restoreAccessToken 뮤테이션을 호출하여 새로운 엑세스 토큰을 받아옵니다.

  const result = await graphQLClient.request(RESTORE_ACCESS_TOKEN);
  const newAccessToken = result.restoreAccessToken.accessToken;
  

추가적으로 리프레시 토큰을 보호하기 위해서 사용자가 로그아웃할 경우 이를 즉시 삭제하는 코드도 작성하여 보안을 더 높이는 방법을 구현해 보세요!