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
• Custom Confirm Sign Up header with an Enter Information header
• Custom Confirm Sign Up footer with a Footer Information message

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';
import { AuthenticatorService } from '@aws-amplify/ui-angular';

// import config from './aws-exports'; // Amplify Gen 1 config
import config from './amplify_outputs.json'

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class UseAuthenticatorComponent {
  constructor(public authenticator: AuthenticatorService) {
    Amplify.configure(config);
  }
}

app.component.html

<amplify-authenticator [formFields]="formFields">
  <ng-template amplifySlot="header">
    <div style="padding: var(--amplify-space-large); text-align: center">
      <img
        class="amplify-image"
        alt="Amplify logo"
        src="https://docs.amplify.aws/assets/logo-dark.svg"
      />
    </div>
  </ng-template>

  <ng-template amplifySlot="sign-in-header">
    <h3
      class="amplify-heading"
      style="padding: var(--amplify-space-xl) 0 0 var(--amplify-space-xl)"
    >
      Sign in to your account
    </h3>
  </ng-template>

  <ng-template amplifySlot="sign-in-footer">
    <div style="text-align: center">
      <button
        (click)="authenticator.toForgotPassword()"
        class="amplify-button amplify-field-group__control"
        data-fullwidth="false"
        data-size="small"
        data-variation="link"
        type="button"
        style="font-weight: normal"
      >
        Reset Password
      </button>
    </div>
  </ng-template>

  <ng-template amplifySlot="sign-up-header">
    <h3
      class="amplify-heading"
      style="padding: var(--amplify-space-xl) 0 0 var(--amplify-space-xl)"
    >
      Create a new account
    </h3>
  </ng-template>

  <ng-template amplifySlot="sign-up-footer">
    <div style="text-align: center">
      <button
        (click)="authenticator.toSignIn()"
        class="amplify-button amplify-field-group__control"
        data-fullwidth="false"
        data-size="small"
        data-variation="link"
        type="button"
        style="font-weight: normal"
      >
        Back to Sign In
      </button>
    </div>
  </ng-template>

  <ng-template amplifySlot="footer">
    <div style="padding: var(--amplify-space-large); text-align: center">
      <p class="amplify-text" style="color: var(--amplify-colors-neutral-80)">
        © All Rights Reserved
      </p>
    </div>
  </ng-template>

  <ng-template amplifySlot="confirm-sign-up-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-sign-up-footer">
    <div>Footer Information</div>
  </ng-template>

  <ng-template amplifySlot="setup-totp-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="setup-totp-footer">
    <div>Footer Information</div>
  </ng-template>

  <ng-template amplifySlot="confirm-sign-in-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-sign-in-footer">
    <div>Footer Information</div>
  </ng-template>

  <ng-template amplifySlot="forgot-password-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="forgot-password-footer">
    <div>Footer Information</div>
  </ng-template>

  <ng-template amplifySlot="confirm-reset-password-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-reset-password-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>

Override Function Calls

You can override the call to signUp, signIn, confirmSignIn, confirmSignUp, forgotPassword and forgotPasswordSubmit functions. To override a call you must create a new services object with an async handle* function that returns an aws-amplify Auth promise.

The service object must then be passed into the authenticator component as a services prop. For example, let's imagine you'd like to lowercase the username and the email attributes during signUp. This would be overriden like so:

app.component.html

<amplify-authenticator
  [services]="services"
  initialState="signUp"
>
  <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>

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';
import { signUp, SignUpInput } from 'aws-amplify/auth';
import awsExports from './aws-exports';

