[Firebase] 인증 상태 유지, 접근 보호

로그인 상태 유지

 

로그인 상태 전역 관리

firebase는 로그인이나 회원가입을 하면, 이와 같이 user정보를 리턴해준다.

이 유저 정보를 통해 로그인 상태와, 프로필, 본인의 게시글/댓글 여부같은 작업들을 할것이므로 전역(zustand)으로 user정보를 관리한다.

처음엔 새로고침이 발생해도 전역 상태 초기화가 발생하지 않도록, zustand의 persist 미들웨어를 사용하여 localStorage에 담아 이 로그인 상태(유저 정보 존재 여부)를 유지가 되도록 해야겠다고 생각했다.

하지만, 찾아보니 firebase 인증 시스템이 사용자의 로그인 상태를 관리하기 위해, 인증 토큰을 사용하고 이 인증토큰의 시간이 약 1시간 정도이기 때문에, 이 토큰이 만료되거나 갱신에 실패하면 로컬스토리지에는 로그인상태이지만, 실질적으로 로그아웃 상태가 될 수 있다고 한다.

또한, 알아보니 firebase에서 자체적으로 인증 상태를 로컬스토리지에 저장하기 때문에 또 persist를 사용해 로컬스토리지에 넣을 필요가 없다.

 

 

해결 방법

1. onAuthStateChanged ✅

onAuthStateChanged는 인증 상태 변화를 감지해주기 때문에, 상태에 따라 사용자 인증정보를 처리한다.

또한, 만료된 인증 토큰으로 인해 사용자가 로그아웃되면 onAuthStateChanged 콜백 함수가 호출되어 사용자 정보가 null로 전달된다고 한다.

 

2. firebase JS SDK로 인증상태 유지 방식 지정하기

 

• local : 로그인한 사용자가 명시적으로 로그아웃할 때까지 무기한 유지할지 → 자동 로그인 기능 구현 가능?!

• session : 창을 닫으면 상태를 삭제 → 로그인 유지

 

useAuth훅으로 권한 제어 및 보호

유저 프로필이나 작성한 게시글 수정페이지같은 경우, 본인이 아닌 타인이 접근할 수 없도록 보호가 필요하다.

 

• profile update : /profiles/update/:userId
• post update : /posts/update/:postId

 

route 경로가 다음과 같기 때문에, userId, postId만 알아낸다면 충분히 타인이 수정페이지에 접근할 수있는 상태이다.

 

👉🏻 userId와 로그인한 user의 id값을 비교해서 일치하지 않다 → 접근제한 리다이렉트

🔒 firebase의 보안규칙을 통해, 2차적으로 DB의 write 권한을 막을수도 있다.

 

 

type CheckPermission = (user: User) => boolean;

export const useAuth = (checkPermission?: CheckPermission) => {
  const { user, loading } = useAuthStore();
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading) {
      if (!user) {
        navigate(PATHS.logIn);
      } else if (checkPermission && !checkPermission(user)) {
        toast.error("접근 권한이 없습니다.");
        navigate(-1);
      }
    }
  }, [loading, user, navigate, checkPermission]);

  return { user, loading };
};