[FN] 로그인 상태 유지

회원가입과 로그인에 관련된 글은 아래 글을 참고해 주세요.

https://codingco.tistory.com/14

[FN] React Native 회원가입 로그인 개발 일지 - Firebase Authentication

 

1. 로그인 상태 유지

앱을 매번 실행 할때마다 로그인을 해야 한다면 사용자 입장에서는 정말 불편할 것이다.

개발중인 앱은 처음 실행할때 SplashScreen 이 나타났다가 로그인 화면으로 넘어가는데 SplashScreen에서 로그인 상태를 체크하도록 하였다

 

이전 게시물에서 로그인 관련 함수들을 정의해둔 authService.js 코드에서 subscribeAuth 를 불러와서 사용할 것이다.

// 앱을 가동할 때, 로그인 상태가 변경될 때 사용자 정보를 받아옴
export function subscribeAuth(callback) {
  return auth().onAuthStateChanged(callback);
}

 

나타났다가 사라지는 화면이므로 타이머는 3초로 설정하고 3초후에 해당하는 화면으로 넘어가도록 하였다

subscribeAuth 함수는 Firebase로부터 사용자의 인증 상태를 받아온다. user가 존재하면 사용자가 로그인된 상태이므로 Home 화면으로 이동하고, 그렇지 않으면 로그인되지 않은 상태이므로 Login 화면으로 이동한다.

const SplashScreen = ({ navigation }: any) => {
  useEffect(() => {
    const timer = setTimeout(() => {
      const unsubscribe = subscribeAuth((user: FirebaseAuthTypes.User | null) => {
        if (user) {
          navigation.replace('Home'); 
        } else {
          navigation.replace('Login'); 
        }
      });

      return () => unsubscribe();
    }, 3000);

    return () => clearTimeout(timer);
  }, [navigation]);

 

테스트 결과 로그인하고 앱을 종료했다가 다시 키면 로그인된 상태로 바로 Home 화면으로 진입한다.