Firebase 공부 중 Key를 Github에 함께 올리면 위험하다는 것을 알게되었습니다.
그래서 Github에서 .env 파일을 삭제한 뒤 .env 파일을 gitinore 파일에 등록하고 커밋 & 동기화 과정에서 .env 파일이 아예 사라져버리는 상황이 발생했습니다.
그런데 저는 이 과정에서 .env 파일이 삭제된지 몰랐고, Auth를 통해 로그인을 하려고 시도했으나 번번이 실패하였습니다.
그래서 개발자 도구 를 열고 console 을 확인했더니 이런 오류가 떠있더군요.
Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key)
Key 문제라길래 그새 생성했던 Key가 변경되었나 했습니다.
설마 제가 아까 Github의 .env 파일을 삭제했기 때문에 커밋 & 동기화 과정에서 .env 파일이 날아가버렸나.. 했는데 그게 사실이었습니다.
그래서 바로 .env 파일을 만들고, Key를 가져왔습니다.
혹시라도 저와 같은 Error가 발생하거나 Key 를 가져오는 방법을 모르시는 분들은 참고하시길 바랍니다.
Firebase에서 KEY 가져오는 방법
-
프로젝트클릭
-
앱 n개클릭 하시면 이런 창이 뜹니다.
-
톱니바퀴 모양(⚙) 아이콘을 클릭해 설정 창으로 들어가줍니다. -
위에는
내 프로젝트에 관한 정보가 나오고 아래에 SDK 설정 및 구성이 나옵니다.
Firebase .env 파일 생성 및 KEY 할당 방법
등호 뒤에는 제공받은 KEY를 따옴표나 쌍따옴표나 백틱 없이 그대로 붙여넣기 해줍니다.
혹시라도 필요하시면 쓰시기 바랍니다.
(아래는 제가 사용하는 양식입니다. - Referenced : Nomad Coder)
REACT_APP_API_KEY=
REACT_APP_AUTH_DOMAIN=
REACT_APP_PROJECT_ID=
REACT_APP_STORAGE_BUCKET=
REACT_APP_MESSAGIN_ID=
REACT_APP_APP_ID=사용은 이렇게!
const firebaseKey = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGIN_ID,
appId: process.env.REACT_APP_APP_ID,
};
firebase.initializeApp(firebaseKey);Error가 발생하면 당황하지 마시고 방법을 찾아보세요!
포기하지 않는다면 결국 해답을 발견하게 될겁니다!
👍 Reference
