AWS Amplifies provides UI components that you can use in your view templates. 

The Authenticator component creates an drop-in user authentication experience. Add the `amplify-authenticator` component to your `app.component.html` view:

```html
  <amplify-authenticator></amplify-authenticator>
```

### SignUp Configuration
The SignUp component provides your users with the ability to sign up.  It is included as part of the ```authenticator``` component, but can also be used in isolation:

Usage:  
```<amplify-auth-sign-up [signUpConfig]="signUpConfig"></amplify-auth-sign-up>```  
or  
```<amplify-authenticator [signUpConfig]="signUpConfig"></amplify-authenticator>```

The SignUp Component accepts a 'signUpConfig' object which allows you to customize it.

import angular0 from "/src/fragments/ui-legacy/sign-up-attributes.mdx";

<Fragments fragments={{angular: angular0}} />

The signUpFields array in turn consist of an array of objects, each describing a field that will appear in sign up form that your users fill out:

import angular1 from "/src/fragments/ui-legacy/sign-up-fields.mdx";

<Fragments fragments={{angular: angular1}} />

The following example will replace all the default sign up fields with the ones defined in the `signUpFields` array.
In `app.component.ts`:
```js
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  signUpConfig = {
    header: 'My Customized Sign Up',
    hideAllDefaults: true,
    defaultCountryCode: '1',
    signUpFields: [
      {
        label: 'Email',
        key: 'email',
        required: true,
        displayOrder: 1,
        type: 'string',
      },
      {
        label: 'Password',
        key: 'password',
        required: true,
        displayOrder: 2,
        type: 'password'
      },
      {
        label: 'Phone Number',
        key: 'phone_number',
        required: true,
        displayOrder: 3,
        type: 'string'
      },
      {
        label: 'Custom Attribute',
        key: 'custom_attr',
        required: false,
        displayOrder: 4,
        type: 'string',
        custom: true
      }
    ]
  }
}
```

In `app.component.html`:
```html
<amplify-authenticator [signUpConfig]="signUpConfig"></amplify-authenticator>
```

### Sign up/in with email/phone number
If the user pool is set to allow email addresses/phone numbers as the username, you can then change the UI components accordingly by using `usernameAttributes`.

In `app.component.ts`:
```js
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  usernameAttributes = "email"; 
}
```

In `app.component.html`:
```<amplify-authenticator [usernameAttributes]="usernameAttributes"></amplify-authenticator>```

The `usernameAttributes` should be either `email` or `phone_number` based on your user pool setting.

Note: if you are using custom signUpFields to customize the `username` field, then you need to make sure either the label of that field is the same value you set in `usernameAttributes` or the key of the field is `username`.

For example:
```js
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  usernameAttributes: 'My user name',
  signUpConfig = {
    header: 'My Customized Sign Up',
    hideAllDefaults: true,
    defaultCountryCode: '1',
    signUpFields: [
      {
        label: 'My user name',
        key: 'username',
        required: true,
        displayOrder: 1,
        type: 'string',
      },
      {
        label: 'Password',
        key: 'password',
        required: true,
        displayOrder: 2,
        type: 'password'
      },
      {
        label: 'PhoneNumber',
        key: 'phone_number',
        required: true,
        displayOrder: 3,
        type: 'string'
      },
      {
        label: 'Custom Attribute',
        key: 'custom_attr',
        required: false,
        displayOrder: 4,
        type: 'string',
        custom: true
      }
    ]
  }
```

---

### Replacing Authentication Components With Custom Components
The child components displayed within the Authenticator can be hidden or replaced with custom components.

Usage:
```<amplify-authenticator [hide]="['Greetings']"></amplify-authenticator>```

#### Using Authentication Components Without the Authenticator
The child components displayed within the Authenticator can be used as standalone components.  This could be useful in situations where, for example, you want to display your own components for specific pieces of the registration and authentication flow.

These components include:

```javascript
<amplify-auth-confirm-sign-in>
<amplify-auth-confirm-sign-up>
<amplify-auth-forgot-password>
<amplify-auth-greetings>
<amplify-auth-require-new-password>
<amplify-auth-sign-in>
<amplify-auth-sign-up>
```

Each of these components expects to receive the authState object, which consists of a 'state' string and a 'user' object.  The authState is an observable managed by the amplifyService, so make sure that your own custom components set the authState appropriately.

Example:
```javascript
this.amplifyService.setAuthState({ state: 'confirmSignIn', user });
```

Additional details about the authState can be found in the [Subscribe to Authentication State Changes](/ui-legacy/auth/authenticator#subscribe-to-authentication-state-changes) section.