Front-End

[Firebase] Auth undefined 문제 해결방법

SeanK 2023. 3. 15. 22:49

안녕하세요, 개발자 Sean입니다. 

 

사이드 프로젝트로 만드는 어플에서 자꾸만 원인 모를 에러가 발생해 퇴근 후 원인을 분석하다 

해결방법을 발견해 관련해서 포스팅하려고 합니다. 

 

현재 프로젝트에서 typescript와 firebase의 auth를 활용해 프론트엔드를 만들고 있는데요, 

이 둘 조합해서 사용하는게 여간 까다로운 일이 아니네요. (아마... 제 실력이 떨어져서겠죠..?ㅎㅎ;;)

우선 토큰을 가져오기 위해 auth.currentUser.getIdToken()를 호출하면 타입에러가 발생합니다. 

이유는 auth.currentUser 안에 getIdToken() 메서드가 있을 수도 있고 없을 수도 있기 때문입니다. 자세히 이해하지 못했지만 auth 객체가 호출될 때 중간단계(초기화 등)를 거치기 때문이라고 생각됩니다. (다큐먼트에 아쉽게도 상세한 설명이 되어있지 않아 대충 이해만 했습니다.) 따라서 토큰을 가져와 api 요청을 하는 코드를 아래와 같이 순서성을 보장하도록 작성했습니다. 

 

export const getDeck = async (params: 
  {
    deckId: string, 
    opened?: boolean,
  }) => {
  
  const token = await auth.currentUser?.getIdToken().then((token)=> token)

  try {
    const response = await axios({
      method: 'get',
      url: `${process.env.REACT_APP_SERVER}/decks/${params.deckId}`,
      params: {
        opened: params.opened,
      },
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`,
      }
    })

    return response;
  } catch (e) {
    console.error(e);
  }
}

그리고 아래와 같이 요청을 하면,,,

useEffect(() => {
  await getDeck({deckId: deckId, opened: true,})
  }, []);

작동이 잘 됩니다. 

 

단 페이지를 새로고침 하면 token이 undefined되어 api 요청에 실패하게 됩니다. 

왜 다른 루트를 통해 페이지에 진입하면 에러가 없다가 새로고침하면 이런 문제가 발생하는 걸까요? 

안타깝게도 관련해서는 더 조사가 필요할 듯 보입니다. 

 

여하튼 이 문제를 해결하기 위해 저는 onAuthStateChanged를 이용했습니다. 

위 api를 이용해 auth가 중간단계가 아닐 때 api 요청을 호출해 순서를 보장받는 방식이죠. 

 

아래는 코드입니다.

  useEffect(() => {
    onAuthStateChanged(auth, user => {
		await getDeck({deckId: deckId, opened: true,})
    })
  }, []);

관련 firebase 문서는 아래와 같습니다. 

 

https://firebase.google.com/docs/auth/web/manage-users?hl=ko 

 

Firebase에서 사용자 관리하기

의견 보내기 Firebase에서 사용자 관리하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 사용자 생성하기 Firebase 프로젝트에서 신규 사용자를 생성할 때는 c

firebase.google.com