문제상황

React에서 Firebase를 연결해 로그인 기능을 구현하던 중, API KEY를 정확히 입력하였음에도 console에서 Uncaught > t {code: 'auth/invalid-api-key', message: 'Your API key is invalid, please check you have copid it correctly 라는 에러가 자꾸 떴다.

.env 파일을 생성해 API 키를 비롯한 값들을 저장해두었고, firebase.js 파일에 환경변수로 불러와서 사용중이었다.

REACT_APP_FIREBASE_API_KEY=firebase_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=firebase_auth_domain
REACT_APP_FIREBASE_DB_URL=firebase_db_url
REACT_APP_FIREBASE_PROJECT_ID=firebase_project_id

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
};

프로젝트를 지우고 처음부터 다시 셋팅도 해보고, firebase를 지웠다가 다시 깔아보기도 했는데도 안됐다.

해결방법

찾아보니 해당 오류 원인은 3가지가 있다고 한다

1. env가 루트 디렉토리에 없음
2. API 키를 잘못 적음
3. firebaseConfig export 하고 다른 js 파일에서 import 시 오류

나의 경우에는 루트 디렉토리에 넣어뒀다고 생각했는데 알고보니 src 파일에 있었다...^^..