Hi all I m having some trouble getting Ory Kratos + NextJS t Ory Community #ory-selfhosting

Hi all, I'm having some trouble getting Ory Kratos...

blue-salesclerk-13657

04/17/2025, 3:12 PM

Hi all, I'm having some trouble getting Ory Kratos + NextJS to function well with two distinct URLs with Ory Elements. NEXT_PUBLIC_ORY_SDK_URL points to my public URL for Ory, and ORY_SDK_URL points to the service URL for Ory Kratos within my k8s cluster. It seems that the ORY_SDK_URL value is being ignored, and the NEXT_PUBLIC value is being used both client side and server side I think the issue is that this orySdkUrl function in the nextjs package only checks for the NEXT_PUBLIC env var, unlike the similarly-named orySdkUrl in the elements-react package, which checks for ORY_SDK_URL . Is there way to get this same "use server side variable, if available, otherwise use the NEXT_PUBLIC variable" behavior in the nextjs package? Thanks in advance for any assistance!

blue-salesclerk-13657

04/17/2025, 3:13 PM

Side note: is this a bug in the react package? It's checking if the env var ORY_SDK_URL is set, and, if so, sets the base URL to value of a different env var _ORY_SDK_URL (note the leading underscore)

blue-salesclerk-13657

04/17/2025, 5:22 PM

OK, think I worked this out! I wasn't able to get it working with 2 distinct URLs. Tested patches to the getSdkUrl function linked above to have it use the

ORY_SDK_URL

in the NextJs context. This worked to get the initial login page to render, but caused issues with any links that were included in the SSR'd login page as the URLs for these links would point to the in-cluster URL for kratos. The fix was to instead use nextjs rewrites, like this:

Copy code

env: {
    NEXT_PUBLIC_ORY_SDK_URL: '/api/kratos',
    ORY_SDK_URL: '<http://localhost:3000/api/kratos>', // use absolute URL server-side, which will be stable across deployments
  },
  async rewrites() {
    return [
      {
        source: '/api/kratos/:path*',
        destination: '<http://kratos-public.default.svc.cluster.local:4433/:path*>',
      },
    ];
  },

bland-eye-99092

04/22/2025, 7:57 PM

Are you using the next.js middleware?

blue-salesclerk-13657

04/25/2025, 1:56 PM

I was not, but I just tried it out, and it helped! Thank you! I was able to remove this rewrite logic entirely with the middleware in place. The only piece of my previous workaround that seemed to still be necessary was to patch the SDK url in the ory config that is passed to the middleware:

Copy code

export function getOryElementsConfig()  {
  const kratosUrl = process.env.ORY_SDK_URL || process.env.NEXT_PUBLIC_ORY_SDK_URL || '';
  const oryElementsConfig = enhanceOryConfig(baseConfig, kratosUrl);
  return {
    ...oryElementsConfig,
    sdk: {
      ...oryElementsConfig.sdk,
      options: {
        credentials: "include" as RequestCredentials
      }
    }
  }
}

Is it expected for this to be required?

2 Views

Open in Slack

Previous Next