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 using
Auth.signUp.
You can provide an alternative username such as email or phone_number.
Note: A
username,phone_numbervalue is required for Cognito User Pools.
<amplify-authenticator [loginMechanisms]="['username']">
<ng-template
amplifySlot="authenticated"
let-user="user"
let-signOut="signOut"
>
<h2>Welcome, {{ user.username }}!</h2>
<button (click)="signOut()">Sign Out</button>
</ng-template>
</amplify-authenticator>
<amplify-authenticator [loginMechanisms]="['email']">
<ng-template
amplifySlot="authenticated"
let-user="user"
let-signOut="signOut"
>
<h2>Welcome, {{ user.username }}!</h2>
<button (click)="signOut()">Sign Out</button>
</ng-template>
</amplify-authenticator>
<amplify-authenticator [loginMechanisms]="['phone_number']">
<ng-template
amplifySlot="authenticated"
let-user="user"
let-signOut="signOut"
>
<h2>Welcome, {{ user.username }}!</h2>
<button (click)="signOut()">Sign Out</button>
</ng-template>
</amplify-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:
<amplify-authenticator [signUpAttributes]="[]"></amplify-authenticator>
<amplify-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', ]"
></amplify-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:
<amplify-authenticator
[socialProviders]="['amazon', 'apple', 'facebook', 'google']"
>
<ng-template
amplifySlot="authenticated"
let-user="user"
let-signOut="signOut"
>
<h2>Welcome, {{ user.username }}!</h2>
<button (click)="signOut()">Sign Out</button>
</ng-template>
</amplify-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:
<amplify-authenticator>
<ng-template
amplifySlot="authenticated"
let-user="user"
let-signOut="signOut"
>
<h2>Welcome, {{ user.username }}!</h2>
<button (click)="signOut()">Sign Out</button>
</ng-template>
</amplify-authenticator>
The modal variation overlays the entire screen with the Authenticator:
<amplify-authenticator variation="modal">
<ng-template
amplifySlot="authenticated"
let-user="user"
let-signOut="signOut"
>
<h2>Welcome, {{ user.username }}!</h2>
<button (click)="signOut()">Sign Out</button>
</ng-template>
</amplify-authenticator>
Hide Sign Up
The Authenticator has an option to hide the sign up page including the Create Account tab.
<amplify-authenticator [formFields]="formFields" [hideSignUp]="true">
<ng-template amplifySlot="verify-user-header">
<h3
class="amplify-heading"
style="padding: var(--amplify-space-xl) 0 0 var(--amplify-space-xl)"
>
Enter Information:
</h3>
</ng-template>
<ng-template amplifySlot="verify-user-footer">
<div>Footer Information</div>
</ng-template>
<ng-template amplifySlot="confirm-verify-user-header">
<h3
class="amplify-heading"
style="padding: var(--amplify-space-xl) 0 0 var(--amplify-space-xl)"
>
Enter Information:
</h3>
</ng-template>
<ng-template amplifySlot="confirm-verify-user-footer">
<div>Footer Information</div>
</ng-template>
<ng-template
amplifySlot="authenticated"
let-user="user"
let-signOut="signOut"
>
<h2>Welcome, {{ user.username }}!</h2>
<button (click)="signOut()">Sign Out</button>
</ng-template>
</amplify-authenticator>