Firebase

[Firebase] Authentication으로 Email 로그인 구현하기 (3) - 로그아웃/회원탈퇴

jundyu 2024. 10. 7. 08:58


지난 글에서 로그인/회원가입까지 알아보았습니다. 마지막으로 로그아웃 및 회원탈퇴하는 방법을 살펴보겠습니다.

 

 

[Firebase] Authentication으로 Email 로그인 구현하기 (2) - 로그인/회원가입

이전 글에서 Email로 로그인/회원가입하기 위해 기본적인 설정하는 방법들을 알아봤습니다. 이전 포스트에 이어서 리액트와 Firebase의 Authentication으로 실제 로그인/회원가입하는 코드를 설명드리

jundyu.tistory.com

 

 

로그아웃

로그아웃은 아래의 코드가 끝입니다. 만약 Recoil 등으로 로그인 중인 사용자에 대한 상태 관리 전역 변수를 사용하고 있다면 함께 초기화 해줍니다.

import { auth } from "../../firebase";
import { signOut } from "firebase/auth";

const handleLogout = async () => {
    try {
        await signOut(auth);
        navigate("/intro");
    } catch (error) {
        console.error(error);
    }
};

저는 로그아웃 후에 초기 화면으로 이동하도록 만들었습니다.
 

회원탈퇴

회원탈퇴도 특별히 어려운 점은 없지만 회원탈퇴 전 사용자 재인증 과정을 거치는 것이 좋습니다.

import { auth } from "../../firebase";
import { deleteUser, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

const handleDeleteUserClick = async () => {
    const user = auth.currentUser;

    try {
        // 사용자 재인증 우선 진행
        const credential = EmailAuthProvider.credential(auth.currentUser.email, password);

        // 자격 증명
        await reauthenticateWithCredential(user, credential);
        console.log("Success to reauthenticate");

        // 삭제
        await deleteUser(user);
    } catch (error) {
        console.log(error);
    }
};

1. EmailAuthProvider 메서드는
여기서 password 값은 사용자가 입력한 비밀번호입니다. 회원탈퇴 전에 비밀번호를 한 번 더 입력 받아 보안을 강화해줬습니다. Firebase로 로그아웃이나 회원탈퇴하는 코드는 로그인 방법에 상관없이 모두 동일합니다.
 

.
.
.
 

마치며

여기까지 파이어베이스의 Authentication에서 가장 기본적인 계정 생성부터 계정 삭제하는 과정을 살펴보았습니다. 파이어베이스에서 제공하는 업체들 중 Google과 OIDC 방식을 사용해봤는데 추가적인 인증 방식을 구현하는 건 정말 간단했습니다. 또한, 계정 간의 연동도 쉬워서 파이어베이스 Authentication의 확장성을 체감했습니다. 다음 프로젝트에선 파이어베이스가 아닌 스프링 부트와 RDBMS를 선택해서 로그인/회원가입을 직접 구현할 예정입니다. 로직 및 에러 처리에 대한 포스트가 많은 도움이 되었으면 좋겠습니다.