Firebase: Error (auth/invalid-api-key) 에러 해결 방법

파이어베이스 Error (auth/invalid-api-key) 에러

팀프로젝트를 진행하던 중 React와 next.js를 파이어베이스를 연결하면 에러가 났습니다.

에러가 나면서 페이지도 나오지 않았고요.

api 키도 문제없이 넣었고 .env도 루트 디렉토리에 넣었는데 말이죠.

 

.env 파일

API_KEY="진짜 값"
AUTH_DOMAIN="진짜 값"
PROJECT_ID="진짜 값"
STORAGE_BUCKET="진짜 값"
MESSAGEING_SENDER_ID="진짜 값"
APP_ID="진짜 값"
MEASUREMENT_ID="진짜 값"

 

firebaseapp.ts

const firebaseConfig = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGEING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
};

 

 

근데 재밌는 건 firebaseapp.ts 파일에 바로 값을 넣으면 정상적으로 작동을 하였습니다.

그래서 코드를 잘 못썼다고 생각은 안 하고 무언가 설정을 안 해줬고 생각하게 된 것 같습니다.

const firebaseConfig = {
  apiKey: "찐짜 값"
  authDomain: process.env.AUTH_DOMAIN,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGEING_SENDER_ID,
  appId: process.env.APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
};

 

 

 

파이어베이스 Error 해결 방법

위 에러를 해결하려고 3시간은 넘게 찾아봤지만 해결 방법은 정말 간단했습니다.

바로 앞에 NEXT_PUBLIC_ 을 붙여주는 것이었죠.

 

NEXT_PUBLIC_을 붙이는 이유는 Next.js 애플리케이션에서

환경 변수를 정의할 때 해당 변수가 클라이언트 측에서 접근을 가능하도록 하기 위해 써준다고 합니다.

 

따라서, NEXT_PUBLIC_API_KEY="진짜 값"과 같이 환경 변수를 정의하면

Next.js는 이 변수를 클라이언트 측 JavaScript 코드에서도 접근할 수 있게 처리해 주는 것이죠.

 

그래서 저도 NEXT_PUBLIC_ 을 붙여줬더니 에러가 해결되었고 화면도 정상적으로 나오게 되었습니다^^

 

.env 파일

NEXT_PUBLIC_API_KEY="진짜 값"
NEXT_PUBLIC_AUTH_DOMAIN="진짜 값"
NEXT_PUBLIC_PROJECT_ID="진짜 값"
NEXT_PUBLIC_STORAGE_BUCKET="진짜 값" 
NEXT_PUBLIC_MESSAGEING_SENDER_ID="진짜 값"
NEXT_PUBLIC_APP_ID="진짜 값"
NEXT_PUBLIC_MEASUREMENT_ID="진짜 값"

 

firebaseapp.ts

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGEING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID,
};

 

 

 

---

에러 해결 완료