[React Native] Firebase를 이용한 Android 구글 로그인 - 기능 구현편

hhjj0506·2021년 8월 31일

React Native

목록 보기

3/3

저번편에서는 Firebase의 설정을 끝마쳤고, 이번편에서는 실제로 구글 로그인 기능을 구현할 차례다.

프로젝트 설정

먼저 필요한 패키지들을 설치한다.

npm install @react-native-firebase/app @react-native-firebase/auth @react-native-google-signin/google-signin

app 모듈은 Firebase의 기능들을 사용하기 전에 반드시 깔아야 하는 모듈이고, auth 모듈은 계정 기능을 사용할 수 있게 해준다. 그리고 google-signin은 문자 그대로 React에서 구글 로그인 기능을 쉽게 만들어주는 패키지다.

패키지들을 설치한 이후에는 프로젝트 자체에서의 설정을 해준다.
android 폴더 안에 있는 build.gradle 파일에 들어가 google-services 플러그인을 추가해준다.

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.10'
    // Add me --- /\
  }
}

다음으로는 android/app 경로 안에 있는 build.gradle 파일에서 플러그인을 적용한다. 경로가 비슷하니 헷갈리지 말자.

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // <- Add this line

auth 모듈도 같은 파일 안에 추가해준다.

dependencies {
    // ... other dependencies
    implementation 'com.google.firebase:firebase-auth'
}

로그인 기능 구현

이젠 정말로 기능 구현을 할 차례다.

App.js

App.js에 있는 코드를 모두 지우고 필요한 패키지들을 불러오자.

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

다음으로는 구글 로그인 기능을 이용하기 위한 webClientId를 google-services.json에서 가져와야 한다.
(수정) Client Key를 가리기 위해서 사진을 삭제했습니다.
이 파일 안에서 client/oauth_client/client_id를 가져오면 되는데, client_type이 3인 것을 가져와야 한다.

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

이로써 Google SDK를 사용할 수 있게 됐다.

이제는 로그인 버튼을 눌렀을 때 사용자를 로그인 시키는 기능을 만들어보자.

async function onGoogleButtonPress() {
    const { idToken } = await GoogleSignin.signIn();
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    return auth().signInWithCredential(googleCredential);
}

한줄한줄 살펴보자면
첫번째 줄은 구글에 로그인하면서 유저의 idToken을 가져온다.
두번째 줄은 가져온 유저의 idToken을 이용하여 Google credential을 생성한다.
마지막 줄은 생성된 credential을 이용해 사용자를 앱으로 로그인 시킨다.

다음은 사용자의 접속 유무에 따라서 다른 화면을 보여주는 작업을 해보자.
사용자가 접속 중일때는 앱의 홈 화면을 보여주고 접속 중이 아닐때는 로그인 화면을 보여주려면 현재 사용자의 상태를 판별하는 state가 필요하다.

const [loggedIn, setLoggedIn] = useState(false);

// ... other codes

auth.onAuthStateChanged((user) => {
    if (user) {
    	setLoggedIn(true);
    } else {
    	setLoggedIn(false);
    }
});

Firebase에서 제공하는 onAuthStateChanged function을 통해 유저의 접속 유무를 판별 할 수 있다.

if (loggedIn) {
    return <Home />;
}

return <LoginScreen onGoogleButtonPress={onGoogleButtonPress} />;

로그인 상태에서는 Home 화면을, 아닐때는 LoginScreen 화면을 보인다.
onGoogleButtonPress function의 정보를 LoginScreen으로 보낸다.

이제는 유저에게 보여질 두 화면을 만들 차례다.

LoginScreen.js

screens 폴더를 생성한 뒤 폴더 안에 LoginScreen.js 파일을 생성한다.

import React from 'react';
import { Text, View } from 'react-native';
import { GoogleSigninButton } from '@react-native-google-signin/google-signin'

필요한 모듈들을 가져온다.
다음으로는 구글 로그인 버튼을 이용한 간단한 페이지를 만든다. 스타일

export default function LoginiScreen(props) {
    return (
        <View>
            <Text>Login Page</Text>
            <GoogleSigninButton onPress={props.onGoogleButtonPress} />
        </View>
    );
}

Home.js

screens 폴더 안에 Home.js 파일을 만들고 필요한 모듈들을 불러온다.

import React from 'react';
import { Text, View, Image, Button } from 'react-native';
import auth from '@react-native-firebase/auth';

다음은 로그인이 성공했는지를 확인 하기 위해 로그인한 유저의 정보를 불러와 유저의 프로필 사진, 이름, 이메일을 보인다.
signOut()을 사용한 로그아웃 버튼도 만들어 준다.

export default function Home() {
  const user = auth().currentUser;
  return (
    <View>
      <Text>{user?.displayName}</Text>
      <Text>{user?.email}</Text>
      <Image source={{ uri: user?.photoURL }} />
      <View>
        <Button title="Logout" onPress={() => auth().signOut()} />
      </View>
    </View>
  );
}