skip to Main Content

I have a nuxt config file that tries to expose all my .env variables to the client.
Some varibles are exposed and I can access them(i’m accessing using useRuntimeConfi()), and some just return "undefined" whenever i try to access them

I do not know what the cause might be, but here’s my code to look at:

nuct.config.ts:

export default defineNuxtConfig({
    /*
     ** Runtime Variables
     */
    runtimeConfig: {
      apiVersion: process.env.API_VERSION || 'alpha',
      cmsUrl: process.env.CMS_URL || 'http://localhost:1337',
      cmsToken: process.env.CMS_TOKEN || 'token',
      public: {
        baseURL: process.env.BASE_URL || 'http://localhost:3000',
        auth0Domain: process.env.AUTH0_DOMAIN,
        auth0ClientID: process.env.AUTH0_CLIENT_ID,
        redirectUri: process.env.REDIRECT_URI || 'http://localhost:3000/',
        stagingUri: process.env.STAGING_URI,
        localDevUri: process.env.LOCAL_DEV_URI,
        cmsUrl: process.env.CMS_URL || 'http://localhost:1337',
      }
    },
});

my auth.js file:

import { createAuth0 } from '@auth0/auth0-vue';
import { useRuntimeConfig } from 'nuxt/app';

//the below console.log returns undefined
console.log(useRuntimeConfig().stagingUri, useRuntimeConfig().redirectUri;

export default defineNuxtPlugin((nuxtApp) => {
  const auth0 = createAuth0({
    domain: useRuntimeConfig().auth0Domain,
    clientId: useRuntimeConfig().auth0ClientID,
    authorizationParams: {
        redirect_uri: useRuntimeConfig().redirectUri || useRuntimeConfig().stagingUri,
    },
    logoutParams: {
      returnTo: useRuntimeConfig().redirectUri || useRuntimeConfig().localDevUri,
    },
    useRefreshTokens: true,
    cacheLocation: 'localstorage'
  });

  if (process.client) {
    nuxtApp.vueApp.use(auth0);
  }

  addRouteMiddleware('auth', () => {
    if (process.client) {
      auth0.checkSession();
      if (!auth0.isAuthenticated.value) {
        auth0.loginWithRedirect({
          appState: {
            target: useRoute().path,
          },
        });
      }
    }
  });
});

As you can see from the file, the redirectUri property is defined but the stagingUri and localDevUri is undefined. Why is that??

2

Answers


  1. Include the public key in your useRuntimeConfig()

    const auth0 = createAuth0({
        domain: useRuntimeConfig().public.auth0Domain, // Add the .public
        clientId: useRuntimeConfig().public.auth0ClientID, // Add .public
        authorizationParams: {
            redirect_uri: useRuntimeConfig().public.redirectUri || useRuntimeConfig().public.stagingUri, // Add .public
        },
        logoutParams: {
          returnTo: useRuntimeConfig().public.redirectUri || useRuntimeConfig().public.localDevUri, // Add .public
        },
        useRefreshTokens: true,
        cacheLocation: 'localstorage'
      });

    Accessing the useRuntimeConfig().public will display all the available public config variables.

    Login or Signup to reply.
  2. Got similar issue when I had new data inside .env & runtimeConfig(). I got undefined for my new datas.
    My nuxt version was 3.2.3. I upgrade for the last nuxt version and it work now.

    Inside .env : NUXT_PUBLIC_stagingUri=something

    runtimeConfig: {
        public: {
          stagingUri: process.env.stagingUri
        },
      },
    

    And use useRuntimeConfig().public.stagingUri to access indeed

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search