AWS cognito user management in ionic

Hi Guyz. In this article, I’ll guide you on how to implement AWS cognito authentication and user creation in ionic application using AWS SDK for JavaScript.

TL;DR; (for the impatient)

Github repo: https://github.com/shamique/cognito-and-ionic

Overview

We’ll use,

• AWS Cognito
• Ionic 3 (for build our application)
• NodeJS (for install necessary dependency)

so make sure you have a good understanding of above technologies.

So let’s start.

Configure cognito user pool

As a first step, we need to create a user pool in our AWS account. So open your browser and navigate to AWS Console and log into your account. And click “Cognito” under services (or search for cognito and click).

Figure 1 — amazon cognito console

Click “Manage User pools” and “create user pool”. In left panel menus, click name and provide a name for your cognito user pool.

Then go to Attributes page. Under standard attributes, I’ll select only the email (that doesn’t mean you can’t select other attributes 😜).

Figure 2 — define user attribute

Now go to “App clients” and click “Add an app client”.

Provide app client name and un-tick “Generate client secret”. And then click “Create app client”.

Note: “Generate client secret” is not supported in AWS Javascript SDK. Therefore will un-check this for the moment.

Figure 3 — create app client form

Copy the create “APP client id” in a separate file. We’ll need this in our app later.

Figure 4 — generated app client id

Now go to review and click “Create Pool”.

Note: Once you created the user pool, Copy the Pool ID which will need in our ionic app later.

Ok we have created a user pool. Now let’s create a new user in the pool.

Go to created user pool click “Users and groups”.

Figure 5 — user pool view

Enter Username, Temporary password and the Email address create the user.

Figure 6 — cognito user creation form

Ok we have created our user pool along with a new user in it. So let’s start creating our app.

Creating the Ionic application

Open your favorite terminal and initiate the ionic project.

ionic start ionic-cognito-app blank 
cd ionic-cognito-app

Now we need to generate two pages (login and sign up page) and a provider file to handle our cognito function.

ionic g page login
ionic g page sign_up
ionic g provider cognito-service

To integrate AWS cognito in our project, we’ll need to install AWS cognito identity js to our project.

Run below command in terminal (inside your project file)

npm install — save amazon-cognito-identity-js

Great! Now it’s time to code.

Cognito Service

Open cognito-service.ts file. Add below import statement in the top.

import * as AWSCognito from "amazon-cognito-identity-js";

and add below variable inside the export method,

//replace the value with actual value 
_POOL_DATA = {
   UserPoolId: "<< USER_POOL_ID >>",
   ClientId: "<< CLIENT_ID >>"
};

Note: When you are writing Cognito related functions, make sure to return it as a promise. Otherwise you might encounter with strange cognito API error as follow.

— Signup function

Note: user attribute is an array of CognitoUserAttribute. In our example I have used, only an email (refer Figure 2 image). Therefore I added only email attribute to the array. Otherwise it could be multiple object.

— Confirm user function

— Authentication function

For authenticate function, we can have only two callbacks as onSuccess and onFailure if the user sign up himself. But there are some cases where admin creates an account on behalf of a user with a temporary password, Like we did earlier (Figure 6). In such cases, we need to add another callback called completeNewPasswordChallenge. In this example, I used the same password for convenient.

Great! So we have written all our functions. Now let’s consume our custom cognito functions in our code.

Login page

— login view

Open login.html page and replace the content with below markup,

— Login component

Open login.ts file and import the CognitoServiceProvider in top and add login function as follow,

If the login is success, we’ll receive cognito user object along with access token. We may store the Access Tocken to consume AWS services, such as Lambda service, S3 bucket etc. (which I will not cover here)

Great! Let’s test the user authentication.

Run ionic serve in your terminal and application will run in the browser. Provide created user’s username and password and click login.

As you can see, the Access Token is received. Like I mentioned earlier, this Access Token can use to access AWS services.

Sign up page

— Signup view page

Open signup.html and replace the content with below markup

— Signup component

Open sign-up.ts file and replace the content with below code,

Great. Now let’s run the code and test the signup function.

Click Signup in the app and type valid email address and valid password. Then click Register.

If the user signup is successful, you’ll receive a response like this. Since our registration is success, let’s try to log in with this newly created user.

Go back to login page and provide username and password of new user and click login.

Oops! This time it’s an error. It says, User is not confirmed.

If you go back to cognito pool and navigate to “MFA and verifications page”, there you can see a section called “verification of emails or phone number” and you might probably tick email option.

So what happen was when you signup with the cognito pool, it will send a verification code to your email. So we need to provide the verification code to confirm the ownership. Ok so will cater this function as well in our app.

Instead of creating a new page for this, will make some modification to our existing signup page.

Confirm user

Open sign-up.html and replace the markup with below,

… and replace the sign-up.component.ts file with below code,

Ok so what we did here is, once the signup is confirmed, will prompt an Input alert to get the verification and call the confirm method.

Great. So let’s test again.

Follow the same steps as previous (make sure to add a valid email address for username) and click register. This time you’ll be prompt to enter verification code.

Enter the verification code that you receive and click Verify.

If the code is verified, try to login with the credentials. This time it should return the access token.

Since the scope is to cover the most basic ones, this is it for now. So hope you got a basic understanding of how to authenticate and register with AWS cognito in ionic application.

Thanks for reading! (Few 👏are always appreciated 😃)