Hey @brainy-iron-15919 - I am currently working on the GA release of Ory Elements which will work with the App router. Right now, you will have to use the pages router for the time being.

Thank you for the response! Glad to hear. Do you have an estimate on when that would be available? Is there a beta release I can try out?

https://ory-community.slack.com/archives/C010F7Z4XM1/p1713859900203939 @high-optician-2097 I would like to help you with this. I created a Next JS app which uses the latest create next app setup with app router. I want this setup to be the updated community example. There are a few gotchas however which I would like to discuss - where can we do that that? is something like a google meet or slack huddle possible? Things like 1. How can we allow prefetching of a flow using SSR in App router? earlier

getServerSideProps

was an option as it could read and write headers but you can't do that inside react server components instead you need to use a server action. Ideally we can create a way to replace the flow form logic using a custom hook and a server action which the form uses instead. 2. Can the flows be cached on client side? tools like react query, rtk query can help with this which many apps use. However this results in a

crsf

error as the cookie get overriden by the last request. 3. Allow changing the base url in the integration

/api/.ory

should not be the hard coded value inside the create api handler. I am willing to work on this as I have spent alot of time experimenting and trying different solutions. I believe we can improve the sdk a lot by applying some patterns from libraries like

next-auth/client

which will help with the adoption.

@high-optician-2097 @creamy-spring-7553 if this is fully functional, it would be a great way to answer all the doubts about how to adapt ory.sh to an app with nexts 14 and mainly to nextjs with the app router. is this code already public to test it? it would answer the doubt I posted a while ago!

it is not public at the moment however I can push it to a public repo after a bit of changes. The issue with next 14 is that cookies are immutable inside react server components hence when you try to prefetch a flow on server side the returning CSRF cookie is not propogated to the client browser.

@creamy-spring-7553 You would contribute a lot, it would be great if you could do it!

Cool I will do it by next weekend

Hi @high-optician-2097 & @magnificent-energy-493, any update on the topic ? 😄