@Component({
  selector: 'override-function-calls',
  templateUrl: 'override-function-calls.component.html',
})
export class OverrideFunctionCallsComponent {
  constructor() {
    Amplify.configure(awsExports);
  }
  services = {
    async handleSignUp(input: SignUpInput) {
      let { username, password, options } = input;
      // custom username and email
      username = username.toLowerCase();
      const customEmail = options?.userAttributes?.email?.toLowerCase();
      return signUp({
        username,
        password,
        options: {
          ...options,
          userAttributes: {
            ...options?.userAttributes,
            email: customEmail,
          },
        },
      });
    },
  };
}

  import { Component, OnInit } from '@angular/core';
  import { Amplify, Auth } from 'aws-amplify';
  // import config from './aws-exports'; // Amplify Gen 1 config
  import config from './amplify_outputs.json'


  @Component({
    selector: 'app',
    templateUrl: 'app.component.html',
  })
  export class App {
    constructor() {
      Amplify.configure(config);
    }

    services = {
      async handleSignUp(input: SignUpInput) {
        let { username, password, attributes } = input;
        // custom username and email
        username = username.toLowerCase();
        attributes.email = attributes.email.toLowerCase();
        return Auth.signUp({
          username,
          password,
          attributes,
          autoSignIn: {
            enabled: true,
          },
        });
      },
  };

Each handle* function accepts as input the expected input of its corresponding Auth function, allowing you to override the Auth function call from within the handle* function. Here is a table of each override function name, and the values passed as input.

Internationalization (I18n)

The Authenticator ships with translations for:

• en – English (default)
• zh – Chinese
• nl – Dutch
• fr – French
• de – German
• he – Hebrew
• id – Indonesian
• it – Italian
• ja – Japanese
• ko – Korean
• nb - Norwegian
• pl – Polish
• pt – Portuguese
• ru – Russian
• es – Spanish
• sv – Swedish
• th - Thai
• tr – Turkish
• ua – Ukrainian

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

import { I18n } from 'aws-amplify/utils';
import { translations } from '@aws-amplify/ui-angular';
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.

Confirm Sign Up Page Translations

The confirm sign up page has a few specialized strings that can be translated. These include:

`Your code is on the way. To log in, enter the code we emailed to`

`Your code is on the way. To log in, enter the code we texted to`

`Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.`

`It may take a minute to arrive.`

Labels & Text

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

I18n.putVocabulariesForLanguage('en', {
  'Sign In': 'Login', // Tab header
  'Sign in': 'Log in', // Button label
  'Sign in to your account': 'Welcome Back!',
  Username: 'Enter your username', // Username label
  Password: 'Enter your password', // Password label
  'Forgot your password?': 'Reset Password',
});

I18n.putVocabulariesForLanguage('en', {
  'Create Account': 'Register', // Tab header
  'Create a new account': 'New User', // Header text
  'Confirm Password': 'Confirm your password', // Confirm Password label
  Email: 'Enter your email',
  'Phone Number': 'Enter your phone number',
});

I18n.putVocabulariesForLanguage('en', {
  'Reset your password': 'Forgot your password?',
  'Enter your username': 'Username or Email',
  'Send code': 'Reset my password',
  'Back to Sign In': 'Back to Login',
});

I18n.putVocabulariesForLanguage('en', {
  Loading: 'QR code would show here',
  Code: '2FA Code',
  Confirm: 'Confirm 2FA',
  'Back to Sign In': 'Back to Login',
});

Sign Up Fields

The following example customizes the Sign Up screen by:

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

Note: In the example code below, preferred_username is not set as an attribute because it has already been defined through Zero Configuration. You may also notice that the acknowledgement field is not being sent. This occurs since acknowledgement is not a known attribute to Cognito. To assign it as a custom attribute instead, the name field must have the custom: prefix.

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

@Component({
  selector: 'custom-sign-up-fields',
  templateUrl: 'custom-sign-up-fields.component.html',
})
export class CustomSignUpFieldsComponent {
  constructor() {
    Amplify.configure(awsExports);
  }

  services = {
    async validateCustomSignUp(formData: Record<string, string>) {
      if (!formData.acknowledgement) {
        return {
          acknowledgement: 'You must agree to the Terms and Conditions',
        };
      }
    },
  };
}

app.component.html

<amplify-authenticator [services]="services" initialState="signUp">
  <!-- sign-up-field override -->
  <ng-template
    amplifySlot="sign-up-form-fields"
    let-validationErrors="validationErrors"
  >
    <!-- Re-use default `Authenticator.SignUp.FormFields` -->
    <amplify-sign-up-form-fields></amplify-sign-up-form-fields>

    <!-- Append & require Terms and Conditions field to sign up -->
    <amplify-checkbox
      [errorMessage]="validationErrors.acknowledgement"
      [hasError]="!!validationErrors.acknowledgement"
      name="acknowledgement"
      value="yes"
    >
      I agree with the Terms and Conditions
    </amplify-checkbox>
  </ng-template>

  <!-- signed-in content override -->
  <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>

If you'd like to add an attribute please first consider using the Sign Up Attributes prop. In some instances you may want to add an app-specific attribute. In those cases you can add a new form element to the Sign Up form fields. Be aware the HTML name attribute on the new form field must match the name of the Cognito attribute. If the cognito attribute is a custom attribute it must have the custom: prefix in the HTML attribute name.

  const formFields = {
    signUp: {
      email: {
        order:1
      },
      password: {
        order: 2
      },
      confirm_password: {
        order: 3
      },
      'custom:your_custom_attribute': {
        order: 4
      }
    },
  }

Force New Password Fields

The following example customizes the Force New Password screen by:

• Re-using the default Force New Password form fields
• Appending a custom "Zone Info" text field

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';

@Component({
  selector: 'sign-up-with-attributes',
  templateUrl: 'sign-up-with-attributes.component.html',
})
export class SignUpWithAttributesComponent {
  constructor() {
    Amplify.configure(awsExports);
  }
}

app.component.html

<amplify-authenticator initialState="signUp">
  <ng-template amplifySlot="force-new-form-fields">
    <amplify-force-new-password-form-fields></amplify-force-new-password-form-fields>
    <amplify-text-field
      label="Zone Info"
      id="12233"
      autocomplete="false"
      placeholder="Zone Info"
      name="zoneinfo"
      type="text"
    ></amplify-text-field>
  </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>

Sign Up Field Order

The authenticator allows a custom order of sign up fields on the Sign Up page.

Order is determined by a formFields prop that is passed into the Authenticator component. This prop will have the signUp key with a list of all the input fields. Each input field will have an order key that specifies which order it will be displayed on the page.

In the example below the order will be set as email, family_name, birthdate, preferred_username, password and finally confirm_password.

Note: Fields that do not have a order key will be displayed at the bottom of the Sign Up page. The order key can also be combined with other form field updates. In addition, typically attributes added to the sign up page have already been inferred through Zero Configuration. However, you can explicitly set the sign up attributes prop to add these to the sign up page if needed.

app.component.html

<amplify-authenticator [formFields]="formFields" [signUpAttributes]="signUpAttributes">
  <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>

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';

// import config from './aws-exports'; // Amplify Gen 1 config
import config from './amplify_outputs.json'

@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor() {
    Amplify.configure(config);
  }

  public formFields = {
    signUp: {
      email: {
        order:1
      },
      family_name: {
        order: 2
      },
      preferred_username: {
        order: 4
      },
      birthdate: {
        order: 3
      },
      password: {
        order: 5
      },
      confirm_password: {
        order: 6
      }
    },
  }
}

