flutter login example

Hi seankang​ ,

Let me try to restate the question:
- you have a website hosting your app : http://www.website.com/app (or something like that)
- you are working on an app : com.website.appName

My understanding is that the URI for both is used in looking up the password in the Vault. Some applications/sites have a similar fundamental domain like "www.website.com" and "com.website.app" (just reversed).  Other apps/websites have login services that have completely different. 

In the case of a different service, the user just has to manually look up the password and then they will be presented with the option to save or update the password.

I don't see any content about how to make these work best, but typically if you follow these guidelines (link below) and a similar URI structure it should work.  Now if you are looking at doing PassKeys there is a bit more configuration on the Apple & Android side (they have lots of docs for this).

https://developer.1password.com/docs/web/compatible-website-design  (Web)
https://blog.1password.com/what-is-webauthn (Passkeys)

Let me know if this helps.

Cheers,
Phil

You're right -- 

I also searched it on chatgpt.

I have to use a parent object called AutofillGroup

```

class LoginScreen extends StatelessWidget {
  final emailCtrl = TextEditingController();
  final pwCtrl = TextEditingController();
  final otpCtrl = TextEditingController();

  LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sign in')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: AutofillGroup(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextFormField(
                controller: emailCtrl,
                keyboardType: TextInputType.emailAddress,
                textInputAction: TextInputAction.next,
                autofillHints: const [AutofillHints.username, AutofillHints.email],
                decoration: const InputDecoration(labelText: 'Email'),
                autocorrect: false,
                textCapitalization: TextCapitalization.none,
              ),
              const SizedBox(height: 12),
              TextFormField(
                controller: pwCtrl,
                obscureText: true,
                textInputAction: TextInputAction.done,
                autofillHints: const [AutofillHints.password],
                decoration: const InputDecoration(
                  labelText: 'Password',
                  suffixIcon: Icon(Icons.key_outlined), // add your show/hide logic
                ),
                onEditingComplete: () => TextInput.finishAutofillContext(),
              ),
              const SizedBox(height: 12),
              TextFormField(
                controller: otpCtrl,
                keyboardType: TextInputType.number,
                autofillHints: const [AutofillHints.oneTimeCode],
                decoration: const InputDecoration(labelText: '6-digit code'),
              ),
              const SizedBox(height: 20),
              FilledButton(
                onPressed: () async {
                  // 1) Your password login flow
                  // 2) After success:
                  TextInput.finishAutofillContext();
                },
                child: const Text('Sign in'),
              ),
              const SizedBox(height: 12),
              OutlinedButton.icon(
                icon: const Icon(Icons.fingerprint),
                label: const Text('Sign in with a passkey'),
                onPressed: () async {
                  // Call your server to get WebAuthn "get" options then use `passkeys.get(...)`
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

```