[Firebase] API KEY 에러 (auth/api-key-not-valid.-please-pass-a-valid-api-key.)

React에서 Firebase를 연결해 로그인 기능을 구현하던 중, API KEY가 유효하지 않다는 에러가 발생했다.

auth/api-key-not-valid.-please-pass-a-valid-api-key.

 

.env 파일을 생성하여 아래와 같이 관련된 값들을 저장한 후에 firebase-config 파일에서 불러다 쓰고 있었다.

REACT_APP_FIREBASE_API_KEY = ...
REACT_APP_FIREBASE_AUTH_DOMAIN = ...
REACT_APP_FIREBASE_PROJECT_ID = ...
REACT_APP_FIREBASE_STORAGE_BUCKET = ...
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = ...
REACT_APP_FIREBASE_APP_ID = ...
REACT_APP_FIREBASE_MEASUREMENT_ID = ...

// firebase-config.ts

...

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

...

찾아보니 이 에러의 원인은 3가지라고 한다.

1. .env 파일이 최상단 경로에 위치하고 있지 않다.
2. API KEY를 잘못 작성했다.
3. firebaseConfig를 export 한 후에 다른 파일에서 import 시에 오류가 발생했다.

나는 3가지 모두 맞게 했는데도 해결되지 않아서 골치 아프던 중에, 따옴표를 빼면 해결된다는 글을 발견했다.

REACT_APP_FIREBASE_API_KEY = "api_key"

이처럼 따옴표로 감싸서 사용했었는데 따옴표를 제거한 후 서버를 재시작했더니 해결되었다!

.env 파일을 수정하게 되면 서버를 재시작해야 한다고 한다.

 

결론 : 위의 3가지가 모두 원인이 아니라면, 따옴표를 제거해볼 것!