Hello everyone I have just started of with ory kratos and setup kratos locally using docker containers I want to use kratos to authenticate the frontend application I am using To start the login flow I visit

<http://localhost:4433/self-service/login/browser>

and I am successfully redirected to the login page on my svelte application with the

flow id

appended as such

<http://localhost:5173/login?hash=><FLOW_ID>

When I try to get the login flow from kratos it return status 403 The html is as follows:

const frontendApi = new FrontendApi(
    new Configuration({
        basePath: "<http://localhost:4433>",
        accessToken: "demo",
    }),
);
onMount(() =>
    // This code will run on the client side when the component is ready and mounted in DOM
    frontendApi.getLoginFlow({
        id: <FLOW_ID> ?? "",
    }),
);

The error response is a follows:

{
  "error": {
    "id": "security_csrf_violation",
    "code": 403,
    "status": "Forbidden",
    "reason": "Please retry the flow and optionally clear your cookies. 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"
  }
}

I see that the end point is expecting me to add csrf token in the header or body of the request. I am not sure how I would be able to achieve this though. Because the cookie that is created is http only so it cant be accessed on the client side directly. I see the following options 1. Make the request at server side this way we would be having the value of csrf token in the cookie we can read. But then we have to patch the http request to forward the cookie to it. 2. Return the crsf token to the client and use it from there. But this seems like a security hole to me atleast. What would be the best way to get the login flow on the client side application?

The CSRF token should be part of the request’s cookies. Are you able to see the request being made in the browser console to see, if the cookies contain the CSRF token?

Yes now that you say it I had a closer look and the cookies are not being sent with the request But is should have been included automatically? I can see that a cookies being sent in direct request to the

/self-service/login/browser

end point but not in the AJAX request sent to

/self-service/login/flow

You might need to set

withCredentials

in the Configuration object for it to send the cookies automatically

Thanks it worked Used the following code block

const frontendApi = new FrontendApi(
    new Configuration({
        basePath: "<http://localhost:4433>",
        baseOptions: {
            withCredentials: true,
        },
    }),
);