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 the current Amplify configuration,
but can be explicitly defined as seen below.
Without the zero configuration, the Authenticator by default creates new users in the Amazon Cognito UserPool based on a unique username.
You can provide an alternative to username such as email or phone_number.
Note: A
username,phone_numbervalue is required for Cognito User Pools. Theusernamefield will only work with Gen 1 Auth. For more information about usingusernamesee the docs.
Note: Login with Username is not currently supported using Amplify Gen2 backends
<Authenticator loginMechanisms={['username']}>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
<Authenticator loginMechanisms={['email']}>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
<Authenticator loginMechanisms={['phone_number']}>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
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:
export default function App() {
return (
<Authenticator signUpAttributes={[]}>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
}
export default function App() {
return (
<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',
]}>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
}
Social Providers
The Authenticator automatically infers socialProviders from amplify pull,
but can be explicitly defined as seen below.
For your configured social providers, you can also provide amazon, facebook, or google:
export default function App() {
return (
<Authenticator socialProviders={['amazon', 'apple', 'facebook', 'google']}>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
}
Step by step video on setting up social providers.
Variation
The Authenticator has multiple variations to meet the needs of your application.
By default, the Authenticator will render as a centered card within the container:
export default function App() {
return (
<Authenticator>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</main>
)}
</Authenticator>
);
}
The modal variation overlays the entire screen with the Authenticator:
export default function App({ signOut }) {
return (
<Authenticator variation="modal">
{({ signOut }) => <button onClick={signOut}>Sign out</button>}
</Authenticator>
);
}
Hide Sign Up
The Authenticator has an option to hide the sign up page including the Create Account tab.
<Authenticator hideSignUp />