How to store Firebase credentials in Vue.js projects after building (env_var)

Question

I have been trying to deploy my firebase&vue app. However I couldn't add firebase credentials to the env variable.

Basically this is the structure on vue.js

• config

  ---- key.js

  ---- keys_dev.js

  ---- keys_prod.js

key.js

if(process.env.NODE_ENV == 'production'){
    module.exports = require('./keys_prod');
} else {
    module.exports = require('./keys_dev');
}

keys_dev.js

module.exports = {
firebase: {
    apiKey: "*********************************",
    authDomain: "*****************************",
    databaseURL: "****************************",
    projectId: "******************************",
    storageBucket: "**************************",
    messagingSenderId: "**********************",
  }    
}

keys_prod.js

module.exports = {
  firebase: {
    apiKey: process.env['FIREBASE_apiKey'],
    authDomain: process.env['FIREBASE_authDomain'],
    databaseURL: process.env['FIREBASE_databaseURL'],
    projectId: process.env['FIREBASE_projectId'],
    storageBucket: process.env['FIREBASE_storageBucket'],
    messagingSenderId: process.env['FIREBASE_messagingSenderId'],
  }
}

Also I tried like this in keys_prod.js but I guess we can not use object in the env_var, so I changed it to the code above.

module.exports = {
  firebase: process.env.FIREBASE_CONFIG
}

After npm run build, I created express app, define process.env's however when I run server, I am getting error because of env_vars are missing. I tried to see logs on both front and backend console. I can see envs on node console but not in browser. I also tried to deploy this app to heroku and firebase hosting. In both cases I added envs externally, but nothing change. (I guess there is no difference to use env_vars in localhost or remote server right ?)

Finally I tried to change keys.js (keys_prod > keys_dev)

if(process.env.NODE_ENV == 'production'){
    module.exports = require('./keys_dev');
} else {
    module.exports = require('./keys_dev');
}

then it works, but I can find the credentials in the source code this time.

Answer 1

There's a better way that the other answer. You don't need to import - that would bring the settings into the deployed JS, which isn't a good idea.

Create a file like .env.local in the root of the Vue app, like this:

$ cat .env.local
# REMEMBER:
# ----------------------------------------------------------
# In development, *restart* "yarn serve" to pick up changes.
# ----------------------------------------------------------
VUE_APP_FIREBASE_API_KEY='1234-F1xH53UCnk'
VUE_APP_FIREBASE_AUTH_DOMAIN='your-web-1234.firebaseapp.com'
VUE_APP_FIREBASE_DATABASE_URL='https://your-web-1234.firebaseio.com'
VUE_APP_FIREBASE_PROJECT_ID='your-web-1234'
VUE_APP_FIREBASE_STORAGE_BUCKET='your-web-1234.appspot.com'
VUE_APP_FIREBASE_MESSAGING_SENDER_ID='12345678'
VUE_APP_FIREBASE_APP_ID='1:1234:web:0398509235'

Wherever you want firebase, do something like:

function getFirebaseConfig() {
  const firebaseConfig = {
    // see .env file for instructions
    apiKey: process.env.VUE_APP_FIREBASE_API_KEY || 'api-key-not-set',
    authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN || 'env-not-set',
    databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL || 'env-not-set',
    projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID || 'env-not-set',
    storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET || 'env-not-set',
    messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID || 'env-not-set',
    appId: process.env.VUE_APP_FIREBASE_APP_ID || 'env-not-set',
  }
  return firebaseConfig
}

// Initialize Firebase
firebase.initializeApp(getFirebaseConfig())

I'm using TypeScript, so I put that in a file called cloud-functions.ts` and after the above, I have:

export const postContactFunc = firebase.functions().httpsCallable('postContact')

Then, where I want to consume that function, I have:

// somewhere-else.ts
import {postContactFunc} from '@/services/cloud-functions'

Note that .env*.local is never checked in.

To remind myself what the file should be, I have this content in .env which is checked in:

$ cat .env
# REMEMBER:
# ----------------------------------------------------------
# DO NOT EDIT THIS FILE
#
# Edit .env.local or similar.
# ----------------------------------------------------------

# Get these from console - look on the _app_ area not the _project_ area.
VUE_APP_FIREBASE_API_KEY='not-set-yet'
VUE_APP_FIREBASE_AUTH_DOMAIN='not-set-yet'
VUE_APP_FIREBASE_DATABASE_URL='not-set-yet'
VUE_APP_FIREBASE_PROJECT_ID='not-set-yet'
VUE_APP_FIREBASE_STORAGE_BUCKET='not-set-yet'
VUE_APP_FIREBASE_MESSAGING_SENDER_ID='not-set-yet'
VUE_APP_FIREBASE_APP_ID='not-set-yet'

Answer 2

Here how you can do it.

Firstly, add dev.env to your project and add firebase variables.

FIREBASE_CONFIG: {
    apiKey: "*********************************",
    authDomain: "*****************************",
    databaseURL: "****************************",
    projectId: "******************************",
    storageBucket: "**************************",
    messagingSenderId: "**********************",
} 

Import the file in dev.env.js

import merge from 'webpack-merge';
import env from './dev.env';

module.exports = merge(env, {
  NODE_ENV: 'development'
}

Now, Initialize your firebase app with

import * as firebase from 'firebase';
firebase.initializeApp({VUE_APP_FIREBASE_CONFIG})

There you go! Firebase is set up for you

Hope this helps!