The next feature you will be adding is authentication.

## Authentication with Amplify

Amplify uses [Amazon Cognito](https://aws.amazon.com/cognito/) as the main authentication provider. Amazon Cognito is a robust user directory service that handles user registration, authentication, account recovery & other operations. In this tutorial, you'll learn how to add authentication to your application using Amazon Cognito and username/password login.

## Create authentication service

```bash
amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings?  No, I am done.
```

To deploy the service, run the `push` command:

```bash
amplify push
```

Now, the authentication service has been deployed and you can start using it. To view the deployed services in your project at any time, go to Amplify Console by running the following command:

```bash
amplify console
```

## Create login UI

Now that you have your authentication service deployed to AWS, it's time to add authentication to your Angular app. Creating the login flow can be quite difficult and time consuming to get right. Luckily Amplify has an authentication UI component you can use that will provide the entire authentication flow for us, using your configuration specified in your `aws-exports.js` file.

First, import Authenticator style inside your stylesheet (e.g. `src/style.css`):

```css
@import '~@aws-amplify/ui-angular/theme.css';
```

Navigate to `src/app/app.component.html`, and wrap `app-restaurants` with `<amplify-authenticator>` to enable authentication:

```html
<amplify-authenticator>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <app-restaurants></app-restaurants>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>
```

### Unhandled Promise Console Warnings

If you see `Unhandled Promise rejection: [message] ; zone: <root> ; ...` errors on console, you can add the following code after you import zone.js inside `src/polyfills.ts` file:

```ts
import 'zone.js/dist/zone'; // Included with Angular CLI.

(window as any).Zone['__zone_symbol__ignoreConsoleErrorUncaughtError'] = true;
```

Run the app to see the new Authentication flow protecting the app:

```bash
npm start
```

Now you should see the app load with an authentication flow allowing users to sign up and sign in.

In this example, you used the **Amplify Angular UI** library and the `amplify-authenticator` component to quickly get up and running with a real-world authentication flow.

You can also [customize](https://ui.docs.amplify.aws/angular/components/authenticator/customization) this component to add or remove fields, update styling, or other configurations.

In addition to the `amplify-authenticator` you can build custom authentication flows using the `Auth` class.

`Auth` has over 30 methods including `signUp`, `signIn`, `forgotPassword`, and `signOut` that allow you full control over all aspects of the user authentication flow. Check out the complete API [here](https://aws-amplify.github.io/amplify-js/api/classes/authclass.html)

In the next section, you'll host your app on the **Amplify Console**, a hosting service complete with a globally available CDN, atomic deployments, easy custom domains, and CI / CD.