Variables / config read after

[ekarlso]

Are the NUXT_OIDC_* vars read at runtime or and how does it play with nuxt.config.ts? I am having some issues where variable in my kubernetes deployment doesn't seem to work at runtime and nuxt.config.ts carries over.

[TonyArntsen]

Are the NUXT_OIDC_* vars read at runtime or and how does it play with nuxt.config.ts? I am having some issues where variable in my kubernetes deployment doesn't seem to work at runtime and nuxt.config.ts carries over.

Nuxt relies on a .env file for supplying environment variables during bootup. Using this file, or build args to the docker image, is the only way to access variables at time of initialization.
This is due to how the application is eventually bundled into javascript modules (I guess it’s all just javascript in the end… which doesn’t have any solid concept of env vars)

Luckily, the env vars with NUXT_ prefix are turned into static assets. They can be used at runtime. However, this requires using the runtimeConfig. Some of the OIDC configuration therefore needs to move into the runtime config.

Naming matters for runtimeconfig!
The exact env variable NUXT_OIDC_PROVIDERS_OIDC_CLIENT_ID translates to, and populates clientId in this structure:

 runtimeConfig: {
   oidc: {
     providers: {
       oidc: {
         clientId: "",
         clientSecret: "",
         authorizationUrl: "",
         tokenUrl: "",
         userinfoUrl: "",
         redirectUri: ""
       }
     },
     middleware: {
       globalMiddlewareEnabled: true,
       customLoginPage: false
     },
     enabled: true,
     session: {}
   },
}

Our provider is a generic OIDC provider, therefore OIDC appears twice. But it could have been for instance NUXT_OIDC_PROVIDERS_ENTRA_CLIENT_ID.

Rest of the config simply appears again in the root of defineNuxtConfig:

  oidc: {
    defaultProvider: "oidc",
    providers: {
      oidc: {
        requiredProperties: ["clientId", "clientSecret"],
        responseMode: "fragment",
        tokenRequestType: "form-urlencoded",
        authenticationScheme: "body",
        grantType: "authorization_code",
        scope: ["openid", "profile", "email"],
        userNameClaim: "email",
        responseType: "code",
        pkce: false,
        state: true,
        nonce: true,
        skipAccessTokenParsing: true,
        callbackRedirectUrl: "/",
        exposeAccessToken: true
      }
    },
    middleware: {
      globalMiddlewareEnabled: true,
      customLoginPage: false
    }
  },

They are naturally just static values because they are not environment specific.

This works for docker-compose and our kubernetes config.

Note, this specific example only works in 0.15.0, but it's quite similar in versions above. Your code editor will tell you what fields to move in our out of either the static config, or runtimeconfig.

[ekarlso]

Thanks so much Tony! I'll test this when I get a chance.

[ekarlso]

Hi, yeah I tried doing this and then taking NUXT_OIDC_PROVIDERS_ZITADEL_CLIENT_ID set in my k8s values but the "built" version doesn't pick it up it seems.

[itpropro]

Hi, yeah I tried doing this and then taking NUXT_OIDC_PROVIDERS_ZITADEL_CLIENT_ID set in my k8s values but the "built" version doesn't pick it up it seems.

Have you set the clientId property to an empty string in the Nuxt/app config? The way config merging in Nuxt works, you have to set the values to an empty string to be able to overwrite them via env variable.
If you have a small reproduction that would be great, as in the playground, setting configs via. env variables works.