Netlify部署Next.js+Firebase Auth时触发auth/invalid-api-key错误

我正在开发一个Next.js应用，用Firebase Auth实现客户端认证，托管在Netlify。本地开发一切正常，但部署到Netlify时控制台抛出auth/invalid-api-key错误，.env.local里的Firebase参数配置正确，求解决办法。

相关代码 #

firebaseConfig.js #

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

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

firebaseAdmin.js #

var admin = require("firebase-admin");
var serviceAccount = require("./secrets.json");

export const verifyIdToken = (token) => {
    if (!admin.apps.length){
        admin.initializeApp({
            credential: admin.credential.cert(serviceAccount),
        })
    }
    return admin.auth().verifyIdToken(token).catch((err) => console.log(err))
}

auth.js #

import { createContext, useState, useEffect, useContext } from "react"
import { onIdTokenChanged } from "firebase/auth"
import {auth} from './firebaseConfig'
import nookies from 'nookies'

const AuthContext = createContext({});

export const AuthProvider = ({children}) => {
    
    const [user, setUser] = useState(null);

    useEffect(() => {
        return(onIdTokenChanged(auth, async (user) => {
                if(!user){
                    setUser(null);
                    nookies.set(undefined,"token", "", {});
                    return
                }
                const token = await user.getIdToken(true);
                setUser(user);
                nookies.set(undefined,"token", token, {});
        }))
    },[]);

    return(<AuthContext.Provider value={{user}}>{children}</AuthContext.Provider>);
}

export const useAuth = () => useContext(AuthContext);

部署时错误日志 #

7:25:04 AM: FirebaseError: Firebase: Error (auth/invalid-api-key).
7:25:04 AM:     at createErrorInternal (file:///opt/build/repo/node_modules/@firebase/auth/dist/node-esm/index-1491e429.js:467:40)
7:25:04 AM:     at _assert (file:///opt/build/repo/node_modules/@firebase/auth/dist/node-esm/index-1491e429.js:471:15)
7:25:04 AM:     at file:///opt/build/repo/node_modules/@firebase/auth/dist/node-esm/index-1491e429.js:6075:13
7:25:04 AM:     at Component.instanceFactory (file:///opt/build/repo/node_modules/@firebase/auth/dist/node-esm/index-1491e429.js:6092:11)
7:25:04 AM:     at Provider.getOrInitializeService (file:///opt/build/repo/node_modules/@firebase/component/dist/esm/index.esm2017.js:290:39)
7:25:04 AM:     at Provider.initialize (file:///opt/build/repo/node_modules/@firebase/component/dist/esm/index.esm2017.js:234:31)
7:25:04 AM:     at initializeAuth (file:///opt/build/repo/node_modules/@firebase/auth/dist/node-esm/index-1491e429.js:585:27)
7:25:04 AM:     at getAuth (file:///opt/build/repo/node_modules/@firebase/auth/dist/node-esm/index-1491e429.js:6141:18)
7:25:04 AM:     at /opt/build/repo/.next/server/chunks/373.js:82:68 {
7:25:04 AM:   code: 'auth/invalid-api-key',
7:25:04 AM:   customData: { appName: '[DEFAULT]' }
7:25:04 AM: }
7:25:04 AM: > Build error occurred
7:25:04 AM: Error: Failed to collect page data for /
7:25:04 AM:     at /opt/build/repo/node_modules/next/dist/build/utils.js:949:15 {
7:25:04 AM:   type: 'Error'
7:25:04 AM: }

解决方案 #

• 手动配置Netlify环境变量：本地.env.local不会被上传到Netlify，需在Netlify控制台添加所有NEXT_PUBLIC_开头的变量。路径：站点 → Site settings → Environment variables → Add variable，逐个填入和本地一致的参数值。
• 校验变量名称一致性：确保变量名大小写、拼写完全匹配代码中的引用，比如NEXT_PUBLIC_FIREBASE_API_KEY不能写错大小写。
• 验证构建时变量生效：可在Netlify构建命令中添加echo $NEXT_PUBLIC_FIREBASE_API_KEY，或临时在代码中添加console.log(process.env.NEXT_PUBLIC_FIREBASE_API_KEY)（部署后删除），确认构建过程能读取到变量值。
• 清除缓存重新部署：添加变量后，在Netlify控制台选择"Clear cache and deploy site"，确保新环境变量被加载。
• 处理firebase-admin密钥文件：如果secrets.json被.gitignore忽略，不要直接上传敏感文件。将服务账号JSON转为字符串，设置为Netlify环境变量FIREBASE_ADMIN_SERVICE_ACCOUNT，然后在firebaseAdmin.js中用JSON.parse(process.env.FIREBASE_ADMIN_SERVICE_ACCOUNT)获取凭证。

内容的提问来源于stack exchange，提问作者mukunda