es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Error de Firebase: Firebase: Error (auth/invalid-api-key) no detectado.

16 Jul, 2023 Programación

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:
enter image description here

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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:

    VITE_APP_API_KEY= *laclave*
VITE_APP_AUTH_DOMAIN= *eldominiodeautenticacion*
VITE_APP_PROJECT_ID= *elidentificadordeproyecto*
VITE_APP_STORAGE_BUCKET= *eldepresalmacenamiento*
VITE_APP_MESSAGING_SENDER_ID= *elIDdemenajeria*
VITE_APP_APP_ID= *elappid*

    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.

Comments are closed.