[Next] React 구글 로그인 [react-google-login] deprecated 관련 Error, [@react-oauth/google@latest] 적용

로그인 방식에 구글 계정으로 로그인을 추가하기 위해 

 

google cloud platform에서 Client ID를 발급받고, react-google-login 라이브러리를 사용하여 access token을 받아오던 중 예상하지 못한 에러가 발생했다. 

 

위 과정까지는 https://jforj.tistory.com/239 블로그를 참고하였다. 

 

You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated.

라는 내용의 에러 메세지로, 새로운 라이브러리를 찾아 적용하기 위해 @react-oauth/google@latest를 설치하였다.

 

npm i @react-oauth/google@latest

 

이후 

import {GoogleOAuthProvider} from '@react-oauth/google'
import {GoogleLogin} from '@react-oauth/google'

 

해준 뒤,

<GoogleLogin
  onSuccess={credentialResponse => {
    console.log(credentialResponse);
  }}
  onError={() => {
    console.log('Login Failed');
  }}
/>;

 

해당 컴포넌트를 아래와 같이 감싸주면 된다. ClientId에는 발급받은 클라이언트 아이디를 넣어준다.

<GoogleOAuthProvider clientId="<your_client_id>">...</GoogleOAuthProvider>;

 

credentialResponse에 들어있는 access_token을 API로 양식에 맞게 보내면 로그인할 수 있다. 

 

위와 같은 방식으로 적용했을 경우 디폴트로 디자인이 적용된다. 만약 디자인이 적용되는것을 원하지 않을경우 

 

useGoogleLogin Hook을 사용하면 된다.

 

마찬가지로 

 

import {useGoogleLogin} from '@react-oauth/google'

import 해준 뒤, 

 

  const login = useGoogleLogin({
    onSuccess: (tokenResponse) => handleSuccessGoogleLogin(tokenResponse),
    onError: (Error) => toast.error(`${Error}`)
  })

위와 같이 login 함수를 만들어준다. 

 

   <GoogleLoginButtons onClick={() => login()}>
          <Icon src="/images/icons/google_icon" extension="png" size={['22px', '22px']} />
          {t('social.facebook')}
        </GoogleLoginButtons>

이후 onClick 함수에 만들어준 login 함수를 연결해주면 된다. 

 

이 방식으로 구글 로그인을 구현할경우 App 최상단에서 

 

children 컴포넌트를 아래와 같이 감싸주어야 한다.

<GoogleOAuthProvider clientId="<your_client_id>">...</GoogleOAuthProvider>;