Where to add firebase config variables on webpack vue project - firebase

Implementing Firebase auth on my Vue webpack project.
Google tells me to add the config to my index.html file.
If you do this and to go an view page source it exposes the api key to public. I am confused as to why google would suggest this.
Where should I position the configuration variables so it would be safe. Somebody said that main.js is not a good idea in production.
Where should I do the following in my Vue website.
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);


You can simply do it in the App.vue
import Firebase from 'firebase'
let config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
storageBucket: "...",
messagingSenderId: "..."
};
let app = Firebase.initializeApp(config)
let db = app.database()
let someDataRef = db.ref('dataset')

Related

should I still initialize firebase app twice in both index.html and main.dart if i am using only flutter web(no android or ios app)?

I am trying to build an flutter app purely as a website then should i use firebase initialize app twice both in index.html and main.dart?
index.html
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIz...",
authDomain: "...",
databaseURL: "https://<project-name>.firebaseio.com",
projectId: "...",
storageBucket: "<project-name>.appspot.com",
messagingSenderId: "...",
appId: "...",
measurementId: "..."
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
Main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}

As mentioned in the docs here you should initialize it on both places.
As mentioned in the docs they are working on a way to initialize it just on one place:
We are actively investigating ways to initialize Firebase without directly using the CDN and will update the documentation once this becomes available.

How to setup Firebase for Flutter web

I'm trying to make a web version of my Flutter Firebase app Please Help!!!
This my current config which doesn't work
var firebase = require("firebase/app");
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxxx.firebaseio.com",
projectId: "xxxxxx",
storageBucket: "xxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxxx",
appId: "1:xxxxxxxxxx:web:xxxxxxx",
measurementId: "XXXXXXXXX"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();

I think that you need to create a new project when migrating to web
1. run this command in the terminal
flutter channel dev
2. upgrade flutter with
flutter upgrade
3. create a project
flutter create web_proj //or anything
4. add the necessary script tags in the index.html its inside your Web folder
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-firestore.js"></script>
5. add the config inside index.html also
<script>
var firebase = require("firebase/app");
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxxx.firebaseio.com",
projectId: "xxxxxx",
storageBucket: "xxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxxxxx",
appId: "1:xxxxxxxxxx:web:xxxxxxx",
measurementId: "XXXXXXXXX"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
6. add the dependencies like firestore,and others and enjoy
https://pub.dev/packages/firebase#-readme-tab-

How to fix 'Firebase error: Incorrect database name'

I am in the middle of making a quick web app and set up a client-side firebase connection. Following the docs, I added the below code to my index.html before any other scripts are loaded in my head. However, whenever I try to get any kind of information from the database, I get the following error: #firebase/database: FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly (...)
I've tried following the docs about setting up a web app again, and copied the full config info. However, I keep getting the same error. I've checked that my database name is correct in the Firebase console.
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase-app.js"</script>
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase-database.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "..."
};
firebase.initializeApp(config);
</script>
I appreciate your time and suggestions.

Ensure you have typed correctly with extension:
<script src="https://www.gstatic.com/firebasejs/5.8.2/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>

Requirejs - error when trying to use firebase scripts

I am working on a login page, using firebase for user authentication.
This is the main.js script
require.config({
paths: {
'firebase': '/scripts/lib/firebase-app',
'firebase-auth': '/scripts/lib/firebase-auth',
'firebase-database': '/scripts/lib/firebase-database'
},
shim: {
'firebase-auth': ['firebase'],
'firebase-database': ['firebase']
}
});
I have this in a firebase-init.js
define(['firebase'], function(firebase) {
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "..."
};
firebase.initializeApp(config);
});
This is login.js
define(['firebase', 'firebase-auth', 'firebase-init'],
function(firebase, firebaseAuth, firebaseInit) {
...
code to login/logout user
...
});
When I run it, I get this error.
TypeError
columnNumber: 31509
​fileName: "http://localhost:3000/scripts/lib/firebase-auth.js"
​lineNumber: 1
​message: "n is undefined"
​stack: "Zn#http://localhost:3000/scripts/lib/firebase-auth.js:1:31509\nbi#http://localhost:3000/scripts/lib/firebase-auth.js:1:33789\n#http://localhost:3000/scripts/lib/firebase-auth.js:1:69619\n#http://localhost:3000/scripts/lib/firebase-auth.js:1:186\n#http://localhost:3000/scripts/lib/firebase-auth.js:1:2\n"
And this one.
Error: Cannot instantiate firebase-auth - be sure to load firebase-app.js first.
This is my first time using Requirejs. Do I have any configuration wrong? In the network tab, I can see firebase-app.js is being loaded before firebase-auth.js.
Thanks.
PS: It works fine if I use firebase.js, instead of using firebase-app.js and firebase-auth.js separately.

