what's the canonical way to implement our own react components in a nextjs 15 app router app? the elements next app router example seems outdated, or at least the published version of

@ory/elements-react

does, and the

@ory/integrations/next

method doesn't actually work for middleware with the

.ory

route to get session data because you can't call relative urls from middleware • https://github.com/ory/elements/blob/main/examples/nextjs-app-router/app/page.tsx • https://www.ory.sh/docs/getting-started/integrate-auth/nextjs

For Next.js we have an updated example here: https://github.com/ory/elements/tree/main/examples/nextjs-app-router We're still working on the documentation, so apologies for the outdated content.

Thank you! Fyi that example uses

@ory/elements-react/client

but that only exists in the

-pr

version (

0.0.0-pr.4a28a8f

), not

@latest

-- might be worth pushing a

0.0.1

😛

you can use the

@next

tag of that package

just to do a sanity check: if we want to use ory network in prod and ory kratos locally, the only way to do so is to use the actual

@ory/client

package and not the

@ory/client-fetch-typescript

package correct? I also don't see any types for sms otp verification in the client-fetch-typescript package but that's irrelevant anyway if we can't use that package in the first place

@ory/client-fetch

is a more modern version of

@ory/client

(with axios). They're both maintained, and should be up-to-date. However, if you're using Kratos standalone, that's what

@ory/kratos-client-fetch

is for. However, the

@ory/client-fetch

should also work on a standalone Kratos for most use cases.

is the api different from

@ory/client

? I can't seem to figure out how to do things like

ory.createBrowserLoginFlow

-- when I run this, I get some HTML response that I can't extract and the call fails with "invalid json"

I think you might have to pass

headers: {
      Accept: "application/json",
    },

To the configuration of the API.

this was it, thank you so much!

@bland-eye-99092 After looking through the npm package contents of both @ory/client-fetch and @ory/client I can see what you mean, the more modern version appears to be more modular rather than have everything in the

api.ts

file. What's a little bit annoying is that I didn't know about this since both packages point to the same repo. In future, how would a newcomer figure out what's the latest client library?

It's on our roadmap to drastically improve the documentation and guides around the client packages, and especially better explain the differences. The core issue is that

@ory/client

uses axios (that cannot be changed) and

@ory/client-fetch

uses the default fetch library provided by the platform. The use of axios led to a bunch of issues, and the "new" client-fetch resolves the specific axios related issues.

lol, I had the opposite problem when I had to use a bunch of ESRI endpoints, Axios would work and fetch wouldn't :P

Very happy for the switch to fetch fwiw!