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: {},
};