Internal Server Error with /api/login and /api/register Links in Production

GitHub Issue: Internal Server Error with `/api/login` and `/api/register` Links in Production

Issue Description:

I am encountering an issue with the /api/login and /api/register endpoints in my Nuxt.js application. The problem arises when using the NuxtLink, LoginLink, or RegisterLink components with the paths specified in the @nuxt/kinde documentation.

Steps to Reproduce:

Develop a Nuxt.js application with the configurations mentioned below.
Use NuxtLink, LoginLink, or RegisterLink components to navigate to /api/login or /api/register.
In the development environment, these links work as expected without any issues.
Build the Nuxt application using npm run build.
Deploy and run the application.

Observed Behavior:

In the development environment, navigating to /api/login and /api/register works correctly.
In the production environment, clicking the login or register links results in an internal server error.
A warning is logged in browser console during development:
- No match found for location with path "/api/login"
- No match found for location with path "/api/register"

Expected Behavior:

The login and register links should work seamlessly in both development and production environments without resulting in internal server errors.

Configuration Details:

package.json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "npm run build && wrangler pages dev",
    "postinstall": "nuxt prepare",
    "deploy": "npm run build && wrangler pages deploy",
    "cf-typegen": "wrangler types"
  },
  "dependencies": {
    "nuxt": "^3.11.2",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20240512.0",
    "@formkit/auto-animate": "^0.8.2",
    "@nuxtjs/color-mode": "^3.4.1",
    "@nuxtjs/kinde": "^0.1.10",
    "@nuxtjs/tailwindcss": "^6.12.0",
    "@vueuse/nuxt": "^10.9.0",
    "dayjs-nuxt": "^2.1.9",
    "nitro-cloudflare-dev": "^0.1.4",
    "nuxt-icon": "^0.6.10",
    "nuxt-typed-router": "^3.6.3",
    "typescript": "^5.4.5",
    "wrangler": "^3.57.1"
  }
}

nuxt.config.ts:

export default defineNuxtConfig({
  devtools: { enabled: true },

  nitro: {
    preset: "cloudflare-pages",
  },

  kinde: {
    debug: true,
  },

  modules: [
    "nitro-cloudflare-dev",
    "@nuxtjs/kinde",
    "nuxt-typed-router",
    "@nuxtjs/tailwindcss",
    "@vueuse/nuxt",
    "@formkit/auto-animate",
    "@nuxtjs/color-mode",
    "dayjs-nuxt",
    "nuxt-icon",
  ],

  colorMode: {
    classSuffix: "",
    preference: "light",
    fallback: "light",
  },
});

Additional Information:

The issue does not occur in the development environment but only in the production environment.
The deployment process involves building the Nuxt application and deploying it using wrangler pages deploy.

Request for Assistance:

I would appreciate any insights or suggestions on how to resolve this issue. Specifically, I need help understanding why the login and register links result in an internal server error in production and how to fix this.

Thank you for your assistance!

After digging around in the code and reading the deployment docs, I found that Nuxt does not use the .env file when building for production.

o fix this issue, I used the kinde options in the nuxt.config.ts file as shown below:

export default defineNuxtConfig({
  devtools: { enabled: true },

  nitro: {
    preset: "cloudflare-pages",
  },

  kinde: {
    debug: true,
    password: process.env.NUXT_KINDE_PASSWORD,
    authDomain: process.env.NUXT_KINDE_AUTH_DOMAIN,
    clientId: process.env.NUXT_KINDE_CLIENT_ID,
    redirectURL: process.env.NUXT_KINDE_REDIRECT_URL,
    logoutRedirectURL: process.env.NUXT_KINDE_LOGOUT_REDIRECT_URL,
    postLoginRedirectURL: process.env.NUXT_KINDE_POST_LOGIN_REDIRECT_URL,
    clientSecret: process.env.NUXT_KINDE_CLIENT_SECRET,
    audience: process.env.NUXT_KINDE_AUDIENCE,
  },

  modules: [
    "nitro-cloudflare-dev",
    "nuxt-typed-router",
    "@nuxtjs/tailwindcss",
    "@vueuse/nuxt",
    "@formkit/auto-animate",
    "@nuxtjs/color-mode",
    "dayjs-nuxt",
    "nuxt-icon",
    "@nuxtjs/kinde",
    "./modules/my-app-module",
  ],

  colorMode: {
    classSuffix: "",
    preference: "light",
    fallback: "light",
  },
});

This approach ensures that the environment variables are correctly passed to the Nuxt configuration in production.

nuxt-modules / kinde