[React Native] firebase auth 연동해서 구글 로그인하는 방법

RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중)

아이폰>

‎캐시보카 - 돈버는 영단어 앱테크

 

RN로 만든 주식, 코인 물타기 계산기, 수익률 계산기 앱

안드로이드>

아이폰>

 

---

 

 

안녕하세요.

이번 게시글에서는 파이어베이스를 이용해서 구글로 회원가입 및 로그인을 하는 방법을 알아보겠습니다. 

 

저도 처음에는 너무너무 복잡해보였는데, 쉽습니다! 

10분만에 끝나버렸어요 ㅎㅎ

 

참고로 이번 게시글은 android, ios앱과 파이어베이스를 연동을 모두 마친 상태에서 설명이 진행됩니다. 앱과 firebase프로젝트를 연동하는 사전작업에 대해서는 따로 설명하지 않고 구글 로그인 부분만 설명드리니 참고해주세요 :)

 

---

아래 2개의 공식 문서를 참고하여 진행했습니다. 무엇보다 공식 문서가 가장 정확하고 설명이 잘되어있어요!

 

React Native에서 Firebase의 auth 기능에 대한 공식 문서 >

React Native의 구글 로그인 연동 라이브러리 공식 문서 >

 

그럼 시작하겠습니다!

---

 

1. 필요한 라이브러리 설치

총 3개, 아래 라이브러리들을 설치해주세요. 

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

 

2. firebase에서 구글로그인 활성화

파이어베이스 홈페이지에서 Google 로그인을 활성화시켜주세요.

 

 

 

 

3. 실제 코드 작성

환경 세팅은 끝났습니다. 이제 코드에 적용해볼게요!

 

1) App.js 파일

가장 먼저 실행되는 파일에서 아래 코드들을 추가해주어야 합니다.

따로 변경하지 않으셨다면 App.js 에서 설정해주면 됩니다. (저도 마찬가지로 App.js에서 코드를 추가했어요)

 

우선 구글로그인 라이브러리를 import 해줍니다.

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

 

그리고 아래 코드를 추가해주세요.

이 함수는 google 로그인을 연동하기 위한 환경세팅입니다.

webClientId는 파이어베이스의 홈페이지에서 얻을 수 있습니다. 

const googleSigninConfigure = () => {
  GoogleSignin.configure({
    webClientId:
      '본인의 웹클라이언트 ID',
  })
}

 

- webClidentId 알아내는 방법

파이어베이스 홈페이지에서 authentication을 누르고 sign-in method에서 활성화시킨 구글 버튼을 눌러주세요.

 

그럼 아래 사진처럼 촤르륵 펼쳐질거에요.  웹 SDK 구성을 눌러서 웹클라이언트 ID를 복사하고, 아까 코드에 붙혀넣습니다. 

 

그리고 useEffect에서 위 함수를 호출해줍니다. 

 

2) 로그인하는 화면에서 로그인 버튼 만들기

저희 앱(바로보카)는 비회원도 사용할 수 있기 때문에, 로그인하는 페이지를 따로 만들었습니다. 랜딩페이지에 만드셔도 되고, 원하시는 화면에서 로그인 버튼을 만드시면 됩니다!

 

1단계: auth 와 구글 로그인 라이브러리를 import 해주세요~

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

 

2단계: 아래 코드를 추가해서 로그인 기능을 담당할 함수를 만들어주세요. 

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

 

3단계: 아래 코드를 View에 추가해서 로그인 버튼을 그려주세요~ 그럼 로그인 기능 끝~! 

버튼모양이 마음에 안드시면 그냥 View 태그로 바꾸셔도 됩니다 ㅎㅎ

<GoogleSigninButton onPress={() => onGoogleButtonPress()} />

 

아래는 제 코드와 실제 구현된 화면이에요!

 

 

버튼을 누르면 구글 로그인 팝업이 올라옵니다. 저는 이미 로그인을 한 번 해서, 기록이 남아있네요!

 

 

 

3) 로그인 유무 판별하기

로그인 기능으로만 하면 2번까지만 해도 끝입니다.

유저가 현재 로그인을 했는지 안했는지까지 판별하는 것까지 적어보겠습니다. 

 

1단계: 로그인 유무 판별이 필요한 스크린에서 아래 auth 라이브러리를 import 합니다. 

import auth from '@react-native-firebase/auth'

 

2단계: 로그인 유무를 판별하는 코드를 작성합니다. 

auth 라이브러리의 명령어 중 onAuthStateChanged 는 유저의 로그인 유무를 판별해줍니다. 

이 기능은 공식 문서에 더 정확하게 나와있으니 한 번 읽어보는 걸 추천드려요!

 

로그인 유무를 저장할 상태값을 선언합니다.

 const [isLoadingEnd, setIsLoadingEnd] = useState(false);

저는 따로 함수를 구현하고 useEffect에서 아래 checkLoggedIn 함수를 호출했는데요. 함수구현 없이 바로 useEffect에서 해주어도 무방합니다 ㅎㅎ

const checkLoggedIn = () => {
        auth().onAuthStateChanged((user) => {
            if (user) {
                setLoggedIn(true)
                console.log("loggedIn")
            } else {
                setLoggedIn(false)
                console.log("loggedOut")
            }
        }
        )
    }

 

그리고 저 loggedIn 상태값을 활용해서 페이지를 변경하시면 됩니다 !

 

끝입니다!

 

 

 

제가 서비스중인 '바로보카'앱을 통해 예시를 보여드리겠습니다. 

1) 비회원일 경우 우측 상단에 "로그인을 해주세요" 문구가 표시됩니다.

2) 문구를 클릭하면 로그인 페이지로 넘어가고, 로그인 버튼이 있습니다. 

3) 로그인 버튼을 누르고 구글 로그인을 진행한 후, 다시 홈 화면으로 오면 우측 상단이 "로그인 성공"으로 변경됩니다.

(위에서 선언한 loggedIn 상태값에 따라 변하는 것이죠)

 

 

4) 로그인한 유저가 우측 상단의 "로그인 성공" 버튼을 누르면 로그인 페이지로 이동하지만, 로그아웃버튼이 보입니다.

5) 로그아웃 버튼을 누르면 로그아웃이 됩니다.

6) 다시 홈으로 돌아가면 "로그인을 해주세요"로 바뀌었습니다. 

 

아래는 로그아웃을 하는 코드입니다. onPress에 그냥 이것만 넣어주면 로그아웃이 돼요!

포스팅 최상단에 링크 걸어둔 파이어베이스 공식 문서에 더 자세하고 정확하게 설명되어있으니, 읽어보시는걸 추천드립니다!

auth().signOut()

 

 

 

여기까지 따라오시느라 수고하셨습니다.

 

---

 

 

모든 페이지마다 로그인 유무를 판별하는 코드를 넣고 유저 정보를 관리하는 것은 굉장히 비효율적입니다. 

다시금 상태값 중앙관리가 필요해지는 부분인데요.

다음에는 mobx를 통해서 로그인 정보를 중앙에서 관리하고, 한 번 로그인하면 앱을 껐다 키더라도 계속 로그인이 유지되는 방법을 알아보겠습니다. 

 

mobx 혹은 redux를 아직 쓰고 있지 않다면, 10분만에 mobx를 적용하는 포스팅을 참고해서 꼭 도입해보세요! 정말 편합니다. 

 

 

---

앱 홍보

RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중)

안드로이드>

아이폰>

‎캐시보카 - 돈버는 영단어 앱테크