[React Native] Firebase auth와 애플 로그인 연동하는 방법

안녕하세요. 이번 포스팅에는 firebase auth에 apple 로그인을 연동하는 방법을 알아볼게요.

 

2020년 4월부터 IOS 앱에 소셜로그인(구글, 페이스북, 카카오톡, 네이버, 트위터 등) 기능을 추가하려면 "반드시" 애플 로그인도 추가해야합니다. 

 

제가 운영중인 앱(바로보카)도 소셜로그인 기능이 있어서 애플 버튼도 추가해주었습니다. 

 

저는 아래 2개의 공식문서를 보면서 진행했어요. 언제나 그렇듯이, 공식 문서가 있다면 가장 먼저 공식 문서를 읽는게 좋습니다! 

공식문서에 가장 최신 방법이 정확하게 나와있어요 :)

 

 

 

React Native Firebase Apple Login 공식문서 >

 

RN 애플 로그인 라이브러리 >  

 

 

 

---

1. 환경설정

 

1단계 : 선행조건 확인

라이브러리 깃헙 사이트에 애플로그인 버튼 작업을 위한 선행조건들이 적혀있습니다.

 

1. RN 버전이 0.60 이상 (프로젝트 폴더에서 터미널을 켜고 react-native --version 입력하면 확인 가능)

2. RN에서 iOS를 개발하기 위한 환경세팅 (지금까지 시뮬레이터나 Xcode를 잘 사용했다면 2번은 충족하는 것 같습니다.)

3. Xcode의 버전 11이상, iOS 버전 13이상 

4. 만약 위 3가지 조건이 충족되었다면 초기 개발환경 셋업을 시작해주세요.

 

 

Xcode는 앱스토어에서 업데이트가 가능하고, iOS 버전 설정하는 방법은 이 포스팅을 참고해주세요 :)

 

 

 

그럼 위 조건들을 확인했으니 초기 개발환경 세팅을 시작할게요!

 

 

 

 

2단계: Xcode에서 초기환경 설정

이 부분은 캡쳐 화면이 많아서 따로 포스팅을 했습니다! 아래 포스팅을 참고해주세요 :)

 

애플 로그인을 위한 애플 개발자 설정 >

 

 

 

 

 

3단계: 파이어베이스 콘솔에서 애플로그인 활성화

아무것도 입력하지 않고 그냥 활성화해도 됩니다!

 

---

 

 

2. 드디어 개발!

애플 로그인은 실제 아이폰 기기로 테스트하시는걸 추천드립니다!

 

 

1단계: 필요 라이브러리 설치

총 3개의 라이브러리가 필요합니다. 

npm install @react-native-firebase/app
npm install @react-native-firebase/auth
npm install @invertase/react-native-apple-authentication

설치후 cd ios  > pod install

 

 

 

 

2단계: 버튼 구현

React Native Firebase 공식문서에 예시가 정말 잘되어있습니다. 

 

 

1) 버튼을 만들고자하는 스크린에서 아래 코드를 import 해주세요.

import auth from '@react-native-firebase/auth';
import { AppleButton, appleAuth } from '@invertase/react-native-apple-authentication';

 

 

2) 그리고 렌더링하는 부분에서 아래 코드를 통해 버튼을 그려주세요.

시뮬레이터로 실행하면 에러가 발생할 수 있습니다. Xcode로 아이폰을 연결해서 테스트하길 추천드려요!

<AppleButton
      buttonStyle={AppleButton.Style.WHITE}
      buttonType={AppleButton.Type.SIGN_IN}
      style={{
        width: 160,
        height: 45,
      }}
      onPress={() => onAppleButtonPress().then(() => console.log('Apple sign-in complete!'))}
    />

 

 

3) 로그인 기능을 담당하는 함수를 추가해줍니다! 저는 함수형 코드를 쓰기 때문에, 아래 코드를 함수형으로 바꿔서 적용했습니다.

 

async function onAppleButtonPress() {
  // Start the sign-in request
  const appleAuthRequestResponse = await appleAuth.performRequest({
    requestedOperation: appleAuth.Operation.LOGIN,
    requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
  });

  // Ensure Apple returned a user identityToken
  if (!appleAuthRequestResponse.identityToken) {
    throw 'Apple Sign-In failed - no identify token returned';
  }

  // Create a Firebase credential from the response
  const { identityToken, nonce } = appleAuthRequestResponse;
  const appleCredential = auth.AppleAuthProvider.credential(identityToken, nonce);

  // Sign the user in with the credential
  return auth().signInWithCredential(appleCredential);
}

 

 

로그인 버튼 구현 끝!

 

 

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 상태값을 활용해서 페이지를 변경하시면 됩니다 !

 

 

 

로그아웃하는 방법은 로그아웃하는 버튼의 onPress에 auth().signOut()을 넣어주면 됩니다 :)

 

 

 

끝입니다! 고생하셨습니다!!

 

 

---

Google 로그인 연동하는 방법 >