0054. 실전 FE 개발 배우기11 - accessToken과 refreshToken, EncryptedStorage와 AsyncStorage 사용하기

섹션 2. 서버 API와 연동하기

7강. accessToken과 refreshToken

 

로그인을 하고 나면 서버개발자가 프론트 개발자에게 name, email, accessToken, refreshToken 등을 줄 것이다.

      dispatch(
        userSlice.actions.setUser({
          name: response.data.data.name,
          email: response.data.data.email,
          accessToken: response.data.data.accessToken,
          refreshToken: response.data.data.refreshToken,
        }),
      );

위의 규격대로 data를 받기로 한 약속인 것이다.

통신할 때 token을 넣어 줘야 서버가 내가 누군지를 알 수 있다.

 

App → Server 로 요청을 보내면 서버는 누가 요청했는지를 모른다.

요청에다가 힌트(토큰)를 넣어서 보내면 서버는 토큰 분석을 통해 누구인지 알게 되는 것이다.

 

1) accessToken

서버 접근에 필요한 정보들이 들어있다.

accessToken이 탈취를 당하면 해커는 토큰으로 유저인척 할 것이므로 토큰이 계속 살아있으면 위험하다.

그래서 accessToken에 유효기간을 두는데, 회사 정책에 따라서 유효기간은 달라질 수 있다.

- 유효기간이 1시간, 10분, 5분 등 다양하다.

 

은행이나 정부기관 홈페이지에 로그인하면 로그인 유지 시간이 제한되어 있고, 그 시간이 지나면 로그인이 풀리는 것이 토큰의 유효기간 때문이다.

 

2) refreshToken

로그인 제한시간 내에 '로그인 연장'을 누르면 로그인 연장이 되는데, 이것이 refreshToken의 기능이다.

refreshToken을 서버로 보내면 서버는 새로운 accessToken을 보내준다. 유효기간도 갱신이 되어 있을 것이다.

- 유효기간이 1일, 30일, 1년 등으로 매우 길다.

 

 

accessToken과 refreshToken이 동시에 탈취당하면 정말 답이 없는 상황이 된다.

그래서 두 개의 토큰은 다른 저장소에 두는 게 좋고, 따로 분리해 두는 것이 좋다.

refreshToken이 기간이 길기 때문에 탈취당했을 때 더 치명적이라 더 안전한 저장소에 넣어두는 편이 좋다.

• accessToken : Redux, Memory
• refreshToken : EncryptedStorage, Local storage

      dispatch(
        userSlice.actions.setUser({
          name: response.data.data.name,
          email: response.data.data.email,
          accessToken: response.data.data.accessToken,
        }),
      );
      await EncryptedStorage.setItem(
        'refreshToken',
        response.data.data.refreshToken,
      );

 

refreshToken이 탈취당하는 것을 대비해서 서버쪽에서도 보안을 강화할 수 있다.

토큰을 DB화해서 토큰이 탈취당했을 때 토큰을 무효화시키는 것이다.

구글 계정관리에서 로그인된 계정을 확인하고 '원격으로 해당 기기에서 로그아웃'하는 것이 refreshToken을 무효화시키는 것인데, 이는 서버에서 할 수 있다.

 

 

3) EncryptedStorage, AsyncStorage 사용하기

AsyncStorage : 공개돼도 되는 값들

EncryptedStorage : 공개되면 안 되는 값들

await EncryptedStorage.setItem('키', '값');
await EncryptedStorage.removeItem('키');
const 값 = await EncryptedStorage.getItem('키');

위의 코드로 저장/삭제/가져오기가 가능하다.

Async도 Encrypted 대신 Async로 바꿔서 쓰면 된다.

 

promise 문법이라 반드시 await를 붙여서 정확하게 써야 한다.