Flutter Web and Api init endpoint

[nbeny]

Hello, I currently create a Flutter application connected to Ory/Kratos. In the documentation it's said to not use the api endpoints for web developpement. But when I test the browser url on my web application I got an error:

http://172.18.0.2:4433/self-service/registration/browser
Error: Exception: XMLHttpRequest error.
    at Object.throw_ [as throw] (http://localhost:35387/dart_sdk.js:5031:11)
    at controller.RegistrationController.new.fetchRegistrationBrowser (http://localhost:35387/packages/blog/ory/kratos/registration/controller.dart.lib.js:125:23)
    at fetchRegistrationBrowser.throw (<anonymous>)
    at http://localhost:35387/dart_sdk.js:37214:38
    at _RootZone.runBinary (http://localhost:35387/dart_sdk.js:37084:59)
    at _FutureListener.thenAwait.handleError (http://localhost:35387/dart_sdk.js:32346:48)
    at handleError (http://localhost:35387/dart_sdk.js:32879:51)
    at Function._propagateToListeners (http://localhost:35387/dart_sdk.js:32905:17)
    at _Future.new.[_completeError] (http://localhost:35387/dart_sdk.js:32755:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:35387/dart_sdk.js:32791:31)
    at Object._microtaskLoop (http://localhost:35387/dart_sdk.js:37332:13)
    at _startMicrotaskLoop (http://localhost:35387/dart_sdk.js:37338:13)
    at http://localhost:35387/dart_sdk.js:33109:9

I request health/alive and health/ready route work correctly.

If I run api endpoint in the browser I got this logical error:

{
  "id": "92ed86de-4e43-4063-be5d-08d9b9ee9d77",
  "type": "api",
  "expires_at": "2021-04-29T12:55:15.212068Z",
  "issued_at": "2021-04-29T12:45:15.212068Z",
  "request_url": "http://172.21.0.6:4433/self-service/registration/api",
  "active": "password",
  "messages": null,
  "methods": {
    "password": {
      "method": "password",
      "config": {
        "action": "http://127.0.0.1:4433/self-service/registration/methods/password?flow=92ed86de-4e43-4063-be5d-08d9b9ee9d77",
        "method": "POST",
        "fields": [
          {
            "name": "csrf_token",
            "type": "hidden",
            "required": true,
            "value": ""
          },
          {
            "name": "password",
            "type": "password",
            "required": true
          },
          {
            "name": "traits.email",
            "type": "email"
          },
          {
            "name": "traits.username",
            "type": "text"
          },
          {
            "name": "traits.name.first",
            "type": "text"
          },
          {
            "name": "traits.name.last",
            "type": "text"
          }
        ],
        "messages": [
          {
            "id": 4000001,
            "text": "The HTTP Request Header included the \"Origin\" key, indicating that this request was made as part of an AJAX request in 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"
          }
        ]
      }
    }
  }
}

Did I miss something or it is not possible to integrate the redirection browser route for flutter ? Tell me if you need more details or what ever you need.

Thanks a lot and you're project is so great !

[vinckr]

You get the error message:

The HTTP Request Header included the "Origin" key, indicating that this request was made as part of an AJAX request in 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.

You are using AJAX to submit the form. This is not supported right now. You need to submit a regular HTML form. Do not use AJAX. Do not use fetch. Let the user click the submit button and do not do anything. AJAX will be better supported very soon.

[nbeny]

Thanks for you're answer, ok for a regular html form. But I really can't do that with flutter so I need to wait the AJAX support !
Because I see no HTML in my code ^^, and it's totally normal !

Here why and an example of simple front page with flutter:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

I mark as answer, thanks !

[vinckr]

Makes sense, forgive me but I dont have experience with Flutter.
I think there is a way to solve your problem without waiting for the AJAX support, but I would have to ask someone more competent in Flutter.

Maybe this blogpost can be of some help in the meantime: Add Authentication to your React Native App?

[nbeny]

I made some test yesterday, with no result. I will retry next week end on it ! Thanks a lot ! I think too, but I haven't solve it for the moment ! I come back here, if I found a solution :).

[ghost]

We started doing the same thing, however we are not using Flutter directly with Kratos. We are using our own "login" Go API (alternative to Kratos node UI) fronting Kratos and using PKCE (as you need private calls to Hydra and to the rest of your infrastructure).