0

Currently I'm working on a nuxtJS V2.15.6 and nuxt auth V5(5.0.0-1667386184.dfbbb54) project and its authentication part handles with openID(Keycloack v18.02). When I set up the keycloak configs using variables defining in a .env file for the auth modules in nuxt.config and run it locally it's working nicely. But after deploying in the server, all the env variables in the .end file get undefined.

nuxt.config.js file

export default {
  publicRuntimeConfig: {
    apiBaseURL: process.env.API_BASE_URL,
    keyCloackBaseURL: process.env.KEYCLOAK_BASE_URL,
    keycloackRealm: process.env.KEYCLOAK_REALM,
    keycloackClientId: process.env.KEYCLOAK_CLIENT_ID,
    redirectURI: process.env.REDIRECT_URI,
  },
  // Global page headers: https://go.nuxtjs.dev/config-head
  ssr: true,
  head: {
    titleTemplate: "%s - test app",
    title: "test app",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href: "https://use.fontawesome.com/releases/v5.7.1/css/all.css",
        integrity:
          "sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr",
        crossorigin: "anonymous",
      },
    ],
  },

  loading: "~/components/loaders/Loader.vue",

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["@/assets/scss/main.scss"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ["~/plugins/loader.client.js"],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,
  router: {
    middleware: ["auth"],
  },
  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/typescript
    "@nuxt/typescript-build",
    // https://go.nuxtjs.dev/vuetify
    "@nuxtjs/vuetify",
    "@nuxtjs/moment",
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/auth-next",
    "@nuxtjs/sitemap",
    "@nuxtjs/dotenv",
    "@nuxtjs/toast",
  ],
  // Used as fallback if no runtime config is provided https://nr-app.arimac.digital/api/
  axios: {
    baseURL: process.env.API_BASE_URL,
    headers: {
      // common: {
      //   "X-OAuth-Client-Name": process.env.CLIENT_NAME || "nr_web",
      //   "X-OAuth-Client-Secret":
      //     process.env.CLIENT_SECRET || "2lDh43jZYO7mBrBT0tb9NCR7kTXJSVM6",
      //   "X-OAuth-Client-Version": process.env.CLIENT_VERSION || "1",
      // },
    },
  },
  auth: {
    localStorage: false,
    strategies: {
      local: false,
      keycloak: {
        scheme: "oauth2",
        endpoints: {
          authorization: `${process.env.KEYCLOAK_BASE_URL}/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/auth`,
          token: `${process.env.KEYCLOAK_BASE_URL}/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
          userInfo: false,
          logout: `${process.env.KEYCLOAK_BASE_URL}/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/logout`,
        },
        token: {
          property: "access_token",
          type: "Bearer",
          name: "Authorization",
          maxAge: 1800,
        },
        refreshToken: {
          property: "refresh_token",
          maxAge: 60 * 60 * 24 * 30,
        },
        clientId: `admin-client`,
        responseType: "code",
        grantType: "authorization_code",
        codeChallengeMethod: "S256",
        accessType: "offline",
        codeChallengeMethod: "S256",
        scope: ["openid", "offline_access"],
        // logoutRedirectUri: `${process.env.REDIRECT_URI}`,
        autoLogout: true,
        // redirectUri: "/",
      },
    },
    redirect: {
      login: "/login",
      logout: "/",
      callback: "/callback",
      home: "/",
    },
    // cookie: {
    //   options: {
    //     httpOnly: false,
    //     secure: true,
    //     sameSite: "none",
    //   },
    // },
  },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    treeShake: false,
    customVariables: ["~/assets/scss/variables.scss"],
    theme: {
      themes: {
        light: {
          primary: "#1b7ec1",
          secondary: "#0b408c",
          Green: "#01a51b",
          red: "#dc001b",
          orange: "#f06c06",
        },
        dark: {
          primary: "#1b7ec1",
          secondary: "#0b408c",
          green: "#01a51b",
          red: "#dc001b",
          orange: "#f06c06",
        },
      },
      dark: false,
    },
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
};

.env file enter image description here

URL variables is getting undefined as below url enter image description here

Hashan94
  • 117
  • 1
  • 7

0 Answers0