Configuring Multi-Factor Authentication (MFA) in AWS Cognito using Amplify.

8 min readApr 13, 2022

In my previous post, I shared an Ionic project on my GitHub account that contains many of the valuable UI components of the framework. We will be using that project to add Amplify support, and then we will add an authentication component with AWS Cognito using Amplify.

To start with this tutorial, you need an AWS account and the AWS CLI correctly configured in your local environment. Then, clone the “ionic-ui-components-showcase” project using git on your terminal.

NOTE: You can use your own Ionic/Angular project to follow the instructions shown in this tutorial. Go to the section “Adding Amplify support” if you want to use your app.

Cloning an Ionic/Angular project

# git clone https://github.com/aosolorzano/ionic-ui-components-showcase.git

Rename the file with the name of your interest. Delete the “.git” folder (if you like to upload it later to your GitHub account), and open the renamed project with the IDE of your preference:

# mv ionic-ui-components-showcase ionic-amplify-auth-example
# cd ionic-amplify-auth-example
# rm -rf .git
# idea .

Install all Node dependencies. Build and deploy the project on your local device to see if all is working correctly:

# npm install
# ionic build
# ionic serve

If this is OK, you can see the app running in your browser like this:

Adding Amplify support

We need to initialize Amplify in our Ionic/Angular project:

# amplify init

The previous command creates an initial project on AWS that you can find in the Amplify Console. It makes an initial infrastructure using AWS CloudFormation behind the scene.

Then, install the complementary plugins:

npm install aws-amplify @aws-amplify/ui-angular

Add the following line at the end of the “src/global.scss” file:

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

When working with underlying aws-js-sdk. We should add the “node” directive to the compiler options config. We must update the “tsconfig.app.json” file:

If you are using Angular 6 or above, you may need to add the following at the end of the “src/polyfills.ts” file:

Update the “src/main.ts “file with the following changes. These changes attach your Amplify configuration to the Ionic/Angular project.

NOTE: You can use the Amplify Logger utility inside your app instead of a pure JS “console.log().”

Compile and deploy the project in your local environment to corroborate that the app is still working.

Adding Amplify Auth support (with Cognito)

Now, it’s time to configure the authentication component using AWS Cognito on our app. Note that we must configure Cognito with a Multi-Factor Authentication (MFA) in this section. We need to install the Google Authenticator app on our smartphones to add the 2-step verification in our app. Well, execute the following command in your terminal:

# amplify add auth

In the following image, you can see a resume of the different input sections with their corresponding answer to make a better context:

I selected “Time-Based One-Time Password (TOTP)” as our MFA type for the login component (implemented later). Note that you can make your configurations like adding more “User Pool Groups” or overriding the “Default Password Policy” to specify the user password’s minimum and max length, if it contains special characters, etc. Then, push all these changes to AWS using Cognito to deploy this required infrastructure for our app:

# amplify status
# amplify push

The Amplify push command shows the AWS resources that will be created in your account:

If the result of the command is OK, you can see new categories added to your Amplify app in the AWS Console:

It’s time to start creating the Ionic components needed to manage the authentication process of the users. First, we need to make the Auth-Guard service to determine if a user is logged in. If not, the Angular app redirects the user navigation to the login page, and that is the third component that we need to create:

# ionic g service services/auth/authentication
# ionic g service services/auth/auth-guard
# ionic g page pages/login

IMPORTANT: the code lines for these components are a lot. You can find the source code in my GitHub account. For this reason, I emphasize all the changes made in the source code for your reference in the following paragraphs.

We must update the following components to use the auth component in the app:

app.component.ts: this component is notified by the authenticator service when the user is signed in.
App.component.html: adding a “log out” button. Furthermore, the Ionic side menu must be activated when the user is logged in.
app-routing.module.ts: the existing page’s components routing config were moved to a new file called “pages-routing.module.ts” created inside the pages folder. These pages are now part of a unique app routing URL defined as “/app.” Finally, the new activation component is used as an auth-guard for the “/app” pages.

Now it’s time to compile and deploy our app locally to verify that the login is working as expected.

You need to create your account before getting into the app:

A verification code must be sent to you via email during the sign-up process:

You can use your new credentials to access the app:

Now it’s time to open your Google Authenticator app to scan the QR code shown by the auth component:

Once you enter the corresponding verification code, the auth component redirects you to the home page:

I added a “sign-out” button at the end of the menu to close the actual Cognito user session. The app must redirect you to the login page.

And that’s it!! You have completed the objective set at the beginning of this article. These instructions help you configure Amplify for your Ionic/Angular applications.

You can find the complete code of this example app in the following repo on my GitHub account: “ionic-amplify-auth-example.”

The subsequent sections are optional if you want to learn how to host your app using Amplify.

Create and push this app to a GitHub repo (optional)

It’s time to move our project to GitHub. I created a repo called “ionic-amplify-auth-example,” as I mentioned at the beginning of this article. Now we can execute the following commands to push all these changes to our repo:

# git init
# git add .
# git commit -m "Initial commit"
# git remote add origin https://github.com/<your-username>/ionic-amplify-auth-example.git
# git push -u origin master

Adding Hosting environment on Amplify Console (optional)

We now have a GitHub repository for our app. We can host it using the Amplify console and access it with an assigned URL. Another benefit is allowing Amplify service to configure a CI/CD pipeline to deploy all detected changes in our GitHub repository to the Internet. First, we need to specify the git repository provider at the Amplify console.

After you get the authorization token from your git repository provider, you can choose the repo and the corresponding branch of your app:

As I said earlier, we can allow Amplify to enable CI/CD to deploy all repo changes to the Amplify environment:

Amplify allows us to create a new role or choose an existing one that has permission to deploy the required infra using CloudFormation:

Now we can review all configurations entered before deploying the app code in the Amplify environment:

We can verify that all deploying steps were OK on the Amplify app page. Note that Amplify provides us with a generated URL where we can access our app, which is accessible over the Internet.

We can click on the provided link to navigate to a new browser tab where we can see our deployed app:

Deleting Amplify resources on AWS (optional)

We can delete all created infra resources using Amplify with the following command. Do not be afraid about this step; you can deploy the infra resources later by repeating the Amplify commands shown in this tutorial.

# amplify delete

You will be asked to confirm this action before deleting all resources on AWS:

If you check your Amplify console, you will see that the app does not exist anymore:

Commit and push these changes to your GitHub repository if you don’t want to maintain those resources on your AWS account. Remember that your app per see supports Amplify and the authentication with Cognito, given the changes made in the code throughout this post. We will be trying to deploy the application again in the subsequent section.

Deploying the app anew using Amplify (optional)

Clone your project repository with the last changes in your local machine:

# git clone https://github.com/aosolorzano/ionic-amplify-auth-example.git

You must initialize the project again using Amplify:

# cd ionic-amplify-auth-example
# amplify init

This time try to set up other characteristics of Cognito, like forcing a user to establish a better password sequence, adding a Google Captcha, using SMS to validate the user’s credentials for the first time, etc.

And you are ready!! You have a complete example of using Amplify and Cognito auth in your apps. Remember that this part of the tutorial is optional, but if you get here, you must recognize the importance of these steps at the time to move your app to the next level.