React 구글 로그인

• Google OAuth 2.0 클라이언트 ID 생성 (검색하면 나오니 생략)

• react-google-login 라이브러리 사용 시 오류 발생

//오류 발생하는 코드
import { GoogleLogin } from 'react-google-login';

const GoogleLoginButton = () => {
  return (
    <GoogleLogin
      clientId='클라이언트 ID'
      onSuccess={(res) => {
        console.log(res);
      }}
      onFailure={(err) => {
        console.log(err);
      }}
      cookiePolicy={'single_host_origin'}
    />
  );
};

export default GoogleLoginButton;

error: "idpiframe_initialization_failed"
details: "You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the Migration Guide for more information."

위와 관련하여 해당 깃허브 이슈 참고

• @react-oauth/googl 을 사용하기로 결정

1. 설치

$ npm install @react-oauth/google@latest

# or

$ yarn add @react-oauth/google@latest

2. (중요) 승인된 자바스크립트 원본 URL에 'http://localhost' 와 'http://localhost:<port_number>' 둘 다 입력해야함 (로컬 테스트 및 개발을 위해)

3. 코드 예시

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

const GoogleLoginButton = () => {
  return (
    <GoogleOAuthProvider clientId='클라이언트 ID'>
      <GoogleLogin
        onSuccess={(credentialResponse) => {
          console.log(credentialResponse);
        }}
        onError={() => {
          console.log('Login Failed');
        }}
      />
    </GoogleOAuthProvider>
  );
};

export default GoogleLoginButton;

4. GoogleLoginButton 컴포넌트 호출하여 구글 로그인 가능
   

//onSuccess 시 Console 출력 정보
{ clientId: '클라이언트 ID',
  credential: 'eyJhbGciOiJSUzI...',
  select_by: 'btn'}

끝