리액트에서 로그인은 어떻게 구현을 하면 좋을까?

세션을 활용하는 방법도 있겠지만 요즘은 모바일 api 까지 고려를 해서 만드는 경우가 많기 때문에 나는 jwt 를 사용한다.

가장 기본적인 형태는 accessToken을 만들고 만료 되기 전에 연장을 서버에서 해주는 방식으로 하면 된다.

좀 더 나아가면 accessToken과 refreshToken의 이중구조를 만든다. accssToken은 리프레시 토큰보다 만료 기간이 짧으며 액세스 토큰이 만료되면 가지고 있는 리프레시 토큰으로 엑세스 토큰을 재발급 받아서 사용하면 된다. 리프레시 토큰 재발급 과정은 axios의 인스턴스로 만들어 놓고 사용하면 편하다.

토큰들은 http only cookie에 저장한다. axios등의 옵션에 이 쿠키를 같이 보내도록 세팅하여 서버에서 받아서 처리하면 된다. (withCredentials: true) 클라이언트에서는 접근이 안된다.

access token의 확인 과정은 json webtoken이 변조됐는지만 확인하면 되기 때문에 DB가 필요하지 않다. 하지만 리프레시 토큰은 디비에 저장을 해두었다가 확인하거나 revoke (철회) 할 수 있게 만들어 놓으면 좋다. 예를 들어 리프레시 토큰이 탈취당하거나 로그아웃을 할 때 해당 토큰을 revoke하는 것으로 무효화시킬 수 있다.

로그인 시스템은 서비스 시스템의 핵심이다. (가장 많이 사용한다.) 어떤 것이 안전하고 편리한지 조금씩 지속적으로 연구 할 생각이다.