✨ [Feature] 로그인 로직

[yoopark]

Summary

• 로그인 로직을 개발하였습니다.
• 42 계정으로 로그인, Google 계정으로 로그인 버튼을 제작하였습니다.
• 설정 페이지를 제작하였습니다.
• Google 계정 연동 / 해제 섹션 및 로직을 제작하였습니다.
• 로그아웃 / 계정 삭제 섹션 및 로직을 제작하였습니다.

Describe your changes

로그인 개요

구체적인 도식은 Discussion의 Auth.md, Login.md 참고 바랍니다.

• 42 : OAuth2, Redirect Url 활용
• 구글 : OpenId, Callback 활용

기존 구글 로그인을 제작함에 있어 @react-oauth/google 라이브러리를 사용하였으나, 인증만 하는 OpenId가 제공되는 상황에서 인증+인가까지 진행하는 OAuth2를 사용하는 것이 과하다고 판단하여 해당 라이브러리를 사용하지 않고 제작하였습니다.

반면, 42 로그인의 경우 방식이 OAuth2 + Redirect Url로 고정되어 있어 해당 방식을 사용하였습니다.

로그인 버튼 제작

• 구글 : createFakeGoogleWrapper b264f90
• 42 : FtOAuthRedirect page aa24db2

Apollo Req & Res Interceptor

• 기존 : AuthGuard에서 refreshToken 요청을 보낸 뒤, 반환값에 있는 유저 정보를 userAtom에 저장하는 방식
• 현재 : 401이 반환되면 refreshToken 요청, 400이 반환되면 clearStorage + Root로 Redirection 42489d5
  • UserMiddleware를 신설하여 PersonalGeneral로 요청을 보내 userAtom에 저장하는 방식 9fd2d30

Issue number and link

• close 인증 로직 설계 #8
• close google 연동 이후 새로고침 이전에는 상태가 반영되지 않음 #149
• oneTap 개발 191e1f6