리엑트 네이티브 IOS Firebase 사용해서 구글 로그인 구현하기 Part 1

Photo by Brett Jordan on Unsplash

목표 :

1. Typescript + React Native project 생성 후 실행한다.
2. Firebase 계정을 생성하고 앱을 생성한다.
3. Google 계정으로 로그인 기능을 구현한다.

Google 로그인을 구현하는 방법은 몇 가지가 있는 것 같은데 가장 많이 사용하는 방법은 1.Firebase 2.Google에서 OAuth client ID를 사용한다.

여기서는 빠르고 쉬운 Firebase를 사용하겠다.

React native 프로젝트 생성 & 설정

먼저 typescript기반 react native프로젝트를 생성한다. Node version은 14로 했다. 프로젝트 이름은 RNTestProject로 했다.

npx react-native init RNTestProject --template react-native-template-typescript

Android환경 변수를 설정한다. 나는 ~/.zshenv에 추가했다.

아니면 android폴더 아래 local.properties파일을 추가해도 된다.

sdk.dir=${HOME}/Library/Android/sdk

프로젝트 실행을 해보자

npm start

프로젝트가 실행되면 android는 android studio에서 AVD — Android Virtual Device를 이용하고, ios는 simulator를 이용해서 가상 핸드폰을 띄울 수 있다.

ANDROID — Android Studio에서 virtual device띄우기

Android Studio를 다운로드 후 실행한다. Configure → AVD Manager 선택

리스트가 열리고 device 한 개가 이미 등록되어 있다. Play 버튼을 클릭하면 device가 열린다.

npm start로 프로젝트가 올라가져 있는 상태에서 새로운 터미널에 android를 실행한다. 아래 명령어를 실행하면 된다.

npx react-native run-android

이렇게 뜬다면 성공이다 ~!!

IOS — Simulator 사용하기

맥북을 사용하고 있는데 모르고 Big Sur로 업데이트했다가 낭패보는 중.. 버그가 너무 많다^^ 그리고 xcode 업데이트 너무 느리다. 이 과정을 하기 전 xcode 업데이트 꼭 하세요! 가장 중요한 부분!!

맥을 사용한다면 ios는 바로 실행하면 simulator가 뜬다.

npx react-native run-ios

Google 로그인 구현하기

그럼 이제 Google로그인을 구현해봐야지… 먼저 구글 로그인 라이브러리 install한다.

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

App.tsx에 <Section title=”Step One”> 안에 내용을 지우고 아래를 추가한다 (Google 로그인 버튼과 로그인 됐을 때 Sign out 이 보인다.)

App.tsx 아래 style 부분에 아래를 추가한다.

그리고 App 함수 안에 아래 코드를 추가한다.

Firebase계정 생성 및 ios, android 앱 생성

Firebase 계정을 생성한다. 그리고 홈으로 들어가면 프로젝트를 생성할 수 있다.

프로젝트 이름을 입력하고 continue

default account for firebase를 선택하고 Create project 버튼을 클릭하면 프로젝트가 생성된다.

프로젝트 setting을 해야한다. Support Email 설정한다.

Project settings 클릭 후 Support email을 설정해준다.

Authentication 쪽으로 넘어가서 Sign-in method에 Google이 Disable 되어있을 것이다. 이걸 Enabled로 바꾸고 저장한다.

다시 구글로 들어가서 Web SDK Configuration 아래 Web Client ID가 생성됐을 것이다. 이걸 복사한다.

다시 react-native 프로젝트로 돌아가서 keys.js 파일을 만들고 아래를 추가한다.

export const WEB_CLIENT_ID = '위에서 복사한 web client id를 쓴다'

이렇게 Firebase 프로젝트 setting은 끝났고 ios, 와 android 앱을 따로 생성해야 한다.

Firebase IOS APP 생성하기

생성한 프로젝트로 들어가서 IOS를 선택하고 이름을 입력한다. (IOS에서 이름은 딱히 중요하지 않은듯)

GoogleService-Info.plist 파일을 다운로드 받고 프로젝트에 경로를 잘 보고 이동한다.

/ios 디렉토리 안에서 pod install 을 실행한다. 뭔가 install 된다.

npx react-native run-ios 다시 실행한다. 에러가 난다. 설정이 아직 안 끝났다.

xcode에서 project.xcworkspace 열고 build phases > copy bundle resource >+ 버튼 > add other에서 아까 위에서 프로젝트 안에 이동한 GoogleService-Info.plist를 선택한다.

copy bundle resource가 이제 3개가 된다.

그리고 다시 npx react-native run-ios 실행하면 뭐가 뜨긴 한다. Sign in with Google 버튼을 클릭하면 다시 에러가 난다. 아직 안 끝났다.

Info 탭 > URL Types > + 버튼 클릭

Identifier는 아까 위에서 사용했던 ios bundle id를 사용하고 URL Schemas 는 GoogleService-Info.plist 안에 REVERSED_CLIENT_ID를 사용한다.

그리고 다시 npx react-native run-ios

구글 로그인이 잘 된다!!

IOS 는 그래도 쉬운 편이였다. Android는 정말 ^^!

포스트가 너무 길어져서 Android는 다음 포스트에서 이어서 써야겠다.