Firebase Authentication 사용 기준: 로그인 유지와 비밀번호 재설정

이 글의 질문과 결과

질문: 로그인 직후와 새로고침 직후의 화면을 어떻게 구분하고, 유지 정책·로그아웃·재설정은 어디까지 확인해야 할까요? Firebase 초기화와 Email/Password 제공자 활성화를 마친 뒤, 인증 확인 중·로그인됨·비로그인 상태를 관찰합니다.

학습 목표와 사전 지식

목표: 로그인 지속성·초기 인증 관찰·비밀번호 재설정 단계의 차이를 이해합니다.
사전 지식: Firebase 웹 초기화, Promise/async, 이메일 비밀번호 provider

로그인 유지 옵션은 이 브라우저의 인증 상태 저장 정책입니다. 사용자 접근 권한이나 모든 기기의 세션 회수를 대신하지 않습니다. UI는 로그인 함수 호출 직후 추정한 값보다 인증 상태 관찰 결과를 기준으로 갱신하세요.

정책	용도·한계
browserLocalPersistence	브라우저를 닫아도 유지하는 정책; 명시적 로그아웃·저장소 조건 영향
browserSessionPersistence	현재 탭/세션 범위의 정책; 전체 계정 세션 회수 아님
inMemoryPersistence	메모리에만 유지; 새로고침 후 유지하지 않는 경우

src/shared/libs/firebase/auth.ts · 전체 유틸 모듈; 같은 폴더의 firebase.ts는 초기화 글 참조

import { auth } from './firebase';
import {
  browserLocalPersistence, browserSessionPersistence,
  createUserWithEmailAndPassword, setPersistence,
  signInWithEmailAndPassword, signOut, sendPasswordResetEmail,
  verifyPasswordResetCode, confirmPasswordReset
} from 'firebase/auth';

export async function signUp(email: string, password: string) {
  return createUserWithEmailAndPassword(auth, email, password);
}
export async function login(email: string, password: string, keep: boolean) {
  await setPersistence(auth, keep ? browserLocalPersistence : browserSessionPersistence);
  return signInWithEmailAndPassword(auth, email, password);
}
export async function logout() { await signOut(auth); }
export async function requestReset(email: string) {
  await sendPasswordResetEmail(auth, email);
}
export async function verifyReset(code: string) {
  return verifyPasswordResetCode(auth, code);
}
export async function finishReset(code: string, password: string) {
  await confirmPasswordReset(auth, code, password);
}

이 글만 실습한다면 Firebase 초기화 구조: Next.js firebase.ts 설계 기준의 전체 초기화 모듈을 먼저 준비하고 개발 Firebase 프로젝트의 Email/Password 제공자를 활성화하세요. 아래 auth.ts의 입력은 해당 auth 인스턴스와 본인 테스트 이메일·비밀번호, 유지 정책 keep입니다. 이전 TaskFlow 기능이나 완료 코드가 필요하지는 않습니다.

순서를 지켜야 하는 이유

setPersistence는 비동기이므로 await 후 signInWithEmailAndPassword를 호출합니다. 버튼을 여러 번 누르면 서로 다른 유지 정책 호출이 경쟁할 수 있어 진행 중에는 다시 제출하지 않도록 UI에서 제어합니다. 시작 시 currentUser가 null이라고 바로 로그아웃으로 확정하지 말고 onAuthStateChanged 최초 콜백까지 loading 상태를 둡니다. 구독은 컴포넌트 정리 때 해제합니다.

로그아웃의 범위

signOut은 현재 클라이언트 인증 상태를 정리합니다. 다른 기기까지 전부 로그아웃하거나 이미 발급된 모든 ID token을 즉시 무효화하는 API가 아닙니다. 분실 기기·계정 사고 대응은 Admin SDK의 세션 취소와 서버 검증이 별도로 필요합니다. 로그아웃 실패를 무조건 성공 화면으로 이동시켜 숨기지 말고 재시도 가능한 메시지를 표시합니다.

비밀번호 재설정은 세 단계

requestReset은 메일 발송 요청, verifyReset은 oobCode 유효성 확인, finishReset은 새 비밀번호 확정입니다. 기본 Firebase action handler를 사용하면 링크 처리 UI를 직접 만들 필요가 없습니다. 직접 페이지를 만들 때만 mode와 oobCode를 읽어 해당 단계를 구현하고 만료·이미 사용한 코드·암호 정책 실패를 구분합니다. 요청 성공을 계정 존재 증거로 안내하지 말고 “해당 주소로 안내를 받을 수 있는 경우 메일을 확인하세요”처럼 계정 열거를 줄이는 응답을 씁니다.

행동별로 남길 상태 기록

행동	먼저 볼 상태	이어서 볼 상태와 증거
새로고침	인증 확인 중	최초 onAuthStateChanged 결과와 화면 전환
keep 선택 후 브라우저 재열기	인증 확인 중	복원 여부와 브라우저 저장소 조건
세션 선택 후 탭·브라우저 닫기	인증 확인 중	재접속 결과와 닫은 범위
로그아웃	처리 중	현재 브라우저 observer의 user=null
재설정 요청	요청 중	중립 안내, 본인 테스트 메일·링크 처리 결과

같은 브라우저의 탭과 저장소 조건을 적고 비교하세요. 재설정 메일 요청·링크 코드 확인·새 비밀번호 확정은 각각 다른 단계입니다. 실제 결과를 예상 결과와 분리해 기록합니다.

독자가 확인할 시나리오

개발 계정으로 keep true/false 각각 로그인 후 새로고침·탭 종료·다시 열기를 비교합니다. 로그아웃 후 관찰 user가 null로 바뀌는지 확인합니다. 재설정 메일을 본인 테스트 주소로 보내 새 비밀번호 성공과 이전 비밀번호 실패를 확인하고, 같은 링크를 재사용했을 때 거부되는지 확인합니다. 메일 배달과 실제 인증은 이 글의 정적 검증으로 확인할 수 없습니다.

직접 확인할 결과

유틸 import·호출 순서 정적 확인
실제 로그인 유지/메일 배달 미실행

검증 범위와 기준일

공식 문서 확인일: 2026-09-13. 웹 SDK 예제는 모듈형 API 기준입니다. 이 글의 코드·구조 정적 검토와 실제 클라우드 인증·저장·배포 검증을 구분합니다. 본인 개발 Firebase 프로젝트의 실제 인증·권한·배포 요청은 이 편집 환경에서 실행하지 않았습니다.

이어서 학습하기

• Firebase 초기화 구조: Next.js firebase.ts 설계 기준
• Firebase Auth unauthorized-domain 오류 해결: OAuth 도메인이 막힐 때
• Firebase Auth Context 설계: 인증 상태를 화면에 연결하기

공식 문서

• https://firebase.google.com/docs/auth/web/auth-state-persistence
• https://firebase.google.com/docs/auth/web/manage-users
• https://firebase.google.com/docs/auth/admin/manage-sessions