Bug: 깃허브 로그인 후 권한 거부 시 504 에러가 뜨는 문제

[lybell-art]

처음 뵙겠습니다. 현재 부스트캠프 웹·모바일 멤버십을 진행 중인 7기 부스트캠퍼입니다. 6기 선배님의 프로젝트를 살펴보다, OAuth를 공부하면서 참고자료를 찾던 중 버그가 일어날 것 같은 코드를 찾았습니다.

export const loginCallback = async (req: Request, res: Response) => {
  const authorizationToken = req.query.code; // 유저가 이를 거부하면 code가 발급되지 않음
  const accessToken = await getAccessToken(authorizationToken);
  const userInfo = await getUserInfo(accessToken);
  const user = await User.findOne({ name: userInfo.login });

사용자가 최초에 깃허브 로그인을 수행한 뒤, 권한 허가 창에서 허가나 거부를 클릭하면 /api/login/callback으로 리다이렉트되면서 서버에 요청이 들어오게 되는데, 사용자가 허가를 하면 정상적으로 처리되지만, 사용자가 권한요청을 거부하면 위의 사진과 같이 서버 내부에서 에러가 터지면서 사용자에게 504 에러가 띄워지게 됩니다. 만약 로컬에서 테스트했으면 서버 자체가 에러를 띄우면서 중단되었을 겁니다.

에러의 원인

export const loginCallback = async (req: Request, res: Response) => {
  const authorizationToken = req.query.code; // 유저가 이를 거부하면 code가 발급되지 않음
  const accessToken = await getAccessToken(authorizationToken);
  const userInfo = await getUserInfo(accessToken);
  const user = await User.findOne({ name: userInfo.login });

1. 사용자가 깃허브 로그인을 하고, 권한 요청 창에서 요청을 거부합니다.
2. 콜백 url의 쿼리스트링으로 error, error_description, error_uri가 첨부되며, code는 쿼리스트링의 키로 존재하지 않습니다. 이 때 error의 값은 access_denied가 됩니다.
3. authorizationToken은 undefined가 됩니다. getAccessToken 함수에 undefined가 매개변수로 들어갑니다.
4. undefined는 적절한 코드가 아니므로 error, error_description, error_uri를 키로 가지는 객체가 반환됩니다. 여기에도 access_token은 존재하지 않으므로 getAccessToken은 undefined를 반환합니다.
5. getUserInfo 함수를 호출하는 과정에서 headers의 Authorization 필드는 Bearer undefined가 되고, 서버는 401 에러를 반환합니다.
6. 401 에러를 핸들링하는 코드가 존재하지 않으므로, 서버에서 에러가 일어나면서 서버가 크래시됩니다.

해당 부분에 대한 예외처리를 진행한다면 오류를 해결할 수 있을 것 같습니다.