Firebase Auth unauthorized-domain 오류 해결: 로그인 도메인 설정 확인

이 글의 질문과 결과

질문: auth/unauthorized-domain이 떴을 때 어느 프로젝트의 어떤 호스트를 승인해야 하고, 수정 효과는 어떻게 확인할까요? 실제 오류 code·앱의 projectId·접속 호스트를 먼저 기록한 다음 허용 목록과 비교합니다.

학습 목표와 사전 지식

목표: OAuth 도메인 오류와 redirect·continue URL 오류를 구분하고 설정 한 곳만 바꾸어 재확인합니다.
사전 지식: Firebase 웹 앱 초기화, 개발용 Google 로그인, 브라우저 Network 탭

auth/unauthorized-domain은 현재 앱의 호스트가 인증 작업에 승인되어 있는지 먼저 확인할 오류입니다. 같은 이름의 프로젝트를 착각하지 않도록 앱 설정의 projectId와 Console 프로젝트를 먼저 대조하세요.

최소 재현: 변경할 변수는 호스트 하나

개발용 프로젝트의 Google provider를 활성화하고 이미 동작하는 로그인 화면을 사용합니다. 승인되지 않은 별도 테스트 호스트에서 같은 로그인 버튼을 누릅니다. 실제 실패 코드가 auth/unauthorized-domain인지 기록합니다. 운영 도메인을 삭제해서 재현하지 마세요. 팝업 차단(auth/popup-blocked)이나 사용자가 닫은 팝업은 별도 문제입니다.

src/auth/google.js · 전체 모듈; 초기화된 auth를 호출부에서 전달

import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth';

export async function googleLogin(auth) {
  try {
    await signInWithPopup(auth, new GoogleAuthProvider());
    return { ok: true };
  } catch (error) {
    return { ok: false, code: error.code ?? 'unknown' };
  }
}

수정 전·수정 방법·수정 후

수정 전에는 테스트 호스트가 Authorized domains에 없습니다. Firebase Console → Authentication → Settings → Authorized domains에서 소유·관리하는 해당 호스트를 추가합니다. 로그인 코드는 그대로 두고 같은 브라우저·계정·호스트에서 다시 클릭합니다. 성공하면 onAuthStateChanged로 사용자가 관찰되는지 확인하고, 다른 실패 코드로 바뀌었다면 그 코드부터 새로 진단합니다.

접속 URL	등록할 호스트
http://localhost:3000/login	localhost
https://example.com/login	example.com
https://www.example.com/login	www.example.com

localhost와 배포 환경을 혼동하지 않기

공식 문서에 따르면 2025년 4월 28일 이후 생성한 프로젝트에서는 localhost가 기본 승인 도메인에 포함되지 않습니다. 필요한 개발용 프로젝트에 명시적으로 추가하세요. 주소의 경로·프로토콜·포트를 입력하지 않습니다. Preview URL이 매번 달라지면 고정 테스트 도메인과 개발 프로젝트를 사용하는 편이 관리하기 쉽습니다. Next.js의 NEXT_PUBLIC_ 설정은 빌드에 포함되므로 배포 환경값 변경 뒤 재빌드가 필요합니다.

같이 보이지만 별도인 오류

이메일 actionCodeSettings.url은 링크 처리 후 돌아갈 continue URL입니다. 승인 호스트와 auth/unauthorized-continue-uri를 따로 봅니다. signInWithRedirect가 특정 브라우저에서만 복귀하지 않으면 공식 redirect best practices에 따라 authDomain과 저장소 제약을 확인합니다. OAuth 제공자 redirect URI의 /__/auth/handler와 앱의 승인 호스트는 같은 설정 항목이 아닙니다. 토큰·이메일·설정 전체를 로그에 출력할 필요는 없습니다.

한 건의 오류 기록으로 재검증하기

항목	수정 전	수정 후
정확한 오류 code	auth/unauthorized-domain인지 기록	동일 요청의 새 결과
앱 projectId	Console 프로젝트와 대조	같은 프로젝트 유지
접속 호스트	location.origin에서 호스트 확인	Authorized domains에 등록
로그인 관찰	같은 버튼·계정·브라우저	사용자 상태 또는 남은 오류 code

예를 들어 https://www.example.com/login의 등록 대상은 www.example.com입니다. example.com과 구분하고 경로·프로토콜·포트를 복사하지 않습니다. 소유·관리하는 호스트만 등록하세요. 바꾼 뒤에도 같은 오류면 프로젝트와 호스트를 다시 대조하고, 다른 오류면 해당 code를 별도로 진단합니다. 실제 도메인 변경과 로그인은 자신의 개발 프로젝트에서 검증합니다.

직접 확인할 결과

승인 전 동일 클릭의 정확한 에러 코드 기록
승인 후 같은 계정에서 사용자 관찰 및 로그아웃 확인
기본 도메인·www·개발 호스트를 각각 확인

검증 범위와 기준일

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

이어서 학습하기

• Firebase Authentication 사용 기준: 로그인 유지와 비밀번호 재설정
• Firebase Auth Context 설계: 로그인 상태를 화면에 연결하기

공식 문서

• https://firebase.google.com/docs/auth/web/google-signin
• https://firebase.google.com/docs/auth/web/passing-state-in-email-actions
• https://firebase.google.com/docs/auth/web/redirect-best-practices
• Email link Auth: localhost 기본 승인 변경 기준