Next.JS 13 /React with app router custom self service UI app + self hosted Kratos instance

[Tan-Aki]

Hi community!

I am trying to set up a Next.JS(13 with app router)/React custom Self-Service UI app and have it work with a self hosted kratos instance.

I could only find somewhat outdated documentation and code examples for Next.JS 12 but I figure it can still provide some useful info as to how to make it work with Next.JS 13.

• Documentation : https://www.ory.sh/nextjs-authentication-spa-custom-flows-open-source/ (can be found here https://www.ory.sh/docs/getting-started/overview on the Customize self-service UI: Next.js/React tile)
• and related code example : https://github.com/ory/kratos-selfservice-ui-react-nextjs

I am trying to make my custom self service UI talk to kratos through the ory SDK, (@ory/client 1.1.3 and @ory/integrations 1.1.0)
I know our self hosted kratos instance is working just fine on port 4433 because I was able to make it work with a Next.JS 12/React Self-service custom UI by following the documentation.

The problem seems to be around the SDK compatibility with the next.js 13 app router.
It seems like there is already a version of @ory/integrations that supports the app router, but it's not available on npm yet
ory/integrations#61 and ory/integrations#66

In the meantime, I thus have a few questions:

1/
Here in the doc https://www.ory.sh/nextjs-authentication-spa-custom-flows-open-source/#adding-nextjs-edge-function-to-integrate-with-ory-kratos (it's a bit different in the code example but along the same lines)

• What is the purpose of setting up the SDK with this pages/api/.ory/[...paths].ts file (app/api/.ory[...paths].ts in my case) ? is it only for local development ? Can we do without it? (see question 2)

2/
On the related documentation on how to integrate authentication on our business app, they say that when stopping local development and going to production, we can completely remove this whole pattern (see integrate auth - go to production) and use a NEXT_PUBLIC_ORY_SDK_URL env variable instead :

• Does it also apply to my custom self service UI app (couldnt find anything on this in the documentation)?

• If we are now using the NEXT_PUBLIC_ORY_SDK_URL, Why is there still a mention to the ORY_SDK_URL when deploying to vercel then ? At line npx vercel deploy --prod -e ORY_SDK_URL=https://{project.slug}.projects.oryapis.com (see link just above)

• The funny thing is, when I use that NEXT_PUBLIC_ORY_SDK_URL env variable pattern directly when developing locally, I have no errors. But is this pattern SAFE FOR PRODUCTION and does that mean we should expose our kratos instance to the public?

3/
Why do I sometimes see ORY_SDK_URL, sometimes ORY_KRATOS_URL env variables ?

Thank you very much in advance for any answer, I would appreciate them a lot!

Regards,