[React] Google OAuth

구글 로그인 과정을 이해하기 위해 글을 적게 되었다.

구글 로그인의 전체적인 과정은 다음과 같다.
1. 프론트에서 구글 로그인 버튼을 만든다.
2. 그 로그인 버튼을 클릭하면 구글 로그인 창을 띄운다.
3. 사용자가 구글 로그인 창에서 로그인을 완료하면 구글에서 access token을 보내준다. (로그인 후 이동한 주소(redirect_uri)에 code라는 부분이 생긴다.)
4. code에 있는 부분을 추출해 백엔드로 보낸다.
5. 백엔드에서 유효한 토큰인지 검증한 후, response로 access token과 가입여부를 보내준다.
6. access token을 localStorage에 저장하고 가입 여부에 따라 회원가입페이지 혹은 메인 페이지로 redirect 시켜준다.

react-oauth/google

react-oauth/google로 간단하게 access token을 받아올 수 있다.

<GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_AUTH_CLIENT_ID}
        onScriptLoadError={() => console.log("실패")}
        onScriptLoadSuccess={() => console.log("성공")}>
	<App />
</GoogleOAuthProvider>