[Firebase] Authentication으로 Email 로그인 구현하기 (3) - 로그아웃/회원탈퇴
지난 글에서 로그인/회원가입까지 알아보았습니다. 마지막으로 로그아웃 및 회원탈퇴하는 방법을 살펴보겠습니다.
[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를 선택해서 로그인/회원가입을 직접 구현할 예정입니다. 로직 및 에러 처리에 대한 포스트가 많은 도움이 되었으면 좋겠습니다.