// Adding the signUpAttributes prop is typically not needed since attributes are inferred via Zero Configuration.
// For the sake of this example they have been explicitly added so you can copy and paste this into your own application and see it work. 
public signUpAttributes={['birthdate', 'family_name', 'preferred_username']}

Form Field Customization

The Authenticator allows for customization of multiple aspects of the form fields. The sections below will describe several use cases, on how to modify these fields.

Overall, the following attributes are allowed to be modified on any input as described in the labels and placeholder section:

placeholder label

Additionally, you'll be able to show or hide the label of each form field by using labelHidden and set a field to required or not required with isRequired.

For customers wishing to change a phone number field, a new dialCode and dialCodeList key are now available as described in the dialCode and dialCodeList.

For a full list of component names and field names can be found in the input form table.

Updating labels, placeholders, required fields and showing labels

You can customize any label, placeholder, set a field as required or not required, and hide or show labels by configuring the formFields props, and passing it into the Authenticator component. To use this feature create a formFields prop and include the component name as a key. Inside that object you can list all the inputs you'd like to change by their name. Inputs can have additional client side validation by following HTML form validation standards.

Note: Specifying formFields for a given field will overwrite any default attributes. To include defaults, you must re-specify them as shown below.

The following example customizes the Sign In page by:

• Updating the placeholder with placeholder.
• Setting required to true with isRequired. username is required by default, but as mentioned above, default attributes will be overwritten and must be re-declared when using formFields.
• Updating the label text with label.
• Show the label using labelHidden set to false.

