[React-Native] react-native-keychain을 활용한 storage 관리

React에서는 토큰 저장을 위해 localStorage나 sessionStorage를 사용한다. React Native에서는 이와 비슷하게 AsyncStorage라는 게 존재하지만, 나는 본 프로젝트에 react-native-keychain이라는 라이브러리를 사용하여 사용자 인증 정보를 저장했다.

yarn add react-native-keychain

사용 방식은 다른 storage와 비슷하다.

import * as Keychain from 'react-native-keychain';

const ACCESS_TOKEN = 'ACCESS_TOKEN';
const REFRESH_TOKEN = 'REFRESH_TOKEN';
const LOGIN_ID = 'LOGIN_ID';

// get
async function getSecureValue(key: string): Promise<string> {
  const result = await Keychain.getInternetCredentials(key);
  if (result) {
    return result.password;
  }
  return '';
}

// set
function setSecureValue(key: string, value: string) {
  Keychain.setInternetCredentials(key, key, value);
}

// remove
function removeSecureValue(key: string) {
  Keychain.resetInternetCredentials(key);
}

사용자 로그인을 위해 필요한 토큰을 저장하고 받아오는 과정을 살펴보자.

• 토큰 저장 함수

export async function getAccessToken(): Promise<string> {
  return await getSecureValue(ACCESS_TOKEN);
}
export function setAccessToken(token: string) {
  setSecureValue(ACCESS_TOKEN, token);
}
export function removeAccessToken() {
  removeSecureValue(ACCESS_TOKEN);
}

• 함수 활용 방식
  - get함수는 비동기 방식으로 작동하기 때문에 async await와 함께 사용한다.

const accessToken = await getAccessToken();
setAccessToken(res.data.result.accessToken);
removeAccessToken();