Hey folks, we have a self hosted “development” instance of kratos running on identities.dev.example.com and our next.js frontend running on dev.example.com. We have 2 questions, how to allow for CSRF in these subdomains and also, how do we go about local development of our apps? we are not sure how to navigate the CSRF cookies being rejected for both scenarios and have been pouring through the docs for guidance

CSRF and subdomains can be a bit tricky. I have a example app that is running the frontend on example.com and Ory on auth.example.com - that works fine for me. Maybe the double subdomain is the issue 🤔 hard to say without having access to your setup. As for local development, it depends a bit - you can just spin up a local copy of Ory Kratos with equivalent config. In Ory Network we use ory tunnel for ease of use, you can take a look at the code here. Here are some more resources that might help in general with CSRF: • https://www.ory.sh/docs/kratos/debug/csrf • https://www.ory.sh/docs/troubleshooting/csrf

The idea is for auth stack to use oathkeeper with remote_json rules to interact with openfga, so I'd think it'd be quite cumbersome to have that all running locally. For developing login/registration pages I'm sure a local kratos deployment would work, but if we have to work on parts of the app that are behind authorization checks I'm not sure what we'd have to do aside from targeting our dev instance in the cloud

We use double subdomains without issue, the only tricky thing is making sure you set the cookie for the right domain, we use

cookies:
  domain: <http://example.com|example.com>
  path: /
  same_site: Lax

You also need to do everything on https otherwise the cookie won’t set. For local development of our app I add

<http://local.example.com|local.example.com> 127.0.0.1

to my

/etc/hosts

and run caddy locally to reverse proxy

<https://local.example.com>

to my app. Now I get to do local development using the remote kratos instance, and all the cookies get set correctly like it’s all remote.

Oh even if you run in --dev mode the cookies don't set? I can see them in the browser devtools

Hmm it looks like

--dev

does not set

Secure: true

, so you should be able to send those cookies over http. But if kratos is sending you the cookie and your browser is not using it, then it’s probably a browser security feature you’re running into. In the past I have found moving everything to https solves some of those (e.g. if you need

SameSite: None

) but maybe it is not actually needed here.

I'm looking into caddy. I'm unsure if the cookie is not being passed. Is there a way to tell in kratos if it is being recvd versus wrong domain?

You can look at the browser network log to see if the cookie is being sent. I see you’re using nextjs (so are we), are you doing things like

oryClient.updateLoginFlow()

in server components? If so, have you remembered to pass the cookie through nextjs (ie get it from the incoming request and add it to the api call)?

Yeah we are calling oryClient.updateRegistrationFlow etc

Are you doing something like this?

axiosInstance.interceptors.request.use(async config => {
  const headers = await getHeaders();
  config.headers.cookie = headers.get('cookie');
  return config;
});

oryClient.updateRegistrationFlow()

will not automatically include the cookie if called on the server, you have to pass it.

We are setting withCredentials: true and nothing else

You don’t need to use interceptors, but you do need to somehow copy the cookie headers across. (If you are doing this in a server component.) If you’re doing it in a client component then just look at the request in your browser network log and see if the cookie’s getting sent.

I see. Is it better to use client components or server components?

You can use server and/or client components, and you can submit your responses as forms and/or ajax requests. We use a mixture depending on the situation.

Here goes nothing