Where to add firebase config variables on webpack vue project

Question

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);

Be informed that in any case your config will be exposed to the public. In the case of a Vue.js project, it will be in one of the js files generated in your project dist folder by webpack when you call `npm run buid`. But this is actually not a problem. There are several posts explaining why it is not a problem that this config is public. — Renaud Tarnec, May 02 '18 at 15:31
See https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public — Renaud Tarnec, May 02 '18 at 15:39

score 3 · Answer 1 · answered May 02 '18 at 15:24

3

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')

answered May 02 '18 at 15:24

guyromb

773
8
15

Did you mean main.js or App.vue cause the image you posted of App.vue? – KasparTr May 02 '18 at 15:46

Where to add firebase config variables on webpack vue project

1 Answers1