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 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, email, or phone_number value is required for Cognito User Pools. The username field will only work with Gen 1 Auth. For more information about using username see the docs.

Note: Login with Username is not currently supported using Amplify Gen2 backends

<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>

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:

<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>

Zero Configuration

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>

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>

Configuration

Initial State

Login Mechanisms

Sign Up Attributes

Social Providers

Variation

Hide Sign Up