https://www.ory.sh/ logo
Join Slack
Powered by
Having issues adding authentication to react nativ...
# talk-kratos
e
Having issues adding authentication to react native app, i am using @ory/kratos-client v0.11.0 for react native, but there is not initializeLoginFlowMethod in the client. I have tried something by looking into the library, but when i try to login it gives me error 404 in login. The flow works fine if in postman by using api, but not in react native, pasting the sample code below.
Copy code
async function run() {
  const kratosClient = new FrontendApi(
    new Configuration({
      basePath: "<http://10.0.3.2:3433>",
    })
  );

  try {
    const flow = await kratosClient.createNativeLoginFlow({
      refresh: true,
      aal: "aal1",
    });
    console.log("flow");
    console.log(flow);

    let userName = "<mailto:test@test.com|test@test.com>";
    let password = "verYsecurePass123";

    const login = await kratosClient.updateLoginFlow({
      flow: flow.data.id,
      updateLoginFlowBody: {
        identifier: userName,
        method: "password",
        password: password,
        csrf_token: flow.data.ui.nodes[0].attributes.value
      },
    });

    console.log("login");

    console.log(login);

    const logout = await kratosClient.performNativeLogout({
      performNativeLogoutBody: {
        session_token: login.data.session_token,
      },
    });
    console.log("logout");

    console.log(logout);
  } catch (err) {
    console.log(err);
  }
}

run();
this is the error i am getting at login:
Copy code
Error: Request failed with status code 400
    at createError (F:\Projects\OneG\oiconomos-mobile-app\node_modules\axios\lib\core\createError.js:16:15)
    at settle (F:\Projects\OneG\oiconomos-mobile-app\node_modules\axios\lib\core\settle.js:17:12)
    at XMLHttpRequest.onloadend (F:\Projects\OneG\oiconomos-mobile-app\node_modules\axios\lib\adapters\xhr.js:54:7)
    at XMLHttpRequest.dispatchEvent (F:\Projects\OneG\oiconomos-mobile-app\node_modules\event-target-shim\dist\event-target-shim.js:818:35)
    at XMLHttpRequest.setReadyState (F:\Projects\OneG\oiconomos-mobile-app\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:650:12)
    at XMLHttpRequest.__didCompleteResponse (F:\Projects\OneG\oiconomos-mobile-app\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:395:12)
    at F:\Projects\OneG\oiconomos-mobile-app\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:553:35
    at EventEmitter.emit (F:\Projects\OneG\oiconomos-mobile-app\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:105:31)
    at MessageQueue.__callFunction (F:\Projects\OneG\oiconomos-mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:423:27)
    at F:\Projects\OneG\oiconomos-mobile-app\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:12
