[리액트] firebase로 로그인 기능 구현하기

 

현재 나는 로그인 기능을 구현하고 있다.

이메일로 회원가입과 로그인 기능, 그리고 깃허브, 구글로 로그인 기능.

​

​

firebase를 이용하여 apiKey를 비롯한 항목들을 불러왔다.

​

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

그리고 루트 디렉토리에 .env 파일을 생성하여 값들을 붙여 넣었다.

    REACT_APP_API_KEY="",
    REACT_APP_AUTH_DOMAIN="",
    REACT_APP_DATABASE_URL="",
    REACT_APP_PROJECT_ID="",
    REACT_APP_STORAGE_BUCKET="",
    REACT_APP_MESSAGIN_ID="",
    REACT_APP_APP_ID=""

​

​

그다음 fbase.js 파일을 생성하고 환경 변수 값을 넣어주었다.

import * as firebase from "firebase/app";
import "firebase/auth";

const firebaseConfig = {
    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(firebaseConfig); 

export const authService = firebase.auth();

 

아주 순조롭게 된다고 생각했는데....

​

"{"error":{"code":400,"message":"API key not valid. Please pass a valid API key.","errors":[{"message":"API key not valid. Please pass a valid API key.","domain":"global","reason":"badRequest"}],"status":"INVALID_ARGUMENT"}}"

​

이 에러 메시지가 계속 떴다.... 대체 뭐가 문제지?

API 키는 firebase에서 생성된 거 그대로 복붙했는데 대체 뭐가 문제인지 구글링을 해봤다..

 

Firebase Error: auth/invalid-api-key, Your API key is invalid, please check you have copied it correctly. · Issue #61 · fireba

이 깃헙페이지를 살펴보니 문제점은 크게

1. .env가 루트 디렉토리에 없음

2. API 키를 잘못 적음

3. firebaseConfig export 하고 다른 js 파일에서 import 시 오류

(내가 추상적으로 적어 놓은 거일 수도 있으니 깃헙을 확인하길 바란다.)

​

일단 나는 세 가지 다 해당이 안 됐다.

API 키가 문제일까 봐 firebase console에서 프로젝트 다시 만들고

key도 regenerate 해봤지만 오류가 똑같았다.

​

.env 파일도 정확하게 루트 디렉토리에 있다.....

​

---

같은 오류를 최근에 겪어서

다시 정리해서 글 올렸습니다

 

[리액트] API 키 숨기기, 환경 변수 401 오류와 undefined 해결