문제 발생

팀프로젝트를 진행하던 중 로그아웃 기능을 실행했는데 정상적으로 동작하지 않았다. 콘솔을 확인해보니 다음과 같은 에러가 발생했다.

원인 추론

에러 메시지를 확인한 후, 로그아웃 과정에서 발생하는 문제를 더 정확히 파악하기 위해 에러를 출력하는 코드를 추가했다.

// 로그아웃 기능
const handleLogout = async () => {
  try {
    const { error } = await supabase.auth.signOut();
    if (error) throw error;
    alert('로그아웃 되었습니다');
  } catch (error) {
    console.log(error);
  }
};

에러 메시지를 확인한 결과, AuthSessionMissingError: Auth session missing 오류가 발생했다.

해결 방안

이 오류는 Supabase에서 로그아웃을 시도할 때 인증 세션(Auth Session)이 없거나 만료된 경우 발생한다. 즉, 로그아웃할 사용자의 인증 정보가 존재하지 않아서 로그아웃 요청이 정상적으로 처리되지 않는 것이다.

오류 발생 원인

Supabase에서 사용자의 인증 정보(Session)는 로컬 스토리지(Local Storage) 또는 쿠키(Cookies) 에 저장된다.로그아웃을 할 때 Supabase는 내부적으로 저장된 세션을 확인하고, 해당 세션을 무효화하는 과정을 거친다.

하지만 다음과 같은 경우 AuthSessionMissingError가 발생할 수 있다.

1. 세션 만료
   사용자가 너무 오랜 시간 동안 사이트를 사용하지 않았거나, 특정 설정으로 인해 세션이 만료됨. 이 경우, Supabase는 세션이 없다고 판단하여 로그아웃을 처리할 수 없음.

2. 로컬 스토리지에서 세션이 삭제됨
   사용자가 개발자 도구에서 직접 localStorage.clear()를 실행하거나, 브라우저가 데이터를 자동 삭제함.Supabase가 로그아웃할 때 필요한 세션 정보를 찾지 못해 오류 발생.

3. 서버 측에서 세션이 제거됨
   다른 기기에서 같은 계정으로 로그인 후 로그아웃하면, 기존 기기의 세션이 무효화될 수 있음.클라이언트는 여전히 로그인된 상태라고 생각하지만, 서버는 더 이상 유효한 세션이 없다고 판단.

결과

임시방편으로 로컬 스토리지의 데이터를 삭제한 후 로그아웃이 정상적으로 동작했다.