前提・実現したいこと

・個人アプリにて、.envファイルに記述した変数を firebase.js で読み取れるようにしたい。

問題点/エラー内容/エラー文章

※ターミナルより

  code: 'auth/invalid-api-key',
  a: null
}
{
  apiKey: undefined,
  authDomain: undefined,
  databaseURL: undefined,
  projectId: undefined,
  storageBucket: undefined,
  messagingSenderId: undefined,
  appId: undefined
}

該当ソースコード/コマンド

.env(プロジェクト直下)
REACT_APP_FIREBASE_API_KEY="*******"
REACT_APP_FIREBASE_AUTH_DOMAIN="*******"
REACT_APP_FIREBASE_DATABASE_URL="*******"
REACT_APP_FIREBASE_PROJECT_ID="*******"
REACT_APP_FIREBASE_STORAGE_BUCKET="*******"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="*******"
REACT_APP_FIREBASE_APP_ID="*******"

firebase.js（プロジェクト/src/firebase.js）
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const firebaseConfig={
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  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_IDZ
}
console.log(firebaseConfig)
if(firebase.apps.length === 0){
firebase.initializeApp(firebaseConfig);
}
export const auth = firebase.auth();
export const db = firebase.firestore();
export default firebase

想定している処理の流れ

①.envに記述した変数（firebaseにてプロジェクトを作成→アプリの追加をして得た変数）をfirebase.jsにて読み込む。
②その変数を用いて、開発環境にあるアプリとfirebaseとを接続させる。
③認証機能やDBを使用する。

うまくいっている部分

・firebaseでのプロジェクトの生成とアプリの追加処理。

エラー原因となり得る部分

・firebase.jsの記述？

試したことや調べたこと

-APIキー等が間違えていないか。firebaseから直接コピー＆ペーストをした。
-.envにスペースなどの間隔が空いていないか確認した。
-firebase.jsにてconsole.log(firebase.config)をしたがundefinedとなっていたことは確認できた。
（APIキーだけでなく、全項目がundefinedとなっていた。）

#最後に
ぜひ皆様のお力をお借りできたらと思います。
また、わかりにくい等ございましたら、お手数おかけしますが
ご指摘いただけますと幸甚です。

hoshi-takanori

2021/08/01 05:11 編集

dotenv か何かを使って .env ファイルの内容を環境変数に取り込む必要があるのでは。 https://qiita.com/ozaki25/items/3e2cf94f29bd0edc1979

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

回答1件

process.env は firebase.js が Node.js 上で実行される場合は環境変数が設定されますが、Reactが動作するのはブラウザ上なので環境変数が設定されません。
firebaseConfig の各フィールドは公開されても問題が無い情報なので環境変数ではなく直接値を埋め込んではいかがでしょうか？

見当違いなことを回答していまいました。無視してください。

投稿2021/07/31 23:59

編集2021/08/01 00:06