如何修复 NextJS + Firebase 应用程序中的“FirebaseError：Firebase：错误（auth/invalid-api-key）”

Question

在尝试将 Firebase 集成到我的 NextJS 应用程序中时，我遇到了错误。为了让您更好地了解情况，让我提供一些额外的细节。在我的项目中，我有一个 .env 文件，其中存储了 Firebase 必要的配置设置。然而，尽管正确添加了这些设置，错误仍然发生。

NEXT_API_KEY='AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxvKyKqZtM'
NEXT_AUTH_DOMAIN='tixxxxxxxxxxxxxxxcom'
NEXT_PROJECT_ID='tixxxxxxxxxxx'
NEXT_STORAGE_BUCKET='tixxxxxxxxxxxxcom'
NEXT_MESSAGING_SENDER_ID='3855xxxxxxxx91'
NEXT_APP_ID='1:385xxxxxxxabf6'
NEXT_MEASUREMENT_ID='GxxxxxF'

这是我的代码。

import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";


const firebaseConfig = {
    apiKey: process.env.NEXT_API_KEY,
    authDomain: process.env.NEXT_AUTH_DOMAIN,
    projectId: process.env.NEXT_PROJECT_ID,
    storageBucket: process.env.NEXT_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_APP_ID,
    measurementId: process.env.NEXT_MEASUREMENT_ID,
};

console.log(firebaseConfig);
const firebase = initializeApp(firebaseConfig);
export const auth = getAuth(firebase);

export const googleProvider = new GoogleAuthProvider();

Answer 1

我也遇到这个问题了

我发现你的前缀必须以 NEXT_PUBLIC_ 开头

NEXT_PUBLIC_API_KEY='AIzaxxxxxxxxxxxxxxxxxxxxxxxxxxxxvKyKqZtM'
NEXT_PUBLIC_AUTH_DOMAIN='tixxxxxxxxxxxxxxxcom'
NEXT_PUBLIC_PROJECT_ID='tixxxxxxxxxxx'
NEXT_PUBLIC_STORAGE_BUCKET='tixxxxxxxxxxxxcom'
NEXT_PUBLIC_MESSAGING_SENDER_ID='3855xxxxxxxx91'
NEXT_PUBLIC_APP_ID='1:385xxxxxxxabf6'
NEXT_PUBLIC_MEASUREMENT_ID='GxxxxxF'

Answer 2

就我而言，我输入的是

apikey

而不是

apiKey

。差别很大（字母 k 是大写）。