[PosePicker v1.0.0] 💬 카카오 소셜 로그인 & 유저 정보 관리

카카오계정을 이용한 소셜로그인 기능을 구현하였다

PosePicker(포즈피커) 개발 시리즈

• 카카오 소셜 로그인 프론트엔드에서 구현하기
• 로그인 정보 전역으로 관리하기(recoil)
• 로그아웃과 서비스 탈퇴 구현
• 서버 통신용 헤더에서 엑세스 토큰 관리(axios)
• 세션 만료시 자동 로그아웃 구현(interceptor)

---

1.카카오 소셜 로그인 구현 과정

1. 로그인 버튼을 누르면 인가코드를 받는 링크로 접속한다
이때 인가코드를 받는 링크에는 Redirect URI가 포함되어있다

2. 로그인이 완료되면 아까 포함되어 있던 Redirect URI로 자동으로 이동하며 이때 인가코드가 같이 온다.
인가코드는 url의 쿼리 형태{RedirectUri}?code={인가코드}로 온다

3. 해당 인가코드를 백엔드에게 보내주면 로그인 완료
본 프로젝트를 포함한 일반적인 로그인에서는 API에 인가코드를 포함해서 요청하면 로그인 완료된 정보를 반환하여 보내준다.

---

프론트엔드에서 구현하기

1. 로그인 버튼을 누르면 인가코드를 받는 링크로 접속한다

인가코드를 받는 링크는 공식문서에 나와있다.
형식만 잘 맞춰서 발급한 서버키와 리다이렉트 uri를 포함시켜주자

