Access Token 구현한 후 호기심 [Node + TypeScript + Expo Go]

현재 진행중인 프로젝트에서 node.js + TypeScript 구조의 백엔드에서 아이디와 비밀번호를 입력하고 로그인 요청을 하면 Refresh Token, Access Token 을 만들고 Refresh Token은 Redis 에 저장, Access Token은 클라이언트에 전달해주는 구조이다. 이 발급된 Access Token을 이제 클라이언트쪽에 저장시켜줘야하는데 App이기 때문에 브라우저가 존재하지 않아 웹의 LocalStorage 같은 저장소가 존재하지 않는다. 이를 해결하기 위해서 Async Storage 혹은 Secure Storage 라이브러리를 사용해서 Access Token을 저장해야한다. 아무래도 Token은 민감한 정보이기 때문에 나는 OS가 제공하는 암호화된 저장소를 이용하는 Secure Storage를 사용했다. 기능을 구현 다했는데 몇가지 호기심이 생겨 포스팅한다.

 

로그인 한 후 Access Token을 저장하고 다시 로그인하면 Access Token이 두개가 생기는 것인가?

=> 아니다 두개가 저장되는 것이 아닌 새로운 값을 덮어씌운다.

이유는?

expo-secure-store의 setItemAsync(key, value)는 Key-Value 저장소 방식임

- Key는 "AccessToken" 같은 문자열

- Value는 토큰 문자열

따라서, 같은 key에 다시 저장하면 기존 값이 새로운 값으로 교체된다.

await SecureStore.setItemAsync("accessToken", "old_token");
await SecureStore.setItemAsync("accessToken", "new_token");

const token = await SecureStore.getItemAsync("accessToken"); // 여기서 token === "new_token"

 

즉, 로그인할 때마다 accessToken / refreshToken을 새 값으로 업데이트하는 구조가 된다.

 

또 다시말하면 Key - Value 방식이기 때문에 한개의 값만 저장하게됨

=> 같은 Key를 쓰면 무조건 새 값으로 교체됨.

=> 그렇기 때문에 SecureStore는 배열처럼 값이 쌓이지 않는다.

 

따라서 로그인 시에는 기존 토큰 => 새로운 토큰으로 덮어쓰기 가 일어남.

---

만약 로그아웃시에는?

 

로그아웃할 때는 SecureStore에서 삭제해 주면 된다.

 

import * as SecureStore from "expo-secure-store";

await SecureStore.deleteItemAsync("accessToken");
await SecureStore.deleteItemAsync("refreshToken");

 

이렇게 하면 기기 안에 토큰이 완전히 사라진다