Firebaseのログイン認証実装したいがYour API key is invalidと表示される

実現したいこと

React.jsでアプリを作成しており、
Firebaseでログイン認証の実装をしたいのですが、
「API Keyが無効のため、正しくコピーされているか確認ください」とエラーが表示されます。

発生している問題・エラーメッセージ

provider.ts:120 Uncaught 
t {code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.", a: null}
a: null
code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."
__proto__: Error

該当のソースコード

.envファイル

REACT_APP_FIREBASE_API_KEY
="***"
REACT_APP_FIREBASE_DOMEIN="***"
REACT_APP_FIREBASE_DATABASE="***"
REACT_APP_FIREBASE_PROJECT_ID="***"
REACT_APP_FIREBASE_STORAGE_BUCKET="***"
REACT_APP_FIREBASE_SENDER_ID="***"
REACT_APP_FIREBASE_APP_ID="***"

Firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

var firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMEIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

const initialized_fb = firebase.initializeApp(firebaseConfig);

export const auth = initialized_fb.auth()
;
export const db = initialized_fb.firestore();

###試したこと
0. Firebaseの管理画面からAPIのKey等の.envファイル内のコードをコピーし直しましたが、このエラーメッセージは消えませんでした。
0. コンポーネント内でimportする際は、以下のように書いています。

import { auth, db } = '../firebase/Firebase';

3..envファイルは .src外のrootに入れています。

どなたかご教示をいただけませんでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

仮に.envファイルが一字一句この構造なのだとしたら、
REACT_APP_FIREBASE_API_KEYを正しく設定できていない気がします。
この部分だけ、キー名に値が入るような構造になってなくて、未指定になっているのでは。

こんな感じになるように直してみては。

diff
1+REACT_APP_FIREBASE_API_KEY="***"
2-REACT_APP_FIREBASE_API_KEY
3-="***"
4REACT_APP_FIREBASE_DOMEIN="***"
5REACT_APP_FIREBASE_DATABASE="***"
6REACT_APP_FIREBASE_PROJECT_ID="***"
7REACT_APP_FIREBASE_STORAGE_BUCKET="***"
8REACT_APP_FIREBASE_SENDER_ID="***"
9REACT_APP_FIREBASE_APP_ID="***"

念の為、Firebase.jsの中でfirebaseConfigを設定後にconsole.log(firebaseConfig)などを行い、
中身を確認してみるといいと思います。

投稿2021/06/19 10:37

attakei

総合スコア2740

asml

2021/06/19 12:17 編集

attakei さんありがとうございます。解決いたしました！いただいたアドバイスを元にconsole.log(firebaseConfig); してみたところ undefinedとなっており、 .envファイルを再確認したところ、おっしゃる通りAPI_KEY のところに不要なスペースが入っていました。これが原因でundefined となっていたようです。本当にありがとうございます！！

行動規範の内容に同意します