you must call firebase.app.js like "#firebase/app"
see my answer here Error loading firebase js with requirejs

I think you need to amend your firebase-init.js module to load all firebase modules first, as they need to be loaded before calling the firebase.initializeApp.
define(['firebase', 'firebase-auth', 'firebase-database'], function(firebase) {
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "..."
};
firebase.initializeApp(config);
});
Also you should consider adding exports to the shim.
Please confirm whether this is working :)

Firebase DatabaseURL - configuring firebase

I'm trying to use Firebase with my react app.
I have a file with the config as follows:
import * as firebase from 'firebase';
const config = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DB_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGE_ID,
}
if (!firebase.apps.length) {
firebase.initializeApp(config);
}
const database = firebase.database();
const auth = firebase.auth()
export {firebase, auth, database };
When I try this, I get an error that says:
FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include databaseURL option when calling firebase.initializeApp().
I can't understand this error because I have config included in the call to initialise the app. Config includes the database URL.
How do you initialise the database?

Same issue here.
Context: Gatsby - gatsby-node.js
For SOME reason it dsnt like my env db url. need to hardcode just that value.
const config = {
apiKey: process.env.GATSBY_FIREBASE_API_KEY,
authDomain: process.env.GATSBY_FIREBASE_AUTH_DOMAIN,
databaseURL: "https://blabla.firebaseio.com",
projectId: process.env.GATSBY_FIREBASE_PROJECT_ID,
storageBucket: process.env.GATSBY_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.GATSBY_FIREBASE_MESSAGING_SENDER_ID
}
and it worked.
cya

You don't need that if statement around the firebase.initializeApp(config);
import * as firebase from 'firebase';
const config = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.FIREBASE_DB_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGE_ID,
}
firebase.initializeApp(config);
You shouldn't need to export these objects, once you initialise the app it should be usable within the project without exporting.
const database = firebase.database();
const auth = firebase.auth()
export {firebase, auth, database };

Don't initialize firebase more than once.
https://github.com/firebase/firebase-functions/issues/228

I think it is a copy paste error :)
in .env file
REACT_APP_DATABASE_URL
but i use
process.env.REACT_APP_DB
Please check it , it worked fine
import firebase from 'firebase/app'
import 'firebase/database';
const config = {
apiKey: process.env.REACT_APP_APIKEY,
authDomain: process.env.REACT_APP_AUTHDOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PID,
storageBucket: process.env.REACT_APP_SB,
messagingSenderId: process.env.REACT_APP_SID,
appId: process.env.REACT_APP_APPID,
measurementId: process.env.REACT_APP_MID
};
firebase.initializeApp(config);
const database = firebase.database();
export { database };
export default firebase;

I know this a old thread, but I was facing this issue since last night and I spent hours racking my brain to figure out what was wrong with my code. To clarify, all .env variables were being read by cra except for the firebase database url.
I tried the following steps:
checked for spelling errors, both the .env variables and also to see if the url was correct, it was.
I tried printing the .env variables to console & screen both, but when I did the values were undefined for all env variables. This really should not happen and I was baffled.
Tried various things, changed the .env variable name for FIREBASE_DATABASE_URL to something random like XYZ (just to make it work somehow) as I thought some env variables were colliding due to same name, still didn't work.
The only way it worked was har-coding it, but this was an hack and not a solution.
The thing to note was point 2. When printing the env vars even after hardcoding the result was 'undefined' on console.
So nothing was wrong, the code should work, but it didn't why?
Out of pure randomness, I opened the task manager (windows). I notices node servers were running, but I had already closed the react dev server!
I killed the processes and restarted the react server, and now it was working.
The issue was stale node servers running in background and nothing was wrong with the code. This also resolved point 2, the console.log statements were working now.
This might not be solution to everyone's issues but it might be or was to the asker's question 3 yrs back, as there is nothing syntactically wrong with their code.

