에러를 잡는 마음가짐..

supabase를 활용해 소셜로그인을 구현하던 중 client 컴포넌트에서 async/await을 사용할 수 없다는 경고가 발생했다

 

async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

 

const handleKakaoSignIn = async () => {
  await client.auth.signInWithOAuth({
    provider: 'kakao',
    options: {
      redirectTo: window.origin + '/auth/callback',
    },
  });
  
  const session = await client.auth.getSession();
  console.log(session);
};

async/await을 붙이지 않고 카카오 로그인으로 페이지 이동이 되는지 먼저 확인하고 -> 받아온 데이터를 zustand store에 저장하기 위해 await을 걸어줬는데 갑자기 위와 같은 오류가 발생했다.

 

우선 결론은 위 코드가 문제는 아니었다! 로그인 후 redirect되는 곳(Home)에서 로그아웃 버튼을 만들어 테스트를 하려고 했는데 기본적으로 async가 붙어있는 페이지 컴포넌트에 버튼 이벤트를 넣으려고 'use client'를 붙여두어서 이부분이 문제가 됐다.

 

'use client';
import { createClient } from '@/utils/supabase/client';

export default async function Home() {
  const client = createClient();
  const handleSingOut = async () => {
    const { error } = await client.auth.signOut();
  };

  return (
    <div>
      <button onClick={handleSingOut}>로그아웃</button>
    </div>
  );
}

 

알고나니 엄청나게 간단한 문제였는데 내일 해가 뜨기전까지 세팅해서 팀원들에게 공유해야한다는 초조함+졸린 상태가 겹쳐 제대로 파악하지 못하고 새벽인데도 들어오신 튜터님 도움을 받아 해결했다..ㅠㅠ

 

최종 프로젝트 진행하면서 일정이 촉박해 이런 경우가 종종 생길 것 같다

에러 잡을 때 한 번 더 생각할 것!!

 

1) 의심 가는 부분 제거해보고 진짜 원인을 파악하기

2) 해결 후 정리하기! (같은 실수 줄이기)

 

이전에 supabase 이벤트 문제로 에러가 생겼을 때도 원인 파악이 제일 어려웠는데.. 역시 가장 중요한 부분이 어려운 것 같다

화이팅!!