구글 소셜로그인(파이어베이스)를 구현하면서 느낀점

user는 2가지 종류가 존재한다.

나는

firebaseUser 와 user

가 같은 유저인줄 알았는데, 그게 아니었다,

한 종류의 유저(firebaseUser)는 내가 구글에 로그인 해서 나 라는 것을 증명하는 값,

다른 종류의 유저(user)는 파이어의 것이 서버에서 유효성 검증을 통과하고 사용되는 유저

진정한 유저는 user다!

...중략...

interface UserCxt {
  user: User;
  setUser: (user: User) => void;
}

...중략....

const UseAuth = ({ children }: { children: React.ReactNode }) => {
  ...중략...

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (firebaseUser) => {
      console.log('firebaseUser', firebaseUser);
      if (firebaseUser) {
        try {
          const token = await firebaseUser.getIdToken();
          defaultHeaders.Authorization = `Bearer ${token}`;
          const res = await fetch('/users/me', {
          method: 'GET',
          headers: defaultHeaders,
          });
          if (res.status === 200) {
         const user = await res.json();
         setUser(user);
         navigate('/home');
      }
        setUser(firebaseUser);
        } catch (error) {
          console.log('At UseAuth.tsx, Error is found', error);
        }
      } else {
        delete defaultHeaders.Authorizations;
        setUser(null);
      }
    });
   ...중략...

파이어베이스 유저가 제대로 찍히는지 알기 위해

setUser(firebaseUser)

를 했지만, 사실

setUser(user) / setUser(user)

가 진짜 유저에 대한 처리 부분이다

진정한 유저는 firebaseUser가 서버를 경유해서 유효성검사를 받은 값(res)가 진짜 유저다

const res = await fetch('/users/me', {
  method: 'GET',
  headers: defaultHeaders,
});

if (res.status === 200) {
    const user = await res.json();
    setUser(user);
    navigate('/home');
}

user는 비어있는 값이고, 이 비어있는 값을 setUser로 set한다!

firebaseUser의 값이 api, '/users/me'에서 유효성 검사를 마친 유저는 setUser(user)를 통해 진정한 유저로 탄생한다!!