Not able to Sign In using Angular

[aaadilmaq0]

For ORY Kratos login I cannot directly use just the HTML form with action in Angular because I need to send { withCredentials: true } in the request. But when I do, I am not getting an error but the flow is not logging in as well.

This is my Angular code for Logging in:

login(flowId, identifier, password, csrf_token){
    let headers: HttpHeaders = new HttpHeaders();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    headers.append('Accept', 'application/json');

    let formData = new FormData();
    formData.append("identifier", identifier);
    formData.append("password", password);
    formData.append("csrf_token", csrf_token);
    console.log(formData)

    return this.http.post('/self-service/login/methods/password', formData, { headers: headers, params: { flow: flowId }, 
    withCredentials: true});
  }

I get the 302 response with location as http://127.0.0.1:4455/auth/login?flow=8bb90a97-cc07-4832-8d88-be343d540352
But when I do a GET request to http://localhost:4433/self-service/login/flows?id=8bb90a97-cc07-4832-8d88-be343d540352 I get the following response:
{ "id": "8bb90a97-cc07-4832-8d88-be343d540352", "type": "browser", "expires_at": "2021-02-01T10:33:17.660518673Z", "issued_at": "2021-02-01T10:23:17.660518673Z", "request_url": "http://127.0.0.1:4433/self-service/login/browser", "active": "password", "messages": null, "methods": { "password": { "method": "password", "config": { "action": "http://127.0.0.1:4433/self-service/login/methods/password?flow=8bb90a97-cc07-4832-8d88-be343d540352", "method": "POST", "fields": [ { "name": "identifier", "type": "text", "required": true, "value": "", "messages": [ { "id": 4000002, "text": "Property identifier is missing.", "type": "error", "context": { "property": "identifier" } } ] }, { "name": "password", "type": "password", "required": true, "messages": [ { "id": 4000002, "text": "Property password is missing.", "type": "error", "context": { "property": "password" } } ] }, { "name": "csrf_token", "type": "hidden", "required": true, "value": "VP6IAWQuksWPZNWy1vuMgb2PlWjjvH9z8QXqjF7Fs4w0pgEhMK7dvS+2TaG0s2VfyeUzT/VEIzFLB+hTsJkCqw==" } ] } } }, "forced": false }

I am not able to understand how the properties identifier and password be missing as I have provided them.
Below is the image of the request.

[aaadilmaq0]

@vinckr

[vinckr]

Thanks for providing all this info =)
You are not running in --dev mode right?

I think I have an idea what the issue is (mind you I am not familiar with Angular):
SameSite=None needs to be enabled to for the CSRF cookie to work cross-domain.

Try using https:// instead of http://

Let me know if that helped :)

[vinckr]

Hey @aaadilmaq0 just wanted to check in if you are still stuck or did you resolve your issue in the meantime?

[vinckr]

Since the topic seems to be stale, I will be selecting an answer for now.

If you run into the same or a similar issue, feel free to respond in this discussion.