Firebase Invalid api key error in Next js

Question

I am just making a sign up page using Next JS. I am using Firebase as backend.

My code which, I want to work :-

const firebaseConfig = {
    apiKey: `${process.env.FIREBASE_API_KEY}`,
    authDomain: `${process.env.FIREBASE_AUTH_DOMAIN}`,
    projectId: `${process.env.FIREBASE_PROJECT_ID}`,
    storageBucket: `${process.env.FIREBASE_STORAGE}`,
    messagingSenderId: `${process.env.FIREBASE_MSG_ID}`,
    appId: `${process.env.FIREBASE_APP_ID}`
  };
  
  // Initialize Firebase
  const APP = initializeApp(firebaseConfig, "Demo App");
  const AUTH = getAuth(APP)

But its not working.
Error:- FirebaseError: Firebase: Error (auth/api-key-not-valid.-please-pass-a-valid-api-key.).

My code which works:-

const firebaseConfig = {
    apiKey: `xxxxxxxxxxxxxxxxxxxxxxxxxxxx_My_Api_Key`,
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxx"
  };
  
  // Initialize Firebase
  const APP = initializeApp(firebaseConfig, "Demo App");
  const AUTH = getAuth(APP)

Note :-

This project is open source and I don't want to expose my api keys.
I know, I can use NEXT_PUBLIC_API_KEY but this exposes api keys on the source of dev tools.
Their is no typo in the name of environment variable.

Have you tried logging the values in the firebaseConfig object to your dev console, they might be undefined or not what you are expecting. — Favour Felix Chinemerem, Aug 20 '22 at 13:41
I think this is a great place to start: https://nextjs.org/docs/basic-features/environment-variables — Favour Felix Chinemerem, Aug 20 '22 at 16:41
Does this answer your question: [Is it safe to expose Firebase apiKey to the public?](https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public)? — juliomalves, Aug 21 '22 at 11:01
@juliomalves Thanks. https://stackoverflow.com/questions/35418143/how-to-restrict-firebase-data-modification I got to know about google cloud api. I must use it. — Thearcane, Aug 21 '22 at 16:10

Firebase Invalid api key error in Next js

0 Answers0