its not giving any appropriate message which makes me hard to debug. @magnificent-energy-493 please have a look
b
Hi, you’re setting 
refresh: true
, that only works if you already have a session. Please try to set 
refresh: false
in the 
createNativeLoginFlow
. You can also extract the actual error messages from the 
err
by using 
err.response?.data
. That should work.
e
Hi Jonas, I tried setting refresh to false but it still gives 400, and in the response body, i am getting the same flow object that i got from the createNativeLoginFlow
b
yes, that is correct, however it should contain the error messages inside the nodes, so you can render them. Could you post the response here?
e
oh haven't checked the nodes, here is the data object
Copy code
{
  "data": {
    "id": "c1533e6c-96ba-46d5-a8c1-fda48fa1d088",
    "oauth2_login_challenge": null,
    "type": "api",
    "expires_at": "2023-01-30T07:58:53.570442Z",
    "issued_at": "2023-01-30T07:48:53.570442Z",
    "request_url": "<http://10.0.3.2:3433/self-service/login/api?refresh=false&aal=aal1>",
    "ui": {
      "action": "<http://127.0.0.1:3433/self-service/login?flow=c1533e6c-96ba-46d5-a8c1-fda48fa1d088>",
      "method": "POST",
      "nodes": [
        {
          "type": "input",
          "group": "default",
          "attributes": {
            "name": "csrf_token",
            "type": "hidden",
            "value": "MBEKtHBp8m+nTbDKtJUCDA1Y/QLfV04Cq/8oc8ufgbHjLaSuy0zeZ1zd9/WnAEvjjItYkGjNMYkLmy46bnMD/g==",
            "required": true,
            "disabled": false,
            "node_type": "input"
          },
          "messages": [],
          "meta": {}
        },
        {
          "type": "input",
          "group": "default",
          "attributes": {
            "name": "identifier",
            "type": "text",
            "value": "<mailto:azmalmd12@gmail.com|azmalmd12@gmail.com>",
            "required": true,
            "disabled": false,
            "node_type": "input"
          },
          "messages": [],
          "meta": {
            "label": {
              "id": 1070004,
              "text": "ID",
              "type": "info"
            }
          }
        },
        {
          "type": "input",
          "group": "password",
          "attributes": {
            "name": "password",
            "type": "password",
            "required": true,
            "autocomplete": "current-password",
            "disabled": false,
            "node_type": "input"
          },
          "messages": [],
          "meta": {
            "label": {
              "id": 1070001,
              "text": "Password",
              "type": "info"
            }
          }
        },
        {
          "type": "input",
          "group": "password",
          "attributes": {
            "name": "method",
            "type": "submit",
            "value": "password",
            "disabled": false,
            "node_type": "input"
          },
          "messages": [],
          "meta": {
            "label": {
              "id": 1010001,
              "text": "Sign in",
              "type": "info",
              "context": {}
            }
          }
        }
      ],
      "messages": [
        {
          "id": 4000001,
          "text": "The HTTP Request Header included the \"Cookie\" key, indicating that this request was made by a Browser. The flow however was initiated as an API request. To prevent potential misuse and mitigate several attack vectors including CSRF, the request has been blocked. Please consult the documentation.",
          "type": "error"
        }
      ]
    },
    "created_at": "2023-01-30T07:48:53.571734Z",
    "updated_at": "2023-01-30T07:48:53.571734Z",
    "refresh": false,
    "requested_aal": "aal1"
  },
  "status": 400,
  "headers": {
    "cache-control": "private, no-cache, no-store, must-revalidate",
    "content-length": "1847",
    "content-type": "application/json; charset=utf-8",
    "date": "Mon, 30 Jan 2023 07:48:53 GMT",
    "vary": "Cookie"
  },
  "config": {
    "url": "<http://10.0.3.2:3433/self-service/login?flow=c1533e6c-96ba-46d5-a8c1-fda48fa1d088>",
    "method": "post",
    "data": "{\"identifier\":\"<mailto:azmalmd12@gmail.com|azmalmd12@gmail.com>\",\"method\":\"password\",\"password\":\"Password@1786\",\"csrf_token\":\"MBEKtHBp8m+nTbDKtJUCDA1Y/QLfV04Cq/8oc8ufgbHjLaSuy0zeZ1zd9/WnAEvjjItYkGjNMYkLmy46bnMD/g==\"}",
    "headers": {
      "Accept": "application/json, text/plain, */*",
      "Content-Type": "application/json"
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1,
    "transitional": {
      "silentJSONParsing": true,
      "forcedJSONParsing": true,
      "clarifyTimeoutError": false
    }
  },
  "request": {
    "UNSENT": 0,
    "OPENED": 1,
    "HEADERS_RECEIVED": 2,
    "LOADING": 3,
    "DONE": 4,
    "readyState": 4,
    "status": 400,
    "timeout": 0,
    "withCredentials": true,
    "upload": {},
    "_aborted": false,
    "_hasError": false,
    "_method": "POST",
    "_perfKey": "network_XMLHttpRequest_<http://10.0.3.2:3433/self-service/login?flow=c1533e6c-96ba-46d5-a8c1-fda48fa1d088>",
    "_response": "{\"id\":\"c1533e6c-96ba-46d5-a8c1-fda48fa1d088\",\"oauth2_login_challenge\":null,\"type\":\"api\",\"expires_at\":\"2023-01-30T07:58:53.570442Z\",\"issued_at\":\"2023-01-30T07:48:53.570442Z\",\"request_url\":\"<http://10.0.3.2:3433/self-service/login/api?refresh=false>\\u0026aal=aal1\",\"ui\":{\"action\":\"<http://127.0.0.1:3433/self-service/login?flow=c1533e6c-96ba-46d5-a8c1-fda48fa1d088>\",\"method\":\"POST\",\"nodes\":[{\"type\":\"input\",\"group\":\"default\",\"attributes\":{\"name\":\"csrf_token\",\"type\":\"hidden\",\"value\":\"MBEKtHBp8m+nTbDKtJUCDA1Y/QLfV04Cq/8oc8ufgbHjLaSuy0zeZ1zd9/WnAEvjjItYkGjNMYkLmy46bnMD/g==\",\"required\":true,\"disabled\":false,\"node_type\":\"input\"},\"messages\":[],\"meta\":{}},{\"type\":\"input\",\"group\":\"default\",\"attributes\":{\"name\":\"identifier\",\"type\":\"text\",\"value\":\"<mailto:azmalmd12@gmail.com|azmalmd12@gmail.com>\",\"required\":true,\"disabled\":false,\"node_type\":\"input\"},\"messages\":[],\"meta\":{\"label\":{\"id\":1070004,\"text\":\"ID\",\"type\":\"info\"}}},{\"type\":\"input\",\"group\":\"password\",\"attributes\":{\"name\":\"password\",\"type\":\"password\",\"required\":true,\"autocomplete\":\"current-password\",\"disabled\":false,\"node_type\":\"input\"},\"messages\":[],\"meta\":{\"label\":{\"id\":1070001,\"text\":\"Password\",\"type\":\"info\"}}},{\"type\":\"input\",\"group\":\"password\",\"attributes\":{\"name\":\"method\",\"type\":\"submit\",\"value\":\"password\",\"disabled\":false,\"node_type\":\"input\"},\"messages\":[],\"meta\":{\"label\":{\"id\":1010001,\"text\":\"Sign in\",\"type\":\"info\",\"context\":{}}}}],\"messages\":[{\"id\":4000001,\"text\":\"The HTTP Request Header included the \\\"Cookie\\\" key, indicating that this request was made by a Browser. The flow however was initiated as an API request. To prevent potential misuse and mitigate several attack vectors including CSRF, the request has been blocked. Please consult the documentation.\",\"type\":\"error\"}]},\"created_at\":\"2023-01-30T07:48:53.571734Z\",\"updated_at\":\"2023-01-30T07:48:53.571734Z\",\"refresh\":false,\"requested_aal\":\"aal1\"}\n",
    "_url": "<http://10.0.3.2:3433/self-service/login?flow=c1533e6c-96ba-46d5-a8c1-fda48fa1d088>",
    "_timedOut": false,
    "_trackingName": "unknown",
    "_incrementalEvents": false,
    "_performanceLogger": {
      "_timespans": {
        "network_XMLHttpRequest_<http://192.168.29.24:19000/logs>": {
          "startTime": 1937.7999999998137,
          "endTime": 2338.5,
          "totalTime": 400.70000000018626
        },
        "network_XMLHttpRequest_<http://10.0.3.2:3433/self-service/login/api?refresh=false&aal=aal1>": {
          "startTime": 1939.5999999996275,
          "endTime": 2309.5,
          "totalTime": 369.90000000037253
        },
        "network_XMLHttpRequest_<http://10.0.3.2:3433/self-service/login?flow=c1533e6c-96ba-46d5-a8c1-fda48fa1d088>": {
          "startTime": 2320.2999999998137,
          "endTime": 2389.0999999996275,
          "totalTime": 68.79999999981374
        }
      },
      "_extras": {},
      "_points": {
        "initializeCore_start": 1834.8999999994412,
        "initializeCore_end": 1852.8999999994412
      },
      "_pointExtras": {},
      "_closed": false
    },
    "responseHeaders": {
      "Content-Length": "1847",
      "Content-Type": "application/json; charset=utf-8",
      "Vary": "Cookie",
      "Date": "Mon, 30 Jan 2023 07:48:53 GMT",
      "Cache-Control": "private, no-cache, no-store, must-revalidate"
    },
    "_requestId": null,
    "_headers": {
      "accept": "application/json, text/plain, */*",
      "content-type": "application/json"
    },
    "_responseType": "",
    "_sent": true,
    "_lowerCaseResponseHeaders": {
      "content-length": "1847",
      "content-type": "application/json; charset=utf-8",
      "vary": "Cookie",
      "date": "Mon, 30 Jan 2023 07:48:53 GMT",
      "cache-control": "private, no-cache, no-store, must-revalidate"
    },
    "_subscriptions": [],
    "responseURL": "<http://10.0.3.2:3433/self-service/login?flow=c1533e6c-96ba-46d5-a8c1-fda48fa1d088>"
  }
}
Copy code
The HTTP Request Header included the \"Cookie\" key, indicating that this request was made by a Browser. The flow however was initiated as an API request. To prevent potential misuse and mitigate several attack vectors including CSRF, the request has been blocked. Please consult the documentation.
it gives me this message, but i am not passing Cookie as a key anywhere
is there a way to overwrite the header, i am using FrontendClient from kratos-client, not sure how to do it
b
It’s using axios. Are you running the React Native app in a browser using expo for example, by any chance?
e
yepp, it's using expo
b
Ah, you need to set 
withCredentials
in the 
Configuration
to false in that case. See also https://github.com/ory/kratos-selfservice-ui-react-native/blob/master/src/helpers/sdk.tsx#L31-L33
e
Oh I missed that! it works now, thanks for helping Jonas!
b
Glad it works. 🙂
135 Views
Open in Slack
PreviousNext
Powered by