How can I fix "FirebaseError: Firebase: Error (auth/invalid-api-key)" in NextJS + Firebase app

Question

While trying to integrate Firebase into my NextJS app, I encountered an error. To give you a better understanding of the situation, let me provide some additional details. In my project, I have a .env file where I store the necessary configuration settings for Firebase. However, despite adding these settings correctly, the error still occurred.

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'

and this is my code.

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

I was getting this issue too.

I found out that you have to start your prefixes with 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'