Nuxt configuration: How to user process.env or similiar in the "auth" section of nuxt.config.js

Question

I am new to Nuxt (using Nuxt 2.15.3 + Vue2 + Javascript).

I am having some difficulties with an AUTH_PROVIDER_URL environment variable which is set to be different on my local setup, on my staging servers and in the production environment. I am 100% sure that the environment variable is set correctly in each environment.

The issue I have is in the nuxt.config.js file and under the "auth" section where I need to point to a different URL for each environment (local, staging, production).

https://auth.nuxtjs.org/schemes/oauth2#options

In my nuxt.config.js I have:

authorization: process.env.AUTH_PROVIDER_URL + '/auth',
userInfo: process.env.AUTH_PROVIDER_URL + '/userinfo',
logout: process.env.AUTH_PROVIDER_URL + '/logout',

This works fine locally on my computer when I start the application in development (npm run dev) and production mode (npm run build, npm run start). The variables(authorization, userInfo and logout) for the urls get set correctly based on the process.env.AUTH_PROVIDER_URL statements.

But when I deploy and run it to the staging and production servers process.env.AUTH_PROVIDER_URL returns UNDEFINED. It seems "process.env" doesnt find the AUTH_PROVIDER_URL environment variable in the "auth" context in the nuxt.config.js file on the staging and production servers.

Using process.env like shown below in the nuxt.config.js files work both locally, on staging servers and on the production servers and the variables gets set correct.

export default {
  auth_provider_url: process.env.AUTH_PROVIDER_URL,

  publicRuntimeConfig: {
    auth_provider_url: process.env.AUTH_PROVIDER_URL,
  },

}

How come process.env works fine in this context in the nuxt.config.js file but not under the "auth" context in the nuxt.config.js? Is it possible for me to access these variables under the "auth" section of the nuxt.config.js file?

What is the preferred/correct way to handle(use) environment variables under the "auth" section in the nuxt.config.js file?

Answer 1

process.env is an environment variable that you define on your system. in your local case, you probably have a .env file that contains those keys and when you run npm run dev it automatically loads them for you.
Now when you build your app, some environment variables gets replaced during the build stage, so you need to have them available when you do that, but some do not so you'd need to set them up on your server too during run time.