Amplify UI Home

Authenticator

The Authenticator component adds complete authentication flows to your application with minimal boilerplate.

Quick Start

Preqrequisite: Create an Authentication backend

The quickest way to get started is by wrapping your application with the Authenticator component. Once an end-user has created an account & signed in, the underlying component is rendered with access to the user.

Configuration

Zero Configuration

The Authenticator works seamlessly with the Amplify CLI to automatically work with your backend.

First, update @aws-amplify/cli with npm or yarn if you're using a version before 6.4.0:

npm install -g @aws-amplify/cli@latest

Finally, run amplify pull to sync your aws-exports.js with your cloud backend:

amplify pull

This will update your aws-exports.js with your latest backend configuration for the Authenticator.

initialState

By default, unauthenticated users are redirected to the signIn flow.

You can explicitly redirect to signUp or resetPassword as your initialState:

loginMechanisms

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.

signUpAttributes

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:

socialProviders

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:

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:

Customization

Headers & Footers

The Authenticator has several "slots" that you can customize to add messaging & functionality to meet your app's needs.

The following example customizes these slots with:

  • Custom header above the Authenticator with the Amplify logo
  • Custom footer below the Authenticator with © All Rights Reserved
  • Custom Sign In header with Sign in to your account
  • Custom Sign In footer with a Reset Password link
  • Custom Sign Up header with Create a new account
  • Custom Sign Up footer with a Back to Sign In link
Amplify logo

© All Rights Reserved

Internationalization (I18n)

The Authenticator ships with translations for:

  • en – English (default)
  • zh – Chinese
  • fr – French
  • de – German
  • it – Italian
  • ja – Japenese
  • es – Spanish

These translations can be customized using the Amplify JS' I18n module:

import { translations } from '@aws-amplify/ui';
I18n.putVocabularies(translations);
I18n.setLanguage('fr');

I18n.putVocabularies({
  fr: {
    'Sign In': 'Se connecter',
    'Sign Up': "S'inscrire",
  },
  es: {
    'Sign In': 'Registrarse',
    'Sign Up': 'Regístrate',
  },
});

The list of available keys are available here.

Translations Needed 📖

If you see any missing translations or would like to contribute a new language, we greatly appreciate contributions to translations we have here.

Labels & Text

Using the same techniques as Internationalization (I18n), you can customize the labels and text of the components:

Compare the default labels below to those in the customized screens via the tabs above.

Because I18n manages global translations, customizing these will affect all translations of these strings (including those on this page!).

Sign Up Fields

The following example customizes the Sign Up screen by:

  • Re-using the default Sign Up form fields
  • Appending a custom "Terms & Conditions" checkbox with a validateCustomSignUp service

Styling

You can customize the Authenticator's default theme with CSS variables. The example below uses a <style> tag to change the default colors to a dark theme:

[data-amplify-authenticator] {
  --amplify-colors-background-primary: var(--amplify-colors-neutral-90);
  --amplify-colors-background-secondary: var(--amplify-colors-neutral-100);
  --amplify-colors-background-tertiary: var(--amplify-colors-black);
  ...
  --amplify-components-text-color: var(--amplify-colors-font-interactive);
}

Additional CSS Styling

You can also override the authenticator's amplify-* classes.

For example, if you'd like to hide the sign up tab, you can override the amplify-tabs class.

.amplify-tabs {
  display: none;
}
Amplify open source, documentation and community are supported by Amazon Web Services © 2021, Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.
Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.