React) 구글 로그인 - @react-oauth/google

npm install jwt-decode

최근 구글 로그인을 적용할 순간이 와서 여지없이 reat-google-login 라이브러리를 적용하려했다.

그러나 3월을 마지막으로 더이상 지원을 하지 않는다 해서 다른 방법을 찾아야 했다.

공식문서를 보며 하나하나 코드를 적용하면 되겠지만, 나는 무척 귀찮았다.

그래서 구글링을 했고 대부분의 react-google-login 대신 @react-oauth/google라이브러리를 찾았다.

 

구글에 널려있는 react-google-login 라이브러리 설명 블로그 와는 다르게 @react-oauth/google라이브러리는 이를 다룬 블로그가 거의 없었기에 직접 포스팅하기로 생각했다.

 

우선 설치해야 할 라이브러리리는 두개다.

npm i @react-oauth/google

npm install jwt-decode

 

사용 방법은 매우 간단하다.

import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';
import jwt_decode from 'jwt-decode';

      <GoogleOAuthProvider clientId={'U R Cliend ID'}>
        <GoogleLogin
          onSuccess={onSuccess}
          onError={() => {
            console.log('Login Failed');
          }}
        />
      </GoogleOAuthProvider>

리덕스와 같이 provider를 컨테이너로 감싸고 안에 <GoogleLogin/>을 넣으면 된다.

 

onSuccess의 반환값을 보자.

clientId와 credential, 그리고 select_by를 얻어왔다.

 

그래서 뭐.

 

나도 이부분에서 딱 이런 생각이 들었다.

 

그러나 내가 정말 원하는 것은 credential이 안에 모두 들어있었다.

credential은 사용자 정보를 제이슨 웹 토큰(JWT)로 변환했고 이를 디코드 시키면 우리가 원하는 정보가 나온다.

예를들면 이런 식.

    const { credential } = googleUser;
    const userInfo: userInfoTypes = jwt_decode(credential);