Flutter Autofill for IOS Associated Domains

Question

I'm having trouble fully understanding the autofill feature. The documentation on the Flutter website talks about the additional setup required for IOS.

https://api.flutter.dev/flutter/material/TextField/autofillHints.html

Set up your iOS app's associated domains.

The documentation talks about posting the file on a trusted site. The procedure itself, and adding it to Xcode seems clear to me. What I have a problem with is what exactly this file should look like.

Of course, I already have the whole thing in dart fully written and configured. It works very well on Android.

Can anyone suggest what this file should look like?

  "applinks": {
      "details": [
           {
             "appIDs": [ "ABCDE12345.com.example.app", "ABCDE12345.com.example.app2" ],
             "components": [
               {
                  "#": "no_universal_links",
                  "exclude": true,
                  "comment": "Matches any URL whose fragment equals no_universal_links and instructs the system not to open it as a universal link"
               },
               {
                  "/": "/buy/*",
                  "comment": "Matches any URL whose path starts with /buy/"
               },
               {
                  "/": "/help/website/*",
                  "exclude": true,
                  "comment": "Matches any URL whose path starts with /help/website/ and instructs the system not to open it as a universal link"
               },
               {
                  "/": "/help/*",
                  "?": { "articleNumber": "????" },
                  "comment": "Matches any URL whose path starts with /help/ and which has a query item with name 'articleNumber' and a value of exactly 4 characters"
               }
             ]
           }
       ]
   },
   "webcredentials": {
      "apps": [ "ABCDE12345.com.example.app" ]
   },

    "appclips": {
        "apps": ["ABCED12345.com.example.MyApp.Clip"]
    }
}```

Predominate

Is your problem resolved? I'm having the same problem with autofill, could you please help me and suggest a solution? – Coimbatore

Answer 1

The associated domains setup is only necessary if you want to autofill credentials (autofill email/username, autogenerate keychain password, save credentials to keychain and autofill next time). Autofilling phonenumber etc. should work without associated domains.

If you only need credentials autofill this file will work:

{
    "applinks": {
        "details": [
            {
                "appIDs": [],
                "components": []
            }
        ]
    },
    "webcredentials": {
        "apps": [
            "ABCDE12345.com.example.app",
            "ABCDE12345.com.example.app.dev"
        ]
    },
    "appclips": {
        "apps": []
    }
}

As stated in the documentation, this file has to be available at

https://yourdomainwithoutredirects.com/.well-known/apple-app-site-association

After publishing the association file, open your app in xcode, select the Signing & Capabilities tab and add the following associated domains entry:

webcredentials:yourdomainwithoutredirects.com

When the app is installed for the first time, the device tries to load the apple-app-site-association file.

Note that the file is not fetched directly from your web server, but via apples CDN.

Starting with macOS 11 and iOS 14, apps no longer send requests for apple-app-site-association files directly to your web server. Instead, they send these requests to an Apple-managed content delivery network (CDN) dedicated to associated domains.

You can check if your file is already available via CDN by visiting:

https://app-site-association.cdn-apple.com/a/v1/yourdomainwithoutredirects.com

If you want to skip CDN, change your associated domain entry in xcode to:

webcredentials:yourdomainwithoutredirects.com?mode=developer

Now wrap your input widget with AutofillGroup, add autofillHints and keyboardType if necessary:

AutofillGroup(
  child: TextFormField(
    autofillHints: [AutofillHints.email],
    keyboardType: TextInputType.emailAddress,
    decoration: InputDecoration(
      hintText: 'Email',
      labelText: 'Email'
      ),
    ),
  ),
)

Tapp

Hi, incase if i want to save credentials only within the app what will i do ? because t doesn't have any web domain. I just need to save username password during the login – Conceivable

As far as I can remember, you won't be able to save credentials to iCloud Keychain without an associated domain. I'm not entirely sure about your use case, but maybe flutter secure storage might be useful for managing credentials locally on the device if an associated domain is out of your scope. – Tapp