I'm currently working on a Next.js application that utilizes Firebase Auth for client authentication and is hosted on 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);
The code snippet below verifies ID tokens using the "firebase-admin" library.
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))
}
The following code snippet handles global user state and manages cookies.
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);
While everything works fine during development, deployment on Netlify results in the following error:
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: }
My .env.local file has all the correct Firebase values, but I'm still unable to pinpoint the cause of the error.