Supabase - (9) 로그아웃 구현하기(Authentication)

https://hjh0806.tistory.com/entry/Supabase-8-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0Authentication

Supabase - (8) 로그인 구현하기(Authentication)

지난 포스트에서는 로그인 기능을 구현해보았습니다.
이번 포스트에서는 로그아웃 기능을 구현해보겠습니다.

 

 

 

 

 

🚪 Supabase 로그아웃 메서드

Supabase.auth.signOut() 메서드를 사용하면 쉽게 로그아웃 기능을 구현할 수 있습니다.
우선 로그아웃 함수를 하나 만들어봅시다:

export async function logout() {
  let { error } = await supabase.auth.signOut();

  if (error) {
    throw new Error(error.message);
  }
}

 

 

 

 

⚙️ TanStack Query로 커스텀 훅 만들기

TanStack Query를 사용해 로그아웃 전용 커스텀 훅을 만들어 보겠습니다.

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { logout as logoutApi } from "../../services/apiAuth";
import { useNavigate } from "react-router-dom";

export function useLogout() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const { mutate: logout, isLoading } = useMutation({
    mutationFn: logoutApi,
    onSuccess: () => {
      queryClient.removeQueries(); // 모든 캐시 제거
      navigate("/login", { replace: true }); // 로그인 페이지로 이동
    },
  });

  return {
    logout,
    isLoading,
  };
}

 

📌 onSuccess에서 queryClient.removeQueries()를 호출해 모든 캐시 데이터를 삭제하고,
navigate("/login", { replace: true })를 통해 로그인 페이지로 리다이렉트합니다.

 

 

 

 

🧩 컴포넌트에서 사용하기

이제 이 커스텀 훅을 실제 컴포넌트에서 사용해보겠습니다.

import { HiArrowRightOnRectangle } from "react-icons/hi2";
import ButtonIcon from "../../ui/ButtonIcon";
import { useLogout } from "./useLogout";
import SpinnerMini from "../../ui/SpinnerMini";

function Logout() {
  const { logout, isLoading } = useLogout();
  return (
    <ButtonIcon onClick={logout} disabled={isLoading}>
      {!isLoading ? <HiArrowRightOnRectangle /> : <SpinnerMini />}
    </ButtonIcon>
  );
}

export default Logout;

 

버튼을 클릭하면 logout() 함수가 실행되고, 로그아웃 처리 중일 때는 로딩 스피너를 보여줍니다.

 

 

 

🧹 로그아웃 시 정리되는 내용

• 캐시된 쿼리 데이터 (TanStack Query) 전부 삭제됨
• Supabase의 auth.signOut() 호출로 인해 로컬스토리지의 인증 정보도 자동 제거됨
• 로그인 페이지(/login)로 리다이렉트

---

 

이렇게 해서 Supabase를 활용한 로그아웃 기능을 구현해보았습니다.
다음 포스트에서는 회원가입 기능을 다뤄보겠습니다.