How to use process.env 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?

Is `AUTH_PROVIDER_URL` mentioned in the docs? if not, could you try this `NUXT_ENV_AUTH_PROVIDER_URL` — Kunukn, Jan 31 '22 at 08:51
AUTH_PROVIDER_URL is a environment variable name I came up with... Is NUXT_ENV_AUTH_PROVIDER_URL mentioned in the docs? Cant seem to find it. — Roger Hood, Jan 31 '22 at 11:59
When starting with `NUXT_ENV` it has a special function. Might be applicable to your case. Or it might not. Maybe it was worth a try? https://nuxtjs.org/docs/configuration-glossary/configuration-env/#automatic-injection-of-environment-variables — Kunukn, Feb 01 '22 at 19:17
Same issue, I tried to use : NUXT_ENV, create an object before nuxt.config.js and call it directly inside, declare variable during dockerfile build and it fails once deployed. Everything is fine on local deployment. Did you find a solution for that ? — Paul Corbeau, May 28 '22 at 09:02

score 1 · Answer 1 · answered Jun 29 '22 at 08:38

I had the same problem. The process.env could be used at other section in the nuxt.config.js file, but not in the auth part. I guess the problem is that the auth is configured before the process.env is initialized.

If you're also using v5 of the Nuxt Auth module, @nuxtjs/auth-next, then you can follow this workaround.

First, extend the Oauth2Scheme so that it accepts environment variables.

runtimeConfigurableScheme.ts

import { Oauth2Scheme } from '@nuxtjs/auth-next/dist/runtime.js';
import { Auth, Oauth2SchemeOptions } from '@nuxtjs/auth-next/dist/runtime';
import { SchemePartialOptions } from '@nuxtjs/auth-next';

export default class RuntimeConfigurableOauth2Scheme extends Oauth2Scheme {
  constructor ($auth: Auth, options: SchemePartialOptions<Oauth2SchemeOptions>) {
    const configOptions = {
      ...options,
      ...$auth.ctx.$config.auth.strategies[options.name]
    };
    super($auth, configOptions);
  }
}

Then, use it in the nuxt.config.js file like this:

auth: {
  strategies: {
    custom: {
      scheme: '/path/to/runtimeConfigurableScheme.ts'
    }
  }
},

publicRuntimeConfig: {
  auth: {
    strategies: {
      custom: {
        endpoints: {
          authorization: `${process.env.AUTH_URL}/realms/${process.env.AUTH_REALM}/protocol/openid-connect/auth`,
          token: `${process.env.AUTH_URL}/realms/${process.env.AUTH_REALM}/protocol/openid-connect/token`,
          userInfo: `${process.env.AUTH_URL}/realms/${process.env.AUTH_REALM}/protocol/openid-connect/userinfo`,
          logout: `${process.env.AUTH_URL}/realms/${process.env.AUTH_REALM}/protocol/openid-connect/logout?redirect_uri=${encodeURIComponent(process.env.LOGOUT_REDIRECT_URL)}`
        },
        token: {
          property: 'access_token',
          type: 'Bearer',
          name: 'Authorization',
          maxAge: 300
        },
        refreshToken: {
          property: 'refresh_token',
          maxAge: 60 * 60 * 24 * 30
        },
        responseType: 'code',
        grantType: 'authorization_code',
        clientId: process.env.CLIENT_ID,
        scope: ['openid', 'profile', 'email', 'org'],
        codeChallengeMethod: 'S256'
      }
    }
  }
}

It can be called in the components with, e.g., this.$auth.loginWith('custom').

score 0 · Answer 2 · answered Jan 31 '22 at 21:44

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.

How to use process.env in the "auth" section of nuxt.config.js

2 Answers2