Google Login (firebase)

🔥 1. 사전 작업

react native에서 firebase 셋팅 우선적으로 설치 되어야함

npm install --save @react-native-firebase/app
 
or
 
yarn add @react-native-firebase/app

🔥 2. Android

1. 앱 등록

내가 설치 할 땐 디버그 서명 인증이 있어야 로그인이 됐다 (우선 서명 인증은 나중에 해도 상관없음)

2. google-service.json 추가

android/app/src

3. Firebase SDK 추가

android/app/src/build.gradle

🔥 3. IOS

1. 앱 등록

2. GoogleService-info.plist 추가

/ios 경로
IDE로 직접 넣는것보다 Xcode에서 추가하는게 정신 건강에 이롭다

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key> //  추가
<true/>                           //  추가
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>

3. Firebase SDK 추가

ios/podfile

ios/podfile

cocoapod 초기화 코드 추가
ios/APP_NAME/AppDelegate.mm

🔥 4. 구글 로그인 활성화

npm i @react-native-google-signin/google-signin
 
or
 
yarn add @react-native-google-signin/google-signin

1 firebase 구글 로그인 활성화**

IOS/AOS 사용할 플랫폼 앱 활성화

2. Android 구글 로그인 활성화

cd/android
sha-1 인증서 지문 구하기

 
./gradlew signingReport

디지털 지문 추가

3. IOS 구글 로그인 활성화

URL Schemes에 REVERSED_CLIENT_ID 등록
REVERSED_CLIENT_ID는 firebase연동시 받았던 GoogleService-Info.plist에 있다

🔥 5. RN 코드 작성

webClientId는 google-services.json 파일에 client_type 3의 client_id값이다

function Login({
  navigation,
}: NativeStackScreenProps<RootStackParamList>): JSX.Element {
  const onPressGoogleBtn = async () => {
    try {
      GoogleSignin.configure({
        //webClientId is required if you need offline access
        offlineAccess: true,
        webClientId: `${Config.GOOGLE_CLIENT_ID}`,
 
        scopes: ["profile", "email"],
      });
      await GoogleSignin.hasPlayServices();
      const user = await GoogleSignin.signIn();
      console.log(user);
    } catch (e) {
      console.log("에러", e);
    }
 
    // const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    // const res = await auth().signInWithCredential(googleCredential);
  };
 
  return (
    <GoogleSigninButton
      onPress={onPressGoogleBtn}
      style={defaultButtonStyle.button}
      size={GoogleSigninButton.Size.Wide}
    />
  );
}
 
export default Login;

🔥 6. 결과

참고

IOS는 Xcode에서 작업 하는게 좋다
sdk 추가 시 pod install 필수