React Native Expo에서 JWT 토큰 검증하기

React Native에서 JWT 토큰의 클라이언트 검증 로직 추가하기

현재 프로젝트에서는 Redux를 통해 인증 토큰을 관리하고 있으며, 토큰이 없는 경우에만 로그인 화면으로 이동하는 간단한 로직을 사용 중이었습니다.

const { token } = useSelector((state: RootState) => state.auth);

if (token === null) {  
  return <Login />;  
}

그렇지만 위와 같이 토큰을 검증하면 생기는 문제들이 있습니다.:

• 이전에 로그인을 통해 발급받은 토큰이 아직 저장된 상태라면, 실제 로그인 여부나 토큰의 유효성에 상관없이 로그인 화면으로 이동하지 않고 메인 화면을 그대로 보여주게 됩니다.

• 이로 인해서 개발을 하고 있는 팀원들이 지금 로그인 상태인지 확인이 제대로 안돼서 기능 개발의 오류 발생이 다른 것으로 인해서 발생하는 줄 알고, 혼동이 오는 경우가 있었습니다.

개선된 클라이언트 측 토큰 검증 로직

서버에서 토큰 만료 기간을 무제한으로 설정하거나 Refresh Token을 도입하는 등의 결정은 아직 팀원들과 논의중에 있기 때문에 그것들의 결정은 좀 미루더라도, 일단 클라이언트에서 최소한의 토큰 검증 로직을 추가하여 사용성을 높이고자 합니다.

1. 토큰 타입을 명확히 체크

기존의 null 체크에서 타입을 명확히 문자열로 한정하여 더욱 정확한 검증을 수행합니다.

if (typeof token !== "string") {  
  return <Login />;  
}

위 코드로 인해 token이 존재하지 않거나 잘못된 형태의 값일 경우 즉시 로그인 화면으로 이동시킬 수 있습니다.

2. JWT 디코딩을 통한 유효기간(exp) 검증

JWT 토큰의 payload에는 보통 exp(expiration) 필드가 포함되어 있어 토큰의 유효기간을 나타냅니다. 이를 클라이언트 측에서 간편하게 디코딩하여 확인하기 위해 jwt-decode 라이브러리를 사용합니다.

먼저 라이브러리를 import 합니다.

import { jwtDecode } from "jwt-decode";

다음은 실제 토큰 유효기간을 체크하는 로직입니다.

const decoded = jwtDecode(token);
const currentTime = Date.now() / 1000; // 현재 시간을 초 단위로 변환

if (decoded.exp && decoded.exp < currentTime) {  
  return <Login />;
}

위 코드를 통해 다음과 같은 효과를 얻을 수 있습니다.:

• 현재 시점이 토큰의 유효기간을 초과했을 경우 바로 로그인 화면으로 이동합니다.

• 이를 통해 실제로 유효하지 않은 토큰으로 메인 화면에 접근하는 문제를 방지할 수 있습니다.

결론

이번 변경 사항을 통해 클라이언트에서 JWT 토큰의 유효성에 대해 최소한의 안전장치를 마련하였습니다. 완벽한 인증 및 보안 로직은 서버 측에서 보장하는 것이 맞지만, 클라이언트에서도 간단한 토큰 유효성 체크를 추가하는 것이 사용자 경험과 개발 편의성을 크게 향상시킬 수 있습니다. 바로 우리 개발팀이 겪었습니다 ^^