environment variables
Unanswered
Lötgott posted this in #help-forum
LötgottOP
Hello, I'm new to html and js Programming. I'm trying to make a bingo website. I'm hosting the website over vercel, because its ability to get the code directly from gitHub and update it automatically. To store the user data i'm using firestore. As i dont want do show everybody the api key I want to use an environment variable in vercel. It's called FIREBASE_API_KEY. I tried to implement it in my code:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-firestore.js";
const firebaseConfig = {
apiKey: FIREBASE_API_KEY,
....
};
// Firebase initialisieren
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db };
sadly it doesnt work😢 Could please someone explain me how to use it?
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-firestore.js";
const firebaseConfig = {
apiKey: FIREBASE_API_KEY,
....
};
// Firebase initialisieren
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db };
sadly it doesnt work😢 Could please someone explain me how to use it?
21 Replies
Did you add the enviroment variable in vercel?
I think it's under settings
do i have to import some special vercel code or something like it?
@Lötgott just make sure you're accessing it serverside and not clientside
LötgottOP
what do u mean with serverside? I dont ewant to transfer the api key directly to the client but with the envelopment variable
or is this bullshit and i'm dumb
Also take a look at this link. If the client side calls the function(meaning the browser),this key wont be available. This is to ensure secret variables don't leak.
You have to prefix the variable with
You have to prefix the variable with
NEXT_PUBLIC_ if you want it available to the client. Make sure you don't prefix this on anything that is supposed to be secret.LötgottOP
thanks. so i renamed it but now it gives me this error:
Uncaught ReferenceError: process is not defined
at (index):15:17
Uncaught ReferenceError: process is not defined
at (index):15:17
I didn't catch that
not sure why process is undefined though
Maybe its just eslint giving that error
LötgottOP
no its sadly not working
@Lötgott no its sadly not working
That is very weird. Try prefixing the environment variable with
NEXT_PUBLIC_Just for a test
Btw if you didnt already know this: After changing the environment variable you need to redeploy. It wont just be automatically there for existing builds
LötgottOP
yes i know, i changed the variables Prefix but it isnt working anyways