[댕누비/React] Firestore 인증 상태 유지 + 사용자 문서 생성 하는 법

firebase+react로 웹 서비스를 만들며, 로그인은 분명히 됐는데 사용자의 정보가 UI에 반영되지 않거나, 새로고침을 하면
로그아웃된 것처럼 보이는 문제가 발생했습니다. 이 문제는 사용자에게 직접적인 불편을 주는 치명적인 UX 문제라는 점! 이번 글에서는 이 문제의 원인과 실제로 어떻게 해결했는지를 정리해보려 합니다.

문제 상황

`user?.nickname` 등 속성이 `undefined` 상태
새로고침하면 로그인 정보가 사라지고 다시 로그인하라고 나옴
Google 로그인은 되지만, Firestore에 사용자 문서가 없음

해결 방법

1. 인증 유지 설정

Firebase는 기본적으로 세션 기반 인증을 사용합니다.
따라서 새로고침 후 로그인 정보가 날아가지 않도록, 지속성 설정이 필요합니다.

await setPersistence(auth, browserLocalPersistence);
await signInWithEmailAndPassword(auth, email, password);

browserLocalPersistence를 사용하면 브라우저 로컬 스토리지에 로그인 정보가 저장되어 새로고침 후에도 유지됩니다.

2. 로그인 상태 추적 및 사용자 문서 생성

React에서는 앱이 초기 로딩될 때 로그인 상태를 안전하게 추적해야 하며,
로그인 후에는 Firestore에 사용자 정보가 저장되어 있는지도 반드시 확인해야 합니다.

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
    if (firebaseUser) {
      const userRef = doc(db, "users", firebaseUser.uid);
      const docSnap = await getDoc(userRef);
      if (!docSnap.exists()) {
        await setDoc(userRef, {
          email: firebaseUser.email,
          nickname: firebaseUser.displayName ?? "",
          icon: 0,
          favorites: [],
          providerData: firebaseUser.providerData,
        });
      }
      setUser({ id: firebaseUser.uid, ...docSnap.data() });
    } else {
      setUser(null);
    }
    setInitializing(false);
  });
  return () => unsubscribe();
}, []);

3. 초기화 완료 후에만 UI 렌더링

인증 상태 확인이 끝나기 전에 UI가 먼저 렌더링되면 에러가 발생할 수 있습니다.
따라서 initializing 상태값을 두고, 완료된 후에만 라우팅을 진행합니다.

if (initializing) return <Loading />;
return <Routes>{/* 실제 라우팅 */}</Routes>;

📝 정리

로그인 유지 흐름 요약

[1] 로그인 요청
      ↓
[2] setPersistence(browserLocalPersistence)
      ↓
[3] 로그인 성공 (signInWithEmailAndPassword / signInWithPopup)
      ↓
[4] onAuthStateChanged → 로그인 상태 감지
      ↓
[5] Firestore 사용자 문서 조회 or 자동 생성
      ↓
[6] user 상태를 Context로 앱 전역에 반영

Firebase Auth와 Firestore의 역할 차이

구분	역할
Firebase Auth	로그인/회원가입 등 인증만 담당
Firestore	사용자 정보(닉네임, 찜 목록 등)는 별도로 저장해야 함

즉, 로그인만 성공했다고 해서 사용자 데이터가 준비된 것은 아닙니다.
Firestore 문서를 직접 생성하거나 불러오는 작업이 필수입니다.

사용한 Firebase 함수 정리

아래 함수들은 모두 Firebase(백엔드 서비스 플랫폼) 에서 제공하는 API입니다.
인증, 사용자 상태 추적, 데이터 저장 등 전통적인 백엔드의 기능을 프론트엔드에서 간편하게 호출할 수 있게 해줍니다.

함수	소속 모듈	기능 요약
setPersistence()	firebase/auth	로그인 지속성(로컬/세션/메모리) 설정
onAuthStateChanged()	firebase/auth	로그인 상태 감지 리스너
setDoc()	firebase/firestore	Firestore 문서를 지정된 ID로 생성/덮어쓰기

실제로 서비스를 만들다 보니, 단순히 로그인만 처리하는 걸로는 부족하다는 걸 새삼 느꼈습니다. 데이터 흐름과 상태 관리 전체를 제어하는 구조가 중요했어요. 인증 후 사용자 정보를 Firestore에 저장하고, 로그인 상태를 추적하며 초기화 여부에 따라 UI를 제어하는 전체 흐름을 직접 구현해보며 많은 걸 배웠습니다.

이번에는 Firebase에서 제공하는 함수를 사용했지만, 향후 다른 백엔드 DB나 인증 시스템을 사용할 때도 이 경험이 큰 도움이 될 것 같습니다. 다음에 같은 기능을 다시 만든다면, 이번보다 훨씬 더 수월하게, 더 안정적으로 구현할 수 있으리라 믿습니다. 😂