K
Kinde•6mo ago
Asad Malik

NUXT. Vue. Error 500 while accessing /api/login, while it works fine when running dev server.

Hi, I am using kinde with Nuxt, Vue, Nitro. While it works fine with run dev, it's giving server error 500 when running the build. 
.app>node .output/server/index.mjs
Listening on http://[::]:3000
[nuxt] [request error] [unhandled] [500] Invalid URL
  at new URL (node:internal/url:796:36)
  at AuthorizationCode.<anonymous> (/[PROJECT_PATH]/.app/.output/server/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:114:35)
  at step (/[PROJECT_PATH]/.app/.output/server/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:47:23)
  at Object.next (/[PROJECT_PATH]/.app/.output/server/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:28:53)
  at fulfilled (/[PROJECT_PATH]/.app/.output/server/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:19:58)
.app>node .output/server/index.mjs
Listening on http://[::]:3000
[nuxt] [request error] [unhandled] [500] Invalid URL
  at new URL (node:internal/url:796:36)
  at AuthorizationCode.<anonymous> (/[PROJECT_PATH]/.app/.output/server/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:114:35)
  at step (/[PROJECT_PATH]/.app/.output/server/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:47:23)
  at Object.next (/[PROJECT_PATH]/.app/.output/server/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:28:53)
  at fulfilled (/[PROJECT_PATH]/.app/.output/server/node_modules/@kinde-oss/kinde-typescript-sdk/dist/sdk/oauth2-flows/AuthorizationCode.js:19:58)
Same errors in browser console: `GET http://localhost:3000/api/login/ 500 (Internal Server Error) 10:08:19.956 w8GjRO4B.js:2 [nuxt] error caught during app initialization Error: Page not found: /api/login/ at tn (w8GjRO4B.js:2:20035) at w8GjRO4B.js:6:31212 at o (w8GjRO4B.js:2:18201) at Object.runWithContext (qTkC9Z7f.js:13:19110) at so (w8GjRO4B.js:2:18240) at w8GjRO4B.js:2:16245 at Or.run (qTkC9Z7f.js:9:267) at Object.runWithContext (w8GjRO4B.js:2:16237) at w8GjRO4B.js:6:31190 at w8GjRO4B.js:6:20763
4 Replies
Asad Malik
Asad MalikOP•6mo ago
My nuxt config: 
modules: [// '@nuxt/devtools',
    '@pinia/nuxt', 'nuxt-swiper', "@nuxt/image", '@nuxtjs/kinde'],
  pinia: {
    storesDirs: ['./stores/**'],
  },

  kinde: {
    debug: true,
  },
  experimental: {
    appManifest: false,
  },
  ssr: true,
  nitro: {
    prerender: {
      crawlLinks: false,
    },
    esbuild: {
      options: {
        target: 'esnext',
      },
    },
modules: [// '@nuxt/devtools',
    '@pinia/nuxt', 'nuxt-swiper', "@nuxt/image", '@nuxtjs/kinde'],
  pinia: {
    storesDirs: ['./stores/**'],
  },

  kinde: {
    debug: true,
  },
  experimental: {
    appManifest: false,
  },
  ssr: true,
  nitro: {
    prerender: {
      crawlLinks: false,
    },
    esbuild: {
      options: {
        target: 'esnext',
      },
    },
and .env 
NUXT_KINDE_CLIENT_ID=01b3______________________e6
NUXT_KINDE_CLIENT_SECRET=_________________y
NUXT_KINDE_AUTH_DOMAIN=https://auth.REAL_DOMAIN_NAME.com
NUXT_KINDE_REDIRECT_URL=http://localhost:3000/api/callback
NUXT_KINDE_LOGOUT_REDIRECT_URL=http://localhost:3000/api/login
NUXT_KINDE_PASSWORD=r_________39
NUXT_KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000
NUXT_KINDE_CLIENT_ID=01b3______________________e6
NUXT_KINDE_CLIENT_SECRET=_________________y
NUXT_KINDE_AUTH_DOMAIN=https://auth.REAL_DOMAIN_NAME.com
NUXT_KINDE_REDIRECT_URL=http://localhost:3000/api/callback
NUXT_KINDE_LOGOUT_REDIRECT_URL=http://localhost:3000/api/login
NUXT_KINDE_PASSWORD=r_________39
NUXT_KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000
I am sure I am missing some setting here. Can you please point me to the right direction? Thank you.
CB_Kinde
CB_Kinde•6mo ago
Are you using a Kinde SDK? If so can you tell me which one and what version? Also sorry for the delayed response.
Tehren (Ben)
Tehren (Ben)•5mo ago
I just ran into this issue myself, the .env file is not loaded in production: "In production runtime, you should use platform environment variables and .env is not used." https://nuxt.com/docs/api/composables/use-runtime-config#using-the-env-file. So either set the environment variables in whatever platform you are using to run the app, or tell Node to load the .env file as part of the startup command, eg: "node --env-file=.env .output/server/index.mjs". The --env-file flag requires node ^20.6.0. ( I know, using .env files in production is discourage etc etc).
Nuxt
useRuntimeConfig · Nuxt Composables
Access runtime config variables with the useRuntimeConfig composable.
Abdelrahman Zaki - Kinde
Abdelrahman Zaki - Kinde•2mo ago
Hi @Asad Malik, I hope you're doing well. I just wanted to check if you're still experiencing the issue. Please let me know if you need any further assistance.

Did you find this page helpful?