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, 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 using Auth.signUp.

You can provide an alternative username such as email or phone_number.

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

import React from 'react';
import { Button } from 'react-native';

import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

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

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator loginMechanisms={['username']}>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;

import React from 'react';
import { Button } from 'react-native';

import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

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

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator loginMechanisms={['email']}>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;

import React from 'react';
import { Button } from 'react-native';

import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react-native';
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

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

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator loginMechanisms={['phone_number']}>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;

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:

import React from 'react';
import { Button } from 'react-native';

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

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

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

function App() {
  return (
    <Authenticator.Provider>
      <Authenticator signUpAttributes={[]}>
        <SignOutButton />
      </Authenticator>
    </Authenticator.Provider>
  );
}

export default App;

export default function App() {
  return (
    <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>
  );
}

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:

ensure the required dependencies have been installed in the React Native Quick Start guide
configure your provider(s) by following the Amplify JS Add Social Provider Sign-In guide

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

import React from 'react';
import { Button } from 'react-native';

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

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

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;

Configuration

Initial State

Login Mechanisms

Sign Up Attributes

Social Providers

Hide Sign Up