[Feature Request] Inject Firebase Config dynamically during run time instead of build time

[ericgrainbridge]

Version

@nuxtjs/firebase: 7.3.3
firebase: 8.0.1
nuxt: 2.14.12

Steps to reproduce

Custom environment does not work as expected. I'm unable to build nuxt once and deploy to multiple environments. Follow the steps in the documentation for the customEnv option to reproduce.
https://firebase.nuxtjs.org/guide/options#customenv

Looking into the implementation for the customEnv option, the firebase appConfig gets injected only at build time and not at run time. This is a show stopper for larger projects like the organization I work for.

https://github.com/nuxt-community/firebase-module/blob/dev/lib/plugins/main.js

What is Expected?

Firebase module should behave like @nuxtjs/axios where module configurations get added via nuxt publicRuntimeConfig or privateRuntimeConfig settings. Use the nuxt axios project as a good example to solve build once and deploy to many environment issues.

https://axios.nuxtjs.org/options
https://github.com/nuxt-community/axios-module/blob/a1a189486d63356433c939529d6e631f3fc9f923/lib/plugin.js#L194

What is actually happening?

You have to build for each deployment environment. If you build once and deploy to many environments only one environment can be deployed.

[lupas]

Hey @ericgrainbridge
Thank you for the issue.

This is in fact working as expected - the way this is currently implemented is not expected to be injected during run time, as you correctly mentioned.

I do see however the value of this being injected during run time. So labelling this as a feature request.

Feel free to create a PR for this issue if you find the time.

br, Pascal

[ericgrainbridge]

@lupas Thanks, much appreciated!

[krisanalfa]

I bumped into this problem. Quick workaround is to use patch-package.

1. First, you need to use the exact version of @nuxtjs/firebase like mine:

{
  "dependencies": {
    "@nuxtjs/firebase": "=7.6.1"
  }
}

2. Create a new file in patches/@nuxtjs+firebase+7.6.1.patch with the contents below:

diff --git a/node_modules/@nuxtjs/firebase/lib/module.js b/node_modules/@nuxtjs/firebase/lib/module.js
index 573a616..3c1ab8f 100644
--- a/node_modules/@nuxtjs/firebase/lib/module.js
+++ b/node_modules/@nuxtjs/firebase/lib/module.js
@@ -6,15 +6,19 @@ const templateUtils = require('./utils/template-utils')
 const r = (...path) => resolve(__dirname, ...path)
 
 module.exports = function (moduleOptions) {
+  const { nuxt } = this
   const defaultOptions = {
     injectModule: true,
   }
 
+  const runtimeConfig = nuxt.options.publicRuntimeConfig && nuxt.options.publicRuntimeConfig.firebase || {}
   const options = Object.assign(
     defaultOptions,
     this.options.firebase,
-    moduleOptions
+    moduleOptions,
+    { config: runtimeConfig }
   )
+
   const currentEnv = getCurrentEnv(options)
 
   validateOptions(options)
diff --git a/node_modules/@nuxtjs/firebase/lib/plugins/main.js b/node_modules/@nuxtjs/firebase/lib/plugins/main.js
index e10925a..a7a58e6 100644
--- a/node_modules/@nuxtjs/firebase/lib/plugins/main.js
+++ b/node_modules/@nuxtjs/firebase/lib/plugins/main.js
@@ -11,6 +11,8 @@ for (const service of enabledServices) { %>
 const appConfig = <%= serialize(options.config) %>
 
 export default async (ctx, inject) => {
+  const runtimeConfig = ctx.$config && ctx.$config.firebase || {}
+  Object.assign(appConfig, runtimeConfig)
 
   <%/****************************************
   **************** LAZY MODE **************

3. Add this line to your package.json scripts

"postinstall": "patch-package"

4. Run npm install or yarn install to initiate patching process

5. Last but not least put your Firebase config in publicRuntimeConfig

module.exports = {
  publicRuntimeConfig: (env) => ({
    firebase: {
      apiKey: env.FIREBASE_API_KEY || 'xxx',
      authDomain: env.FIREBASE_AUTH_DOMAIN || 'xxx.firebaseapp.com',
      databaseURL:
        env.FIREBASE_DATABASE_URL || 'https://xxx.firebaseio.com',
      projectId: env.FIREBASE_PROJECT_ID || 'xxx',
      storageBucket: env.FIREBASE_STORAGE_BUCKET || 'xxx.appspot.com',
      messagingSenderId: env.FIREBASE_MESSAGING_SENDER_ID || 'xxx',
      appId: env.FIREBASE_APP_ID || 'xxx',
      measurementId: env.FIREBASE_MEASUREMENT_ID || 'xxx',
    },
  }),
}

P.S: Not sure this is the best approach, but at least it works on my development machine. Don't use this on production as I'm not responsible for any buggy experiences on your application.

[fabioscmelo]

Any updates? It would be great to be able to change the config at runtime

[tabuz]

I encountered exactly same problem. I reckon this will be a little bit more complex than just replacing config at runtime, due to the fact that config is copied to auto generated service-worker.js.

[BobbieGoede]

Running into the need for this feature now too as we want to split our dev, staging and production firebase configs.

The changes suggested by @krisanalfa do work, but yes unfortunately the generated workers won't be updated as the options are baked/compiled at build time.

[alamilladev]

You should merge @BobbieGoede pull request. It would be great to be able to change the config at runtime.

[jeepkd]

Would love to know more about concerns preventing the PR from being merged?