6

Segment Analytics provides a snippet with a secret API key in it. In my Nuxt.js project I created a plugin called segment.js which I registered in my nuxt.config.js:

nuxt.config.js

plugins: [
  {
    src: "~/plugins/segment.js",
    mode: 'client'
  }
]

In my plugins/segment.js file I have my snippet:

!function(){var analytics=window.analytics=...analytics.SNIPPET_VERSION="4.13.2";
analytics.load(process.env.SEGMENT_API_SECRET);
analytics.page();
}}();

Obviously I don't want to have my secret API key exposed there so I have it stored in my .env file instead:

.env

SEGMENT_API_SECRET=FR4....GSDF3S

Problem: process.env.SEGMENT_API_SECRET in plugins/segment.js is undefined so the snippet doesn't work. How can I access my .env variable SEGMENT_API_SECRET from my plugin plugins/segment.js?

kissu
  • 24,311
  • 11
  • 36
  • 67
drake035
  • 3,869
  • 33
  • 97
  • 193
  • Just curious to know about potential harm these API key exposure can do, as I personally seen a few websites using segment and directly putting their API key like analytics.load(''). – Vishwas Patel May 30 '21 at 11:56

2 Answers2

7

Set your env variable into nuxt.config.js

export default {
  publicRuntimeConfig: {
    segmentApiSecret: process.env.SEGMENT_API_SECRET,
  }
}

And then, this one should do the trick

// segment.js
export default ({ $config: { segmentApiSecret } }) => {
  !function(){var analytics=window.analytics=...analytics.SNIPPET_VERSION="4.13.2";
  analytics.load(segmentApiSecret);
  analytics.page();
  }}();
}

UPDATE: A more in-depth answer of mine can be found here too.

kissu
  • 24,311
  • 11
  • 36
  • 67
  • Please don't just post code that works but help point the user in the right direction with regard to the concepts they are asking about, and post links to documentation like Greg did below. – Daniel Storey Apr 22 '22 at 15:50
  • Hi @DanielStorey, I did not gave a lot of details here because the question was quite specific (usage of envs in a plugin), rather than generic explanation of env variables. That and the fact that drake is somebody that I helped quite a lot overall daily for some months. It was not his first nor last question regarding env variables: I cannot 100% duplicate my answers on each question too. I've actually wrote quite a more in-depth answer just few days after this one as you can [see here](https://stackoverflow.com/a/67705541/8816585) and referenced several times to the OP afterwards. – kissu Apr 22 '22 at 16:01
1

For me, I wanted to use my environment (.env) variables in my Nuxt Firebase Plugin: /plugins/firebase.js. Usually with Vue, you have to prefix these .env variables with VUE_APP_, for example: VUE_APP_yourKeyName=YOUR_SECRET_VALUE

But with Nuxt, you have to then set these .env variables in the Nuxt Config nuxt.config.js like so:

// .env
VUE_APP_yourKeyName=YOUR_SECRET_VALUE

// nuxt.config.js
export default {
    env: {
        NUXT_VAR_NAME: process.env.VUE_APP_yourKeyName,
    },
}

// /plugins/firebase.js
const firebaseConfig = {
    apiKey: process.env.NUXT_VAR_NAME,
}

You can read more about using Nuxt Environment Variables here.

NOTE: For Nuxt versions > 2.12+, in cases where environment variables are required at runtime (not build time) it is recommended to replace the env property with runtimeConfig properties : publicRuntimeConfig and privateRuntimeConfig.

Greg
  • 61
  • 5