Environnement variables with Vite project

Support
,
1

Hello eveybody !

Here is my app : https://neon-tanuki-8775a6.netlify.app/
And my repo : GitHub - Graphandco/lucelle-app

I have a .env file configured like so :

VITE_FIREBASE_API_KEY=*********
VITE_FIREBASE_AUTH_DOMAIN=******
VITE_FIREBASE_DATABASE_URL=********
VITE_FIREBASE_PROJECT_ID=************

And a firebase config :

const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
    databaseURL: import.meta.env.VITE_FIREBASE_DATABASE_URL,
    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_FIREBASE_STOCKAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_FIREBASE_SENDER_ID,
    appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

Everything works fine locally. I deploy my app, have no built error, and put my variables like so in netlify settings :

VITE_FIREBASE_ADMIN_ID : *************

My variables are incorrect, am I missing something ?

2

I am going to tell you to NOT proceed with the project as you currently are. The reason as outlined in the Production Replacement section of the Vite Env Variables and Modes documentation

During production, these env variables are statically replaced.

This means that the API Key and other firebase configuration will end up in the production build and available to anyone who care to look for it.

A much better approach as outlined in the following support guide is to create a function that fetches data from the database (handling errors in the process) and returns a response to the frontend

3

Firebase is a little different as it’s intended to be connected to from the front-end.
So the standard API connection credentials are effectively public keys.

You secure the database using authentication and security rules.

Subsequently I wouldn’t even bother setting them up as environment variables.

1 Like