[React Native] Firebase auth 로그인 유무 판별하는 방법

안녕하세요.

 

이번 포스팅에서는 유저가 Firebase auth를 이용해서 로그인을 했는지, 로그인 상태를 확인하는 방법을 알아보겠습니다.

 

특히, 로그인 상태를 여러 스크린에서 확인해야하는 경우에는 mobx를 이용해서 중앙에서 상태값을 관리해줄 필요가 있습니다. 본 포스팅은 mobx를 이용해서 로그인 상태를 앱 전역에서 확인하는 방법을 알아보도록 하겠습니다. 

 

Firebase auth를 도입하지 않으신 분은 여기 포스트를, mobx를 도입하지 않으신 분은 여기 포스트를 참고해주세요. 

 

mobx를 도입했다는 가정 하에 진행해보도록 하겠습니다. 

 

 

 

---

 

 

1. userStore.js 파일 생성

Store폴더에 userStore.js 파일을 만들어주세요. 이 파일에서 유저와 관련된 상태값들을 관리할 예정입니다. 

 

흰색박스는 실제 코드라 가렸습니다.

 

2. userStore.js 코드 작성

userStore.js파일에 아래 코드를 그대로 붙혀넣어주세요.

mobx도입 포스팅을 다시 읽어보니 ---store.js 파일의 코드 설명을 안적었었네요.

import { observable, runInAction } from 'mobx';

const createStore = () => {

  const userStore = {
    userInfo: observable.box(),

    changeUserInfo: (data) => runInAction(() => userStore.userInfo.set(data)),

  };

  return userStore;
};

const store = createStore();
export default store;

 

코드 설명을 드리겠습니다. 

 

import한 observable와 runInAction : observable은 내가 관리해야할 변수에 대해 붙혀주는 선언입니다. runInAction은 상태값을 변화시킬 함수에 대해 붙혀주는 선언입니다. mobx를 사용하는 방법은 여러가지가 있는데요. 저는 위 두가지 선언을 통해서 변수와 함수를 정의합니다.

 

userInfo: observable.box()

=> 이 부분은 내가 사용할 변수를 정의하는 코드입니다. 저는 나중에 유저의 id나 닉네임도 넣을 것이기 때문에 userInfo라고 변수명을 정했습니다. 변수명은 마음대로 정하셔도 됩니다. (ex. userStatus: observable.box())

observable.box()는 위의 설명과 같이 내가 관리할 변수에 대해 선언해주는 것입니다. box() 의 괄호 안에 초기값을 설정해줄 수 있습니다. 저는 아무것도 넣지 않았기 때문에 초기값은 null입니다. (useState()와 비슷하다고 보시면 됩니다.)

 

changeUserInfo: (data) => runInAction(()=> userStore.userInfo.set(data))

=> 상태값을 변화시키는 함수 부분입니다. 마찬가지로 앞의 changeUserInfo의 이름은 마음대로 정해도 됩니다. 그런데, 나중에 가면 하나의 store에 여러 가지 함수를 넣게 되기 때문에 규칙을 정해서 통일시켜주는 것이 좋습니다. 저는 change + 변화시킬 변수명으로 정했습니다. 이 함수에 들어온 data를 runInAction 함수를 통해서 userStore에 있는 userInfo의 값을 data로 변경시켜주는 로직입니다. 

 

 

 

이제 mobx 설정 부분은 끝났습니다. 

 

 

 

3. 로그인 상태 확인

이제 로그인 상태를 확인하는 코드를 작성해보겠습니다. 

 

저는 앱을 시작할 때 App.js 스크린과 로그인할 때 Login.js 스크린 2곳에서 로그인 상태를 확인해주었습니다.

위 2개의 스크린에서 로그인 상태를 확인하고, userStore.js의 userInfo에 저장하면 다른 스크린에서는 로그인 상태를 다시 확인할 필요 없이 userInfo만으로 로그인 상태를 불러올 수 있습니다. 

 

아래 코드는 App.js에 적용한 코드입니다.

 

3.1) firebase auth의 mobx를 import합니다. 

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

import useRootData from 'hooks/useRootData';
import Store from 'Store';

 

3.2) userStore.js의 userInfo와 changeUserInfo를 불러옵니다. 

아래 코드는 useEffect선언하는 위치와 같은 곳에서 선언해주면 됩니다. 

const {
    // mobx
    userInfo,
    
    changeUserInfo,
    
  } = useRootData(({ userStore }) => ({
    userInfo: userStore.userInfo.get(),

    changeUserInfo: userStore.changeUserInfo,
  }));

 

 

3.3) 로그인 상태를 판별하는 함수를 작성합니다. 

const onAuthStateChanged = (user) => {
    if (user) {
      console.log('current: log in');
      changeUserInfo(user)
    } else {
      // 로그아웃
      console.log('current: log out');
      changeUserInfo(null);
    }
  };

changeUserInfo()함수의 파라미터로 user값을 넣었습니다.

그럼 userInfo의 값이 user로 변하게 됩니다. (user안에는 이메일, id, token등의 값이 들어갑니다.)

만약 로그아웃한 상태라면 null값을 주어 userInfo의 값을 null로 수정합니다. 

 

3.4) useEffect로 3.3의 함수를 호출합니다. 

useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);

 

 

Firebase의 auth는 앱을 완전히 껐다가 키더라도 로그인 상태가 유지됩니다. 즉, 로그아웃 버튼을 누르지 않는 이상 로그아웃이 되지 않습니다. 

 

위의 3.1 ~ 3.4 코드를 LogIn.js 파일에도 똑같이 적용해줍니다. 그럼, 로그인할 때 곧바로 userInfo의 값을 변경해줄 수 있습니다. 

 

 

4. userInfo를 이용해서 다른 스크린에서 로그인 상태 불러오기

로그인 상태를 중앙에 저장했으니 다른 스크린에서 mobx를 이용해서 불러오겠습니다. 

 

유저의 로그인 상태값이 필요한 스크린에서 아래 코드를 import합니다.

 

import useRootData from 'hooks/useRootData';

 

그리고 userStore.js의 userInfo를 불러옵니다.

 

const {
    // mobx
    userInfo,
        
  } = useRootData(({ userStore }) => ({
    userInfo: userStore.userInfo.get(),

  }));

 

그럼 이 스크린에서 userInfo를 이용할 수 있습니다. 

 

예를 들어, useEffect를 이용해서 유저의 로그인 상태 log값을 찍어보겠습니다. 

 

  useEffect(() => {
    console.log(userInfo);
  });

유저가 로그인했다면 그에 맞는 값들이 찍히고, 로그인 하지 않은 상태라면 null 값이 찍힐겁니다. 

 

 

 

수고하셨습니다!