frontendReactNative

React native firebase 구글 로그인 적용하기

firebase, frontend, google login, native, react, react native, typescript, 리액트 네이티브
Views: 193

시작하기

firebase 적용포스트를 통해 설정을 마친 상태여야 합니다.

라이브러리 설치

1
@react-native-community/google-signin

설치가 완료되면 초기화시키는 작업이 필요합니다.

App.jsx
1
2
3
4
5
6
7
8
9
10
11
import { GoogleSignin } from '@react-native-community/google-signin';

const App = () => {
  useEffect(() => {
    const socialGoogleConfigure = async () => {
      await GoogleSignin.configure({
        webClientId: GOOGLE_WEB_CLIENT_ID
      });
    };
    socialGoogleConfigure();
  }, []);

xcode의 GoogleService-info.plist를 열어서 clientId를 찾아서 webClientId 부분에 넣으면 됩니다.
client_id.apps.googleusercontent.com과 같은 형식으로 생겼습니다.

GoogleSignInCustomButton.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from "react";
import { Button } from "react-native";
import auth from "@react-native-firebase/auth";
import { GoogleSignin } from "@react-native-community/google-signin";

const GoogleSignInCustomButton = () => {
  const onGoogleButtonPress = async () => {
    const { idToken } = await GoogleSignin.signIn();
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    return auth().signInWithCredential(googleCredential);
  };
  return <Button title="구글로그인" onPress={onGoogleButtonPress} />;
};

export default GoogleSignInCustomButton;

이것으로 로그인 기능을 간단하게 구현해보았습니다.

에러

ios에서 추가로 설정해야하는 부분이 있습니다.
xcode에서 프로젝트를 선택하고 info탭으로 이동하면 맨 하단에 URL types가 있습니다.

그 부분에서 GoogleService-Info.plist파일의 REVERSED_CLIENT_ID부분을 복사해서 url스키마에 붙여넣기 합니다.

스키마 추가

자세한 내용은 구글 ios 로그인 공식 사이트를 참고해주시면 됩니다.

Share