Amplify UI

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:

Login Mechanisms

Zero Configuration

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

By default, the Authenticator creates new users in the Amazon Cognito UserPool based on a unique username, email or phone_number.

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

<Authenticator.Provider>
  <Authenticator loginMechanisms={['email']}>
    <SignOutButton />
  </Authenticator>
</Authenticator.Provider>
<Authenticator.Provider>
  <Authenticator loginMechanisms={['phone_number']}>
    <SignOutButton />
  </Authenticator>
</Authenticator.Provider>

Note: Configuring sign in with username is not supported by Amplify Gen2 backends

<Authenticator.Provider>
  <Authenticator loginMechanisms={['username']}>
    <SignOutButton />
  </Authenticator>
</Authenticator.Provider>

Sign Up Attributes

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:

<Authenticator.Provider>
  <Authenticator signUpAttributes={[]}>
    <SignOutButton />
  </Authenticator>
</Authenticator.Provider>
<Authenticator.Provider>
  <Authenticator
    signUpAttributes={[
      "address",
      "birthdate",
      "email",
      "family_name",
      "gender",
      "given_name",
      "locale",
      "middle_name",
      "name",
      "nickname",
      "phone_number",
      "picture",
      "preferred_username",
      "profile",
      "updated_at",
      "website",
      "zoneinfo",
    ]}
  >
    <SignOutButton />
  </Authenticator>
</Authenticator.Provider>

Social Providers

Zero Configuration

The Authenticator reads directly from your Amplify configuration socialProviders from amplify pull.

Social Provider authentication is supported out of the box, to configure:

Hide Sign Up

The Authenticator has an option to hide the sign up page including the Create Account button.

import { Button } from 'react-native';
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';

function SignOutButton() {
  const { signOut } = useAuthenticator();
  return <Button title="Sign Out" onPress={signOut} />;
}

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator
        components={{
          SignIn: (props) => <Authenticator.SignIn {...props} hideSignUp />,
        }}
      >
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.