I am tried to get the firebase config file using env.process. If I use directly the config info. its working well...
Firebase.init.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;
.env
REACT_APP_API_KEY=*********************
REACT_APP_AUTH_DOMAIN=**************************
REACT_APP_PROJECT_ID=****************
REACT_APP_STORAGE_BUCKET=***********************
REACT_APP_MESSAGING_SENDER_ID=****************
REACT_APP_APP_ID=***************************
Related
I noticed that the firestore messagingSenderId is different than the firebase auth's messagingSenderId So I separated them into 2 configs but I get an error FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app)
This is my code
// Import the functions you need from the SDKs you need
import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFireStore } from "#firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "someKey",
authDomain: "someDomain",
projectId: "same ID",
storageBucket: "same storage bucket",
messagingSenderId: "Different messagingSenderId",
appId: "same ID",
};
const fireStoreConfig = {
apiKey: "sameKey",
authDomain: "sameDomain",
projectId: "same ID",
storageBucket: "same storage bucket",
messagingSenderId: "Different messagingSenderId",
appId: "same ID",
};
// Initialize Firebase
let app = {};
getApps().length === 0
? (app = initializeApp(firebaseConfig))
: (app = getApp());
storeApp = initializeApp(fireStoreConfig);
export const auth = getAuth(app);
export const db = getFireStore(storeApp);
Should I separate the 2 configs or is there a better way?
import firebase from 'firebase'
const firebaseConfig = {
apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
authDomain: "todo-app-e3cf0.firebaseapp.com",
projectId: "todo-app-e3cf0",
storageBucket: "todo-app-e3cf0.appspot.com",
messagingSenderId: "940016886081",
appId: "1:940016886081:web:91686613f16b1b1f8001c0",
measurementId: "G-JHPC7TP12K"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export default db;
Error
Module not found: Error: Package path . is not exported from package C:\Users\Sairam\Visual Code\todo-list\node_modules\firebase (see exports field in C:\Users\Sairam\Visual Code\todo-list\node_modules\firebase\package.json)
Did you mean './firebase'?
I believe the firebase had lot of updates recently, so you should update the imports this way and it worked liked a charm.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
authDomain: "todo-app-e3cf0.firebaseapp.com",
projectId: "todo-app-e3cf0",
storageBucket: "todo-app-e3cf0.appspot.com",
messagingSenderId: "940016886081",
appId: "1:940016886081:web:91686613f16b1b1f8001c0",
measurementId: "G-JHPC7TP12K"
};
// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);
// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();
export { auth, db };
You should import like below. I see this from the firebase documentation: https://www.npmjs.com/package/firebase
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';
const firebaseConfig = {
apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
authDomain: "todo-app-e3cf0.firebaseapp.com",
projectId: "todo-app-e3cf0",
storageBucket: "todo-app-e3cf0.appspot.com",
messagingSenderId: "940016886081",
appId: "1:940016886081:web:91686613f16b1b1f8001c0",
measurementId: "G-JHPC7TP12K"
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
export default db;
In your Firebase config file, set up Firebase as follows:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';
// Your web app's Firebase configuration
const config = {
//your config json file
};
firebase.initializeApp(config);
export const firestore = firebase.firestore();
export default firebase;
In the relevant .js script import Firestore and Firebase as follows:
import {firestore as db} from './firebase-config'
import firebase from './firebase-config';
If you use electron-react-boilerplate, in webpack.config.renderer.dev.dll.ts, remove firebase from the entry point. For example:
entry: {
renderer: Object.keys(dependencies || {}).filter((it) => it !== 'firebase'),
},
It is not working because you are using Firebase version-8 codes in upgraded Firebase version-9 , so if you want to solve your problem you should install Firebase version-8 by using the code below:
npm i firebase#8.2.3
I noticed that I was importing my firebase.ts config file as import db from "firebase" (absolute imports)
The issue here was that webpack was referencing the "firebase" from node_modules, rather than from my firebase.ts. And that's why it threw that error.
I fixed it by importing my firebase configs as import db from "../../firebase", and that worked
You have mistaken at const db = firebase.firestore();
It should be const db = firebaseApp.firestore();
Even after doing that you will get error of module not found. You need to import as following
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
This worked for me as I had the same issue!!
maybe i meeted the same problem when using webpack.
i solved the problem by setting webpack/configuration/resolve/#resolveconditionnames
As in v-9.8.2. Here is the docs link
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
import { getDatabase } from "firebase/database";
const firebaseConfig = {};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const firebaseAuth = getAuth(app);
export const fbDatabase = getDatabase(app);
export const fStore = getFirestore(app);
export const fStorage = getStorage(app);
Currently, Firebase provides two Web SDK variants. So make sure that you are using the correct version of firebase library. With version 9 firebase library was arranged independent libraries. Your syntax is using firebase version 8.
version-8 version-9
I want to create simple React Native screen which can store data to firestore. i've tried my code and it didn't work properly. anyone can help me to solve this problem?
MyCode:
FirebaseConfig.js
import { initializeApp } from "firebase/app";
import { getFirestore, initializeFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "AIzaSyATGb_omplyagNkyoGNtAVC1OYkP6xbzMA",
authDomain: "other-project-3131c.firebaseapp.com",
databaseURL: "https://other-project-3131c-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "other-project-3131c",
storageBucket: "other-project-3131c.appspot.com",
messagingSenderId: "574501137641",
appId: "1:574501137641:web:adb6ba1ce0c5e8dff29478",
measurementId: "G-G71KCFJQQV"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
//Initialize Firestore
export const db = getFirestore(app);
import firebase from 'firebase'
const firebaseConfig = {
apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
authDomain: "todo-app-e3cf0.firebaseapp.com",
projectId: "todo-app-e3cf0",
storageBucket: "todo-app-e3cf0.appspot.com",
messagingSenderId: "940016886081",
appId: "1:940016886081:web:91686613f16b1b1f8001c0",
measurementId: "G-JHPC7TP12K"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export default db;
Error
Module not found: Error: Package path . is not exported from package C:\Users\Sairam\Visual Code\todo-list\node_modules\firebase (see exports field in C:\Users\Sairam\Visual Code\todo-list\node_modules\firebase\package.json)
Did you mean './firebase'?
I believe the firebase had lot of updates recently, so you should update the imports this way and it worked liked a charm.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
authDomain: "todo-app-e3cf0.firebaseapp.com",
projectId: "todo-app-e3cf0",
storageBucket: "todo-app-e3cf0.appspot.com",
messagingSenderId: "940016886081",
appId: "1:940016886081:web:91686613f16b1b1f8001c0",
measurementId: "G-JHPC7TP12K"
};
// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);
// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();
export { auth, db };
You should import like below. I see this from the firebase documentation: https://www.npmjs.com/package/firebase
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore/lite';
const firebaseConfig = {
apiKey: "AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc",
authDomain: "todo-app-e3cf0.firebaseapp.com",
projectId: "todo-app-e3cf0",
storageBucket: "todo-app-e3cf0.appspot.com",
messagingSenderId: "940016886081",
appId: "1:940016886081:web:91686613f16b1b1f8001c0",
measurementId: "G-JHPC7TP12K"
};
const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
export default db;
In your Firebase config file, set up Firebase as follows:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/auth';
// Your web app's Firebase configuration
const config = {
//your config json file
};
firebase.initializeApp(config);
export const firestore = firebase.firestore();
export default firebase;
In the relevant .js script import Firestore and Firebase as follows:
import {firestore as db} from './firebase-config'
import firebase from './firebase-config';
If you use electron-react-boilerplate, in webpack.config.renderer.dev.dll.ts, remove firebase from the entry point. For example:
entry: {
renderer: Object.keys(dependencies || {}).filter((it) => it !== 'firebase'),
},
It is not working because you are using Firebase version-8 codes in upgraded Firebase version-9 , so if you want to solve your problem you should install Firebase version-8 by using the code below:
npm i firebase#8.2.3
I noticed that I was importing my firebase.ts config file as import db from "firebase" (absolute imports)
The issue here was that webpack was referencing the "firebase" from node_modules, rather than from my firebase.ts. And that's why it threw that error.
I fixed it by importing my firebase configs as import db from "../../firebase", and that worked
You have mistaken at const db = firebase.firestore();
It should be const db = firebaseApp.firestore();
Even after doing that you will get error of module not found. You need to import as following
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
This worked for me as I had the same issue!!
maybe i meeted the same problem when using webpack.
i solved the problem by setting webpack/configuration/resolve/#resolveconditionnames
As in v-9.8.2. Here is the docs link
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
import { getDatabase } from "firebase/database";
const firebaseConfig = {};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const firebaseAuth = getAuth(app);
export const fbDatabase = getDatabase(app);
export const fStore = getFirestore(app);
export const fStorage = getStorage(app);
Currently, Firebase provides two Web SDK variants. So make sure that you are using the correct version of firebase library. With version 9 firebase library was arranged independent libraries. Your syntax is using firebase version 8.
version-8 version-9
I installed firebase version 4.6.2. When I try to set up the firebase config I got this error. Can anyone help me with this.
Note: I set up the database config on the firebase website and everything fine.
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
const firebaseConfig = {
apiKey: "key",
authDomain: "project.firebaseapp.com",
projectId: "project",
storageBucket: "project.appspot.com",
messagingSenderId: "1234",
appId: "appid",
};
// Initialize the app
firebase.initializeApp(firebaseConfig);
// Exporting the authentication(auth) and the database (firestore)
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const provider = new firebase.auth.GoogleAuthProvider();
export default firebase;