개발 프로젝트로 소셜 로그인을 구현해야하는 상황이 생겼다. 처음 해보는 소셜 로그인이기에 많은 구글링이 필요했다. 하지만 구현 방법은 굉장히 간단하다.

구현방법

깃허브 로그인을 하기 위해서는 먼저 react-router-dom을 이용해 redirect url 페이지를 만들어야 한다. 나는 아래사진처럼 https://localhost:3000/callback으로 라우팅 설정을 했다.

그다음 서버는http://api주소/oauth2/authorization/github 같은 이 url을 줄 것이다. 그러면 클라이언트는 이 url을 클릭했을 때 아래 사진처럼 깃허브 Sign in 페이지로 이동하는 로직을 구성한다.

그럼 onClick 메서드가 실행되면 아래와 같은 깃허브 Sign in 페이지로 이동될 것이다.

그러면 Sing in 버튼을 누르면 서버는 redirect url로 https://localhost:3000/callback 을 설정해서 아래 url처럼 accessToken, refreshToken을 줘야한다.
ex) https://localhost:3000/callback?accessToken=${jwt}&refreshToken=${jwt}
!!중요 서버와 클라는 redirect url을 맞춰야한다!!

그럼 이제 url을 파싱할 차례이다. 순서는 아래와 같다.

1. 소셜로그인 customHooks 만들기
2. useLocation 사용하여 현재 url정보 갖고오기
3. accessToken, refreshToken을 url로부터 따로 추출해 로컬스토리지나 쿠키에 담기

한번 구현해보자!!

코드는 아래와 같다
들어가기 전 react-router-dom과 npm i query-string를 설치하자!!

import { useEffect } from "react";
import {
  ACCESS_TOKEN_KEY,
  REFRESH_TOKEN_KEY,
} from "@src/constants/Auth/auth.constant";
import { useLocation, useNavigate } from "react-router-dom";
import queryString from "query-string";

export function useSocialLogin() {
  const navigate = useNavigate();
  // useLoctaion의 search로 url 정보 갖고오기
  const { search } = useLocation(); 
  // 갖고온 search를 queryString.parse의 인자로 넘겨줘서 ?accessToken=${jwt}&refreshToken=${jwt} 값 갖고오기
  const { accessToken, refreshToken } = queryString.parse(search); 

  //useEffect를 사용하여 토큰을 로컬스토리지에 담는다.
  useEffect(() => {
    if (accessToken && refreshToken) {
      localStorage.setItem(ACCESS_TOKEN_KEY, accessToken.toString());
      localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken.toString());
      navigate("/");
    }
  }, [accessToken, refreshToken]);
}

위의 코드처럼 작성한다면 깃허브 OAuth 로그인을 손쉽게 구현할 수 있다.

마무리

이렇게 Github OAuth 로그인을 구현해보았다. 도움이 되었으면 좋겠다!!