(React/Firebase) FirebaseError(API 키 오류)

문제 상황


Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)

오늘 React 프로젝트를 작업하고 있었는데 콘솔 창에 이 오류가 떴습니다.
풀 리퀘스트를 만들고 새 브랜치를 파헤치고 풀을 얻은 후에 이 오류가 발생했습니다.
이런 오류는 처음이라 팀원들에게 먼저 조언을 구했다.

팀원 🧐 : .env 파일에 잘 넣으셨나요? 오! 라는 말을 듣자마자 나는 깨달았다.

우리 팀은 프로젝트 설정 내에서 Firebase를 함께 사용합니다. SDK 설정 및 구성키 값을 .env 파일에 붙여넣고 연결합니다.
그리고 .env 파일을 .gitignore에 넣으면 push시 포함되지 않아서 사라졌습니다.

해결

.env 파일에 팀 API 키를 포함하여 오류를 수정했습니다! (이 키는 계속 사용할 것이기 때문에 복사했습니다.)
다른 문제인 경우이 오류가 발생하는지 확인하기 위해 Google에서 검색했습니다.
이 오류의 원인은 3종있다고 한다

  1. env는 루트 디렉토리에 없습니다.
  2. API 키의 철자를 잘못 입력했습니다.
  3. firebaseCofig를 내보내고 다른 js 파일로 가져올 때 오류가 발생합니다.

제 경우는 1번이었고 경로를 정확히 캡쳐해서 입력했다면 에러를 깔끔하게 잡을 수 있었습니다!