React Native Google Login with @react-native-google-signin/google-signin

 

개발 환경

Firebase 사용 안함

Expo 사용 안함

React Native 0.73 이상

@react-native-google-signin/google-signin 라이브러리 사용

https://react-native-google-signin.github.io/

 

Installing

yarn add @react-native-google-signin/google-signin

 

 

Google Cloud 설정

 

https://console.cloud.google.com/

Google 클라우드 플랫폼

 

프로젝트 생성

 

API 선택

 

동의 화면 작성

필수 입력란 작성

 

범위 설정

 

 

남은 프로세스 입력 없이 진행

 

사용자 인증 정보 페이지 이동

 

OAuth 클라이언트 ID 생성

 

 

iOS Client ID 생성

XCode에서 Bundle Identifier 확인 방법

 

필수 입력란 작성

Xcode에서 확인한 Bundle Identifier를 번들 ID로 입력합니다.

 

웹 클라이언트 ID 생성

 

XCode 설정

방금 생성한 iOS OAuth Client ID 선택 후 iOS URL 스키마 복사

 

URL Schema 설정

 

 

로그인 코드 작성

ios clienti id와 web client id 각각 입력합니다.

GoogleSignin.configure({
  webClientId:
    WEB_CLIENT_ID,
  iosClientId:
    IOS_CLIENT_ID,
  offlineAccess: true,
  hostedDomain: '',
});

const loginWithGoogle = async (): Promise<{idToken: string} | null> => {
  await GoogleSignin.hasPlayServices();

  const response = await GoogleSignin.signIn();

  if (!response.idToken) {
    return null;
  }

  return {
    idToken: response.idToken,
  };
};

 

idToken값을 Server에 전송하여 사용자 인증 토큰으로 사용할 수 있습니다.