how do we configure a package in React (in-general).
In NodeJS, We have singleton so we can create an external file, say (./firebase-config.js) and then import it in our main Index.js file (starting point of our node application).
In react till now, I am used to configuring it in Index.html but now I am using react-native which does not have DOM so I can't put my configuration there.
Take index.js or app.js (considering cli version where index.js is the root and app.js is immediate children having all other children) from where I have my config folder at ./src/config/flamelink.js and this to be my configuration
import * as firebase from 'firebase';
import flamelink from 'flamelink';
const firebaseConfig = {
apiKey: '<your-api-key>', // required
authDomain: '<your-auth-domain>', // required
databaseURL: '<your-database-url>', // required
projectId: '<your-project-id>', // required
storageBucket: '<your-storage-bucket-code>', // required
messagingSenderId: '<your-messenger-id>' // optional
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const app = flamelink({ firebaseApp });
Question: Where should I import it to configure it? or will it React-native work just like node and by just importing, things would work?
Yep, you can just have your configuration in, say, firebase-config.js, which might look like
const firebaseConfig = {
apiKey: '<your-api-key>', // required
authDomain: '<your-auth-domain>', // required
databaseURL: '<your-database-url>', // required
projectId: '<your-project-id>', // required
storageBucket: '<your-storage-bucket-code>', // required
messagingSenderId: '<your-messenger-id>' // optional
};
export default firebaseConfig;
and then do
import firebaseConfig from './firebase-config';
elsewhere in your code.
Related
I try to connect firebase data base to react app but it give error module not found
import firebase from "firebase/app"
import "firebase/auth";
const app = firebase.initializeApp({
apiKey: ,
authDomain: ,
projectId: ,
storageBucket: ,
messagingSenderId: ,
appId:
})
export const auth = app.auth()
export default app
This is a picture of error
Kindly check if firebase exists in your package.json file dependencies
If not found you can run:
npm i #firebase/app
If found you can reinstall the package
I am using Google Sign In, Firebase, and React firebase hook to login react web application.
inserting firebaseConfig API (.env.local) file and setting the secret keys to firebase config causes errors on the console
.env.local
REACT_APP_AUTH_DOMAIN=doctors-portal-6bc13.firebaseapp.com
REACT_APP_PROJECT_ID=doctors-portal-6bc13
REACT_APP_STORAGE_BUCKET=doctors-portal-6bc13.appspot.com
REACT_APP_MESSAGING_SENDER_ID=725454304359
REACT_APP_APP_ID=1:725454304359:web:49840cbf09a6b578e210c2```
firebase.init.js file
import { initializeApp } from "firebase/app";
import {getAuth } from "firebase/auth";
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,
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;```
Works directly when using Firebase API without using (.env.local)
const firebaseConfig = {
apiKey: "AIzaSyA72Jfi_WXWie-i641mAYhLv3QgiynzLxQ",
authDomain: "doctors-portal-6bc13.firebaseapp.com",
projectId: "doctors-portal-6bc13",
storageBucket: "doctors-portal-6bc13.appspot.com",
messagingSenderId: "725454304359",
appId: "1:725454304359:web:49840cbf09a6b578e210c2",
};
writting like this does not give any error
try this: https://i.stack.imgur.com/xH4Dm.png
You have to place your .env path between `${
It works for me.
I had the same issue.
You just need to Restart the Server.
Close the server and start again with npm start.
This just worked fine for me.
(Every time you create or change anything in your .env file, you need to start the server again )
I'm trying to implement Firebase Auth in my Next.js project. The auth system works just fine, BUT only when I directly declare the API key inside of initializeApp. For example:
import firebase from 'firebase/app'
import 'firebase/auth'
const app = !firebase.apps.length ? (
firebase.initializeApp({
apiKey: 'MY_KEY',
authDomain: process.env.FIREBASE_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_SOTORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_SENDER_ID,
appId: process.env.FIREBASE_ID,
measurementId: process.env.FIREBASE_MESUREMENT_ID,
})
) : (firebase.app())
export default app
When I try to get the API key using the .env file, next.js throws the following error:
"Unhandled Runtime Error Error: Your API key is invalid, please check you have copied it correctly."
I've also tried to add those variables by adding the env configuration inside next.config.js, just like Vercel's recommendation https://nextjs.org/docs/api-reference/next.config.js/environment-variables. It also did not work.
My current code goes like this:
import firebase from 'firebase/app'
import 'firebase/auth'
const app = !firebase.apps.length ? (
firebase.initializeApp({
apiKey: process.env.FIREBASE_KEY,
authDomain: process.env.FIREBASE_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_SOTORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_SENDER_ID,
appId: process.env.FIREBASE_ID,
measurementId: process.env.FIREBASE_MESUREMENT_ID,
})
) : (firebase.app())
export default app
What should I do to make initializeApp able to read the process.env.FIREBASE_KEY value?
The Firebase CLI doesn't support deployment of functions that add environment variables. It doesn't matter what you have in any .env file - they simply aren't going to appear in the process environment at all after deployment.
The documented way to provide configuration parameters to your function is explained in the documentation. The variables do not manifest as process environment in process.env. They will appear in the object returned by functions.config() at runtime.
If you really must have process environment variables, you won't be able to use whatever you have sitting in .env. You could instead write and deploy your function using gcloud to specify environment. However, this would lose you all the benefits of using the Firebase CLI, as it's a completely different deployment tool.
You could also deploy with the Firebase CLI, then update the specific environment after deployment with gcloud.
Bottom line is that what you're trying to do isn't terribly easy or straightforward. I suggest learning how to use the config provided by Firebase to make this easier, but this means you will have to copy what you have in .env into its config system.
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_REACT_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_REACT_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_REACT_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_REACT_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_REACT_FIREBASE_MESSAGE_SENDER_ID,
appId: process.env.NEXT_PUBLIC_REACT_FIREBASE_APP_ID,
measurementId: 'G-measurement-id',
};
useEffect(() => {
initializeApp(firebaseConfig);
const messaging = getMessaging();
onMessage(messaging, (payload) => {
console.log('Message received. ', payload);
// Update the UI to include the received message.
setMessages([...messages, payload]);
});
resetUI();
})
Not a problem/bug, but I have the following questions about the Firebase config file below:
firebaseconfig.js
import * as firebase from 'firebase';
const config = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_ID"
};
firebase.initializeApp(config);
export default firebase;
When I import firebase from this config file (firebaseconfig.js), does it run the entire firebase.js file and then import the firebase object each time, or does it just give me the firebase object at the end? If it's the first answer, then does that mean that multiple instances of firebase app get initialized? If it's the second answer, then when does the code preceding "export default firebase" get executed and not-executed?
When you require or import some javascript code, it only gets executed once, no matter how many times it's required or imported. The resulting export is essentially a singleton that's shared across all modules that uses it.
I'm getting auth-domain-config-required errors when using firebase.auth().signInWithPopup(provider).
I've tried with Google and Facebook. I've tested on my hosted site, and it works fine. You can test it live: Quiver Chat Demo
I suspect there's a problem with localhost:3333... does it not like my port? I can't add a port to the Authorized domains list, and adding it to my authDomain: config doesn't help either.
Here's my auth code, but as you can see from the screenshots below, I tried a bunch of different authDomain values.
<script src="https://quiver-four.firebaseapp.com/__/firebase/4.6.2/firebase-app.js"></script>
<script src="https://quiver-four.firebaseapp.com/__/firebase/4.6.2/firebase-auth.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyCzNxnQ6WCJKejq6SBd7NqhVskxEOmDq_Y",
authDomain: "quiver-four.firebaseapp.com",
databaseURL: "https://quiver-four.firebaseio.com",
projectId: "quiver-four",
storageBucket: "quiver-four.appspot.com",
messagingSenderId: "1082528354495"
};
firebase.initializeApp(config);
</script>
Attempting localhost:3333
Attempting localhost
Attempting quiver-four.firebaseapp.com
The domains are added
You must not be providing the correct authDomain in your Firebase app initialization configuration.
You can get that web snippet from the Firebase Console. The authDomain has the form projectName.firebaseapp.com.
I had the same problem and my solution was to have a file in the root firebase.js with all the connection configuration:
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import {getAuth} from 'firebase/auth'
import { getAnalytics } from "firebase/analytics";
// 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
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "xxxxxxx_xxx_R-xxx-CDxxxxcg",
authDomain: "qxxxxxx-xxxx.firebaseapp.com",
projectId: "xxxxxx-xxxxx",
storageBucket: "xxxxxxx-xxxx.appspot.com",
messagingSenderId: "xxxxxxx",
appId: "1:xxxxxxx:wxb:xxxxxxxxxxxxxx",
measurementId: "G-xxxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const db = getFirestore(app);
export const auth = getAuth(app);