카카오 로그인 적용 하기

클라이언트 컴포넌트에서 카카오 로그인 적용 

로그인 한 후에 로그인 한 사용자의 uid를 상태 관리에 담아

컴포넌트로 부르려고 함

export default function LoginPage() {
  async function signInWithKakao() {
    try {
      const { data, error } = await supabase.auth.signInWithOAuth({
        provider: "kakao",
        options: {
          redirectTo: ``,
        },
      });
      if (error) {
        throw error;
      }
      return data;
    } catch (error) {
      return error;
    }
  }

  return (
    <>
      <button onClick={signInWithKakao}>카카오 로그인</button>;
    </>
  );
}

 

생각 했던건

로그인 버튼이 있는 클라이언트 컴포넌트에서 상태에 담아서 출력 하려고 했는데

에러가 남

React에서 컴포넌트가 렌더링할 때 문제가 발생했음 상태에 보내는 값에 로그인 data를 보내는 건 안되나보다

object are not valid as a rect child (found:boject with keys {provider,url}) If you meabt ti render a collection of children use an array instead

 

그래서 수파베이스에서 해당 사용 자의 정보를 가져 와서 

그 정보를 상태에 담아 보기로 함

 

수파베이스 유저 가져 오기

export async function LoginUserUid() {
  const { data: { user } } = await supabase.auth.getUser();
  return user;
}