Elements vs kratos-selfservice-ui-react-nextjs

[hyperknot]

Hi,

Is Elements basically a new, universal version of the code in kratos-selfservice-ui-react-nextjs's pkg folder?

So far it seems that the Next example doesn't use the Next.js API part yet, is that on purpose or just because it's super new (a few days old today)?

Basically I'm developing a new Next.js app, I'm thinking of taking the Elements example + adding the API so it doesn't need a proxy. Is this the recommended route today?

[Benehiko]

Hi @hyperknot

The kratos-selfservice-ui-react-nextjs repository is still relevant for reference, but we decided to create a UI library which does a lot of the heavy lifting of mapping UI nodes from Ory to HTML elements.

Essentially we hope that Ory Elements can be a drop in library for you to use in your project to render the Authentication Flows with theming capabilities. The logic is still managed by your application such as fetching the data, caching, user routing etc. At this point in time the UI offered by Ory Elements isn't as customizable as we want it to be, but we think it is a good starting point and definitely something you can use in a project to get set up quickly.

You can have a look at a NextJs example we have using Ory Elements here https://github.com/ory/elements/tree/main/examples/nextjs-spa

[hyperknot]

Hi @Benehiko,

Thanks for the explanation. Yes, I was referring to that example, it's just a few days old. What I don't understand there is that it's not using @ory/integrations. Is this on purpose or just like this in an early version? I mean if not for the integrations, I'd need to manually run a proxy/tunnel in a separate process, right?

[Benehiko]

For simplicity we kept the integrations package outside of this example since a lot of people did not even know the integrations package was acting as a proxy within the nextjs application on deployment. That is why in this example we opted to show the Ory CLI running a tunnel as a separate process.

I think for local development the ory tunnel makes sense. When deploying to production you should consider using a custom domain name on the project which would make using the proxy obsolete. The custom domain feature is in any case available on the professional plan which I would highly recommend you use when deploying to production.

[Benehiko]

Please take a look at this document https://www.ory.sh/docs/guides/custom-domains

[hyperknot]

I personally find the Next.js integration much nicer especially for avoiding using proxies / tunnels. Doing everything inside Next.js makes it a much better developer experience.

[hyperknot]

Please take a look at this document https://www.ory.sh/docs/guides/custom-domains

I see, so the production setup is actually recommended not to be proxied but accessed directly on a subdomain. I get it.