소셜 로그인 - 카카오와 구글을 통한 소셜로그인을 구현하였습니다. 기본적인 로그인에 이메일이 필요하며 로그인 정보가 없을때 소셜에서 이름, 이미지를 받아 자동으로 회원가입처리하여 방갑고에서 사용하는 access token을 생성하여 전달하고 있습니다.

•

FE

로그인(일반, 소셜) - Redux toolkit을 사용하여 사용자 인증 관련 상태 관리를 수행합니다. 회원가입, 로그인(일반, 소셜), 로그아웃 및 토큰 갱신 등에 대한 action과 reducer를 정의하였습니다. 로그인 후 사용자의 Email, 토큰 정보를 Local Storage에 저장합니다.

토큰 갱신 - 해당 Access Token이 만료되었는지 확인하기 위해 Access Token의 payload에서 만료 시간을 가져와 현재 시간과 비교합니다. 만약 만료 되었다면, 새 Access Token을 요청합니다. (30분 간격) 이를 통해 사용자가 로그아웃 하지 않고도 계속해서 서비스를 이용할 수 있도록 Access Token을 갱신하는 과정을 자동화합니다.

카카오, 구글 소셜 로그인 - 카카오와 구글의 Access Token을 인자로 받아, 이를 사용하여 백엔드 API에 로그인 요청을 보냅니다. 인증 성공 시, 사용자 정보와 Token을 받아 앱의 상태에 저장합니다. 사용자는 이를 통해 별도의 회원가입 과정 없이 카카오, 구글 계정으로 로그인할 수 있습니다.

로그인

화면

배경

구현한 기능