raectでfirebaseで認証を行おうとすると、エラーで認証ができません。

Question

前提

reactでfirebaseを使用して、認証行いたいと思い、実装しておりましたが、
認証でエラーが発生して認証ができない状態です。。。
fireabase v9
react v18

参考のサイトなども調べましたが、v8のものが多く、、、

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

firebaseConfig.jsの17行目でエラー

FirebaseError: Firebase: Error (auth/invalid-api-key).
 15 | // Initialize Firebase
 16 | const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
 17 | const auth = getAuth(app);
    |                     ^
 18 | const provider = new GoogleAuthProvider();
 19 | 
 20 | export {auth, provider};

console.log(firebaseConfig);で値が正しいどうかも確認しましたが、
問題なく、全ての値が正しく表示されます。

該当のソースコード

import { FirebaseOptions, initializeApp, getApps, getApp, FirebaseApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};
console.log(firebaseConfig);
// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

export {auth, provider};

FirebaseOptions・FirebaseAppはなくても問題ないかと思いますが、
試して追記したものを残している状態です。

わかる方おりましたら、お教えいただきたいです。。。

Answer 1

Reactじゃなかったのですか！

Answer 2

環境変数の記述が誤っておりました。
NEXT_PUBLIC_FIREBASE_API_KEY
で再度記述し直し解決できました。

Answer 3

私はnextjsとfirebaseですが、同じエラーになります。
解決しましたか？

Comments

[atsupoooon]

まだ解決できておりません。。。
環境変数を直接記述することで動作することは確認できたのですが、
直接記述するのは、よくないと思いまだ調べて調整しております。。

[busiRyu110]

解決しました
多分ここの値が間違えていますよ
```
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGE_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
```

[busiRyu110]

もしくは、reactならREACT_APPをつければ、envから読み込めますよ

[atsupoooon]

ありがとうございます！
一度こちらで試してみます！！！

[atsupoooon]

環境変数を下記のような形で変更しましたが、やはり同じエラーになりました。
REACT_APP_FIREBASE_API_KEY

＝＝エラー文章＝＝
FirebaseError: Firebase: Error (auth/invalid-api-key).
＝＝＝＝＝＝＝＝＝

busiRyu110さんは、どのような形でエラーがなくなりましたでしょうか。
参考にお教え頂ければと思います。

[busiRyu110]

私の場合は、
envに記載し、その後に、別のファイルで下記のようにimportから環境変数を読めるようにしました。
これをやらなくても良いとは思いましが、正しくconsolelogしてenvの中身取得できていましたか？
取得できていない場合、取得方法などが間違えています。

```
export const FIREBASE_API_KEY = process.env['NEXT_PUBLIC_FIREBASE_API_KEY'] ?? ''
```