Hello everyone 👋 I am trying to implement the FE bits (next.js) for Kratos login flow. I have cloned and run this repo and it works with the next.js proxy (

api/.ory

pages) and our kratos instance. Everything is set up correctly: ssl, CORS. However, we do not want to use next.js or any other proxy. When I try to use ory client without proxy, the session initiation works (

/self-service/login/browser

), but actual login/signup doesn’t (

self-service/login?flow={id}

), giving an 403 error

security_csrf_violation

about csrf_token. I would appreciate some help 🥲

Hey there! Are you using self-hosted ory kratos, or ory cloud?

ory cloud

Ok thank you! Are you trying to integrate the session checking in your NextJS app, or are you trying to create your own ui screens?

we want our custom ui screens, so it’s AJAX flow

Ok got it, give me a minute 🙂

my understanding is that I can not use ory client SDK without a proxy, cause it simply doesn’t pick up the needed cookies. so I am not sure what is the best approach there — construct a ajax call myself and pass the cookies?

We’re currently working on documentation for this. One of the documentation previews is this one: • https://docs-owu2tid4z-ory.vercel.app/docs/guides/protect-page-login/spa It’s very generic but it helps explain the concepts of setting it up. There are also two new documents here: • https://www.ory.sh/docs/security-model • https://www.ory.sh/docs/guides/local-development It would be great to hear if those are helpful to you. Regarding the app ( https://github.com/ory/kratos-selfservice-ui-react-nextjs ). Have you tried:

git clone <https://github.com/ory/kratos-selfservice-ui-react-nextjs.git>
cd kratos-selfservice-ui-react-nextjs
npm i
export ORY_SDK_URL=<https://yourproject.projects.oryapis.com>
npm run dev

That will setup the app correctly.

thank you! will give it a read now 🙌 I think I tried setting up this env var with our kratos URL, will give it a try again, just to be sure.

Hm but the example works in e2e tests using this method. Are you sure there’s no mix up?

I set up the var and run the app again 🤔 lemme try cloning again

What did you expect to happen and what didn’t work when you did it?

so it is running through next.js API

/api/.ory/[…paths].ts

and I don’t want that. I want to talk to kratos directly from my component bypassing the next.js middleware part

That only works if you set up a Custom Domain (in prod) or you use the Ory Tunnel or the Ory Proxy (on local). You can’t get around it

we have set up out custom domain, I am not using the ory cloud link, I am calling our custom URL

Ah, I see! In that case make sure you have enabled CORS on your custom domain https://www.ory.sh/docs/guides/custom-domains#cors And make sure the SDK has “credentials: inlcude”:

const ory = new V0alpha2Api(new Configuration({
  basePath,
  baseOptions: {
    // Ensures we send cookies in the CORS requests.
    withCredentials: true
  }
}))

that’s the deal —

withCredentials: true

, helped!

oh, awesome! let me add that to the docs in the security model

yep, that will really help 🙂

we are implementing a new auth system based on ory, nothing fancy. I am not sure yet if I am going to implemented in our SPA (react) or next.js environment

cool, thank you 🙂