Add authentication

The next feature you will be adding is authentication.

Authentication with Amplify

Amplify uses Amazon Cognito as its 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

To add authentication to your app, run this command:

1amplify add auth

Select the defaults for the following prompts:

1? Do you want to use the default authentication and security configuration? Default configuration
2Warning: you will not be able to edit these selections.
3? How do you want users to be able to sign in? Username
4? Do you want to configure advanced settings? No, I am done.

To deploy the service, run the push command:

1amplify 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:

1amplify 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 a login flow can be quite difficult and time consuming to get right. Luckily, Amplify UI has an Authenticator component that provides an entire authentication flow for you, using the configuration you specified in amplifyconfiguration.json.

Install Amplify UI

The @aws-amplify/ui-angular package includes React Native specific UI components you'll use to build your app. Install it with the following command:

1npm install @aws-amplify/ui-angular

Add the Amplify UI Authenticator component

Add the Amplify Authenticator UI Module to src/app/app.component.ts:

1import { Component } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { RouterOutlet } from '@angular/router';
4import { TodosComponent } from './todos/todos.component';
5import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
6
7@Component({
8  selector: 'app-root',
9  standalone: true,
10  imports: [
11    CommonModule,
12    RouterOutlet,
13    TodosComponent,
14    AmplifyAuthenticatorModule
15  ],
16  templateUrl: './app.component.html',
17  styleUrls: ['./app.component.css']
18})
19export class AppComponent {
20  title = 'amplifyapp';
21}

Open your angular.json file, and add node_modules/@aws-amplify/ui-angular/theme.css to styles array in your angular.json. This array is located in projects.<project-name>.architect.build.options.

1"styles": [
2  "node_modules/@aws-amplify/ui-angular/theme.css",
3  "src/styles.css"
4],

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

1<amplify-authenticator>
2  <ng-template
3    amplifySlot="authenticated"
4    let-user="user"
5    let-signOut="signOut"
6  >
7    <app-todos></app-todos>
8    <button (click)="signOut()">Sign Out</button>
9  </ng-template>
10</amplify-authenticator>

Finally run your app or restart it for the styling to take effect:

1npm start

Using Amplify UI connected components makes it easier to manage styling across your entire app.