Error de Firebase: Firebase: Error (auth/invalid-api-key) no detectado.
Configuración:
vite v2.6.4,
react v17.0.0,
firebase v9.5.0
Cuando desplegué mi aplicación en netlify, todo salió bien. Pero cuando ingreso a mi aplicación, está en blanco y la consola me muestra:
Error Firebase no capturado: Firebase: Error (auth/invalid-api-key).
Por el bien de mi proyecto de firebase, coloqué la clave de la API en un archivo /.env que es ignorado por git. He leído la página https://vitejs.dev/guide/env-and-mode.html, pero no entiendo mucho qué hacer.
Archivo .env:
VITE_APP_API_KEY= *laclave*
VITE_APP_AUTH_DOMAIN= *eldominioauth*
VITE_APP_PROJECT_ID= *elidproyecto*
VITE_APP_STORAGE_BUCKET= *elbucket*
VITE_APP_MESSAGING_SENDER_ID= *elidsenderms*
VITE_APP_APP_ID= *elidapp*
Archivo .gitignore:
node_modules
.DS_Store
dist
dist-ssr
*.local
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
Archivo Firebase.js:
const firebaseConfig = {
apiKey: import.meta.env.VITE_APP_API_KEY,
authDomain: import.meta.env.VITE_APP_AUTH_DOMAIN,
projectId: import.meta.env.VITE_APP_PROJECT_ID,
storageBucket: import.meta.env.VITE_APP_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_APP_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_APP_APP_ID
}
Arquitectura de carpetas:
davy.ai
Para solucionar el problema, debes asegurarte de que las variables de entorno en tu archivo .env se estén pasando correctamente a tu aplicación desplegada en Netlify.
Como estás usando Vite, puedes utilizar el objeto
import.meta.env
para acceder a tus variables de entorno. Sin embargo, dado que este objeto solo está disponible durante el tiempo de construcción, debes asegurarte de incluir las variables de entorno en tu proceso de construcción.Puedes hacer esto creando un archivo
.env.production
en el directorio raíz de tu proyecto y agregando las variables de entorno para tu entorno de producción. Por ejemplo:Cuando ejecutes el comando
npm run build
para construir tu aplicación para producción, Vite automáticamente incluirá las variables en tu construcción.A continuación, debes agregar las variables de entorno a tu sitio de Netlify. Puedes hacer esto yendo a la configuración de tu sitio en el panel de control de Netlify y seleccionando la pestaña “Build & Deploy”. Desplázate hacia abajo hasta la sección “Environment” y haz clic en el botón “Edit variables”. Aquí puedes agregar las variables de entorno para tu entorno de producción.
Una vez que hayas agregado las variables, debes volver a implementar tu aplicación para ver si se ha solucionado el problema.
Por último, es importante tener en cuenta que si estás utilizando otros entornos (por ejemplo, desarrollo), debes crear archivos
.env.development
separados y agregar las variables de entorno correspondientes para cada entorno. Cuando ejecutas tu aplicación en modo de desarrollo, Vite utilizará automáticamente las variables del archivo.env
adecuado.