React Native에서 구글 로그인 하는 방법

By everydayvignettes 9:39 am

이 포스팅은 React Native 환경에서 Firebase Authentication을 사용하여 소셜 로그인을 하는 방법을 다루고 있습니다.

구글 로그인 설정하기

– 패키지 설치

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

– 설정 초기화

import auth from '@react-native-firebase/auth';
import {GoogleSignin} from '@react-native-google-signin/google-signin';

useEffect(() => {
  GoogleSignin.configure({
    webClientId: 'XXX.apps.googleusercontent.com',
  });
}, [])

– 디지털 지문 (Firebase/Android)

파이어베이스에 android 프로젝트 추가 시, 입력해야하는 디지털 지문을 출력하는 명령어입니다. 안드로이드 스튜디오에서 생성한 키 파일이 있다는 가정 하에 해당 명령어를 실행합니다.

keytool -list -v -keystore ./android/app/<keyfile>

– URL 스키마 (Firebase/iOS)

파이어베이스에 ios/android/web 프로젝트 추가 후, 제공되는 client_id 값입니다.

<key>CFBundleURLSchemes</key>
<array>
  <string>com.googleusercontent.apps.XXX</string>
</array>

구글 로그인 함수 만들기

import auth from '@react-native-firebase/auth';
import {GoogleSignin} from '@react-native-google-signin/google-signin';

export async function signInWithGoogle() {
  try {
    await GoogleSignin.hasPlayServices({
      showPlayServicesUpdateDialog: true,
    });
    const userInfo = await GoogleSignin.signIn();
    const googleCredential = auth.GoogleAuthProvider.credential(
      userInfo.idToken,
    );
    const userCredential = await auth().signInWithCredential(googleCredential);
    return userCredential.user;
  } catch (e) {
    console.log(e);
  }
  return response;
}

– 구글 로그인이 가능한지 확인

import auth from '@react-native-firebase/auth';
import {GoogleSignin} from '@react-native-google-signin/google-signin';

await GoogleSignin.hasPlayServices({
  showPlayServicesUpdateDialog: true,
});

– 구글 로그인 시도

import auth from '@react-native-firebase/auth';
import {GoogleSignin} from '@react-native-google-signin/google-signin';

const signedUser = await GoogleSignin.signIn();

– 구글 로그인 인증 토큰 발급

import auth from '@react-native-firebase/auth';
import {GoogleSignin} from '@react-native-google-signin/google-signin';

const googleCredential = auth.GoogleAuthProvider.credential(
  signedUser.idToken,
);

– 사용자 정보 획득

import auth from '@react-native-firebase/auth';
import {GoogleSignin} from '@react-native-google-signin/google-signin';

const userCredential = await auth().signInWithCredential(googleCredential);

구글 로그인 후, 사용자 데이터 저장하기

– 패키지 설치

yarn add recoil
yarn add react-native-mmkv

– 사용자 상태값 만들기

export const userState = atom({
  key: 'userState',
  default: null,
});

– 사용자 데이터 저장하기

import {MMKV} from 'react-native-mmkv';
import {useRecoilState} from 'recoil';
import {userState} from '@/stores/user';

const storage = new MMKV();

const XXXScreen = () => {
  const [user, setUser] = useRecoilState(userState);

  const handlePressSignInWithGoogle = () => {
    const {data: signedUser} = await signInWithGoogle();
    storage.set('user', JSON.stringify(signedUser));
    setUser(signedUser);
  }

  return (
    <TouchableOpacity onPress={handlePressSignInWithGoogle}>
      <Text>Sign in with Google</Text>
    </TouchableOpacity>
  );
}

구글 로그인 후, 로그아웃 하기

– 구글 로그아웃 / 파이어베이스 로그아웃

import auth from '@react-native-firebase/auth';
import {GoogleSignin} from '@react-native-google-signin/google-signin';

await GoogleSignin.signOut();
await auth().signOut();