Hiding API keys with Firebase without rendering in the client side? [duplicate] - firebase

Question

This question already has answers here:
Is it safe to expose Firebase apiKey to the public?
(10 answers)
Closed last month.
I'm looking for a secure way to handle API keys in my NextJS web app using Firebase.
I see the suggestion to "hide" the keys in an ENV file then make sure of the variables by calling something like process.env.NEXT_PUBLIC_MYSUPERSECRETKEY. This will still reveal the key in the source code when it renders on the client browser.
...
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
}
...
I tried to use the process.env.FIREBASE_API_KEY (with the .env.local file defining FIREBASE_API_KEY) form to keep the variable server-side but Firebase throws an error:
FirebaseError: Firebase: Error (auth/invalid-api-key).
I looked at some code on GitHub and saw people were defining the ENV in the next.config.js file but that has the same result of showing on the client-side as well:
next.config.js
module.exports = {
env: {
API_KEY: process.env.FIREBASE_API_KEY,
},
}
.env.local
FIREBASE_API_KEY="XXX"
firebaseApp.js
...
const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
...
https://nextjs.org/docs/api-reference/next.config.js/environment-variables

Answer 1

When you choose a hosting platform, for example we will use vercel.
You will more than likely point vercel towards your GitHub repo for it to build the application from.
When configuring the project on vercel, in the project settings there will be fields to enter your environment variables into. This will take care of the potential security issue you are seeing.
See here: https://nextjs.org/docs/basic-features/environment-variables