[TIL #33] supabase 회원가입 / 로그인 유지

id값을 고유한 키로 바꿨더니, auth에는 잘 저장이 되는데, usertable로 데이터가 자동업데이트가 되지 않는 현상이 발견되었다.

const { error: insertError } = await supabase.from('user').insert([
        {
          id: uuid(),
        }
 ]);

email 말고 또 다른 고유한 값의 id가 있어야지만 나머지 기능이 작동하기 때문에 고유한이라는 말만 듣고 uuid를 생성해버렸다.

해결방안

supabase는 정책상, 회원가입을 하면 자동으로 고유한 ID값을 만들어준다. 그래서, 따로 uuid를 주지 않아도 된다고 한다.
오히려, uuid를 생성하면 에러가 나오는 현상을 볼 수 있다.

const { error: insertError } = await supabase.from('user').insert([
        {
          id: data.user.id,
        }
 ]);

이렇게 auth에서 자동으로 생성된 사용자 데이터의 id = data.user.id를 가져와서 userdata에 넣어줘야한다.\

이렇게 하면 해결완료!

---

로그인이 유지되지 않음

로그인을 하고 다른 페이지에 갔다가 다시 돌아가면 로그인이 풀려버리는 현상을 발견했다.

해결방안

결론부터 말하자면,
useState는 랜더링시에 로그인 유지가 되지 않는다

그래서 유지가 되게 하는 코드가 필요한데,

export const getId = async () => {
  const { data, error } = await supabase.auth.getSession();
  if (error) {
    console.log("getid Error:", error);
    return null;
  }
  return data?.session?.user?.id || null;
};

로그인을하면 local stoarge에 저장된 세션정보를 볼수있다.
세션 데이터가 존재하면, data.session.user.id를 잔환하게 하였고, 데이터가 존재하지 않으면 NULL을 반환하게 하였다.

useEffect(() => {
  const checkLoginStatus = async () => {
    const userId = await getId();
    if (userId) {
      setIsLoggedIn(true);
    } else {
      setIsLoggedIn(false);
    }
  };

  checkLoginStatus();
}, []);

데이터가 존재한다 = 로그인
데이터가 Null = 로그아웃
으로 구분했다.

마지막에 빈배열을 넣어, 컴포넌트가 처음 마운트될때 한번만 실행하도록 하였다.

---

우리 .. 모두.. 화이팅..