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
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,phone_numbervalue 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
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
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
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;