Estoy usando Firebase Auth en mi aplicación Expo (Google Auth) y para hacerlo, necesito configurar mis variables de Firebase en un archivo .env (mi API_KEYS, AuthDomain...). Estoy usando constantes de exposición para obtener esas variables env y usarlas en mi archivo firebase.ts, cuando se implementó, funcionó tanto en dispositivos móviles como en la web. Hoy noté que ya no funciona en la web porque el objeto constants.manifest está vacío y no entiendo por qué.
firebase.ts:
import { initializeApp } from "firebase/app"; import "firebase/auth"; import Constants from "expo-constants"; // Initialize Firebase console.log("=======>", Constants); const firebaseConfig = { apiKey: Constants.manifest?.extra?.apiKey, authDomain: Constants.manifest?.extra?.authDomain, projectId: Constants.manifest?.extra?.projectId, storageBucket: Constants.manifest?.extra?.storageBucket, messagingSenderId: Constants.manifest?.extra?.messagingSenderId, appId: Constants.manifest?.extra?.appId, }; const Firebase = initializeApp(firebaseConfig); export default Firebase;app.config.js:
import "dotenv/config"; export default { expo: { entryPoint: "./src/App.tsx", name: "Flooz", slug: "flooz", version: "1.0.0", orientation: "portrait", icon: "./src/assets/images/icon.png", scheme: "flooz", userInterfaceStyle: "automatic", splash: { image: "./src/assets/images/splash.png", resizeMode: "contain", backgroundColor: "#ffffff", }, updates: { fallbackToCacheTimeout: 0, }, assetBundlePatterns: ["**/*"], ios: { supportsTablet: true, }, android: { adaptiveIcon: { foregroundImage: "./src/assets/images/adaptive-icon.png", backgroundColor: "#ffffff", }, }, web: { favicon: "./src/assets/images/favicon.png", }, extra: { apiKey: process.env.API_KEY, authDomain: process.env.AUTH_DOMAIN, projectId: process.env.PROJECT_ID, storageBucket: process.env.STORAGE_BUCKET, messagingSenderId: process.env.MESSAGING_SENDER_ID, appId: process.env.APP_ID, }, }, };