chaehaeun/cocotube

유튜브 API를 활용한 클론 코딩 프로젝트

Hi! I'm Chae HaEun🍭

💻 Tech Stack

⚒️ Tools

✏️ Studying

cocotube's Issues

로그인 확인 모달 버그

💥 문제 상황

import { useEffect, useState } from 'react'
import { authService } from '@/firebase-config'
import { onAuthStateChanged, User } from 'firebase/auth'

const useAuth = () => {
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(authService, authUser => {
      if (authUser) {
        setUser(authUser)
      } else {
        setUser(null)
      }
    })

    return () => unsubscribe()
  }, [])

  return { user }
}

export default useAuth

useAuth 커스텀 훅을 활용해 로그인을 확인하고,

 useEffect(() => {
    if (!user) {
      openModal('로그인이 필요한 페이지입니다.', () => navigate('/signin'))
    }
  }, [user])

SignUpCompletion 컴포넌트에서 로그인이 되어있지 않은 경우 signin페이지로 이동하게 하는 코드를 작성.

하지만 로그인 확인 이전 디폴트 상태인 로그인 x 상태가 먼저 감지되어 로그인이 되어있든 아니든 모달이 뜨며 강제로 로그인 페이지로 이동되는 현상 발생

💡 해결 방법

import { useEffect, useState } from 'react';
import { authService } from '@/firebase-config';
import { onAuthStateChanged, User } from 'firebase/auth';

const useAuth = () => {
  const [user, setUser] = useState<User | null>(null);
  const [isAuthChecked, setIsAuthChecked] = useState<boolean>(false);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(authService, authUser => {
      setUser(authUser);
      setIsAuthChecked(true);
    });

    return () => unsubscribe();
  }, []);

  return { user, isAuthChecked };
}

export default useAuth;

isAuthChecked라는 상태를 추가하여 로그인 상태가 체크 되었는지 여부를 추적

 useEffect(() => {
    if (isAuthChecked && !user) { // 로그인 상태가 체크되었고 로그인되어 있지 않다면 모달 표시
      openModal('로그인이 필요한 페이지입니다.', () => navigate('/signin'));
    }
  }, [user, isAuthChecked]);

그리고 isAuthChecked 상태가 true일 때만 컴포넌트 내용을 렌더링하도록 함