[TIL] 2024.03.21(목) supabase로 로그인한 유저 정보 전역 관리하기

supabase를 이용해서 로그인 기능을 구현했는데, 로그인할 때 등록한 user의 email, nickname, profileImage 를 다른 팀원분들도 사용할 수 있게 전역상태로 관리하기로 했다.

전역 상태 관리로 zustand를 사용하였다.

zustand 공식문서 확인 https://zustand-demo.pmnd.rs/

1. store를 생성하여 전역으로 관리할 데이터를 설정해준다.

/* app > _store > authStore.tsx */
export const useUserInfoStore = create<UserInfo>()((set) => ({
  email: null,
  nickname: null,
  profileImage: null,
  setUser: (userInfo) => set(userInfo),
}));

email, nickname, profileImage의 경우 초기 상태(= 즉, 로그인 하지 않은 상태) 에서는 null을 반환하고, 로그인이 된 상태에서는 해당 값을 반환하도록 하였다.

2. useEffect를 이용하여, getLoginUserInfo의 값이 존재할 경우 로그인 된 상태(true)로 반환하고, getLoginUserInfo의 값이 존재하지 않을 경우 로그아웃 된 상태(false)로 반환하도록 하여 로그인 상태를 유지한다.

/* app > _hooks > useLoggedIn */
export const useLoggedIn = () => {
  const { setIsLoggedIn } = useAuthStore();
  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
  const { setUser } = useUserInfoStore();

  useEffect(() => {
    const checkLoginStatus = async () => {
      const userInfo = await getLoginUserInfo();

      if (userInfo !== null) {
        const email = userInfo?.user_metadata?.email;
        const nickname = userInfo?.user_metadata?.nickname;
        const profileImage = userInfo?.user_metadata?.profileImage;

        // Zustand useUserInfoStore에 저장
        setUser({ email, nickname, profileImage });

        // data가 존재 시, 로그인 상태로 설정
        console.log(
          "사용자 정보가 있습니다. 사용자는 로그인했습니다.",
          userInfo
        );
        setIsLoggedIn(true);
      } else {
        // data가 존재하지 않으면, 로그아웃 상태로 설정
        console.log(
          "사용자 정보가 없습니다. 사용자는 로그아웃했습니다.",
          userInfo
        );
        setIsLoggedIn(false);
      }
    };

    checkLoginStatus();
  }, []);

  return isLoggedIn;
};

이때 userInfo에 들어있는 데이터 중에서 email, nickname, profileImage의 값만 따로 뽑아내서 setUser에 저장을 하여 다른 분들께서

const { email, nickname, profileImage } = useUserInfoStore()

이렇게 store를 사용하여 해당 정보를 불러와 사용 할 수 있게 하였다.

🔥🔥🔥 근데 여기서 문제점이었던게..!

로그인과 로그아웃을 하면 콘솔에 로그인 되었는지, 로그아웃 되었는지 확인 할 수 있게 콘솔창에 띄우게끔 하였는데, 분명 header 부분은 로그인/로그아웃 되는게 확인이 되는데 콘솔로 확인해 봤을 때는 바로바로 상태가 안 바뀌었다..
그래서 새로고침을 해야지만 로그인 상태가 변경이 되었는데... 진짜 갑자기 불현듯 생각이 났다..

🔥의존성 배열!!!!🔥

의존성 배열에 isLoggedIn 을 넣어주면, 로그인 상태가 변경될 때마다 자동으로 새로고침 되게 하는 것이었는데...!! 이 부분을 빼먹었던것이었다ㅠㅠ

/* app > _hooks > useLoggedIn */

useEffect(() => {

  // 나머지 로직 부분

 }, [isLoggedIn]);

이 부분만 해결해주니 로그인 상태로 바로바로 바뀌는 것을 확인 할 수 있었고, 상태유지도 잘 되었다.

그럼 끄읕!