FirebaseError: Firebase: ошибка (auth/invalid-api-key) во время развертывания Netlify

Я создаю приложение Next.js и использую Firebase Auth для аутентификации клиента. Я использую Netlify для своего хостинга.

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);

Приведенный ниже код проверяет токены идентификатора и использует библиотеку «firebase-admin».

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.info(err))
}

Код ниже управляет глобальным состоянием пользователя и устанавливает файлы cookie.

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);

Эта настройка не дает ошибок во время разработки.

Однако во время развертывания я получаю следующую ошибку на панели инструментов Netlify:

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: }

Мой файл .env.local содержит правильные значения для Firebase. Я не знаю, что вызывает ошибку.

🤔 А знаете ли вы, что...
JavaScript поддерживает работу с куки и хранилищем веб-браузера для сохранения данных на клиентской стороне.


171
1

Ответ:

Решено

Вероятно, это происходит потому, что Netlify не знает о ваших переменных среды во время сборки развертывания. Вы также должны добавить эти переменные среды, объявленные в .env.local, в Netlify. Перейдите к настройкам сборки и развертывания в настройках сайта Netlify, а затем добавьте свои значения в раздел «Переменные среды».