How to use Firebase Environment Variables in Nuxt Config

Question

I am trying to separate Firebase Creds from my Nuxt Config file. But it is saying NuxtServerError Your API key is invalid, please check you have copied it correctly. It works fine when I use my creds directly into my nuxt config (without environment variables).

I am using @nuxtjs/firebase module and this is my config: firebase ssr/universal auth documentation

  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
    '@nuxtjs/firebase',
    '@nuxtjs/pwa',
  ],

  firebase: {
    config: {
      apiKey: process.env.apiKey,
      authDomain: process.env.authDomain,
      databaseURL: process.env.databaseURL,
      projectId: process.env.projectId,
      storageBucket: process.env.storageBucket,
      messagingSenderId: process.env.messagingSenderId,
      appId: process.env.appId,
      measurementId: process.env.measurementId
    },
    services: {
      auth: {
        ssr: true
      }
    }
  },
  pwa: {
    // disable the modules you don't need
    meta: false,
    icon: false,
    // if you omit a module key form configuration sensible defaults will be applied
    // manifest: false,

    workbox: {
      importScripts: [
        // ...
        '/firebase-auth-sw.js'
      ],
      // by default the workbox module will not install the service worker in dev environment to avoid conflicts with HMR
      // only set this true for testing and remember to always clear your browser cache in development
      dev: false
    }
  }

I have stored all my creds in .env file in my app(with the quotations mark).

apiKey="my_key"
authDomain="my_domain"
databaseURL="my_db_url"
projectId="my_project_id"
storageBucket="my_storage_bucket"
messagingSenderId="my_sender_id"
appId="my_app_id"
measurementId="my_measurement_id"

Is there any way to separate my creds from nuxt config file (I am committing my nuxt config file on my github).

PS: my environment variables can be console logged from my app component using process.env.apikey and others. I also have @nuxtjs/dotenv package installed.

please check the answer https://stackoverflow.com/a/60483377/4523764 — Hardik Shah, Apr 14 '20 at 05:03

score 2 · Answer 1 · edited Mar 05 '21 at 06:19

2

Nuxt has it own baked environment variable processing. Read about publicRuntimeConfig: {} and privateRuntimeConfig {} in the docs. You don't need dotenv dependency anymore.

edited Mar 05 '21 at 06:19

bguiz

27,371
47
154
243

answered Mar 05 '21 at 05:15

Nawi

51
5

rslvn · Accepted Answer · 2020-04-12T01:53:33.413

That is a @nuxtjs/dotenv issue (I think).

Regarding to Using .env file in nuxt.config.js documentation, for that case you should use directly dotenv module instead of @nuxtjs/dotenv.

nuxt.config.ts sample

import dotenv from 'dotenv'

let path =
  process.env.NODE_ENV === 'production'
   ? '.env'
   : '.env.' + process.env.NODE_ENV

dotenv.config({path})

export default {
 ....
 // Now, you are able to use process.env.<property_from_dotenv>
 env: {
  apiKey: process.env.apiKey,
  authDomain: process.env.authDomain,
  databaseURL: process.env.databaseURL,
  projectId: process.env.projectId,
  storageBucket: process.env.storageBucket,
  messagingSenderId: process.env.messagingSenderId,
  appId: process.env.appId,
  measurementId: process.env.measurementId
 },
}

nuxt.config.js sample

const dotenv = require('dotenv');

let path =
  process.env.NODE_ENV === 'production'
   ? '.env'
   : '.env.' + process.env.NODE_ENV

dotenv.config({path})

sample code https://github.com/rslvn/nuxt-typescript-firebase-auth-ssr — rslvn, Apr 15 '20 at 02:05
sorry for some reason, I re-created it with a different name. I removed the multi .env configuration. Using different branches are logically useful in the new repository. But still, you can find extendable infrastructure in https://github.com/rslvn/nuxt-typescript-ssr-firebase-auth — rslvn, May 12 '20 at 01:41

score 0 · Answer 3 · answered Apr 14 '20 at 20:45

0

I struggled with this issue as well. I use the same setup.

Add :

require('dotenv').config()

To the top of your nuxt.config.js file. This allows the config to access your local .env file.

answered Apr 14 '20 at 20:45

CoderVtwo

48
4

How to use Firebase Environment Variables in Nuxt Config

3 Answers3