Integrating Cognito with your Mobile or Web Applications
Start course
1h 34m

This course covers the core learning objective to meet the requirements of the 'Designing Network & Data Transfer solutions in AWS - Level 1' skill

Learning Objectives:

  • Understand the AWS shared responsibility model
  • Understand AWS access management capabilities to enforce security at different levels (IAM, AWS Organizations, Control Tower, Service Catalog, Amazon Cognito)
  • Understand where to find AWS compliance information (AWS Artifact)

Now that we know the backgrounds on both Cognito user pools and the identity pools, let's take a look at some examples of how these parts of the service work together and with your applications.

For our first example imagine we have a simple mobile / web game that allows you to store your high scores after completing a session. 

In order to save that data, however, we need to have sign up, log in, and authentication working.

Your application will need to integrate with Cognito by using the Cognito SDKs and libraries. These SDKs are provided by the AWS Amplify Framework.

AWS Amplify is a mobile and web toolset that AWS offers to help developers create scalable front-end applications. Amplify supports Javascript, React, Angular, Vue and Next.JS on the web side, and Android, IOS, React Native, Ionic, and flutter for the mobile side. (hurray list of tech names)

Now you might be asking - do I really have to use Amplify and this mobile SDK? The answer is no you don't have to, you can of course just call the server-side APIs directly. But there is a reason that AWS wants you to use amplify and these mobile SDKs. In general, they have been working on this suite of SDKs for a while, and they think it will be easier for you, than doing it yourself.

Anywhoo,  you will have to install the Amplify dependencies and reference them within your application. That will look a little something like this for web.

And somewhere within your applications start/entry point, you will need to reference those libraries.

I want to point out the last line here (the configure part) and show what the might entail. You can have this reference an external file or can set it up within your application itself. Either way, it might look something like this.

All we are doing here is letting Amplify / Cognito know what user pools and identity pools we actually care about, what region to find them in, and any other qualifying information your authentication process might need. In this example the Cognito region is us-east-1, we specify the pool ID, a web client ID (this is just an APP id), an identity pool id, and whether or not we will allow users to get AWS creds if they are not signed in.

You can have a lot more information here if you need it of course.

When your users need to sign to upload their scores - the code will look something like the following.

Since we have already configured all the extra information previously, we just have to send a username and password with this function for allowing sign-in.

And as we mentioned before, you can have a backend process listening for all of these sign-in and authentication event and having some kind of work done in response to them.

Once your users are signed in and authenticated - they can then send their high scores to whatever leaderboard mechanisms they need.

For more direct information about using Amplify, Cognito, and the specifics around how to set up web and mobile authentication, dive into the docs over here:


About the Author

William Meadows is a passionately curious human currently living in the Bay Area in California. His career has included working with lasers, teaching teenagers how to code, and creating classes about cloud technology that are taught all over the world. His dedication to completing goals and helping others is what brings meaning to his life. In his free time, he enjoys reading Reddit, playing video games, and writing books.