Kinde•10mo ago

next.config.js Kinde Env Vars

I'm trying to set some of my KINDE environment variables in my next.config.js file in order to support preview deployments. Here's a minimal example:

...
  env: {
    KINDE_SITE_URL: "http://localhost:3000",
    KINDE_POST_LOGOUT_REDIRECT_URL: "http://localhost:3000",
    KINDE_POST_LOGIN_REDIRECT_URL: "http://localhost:3000/dashboard"
  }
}

module.exports = nextConfig

...
  env: {
    KINDE_SITE_URL: "http://localhost:3000",
    KINDE_POST_LOGOUT_REDIRECT_URL: "http://localhost:3000",
    KINDE_POST_LOGIN_REDIRECT_URL: "http://localhost:3000/dashboard"
  }
}

module.exports = nextConfig

I do not have any of the 3 env variables set elsewhere When I visit my application, I get the following error:

⨯ TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:405:5)
    at new URL (node:internal/url:676:13)
    at new t (/Users/me/projects/my-project/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/cjs/index.js:1:29570)
    at /Users/me/projects/my-project/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/cjs/index.js:1:30927
    at f (/Users/me/projects/my-project/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/cjs/index.js:1:1537)
    at Generator.<anonymous> (/Users/me/projects/my-project/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/cjs/index.js:1:2887)
... {
  input: 'undefined/api/auth/login',
  code: 'ERR_INVALID_URL',
  page: '/api/auth/[...kindeAuth]'

⨯ TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:405:5)
    at new URL (node:internal/url:676:13)
    at new t (/Users/me/projects/my-project/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/cjs/index.js:1:29570)
    at /Users/me/projects/my-project/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/cjs/index.js:1:30927
    at f (/Users/me/projects/my-project/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/cjs/index.js:1:1537)
    at Generator.<anonymous> (/Users/me/projects/my-project/node_modules/@kinde-oss/kinde-auth-nextjs/dist/server/cjs/index.js:1:2887)
... {
  input: 'undefined/api/auth/login',
  code: 'ERR_INVALID_URL',
  page: '/api/auth/[...kindeAuth]'

This works if I set the variables through a .env file but my understanding from https://kinde.com/docs/developer-tools/nextjs-sdk/#working-with-preview-urls is that it should work without previously having set the values.

Kinde Docs

NextJS App Router SDK v2 - Developer tools - Help center

Our developer tools provide everything you need to get started with Kinde.

13 Replies

onderay•10mo ago

In your next.config.js file, you've hardcoded the values for these environment variables. However, the Kinde documentation suggests a slightly different approach for handling preview URLs, especially when deploying on platforms like Vercel that generate dynamic URLs for preview deployments. The documentation recommends using conditional logic to set these environment variables based on whether the VERCEL_URL environment variable is present, which would indicate a Vercel preview deployment. Here's an example based on the Kinde documentation: const nextConfig = { env: { KINDE_SITE_URL: process.env.KINDE_SITE_URL ?? https://${process.env.VERCEL_URL}, KINDE_POST_LOGOUT_REDIRECT_URL: process.env.KINDE_POST_LOGOUT_REDIRECT_URL ?? https://${process.env.VERCEL_URL}, KINDE_POST_LOGIN_REDIRECT_URL: process.env.KINDE_POST_LOGIN_REDIRECT_URL ?? https://${process.env.VERCEL_URL}/dashboard, }, }; This configuration uses the ?? operator to fall back to the VERCEL_URL environment variable if the specific Kinde environment variables are not set. This approach ensures that your application can dynamically adjust the URLs based on the deployment environment, which is particularly useful for handling Vercel's preview URLs. If you're not deploying on Vercel or if VERCEL_URL is not set for some reason, you'll need to ensure that the environment variables are set through some other means, such as a .env.local file or directly in your deployment environment's configuration. Given that setting the variables through a .env file works for you, it's possible that the environment variables are not being correctly read from next.config.js in your deployment environment or during local development. Double-check that your deployment environment supports reading from next.config.js for environment variables and that there are no typos or errors in your configuration file. https://kinde.com/docs/developer-tools/nextjs-sdk/#working-with-preview-urls

Kinde Docs

NextJS App Router SDK v2 - Developer tools - Help center

Our developer tools provide everything you need to get started with Kinde.

onderay•10mo ago

Let me know if this works for you

jessebsOP•10mo ago

Thanks. That's similar to the logic I am trying (not using vercel, deploying to AWS amplify so it's a bit more complicated), but to get down to the root of the problem, i wanted a minimal illustration, which is what i posted.

onderay•10mo ago

Thanks for clarifying @jessebs I will get a more experienced team member to help out here for AWS Amplify

viv (kinde)•10mo ago

Hi @jessebs apologies for the trouble, I believe a url may be missing from the config (will get it added to the docs) - would you be able to try this:

const nextConfig = {
    env: {
        KINDE_ISSUER_URL:"https://<domain>.kinde.com",
        KINDE_SITE_URL:"http://localhost:3000",
        KINDE_POST_LOGOUT_REDIRECT_URL:"http://localhost:3000",
        KINDE_POST_LOGIN_REDIRECT_URL:"http://localhost:3000/dashboard"
    }
};

const nextConfig = {
    env: {
        KINDE_ISSUER_URL:"https://<domain>.kinde.com",
        KINDE_SITE_URL:"http://localhost:3000",
        KINDE_POST_LOGOUT_REDIRECT_URL:"http://localhost:3000",
        KINDE_POST_LOGIN_REDIRECT_URL:"http://localhost:3000/dashboard"
    }
};

jessebsOP•9mo ago

Hi Viv, No - i still get the same error. I previously had KINDE_ISSUER_URL set through an environment variable, which is why it wasn't part of the example.
@kinde-oss/[email protected] [email protected] (pages router)

viv (kinde)•9mo ago

Gotcha, can I check if your api/auth/[...kindeAuth]/route.ts page looks like this?

import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";
export const GET = handleAuth();

import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";
export const GET = handleAuth();

thanks

jessebsOP•9mo ago

We're using the pages router so it looks a bit different. it's at api/auth/[...kindeAuth].ts

import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server"
export default handleAuth()

import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server"
export default handleAuth()

Oli - Kinde•9mo ago

Hey @jessebs, Are you still experiencing issues?

jessebsOP•9mo ago

Yes but we've worked around it in our solution

Oli - Kinde•9mo ago

Hey @jessebs, Would you mind sharing how you worked around this solution?

jessebsOP•9mo ago

We’ve basically moved the logic of determining urls into our build pipeline

Oli - Kinde•9mo ago

Okay noted. Great to hear you have managed to build a workaround, my team are looking into this issue so other customers won't experience this issue in the NextJS Pages Router SDK

Gaming

Programming

next.config.js Kinde Env Vars