const KAKAO_AUTHORIZE = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_SERVER_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`;

2. 로그인이 완료되면 아까 포함되어 있던 Redirect URI로 자동으로 이동하며 이때 인가코드가 같이 온다.

인가코드는 url의 쿼리 형태{RedirectUri}?code={인가코드}로 온다.

여기서는 {도메인}/auth?code={인가코드}형태

리다이렉트 된 페이지에서는 useSearchParams()를 이용하여 현재 url에서 'code'에 해당하는 값인 인가코드를 code 변수에 저장한다.

해당 인가코드로 로그인api로 로그인을 진행한 후 결과로 받은 로그인 정보를 전역 상태로 저장한 후 페이지를 이동하면 끝. (전역으로 관리하는 방식은 본 글 아래에 기록)

3. 해당 인가코드를 백엔드에게 보내주면 로그인 완료

본 프로젝트를 포함한 일반적인 로그인에서는 API에 인가코드를 포함해서 요청하면 로그인 완료된 정보를 반환하여 보내준다.

백엔드의 로그인 api (여기서는 /users/kakao?code={인가코드}와 통신해줬다.

로그인 api를 요청하는데 뜬끔없이 리다이렉트 uri를 같이 보내주는건 아래와 같은 시행착오가 있었다

---

redirect uri 이슈 발생.. 백엔드와 밤새 의논하기

소셜 로그인 API를 붙이는 과정에서 자꾸 500에러가 떴다
알고보니 원인은 백엔드쪽에서 Redirect URI를 하나로 설정해놨기 때문이였다.

즉, 백엔드가 설정한 URI인 프로덕션 링크가 아닌 로컬(localhost:3000)이나 develop(본 프로젝트는 develop과 main브랜치가 각각 다르게 배포되어있다)에서 보내면 KOE006에러(리다이렉트 미설정 오류)가 생겨버리고 이 오류를 받은 백엔드에서는 500에러를 프론트엔드에게 보내는 상황이였다.

매번 백엔드에게 리다이렉트를 바꿔달라고 요청할 수는 없으니 현재 프론트가 사용하는 리다이렉트 uri들을 허용해달라고 부탁드렸는데

요렇게 도메인을 매번 분기처리하는 방식으로 바꾸셨다고 코드를 보내주셨다.

이 형태는 백엔드에게도 프론트에게도 확장성을 고려할 수 없는 나쁜 방식이라고 생각되었고, 아예 redirect uri를 프론트에서 해당 api와 통신할때 보내서 백엔드는 프론트엔드에게 받은 RedirectURI를 그대로 설정하는 방식은 어떨지 제안드리고 합의하였다.

그렇게 프론트는 로그인api로 통신할 때 인가코드 뿐만 아니라 리다이렉트 uri도 포함시키게 되었다.

이 방법으로 이전에 백엔드에 정해놓은 경로로 프론트의 리다이렉트 경로를 맞춰야하는 복잡한 상황도 피할 수 있었다

Before & After

당시 밤새 고민하다가 해결한게 너무 기뻐서 디코 대화 일부를 캡쳐했었다

---

2. 로그인 정보 전역으로 관리하기

일반적인 로그인api는 로그인을 성공하면 유저 닉네임과 이메일 주소, 엑세스 토큰을 포함한 토큰 정보를 포함한 로그인 정보를 반환해준다.

localStorage.setItem('accesstoken', response.token.accessToken);

서버 통신 중 토큰이 필요한 통신에는 헤더에 자동으로 엑세스토큰을 포함하도록 토큰은 따로 로컬스토리지에 저장해줬다.
보안이 경악스럽지만 다행히 서버쪽에서 OAuth로 토큰 만료의 개념을 적용해줬다

---

유저 정보 저장 및 접근 (recoil)

그 외에 다른 페이지에서 로그인 분기처리나 유저 정보를 표시하기 위해 필요할 유저 데이터들은 Recoil을 이용하여 전역으로 관리했다

recoil은 외부 라이브러리라 설치가 필요하다.

아까 본 로그인 페이지의 코드를 다시보자

서버가 반환해준 로그인 정보 응답을 setUser로 넣어주는 모습이 보인다.

Recoil로 userAtom을 정의해주고, 이 아톰과 관련된 메소드들을 useUserState라는 훅에 구현해뒀다.

• userData : 유저아톰의 값을 반환한다
• setUser({객체}) : 유저아톰을 {객체}로 설정(변경)해준다 = 로그인
• clearUser : 유저 아톰을 비운다 = 로그아웃
• isLogin : 로그인 여부를 알려준다

사실 다른 페이지에서 바로 useRecoilValue나 useSetRecoilState를 사용해도 되지만.. 개인적으로 특정 아톰과 관련된 작업들을 한 파일의 한 훅 안에 모아두는걸 선호해서 난 이렇게 코드를 짠거다. 각자 취향에 맞게 작성하자

이런식으로 다른 컴포넌트에서 userState 훅을 사용해서 전역상태인 유저 정보에 접근하고 활용할 수 있다.

---

recoil상태 새로고침 유지

근데 이렇게 recoil로 관리하는 전역상태는 허무하게도 새로고침 한번에 날아가버린다.. NextJS의 경우 페이지를 바꿀때마다 새로고침되기 때문에 이에 대한 대응이 필요했다.

recoil-persist 라이브러리를 설치해서 userAtom을 persistAtom으로 설정해주었다.

---

로그아웃 및 탈퇴기능 구현

로그아웃과 서비스 탈퇴의 경우도 로그인과 비슷하게 구현하면된다.

나의 경우 로그아웃이라는 액션을 함수로 사용하기 보다는 로그인과 동일하게 리다이렉트 페이지를 만들었다.

로그아웃 버튼을 누르면 /auth/logout 페이지로 이동되고 해당 페이지에서 로그아웃 작업을 진행한다

여기서 로그아웃 작업은

1. 로그아웃 api로 서버와 통신하고 (위에서 patchLogout과 동일)
2. 전역 상태에 있는 유저 정보를 없애고 (clearUser)
3. 로컬스토리지에 있는 엑세스토큰도 없애고 (localstorage.removeItem)
4. 이전 페이지로 리다이렉트

이 모든 과정을 포함한다

생각보다 깔끔하고 시중 서비스와 유사하게 작동한다. 서비스 탈퇴 플로우도 페이지가 추가되었을 뿐 로직은 똑같다.

---

3. 엑세스 토큰 관리하기

위에서 로컬스토리지에 추가한 엑세스토큰을 서버통신에서 효율적이게 활용해보자

---

토큰으로 통신할 때 Bearer 붙이기

자꾸 Unauthorized에러가 떠서 확인해보니 토큰의 형식을 알려주지 않고 냅다 액세스토큰만 보내서 생기는 오류였다.

Bearer을 엑세스토큰 앞에 추가하니 결과를 잘 받아오더라

Bearer을 붙여야하는 이유와 엑세스토큰의 종류는 이 글을 참고하자

---

서버 통신용 헤더에 엑세스토큰 추가 (feat. axios)

이제 서버통신을 할 때 아래처럼 헤더에 엑세스토큰을 추가하여 보내줄 수 있다.

근데.. 로그인이 필요한 기능들에 쓰이는, 즉 엑세스토큰을 포함시켜야 할 api가 아주 많은데 그 모든 api에 저렇게 하나하나 엑세스토큰을 포함시키고 싶지 않다.

그냥 기본적으로 헤더에 엑세스토큰이 세팅되어 있으면 편할 것 같다.

axios.create()를 이용하여 아래처럼 인스턴스를 커스텀해주자.
baseURL도 세팅할 수 있어서 이제 api경로도 baseURL 중복 없이 쓸 수 있다.

커스텀 인스턴스로 여러가지를 설정할 수 있지만 나는 getAccesstoken()함수를 이용해서 로컬스토리지에서 엑세스토큰을 꺼내고 이 토큰을 interceptors로 기본 헤더에 추가해주었다.

참고로 포즈피커 프로젝트는 로그인 없이(즉 엑세스토큰 없이도) 통신하는 Api도 꽤 있어서 이 api들은 따로 인스턴스를 정의해주었다 (publicApi와 privateApi로 나뉨)

---

세션 만료시 자동 로그아웃 구현

위에서 사용한 axiosInstance를 잘 세팅하면 해당 인스턴스로 서버 통신을 할 때 마다 특정 응답에 대해 특정 행동이 가능하다

이렇게 해당 인스턴스를 통한 서버통신에서 에러가 뜨면 alert창이 뜨게 할 수 있고, 그 안에서 특정에러(여기서는 세션만료인 415에러)를 분기처리해서 다른 alert창을 띄워주고 로그아웃을 자동으로 진행할 수 있다.

참고로 interceptors.request.use와 interceptors.response.use가 다르니 잘 구분해서 쓰자

axios.interceptors.request.use(
  (config) => {
	...
    return config;
  },
  (error) => {
    ...
    return Promise.reject(error);
  }
);

// 위와 다름
axios.interceptors.response.use(
  (config) => {
	...
    return config;
  },
  (error) => {
    ...
    return Promise.reject(error);
  }
);

---

난 분명 릴리즈노트를 작성하려했는데..
어쩌다 이런 정보성 포스팅을..