Restarting the development server solves the issue, if you have just written the code and trying to compile it throws this error. So you can try to exit the batch job and again restart the server.

I also got this uncaught error related to firebase.Atlast Finally error should be solved.
Actually when we are using environment variables they should not pass in to bundle.js file which is a client side javascript file..We can use "DefinePlugin" which is a webpack plugin that should manually pass those env variables in to bundle.js file.

Seems like your code is just fine. Just print and check process.env.FIREBASE_DATABASE_URL and its exactly same as mentioned in firebase console. (If you are using create react app, dont forget to add REACT_APP_ to all your env variables, https://create-react-app.dev/docs/adding-custom-environment-variables/)
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/storage';
const appConfiguration = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
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,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
};
export const session_type = firebase.auth.Auth.Persistence.LOCAL;
export const app = firebase.initializeApp(appConfiguration);
export const auth = app.auth();
export const db = app.firestore();
export const storage = app.storage();
will get the job done.

I just paste the hardcode config and it worked for me
const config = {
apiKey: "AIzaSyBA2C8S7****************-gCw",
authDomain: "e**********-2aa4c.firebaseapp.com",
databaseURL: "https://************.firebaseio.com",
projectId: "ea********2aa4c",
storageBucket: "ea************2aa4c.appspot.com",
messagingSenderId: "1765********26",
}

Check whether you have set environment variables using require('dotenv').config({ 'path': '.env.development' }). Also make sure that first you the set env variable as above, and then after insert firebaseConfig in Plugins:
new webpack.DefinePlugin({
'process.env.FIREBASE_API_KEY': JSON.stringify(process.env.FIREBASE_API_KEY), // this will set 'process.env.FIREBASE_API_KEY' to actual key in firebase.js cause we do not directly set those value here to make it secure excluding .env files.
'process.env.FIREBASE_AUTH_DOMAIN': JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
'process.env.FIREBASE_DATABASE_URL': JSON.stringify(process.env.FIREBASE_DATABASE_URL),
'process.env.FIREBASE_PROJECT_ID': JSON.stringify(process.env.FIREBASE_PROJECT_ID),
'process.env.FIREBASE_STORAGE_BUCKET': JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
'process.env.FIREBASE_MESSAGING_SENDER_ID': JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID),
'process.env.FIREBASE_APP_ID': JSON.stringify(process.env.FIREBASE_APP_ID),
'process.env.FIREBASE_MEASUREMENTID': JSON.stringify(process.env.FIREBASE_MEASUREMENTID)
})` )

For some reason databaseURL read string values in "",
for example if we write:
const fbAuthDomain = "text";
const fbDatabaseURL = "text";
const firebaseConfig = {
authDomain: fbAuthDomain,
databaseURL: fbDatabaseURL
};
// and then:
console.log(firebaseConfig.authDomain); // returns "text"
console.log(firebaseConfig.databaseURL); // returns text
sorry for js example
for me, helped doing variable fbDatabaseURL in json from there i process.env in config - not:
{
"fbDatabaseURL": "\"https://someurl.firebasedatabase.app\""
}
but:
{
"fbDatabaseURL": "https://someurl.firebasedatabase.app"
}

Same issue here but after putting firebaseconfig in componentDidMount() it will solved.
componentDidMount(){
const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL:process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};
firebase.initializeApp(firebaseConfig);
const myitem = firebase.database().ref('items/').once('value',snapshot=>{
console.log(snapshot.val())
})
}

In the firebase.js, when I removed the blank between databaseURL: and process.env.FIREBASE_DATABASE_URL., it worked.
const config = {
apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
databaseURL:process.env.FIREBASE_DATABASE_URL,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
};

Resources