Note: On the sign in page the input name is always username, regardless of the login mechanism type.

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';

// import config from './aws-exports'; // Amplify Gen 1 config
import config from './amplify_outputs.json'


@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor() {
    Amplify.configure(config);
  }
  public formFields = {
    signIn: {
      username: {
        placeholder: 'Enter Your Email Here',
        isRequired: true,
        label: 'Email:'
      },
    },
  };
}

app.component.html

<amplify-authenticator [formFields]="formFields">
  <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>

Default international dial code

Default Dial code customization is available via the dialCode form field key.

The following example will set the default dial code to +227 on the Sign Up and Sign In page.

app.component.html

<amplify-authenticator [formFields]="formFields">
  <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>

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';

// import config from './aws-exports'; // Amplify Gen 1 config
import config from './amplify_outputs.json'


@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor() {
    Amplify.configure(config);
  }
  public formFields = {
    signIn: {
      username: {
        dialCode: "+227"
      },
    },
    signUp: {
      phone_Number: {
        dialCode: "+227"
      },
    },
  };
}

Change dial code list

If needed, you can update the list of dial codes shown to the user by assigning an array of dial codes to the dialCodeList.

In this example, only four dial codes are show in the drop down list for the sign in and sign up pages.

Note: Make sure to add the plus sign to each dial code in the dialCodeList.

app.component.html

<amplify-authenticator [formFields]="formFields">
  <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>

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';

// import config from './aws-exports'; // Amplify Gen 1 config
import config from './amplify_outputs.json'

@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor() {
    Amplify.configure(config);
  }
  public formFields = {
    signIn: {
      username: {
       dialCodeList: ['+1', '+123', '+227', '+229']
      },
    },
    signUp: {
      phone_Number: {
        dialCodeList: ['+1', '+123', '+227', '+229']
      },
    },
  };
}

Input Form Field Names Table

Here are the various components and input names that are available for customization.

Note: Custom sign up attributes not listed in this table are customizable. Use the form field name as the key.

Update Setup TOTP QR Issuer and Username

When setting up TOTP you can customize the issuer and username that will be shown in TOTP applications. This can be done by adding the formFields prop to the Authenticator component with a setupTotp key. The setupTotp should have a QR key with a totpIssuer and or totpUsername as seen in the example below.

Note: Unless changed, the default issuer is AWSCognito and username will be the current user.username for the user signing up.

app.component.html

<amplify-authenticator [formFields]="formFields">
  <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>

app.component.ts

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';

// import config from './aws-exports'; // Amplify Gen 1 config
import config from './amplify_outputs.json'

@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor() {
    Amplify.configure(config);
  }
  public formFields = {
    setupTotp: {
      QR: {
        totpIssuer: 'test issuer',
        totpUsername: 'amplify_qr_test_user',
      },
    },
  };
}

Styling

You can customize the Authenticator's default style by using CSS variables.

CSS style

The example below uses a <style> tag to change the appearance of some of the components used for the Authenticator:

[data-amplify-authenticator] {
  --amplify-components-authenticator-router-box-shadow: 0 0 16px var(--amplify-colors-overlay-10);
  --amplify-components-authenticator-router-border-width: 0;
  --amplify-components-authenticator-form-padding: var(--amplify-space-medium) var(--amplify-space-xl) var(--amplify-space-xl);
  --amplify-components-button-primary-background-color: var(--amplify-colors-neutral-100);
  --amplify-components-fieldcontrol-focus-box-shadow: 0 0 0 2px var(--amplify-colors-purple-60);
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-neutral-100);
  --amplify-components-tabs-item-color: var(--amplify-colors-neutral-80);
  --amplify-components-tabs-item-active-color: var(--amplify-colors-purple-100);
  --amplify-components-button-link-color: var(--amplify-colors-purple-80);
}

Additional CSS Styling

You can also override the authenticator's amplify-* classes. For example, if you'd like to update the primary color of your submit button you can override the amplify-button class.

.amplify-button--primary {
  background: linear-gradient(
    to right,
    var(--amplify-colors-green-80),
    var(--amplify-colors-orange-40)
  );
}