So, the problem I am facing is that I have front-end code in the frontend folder and .env file in the root folder. When I try to import the env variables into the folder from the root directory it does not work but when I try the same thing by moving the .env folder into the frontend dir it works fine. I have read on the web that this is something to do with vite.config.js file and tried everything and gets the same error everytime. Below is the error I get:

Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key).
    at createErrorInternal (firebase_auth.js?v=2fe280ad:700:38)
    at _assert (firebase_auth.js?v=2fe280ad:704:11)
    at Component.instanceFactory (firebase_auth.js?v=2fe280ad:7595:7)
    at Provider.getOrInitializeService (chunk-5VIIZODA.js?v=b16ac1bd:928:33)
    at Provider.initialize (chunk-5VIIZODA.js?v=b16ac1bd:875:27)
    at initializeAuth (firebase_auth.js?v=2fe280ad:3015:25)
    at getAuth (firebase_auth.js?v=2fe280ad:7665:16)
    at new FirebaseAuth (Auth.js:16:17)
    at Auth.js:59:19

And also to mention again the application starts working fine as soon as the folder is moved inside the frontend folder