How to handle kratos in next js?

[spa5k]

Hey, I've been trying to implement the self service stuff in a next js app, but it's giving the anti csrf token error -

{
    "error": {
        "code": 403,
        "status": "Forbidden",
        "reason": "The request was rejected to protect you from Cross-Site-Request-Forgery (CSRF) which could cause account takeover, leaking personal information, and other serious security issues.",
        "details": {
            "docs": "https://www.ory.sh/kratos/docs/debug/csrf",
            "hint": "The anti-CSRF cookie was found but the CSRF token was not included in the HTTP request body (csrf_token) nor in the HTTP Header (X-CSRF-Token).",
            "reject_reason": "The HTTP Cookie Header was set and a CSRF token was sent but they do not match. We recommend deleting all cookies for this domain and retrying the flow."
        },
        "message": "the request was rejected to protect you from Cross-Site-Request-Forgery"
    }
}

Here is the repro - https://github.com/Unbuttun/kratos-next

Can someone guide me a bit on where the things are going wrong?
https://github.com/Unbuttun/kratos-next/blob/f745156941a70b66556da43d27d0bb7d6ac3dcc3/pages/login.tsx#L35

Error happens when this line runs.

[vinckr]

Can you check out the Chrome Developer Tools (or any comparable technology) Cookies tabs in the Application tab, as well as the network tab - look for Cookie and Set-Cookie HTTP Headers.

I think you also have to implement this in your kratos.ts, have a look at this implementation https://github.com/Raghav-Modani/AnC-Accounts/blob/raghav/services/kratos.ts

I didn't test it out, but will have a go at it over the weekend!
Really nice example, we can promote it on the website & our documentation once it is more fleshed out.

[spa5k]

hey @vinckr the repo you mentioned is not there, is the link wrong?

[vinckr]

Oh, it must have been deleted? I would swear it was there when I posted this.

[spa5k]

I found more info on why it might be happening.

cookie 1 aHR0cDovLzEyNy4wLjAuMTo0NDMzLw_csrf_token=tLGRRckFYlM4WBWERKiUXyykYPWUSfzSoYizqs8aXTc=
flow 1 31480010-5bfa-4202-9a5a-016eb15e2e12
cookie 2 aHR0cDovLzEyNy4wLjAuMTo0NDMzLw_csrf_token=tLGRRckFYlM4WBWERKiUXyykYPWUSfzSoYizqs8aXTc=
flow 2 31480010-5bfa-4202-9a5a-016eb15e2e12

In here you can see that the cookie and flowId that are being logged in serverSide and client side are same.

Set-Cookie | aHR0cDovLzEyNy4wLjAuMTo0NDMzLw_csrf_token=tLGRRckFYlM4WBWERKiUXyykYPWUSfzSoYizqs8aXTc=;  Path=/; Max-Age=31536000; HttpOnly; SameSite=Lax

The cookie that is being send in this request is also same as the one's above.

But in this request, the csrf token has changed for some reason.

This is the response object -

{
	"error": {
		"code": 403,
		"status": "Forbidden",
		"reason": "The request was rejected to protect you from Cross-Site-Request-Forgery (CSRF) which could cause account takeover, leaking personal information, and other serious security issues.",
		"details": {
			"docs": "https://www.ory.sh/kratos/docs/debug/csrf",
			"hint": "The anti-CSRF cookie was found but the CSRF token was not included in the HTTP request body (csrf_token) nor in the HTTP Header (X-CSRF-Token).",
			"reject_reason": "The HTTP Cookie Header was set and a CSRF token was sent but they do not match. We recommend deleting all cookies for this domain and retrying the flow."
		},
		"message": "the request was rejected to protect you from Cross-Site-Request-Forgery"
	}
}

Also the cookie that can be accessed from the storage is same as the one i logged above, but not the one that is getting recieved /send in the last picture

[spa5k]

Taking hints from the self-service-node's official example, I moved the kratos initialization part inside the
getServerSideProps, and now it's working and giving results with No csrf errors anymore.

export async function getServerSideProps(context: NextPageContext) {
  const allCookies = context.req.headers.cookie;
  const flowId = context.query.flow;

  if (!flowId) {
    return {
      redirect: {
        destination: `${API_URL}/self-service/login/browser`,
      },
    };
  }

  let flowData: SelfServiceLoginFlow | void;

  if (allCookies && flowId) {
    const data = await kratos
      .getSelfServiceLoginFlow(flowId.toString(), allCookies)
      .then(({ data: flow }) => {
        return flow;
      })
      .catch((err) => {
        console.log("err", err);
      });
    flowData = data;
  }

  return {
    props: {
      flowData: flowData ? flowData : null,
    },
  };
}

[vinckr]

Awesome that you got it working 🎉
Let me know if you get stuck on the other flows or when the example is in a good state.