Configuration

How to setup and configure your Authenticator component.

Wait!

Did you follow the quick start instructions to set up the Authenticator first?

Initial State

By default, unauthenticated users are redirected to the Sign In flow. You can explicitly redirect to Sign Up or Forgot Password:

Zero Configuration

The Authenticator automatically infers loginMechanisms from amplify pull. Below are examples of username, email, and phone number based login.

Note: A username, email, or phone_number value is required for Cognito User Pools.

The Authenticator demo below uses a mock backend. Any users you create are stored in memory. You can verify accounts that you create with the code "123456".

Zero Configuration

The Authenticator automatically infers signUpAttributes from amplify pull, but can be explicitly defined as seen below.

The Authenticator automatically renders most Cognito User Pools attributes, with the exception of address, gender, locale, picture, updated_at, and zoneinfo. Because these are often app-specific, they can be customized via Sign Up fields.

By default, the Authenticator will still require any attributes required for verification, such as email, even if signUpAttributes is empty:

@override
Widget build(BuildContext context) {
  return Authenticator(
    child: MaterialApp(
      builder: Authenticator.builder(),
      home: const Scaffold(
        body: Center(
          child: Text('You are logged in!'),
        ),
      ),
    ),
  );
}

The Authenticator demo below uses a mock backend. Any users you create are stored in memory. You can verify accounts that you create with the code "123456".

@override
Widget build(BuildContext context) {
  return Authenticator(
    signUpForm: SignUpForm.custom(
      fields: [
        SignUpFormField.username(),
        SignUpFormField.password(),
        SignUpFormField.passwordConfirmation(),
        SignUpFormField.email(),
        SignUpFormField.phoneNumber(),
        SignUpFormField.address(),
        SignUpFormField.birthdate(),
        SignUpFormField.familyName(),
        SignUpFormField.gender(),
        SignUpFormField.givenName(),
        SignUpFormField.middleName(),
        SignUpFormField.name(),
        SignUpFormField.nickname(),
        SignUpFormField.preferredUsername(),
      ],
    ),
    child: MaterialApp(
      builder: Authenticator.builder(),
      home: const Scaffold(
        body: Center(
          child: Text('You are logged in!'),
        ),
      ),
    ),
  );
}

The Authenticator demo below uses a mock backend. Any users you create are stored in memory. You can verify accounts that you create with the code "123456".

Zero Configuration

The Authenticator automatically infers socialProviders from amplify pull.

For your configured social providers, you can configure Apple, Amazon, Facebook, or Google:

The Authenticator demo below uses a mock backend. Any users you create are stored in memory. You can verify accounts that you create with the code "123456".

Configuration

Initial State

Login Mechanisms

Sign Up Attributes

Social Providers