[Netlify] FirebaseError: Firebase: Error (auth/invalid-api-key). 에러 해결

🔥 발생한 에러

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

로컬에서는 잘 동작했지만 Netlify에 배포 후 확인해보니 다음과 같은 에러가 발생했다. 

배포할 때 참고한 사이트(https://create-react-app.dev/docs/deployment#netlify)

 

원인 분석

해당 에러에 대해 글을 쓴 여러 블로그를 찾아서 읽어보니 다음의 경우에 이러한 에러가 발생한다고 한다.

1. .env 파일이 루트에 없는 경우
2. API 키가 잘못된 경우
3. firebaseConfig를 export하고, 다른 JS 파일에서 import 할 경우

 

로컬에서는 잘 동작했기 때문에 Netlify에서 내가 설정한 환경 변수를 제대로 인식하지 못하고 있을 것 같다고 생각하게 되었다.

혹시나 하는 마음에 로컬에서 .env 파일을 다른 폴더 안으로 넣어봤다. 다행히도.. 배포했을 때와 똑같은 상황이 연출됐다. 이제 원인을 찾았으니 빠르게 해결해보도록 하자!

 

🧯 에러 해결

루트에 netlify.toml 파일을 생성하여 다음 코드를 작성한 후 commit -> push 

// netlify.toml
[build]
  command = "yarn run build"
  publish = "build"

[context.production.environment]
  TOML_ENV_VAR = "From netlify.toml"
  REACT_APP_TOML_ENV_VAR = "From netlify.toml (REACT_APP_)"

배포가 완료되면 Netlify에 설정한 환경 변수가 잘 적용되는 것을 확인할 수 있다.

 

📚 참고한 사이트

netlify env 환경변수 설정하는 방법

[React & firebase] Firebase: Error (auth/invalid-api-key) 에러?!