Nuxt + Firebase - Correct way to handle environment variables

Question

I have been trying to develop a fully functional, reusable firebase authentication app however after looking online at multiple different solutions, I have developed the below which works perfectly but from my understanding there is no way to protect the API keys/sensitive data? Is there anyway to use environment variables on the plugins/firebase.js file?

The nuxt/firebase docs suggests declaring them within the nuxt.config.js file? But when following the docs and trying to install firebase & @nuxtjs/firebase I keep running into errors. NPM error when I am trying to install @nuxtjs/firebase

Is there any definitive/working best practise to follow when working with Nuxt & Firebase?

~plugins/firebase.js

import firebase from 'firebase/app';
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/storage'

const firebaseConfig = {
  apiKey: "xxxx",
  authDomain: "xxxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxx"
};

firebase.apps.length ? firebase.initializeApp(firebaseConfig) : ''

export const auth = firebase.auth()
export const google = new firebase.auth.GoogleAuthProvider()
export const storage = firebase.storage()
export default firebase

~/plugins/fireauth.js

import { auth } from '~/plugins/firebase.js'

export default (context) => {
  const { store } = context

  return new Promise((resolve, reject) => {
    auth.onAuthStateChanged(user => {
        
         console.log(user);
     
         store.dispatch('setUser', user)
         resolve(user)

       }, err => {
         reject(err)
       })
  })
}

Update to @Kissu

The environment variables are now working as per @kissu's comments below - however the app is now crashing because the initializeApp() is not being run. Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).

~/plugins/firebase.js

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import 'firebase/compat/storage'

export default ({ $config }) => {
    const firebaseConfig = {
        apiKey: $config.firebaseConfig.apiKey,
        authDomain: $config.firebaseConfig.authDomain,
        projectId: $config.firebaseConfig.projectId,
        storageBucket: $config.firebaseConfig.storageBucket,
        messagingSenderId: $config.firebaseConfig.messagingSenderId,
        appId: $config.firebaseConfig.appId
    }
    !firebase.apps.length ? firebase.initializeApp(firebaseConfig) : ''
  }


export const auth = firebase.auth()
export const google = new firebase.auth.GoogleAuthProvider()
export const storage = firebase.storage()

Resources:
https://firebase.nuxtjs.org/
https://dev.to/drewclem/building-user-accounts-with-nuxt-vuex-and-firebase-2o6l

Answer 1

In your Firebase Config, you can use local environment variables (from your .env file) using process.env.VUE_APP_:

// ~/plugins/firebase.js

const firebaseConfig = {
    apiKey: process.env.VUE_APP_FIREBASE_apiKey,
    authDomain: process.env.VUE_APP_FIREBASE_authDomain,
    projectId: process.env.VUE_APP_FIREBASE_projectId,
    storageBucket: process.env.VUE_APP_FIREBASE_storageBucket,
    messagingSenderId: process.env.VUE_APP_FIREBASE_messagingSenderId,
    appId: process.env.VUE_APP_FIREBASE_appId,
    measurementId: process.env.VUE_APP_FIREBASE_measurementd,
};

But be sure to set your Variables in your .env file like this:

// ~/.env 
// NOTE: THIS FILE IS NOT COMMITTED TO CODE REPOSITORY / GITHUB AND SHOULD BE IGNORED BY DEFAULT IN YOUR `.gitignore` FILE

// NOTE: For Vue.js environment variables, you must prefix them with `VUE_APP_`
VUE_APP_FIREBASE_apiKey=
VUE_APP_FIREBASE_authDomain=
VUE_APP_FIREBASE_projectId=
VUE_APP_FIREBASE_storageBucket=
VUE_APP_FIREBASE_messagingSenderId=
VUE_APP_FIREBASE_appId=
VUE_APP_FIREBASE_measurementId=

Where after the = you put your secret keys and ID's. NOTE: Be sure to leave NO SPACE between the = and your key. For example:

VUE_APP_FIREBASE_apiKey=YOUR.KEY.HERE
...

You can read more documentation on VUE_APP Environment Variables here: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

This .env file should not be committed to Github, or your code repository. Instead, set these variables on your production environment. For example, if you are using Netlify or Heroku, you will want to set Environment Variables with the EXACT same names like VUE_APP_FIREBASE_apiKey and set its value to be equal to your Key.

If using Netlify, set your Environment Variables in your Build & Deploy Site Settings:

https://app.netlify.com/sites/{{YOUR_SITE_HERE}}/settings/deploys#environment