AWS AppSync API Authorization using Amazon Cognito

In this blog I will explain how to integrate AWS AppSync with Amazon Cognito for authentication to call the API . I will develop a react app to store and fetch data from DynamoDB .Authentication of the GraphQL API handles with Amazon Cognito UserPool.

Amazon Cognito: is a secure and scalable identity and access management service that can be used to manage your user base through Cognito user pools and it integrates with other identity providers. Amazon Cognito lets you add user sign-up, sign-in, and access control to applications quickly and easily. With Cognito, you can provision a hosted authentication UI that you can add to your application to handle sign-up and sign-in workflows. Cognito’s hosted UI is the foundation for other features, such as the ability to sign in directly to your user pool .

AWS AppSync: AWS AppSync is a fully managed GraphQL API layer from AWS . This allows developers to build GraphQL APIs without much of the usual work; it handles the parsing and resolution of requests as well as connecting to other AWS services like AWS Lambda, Amazon Dynamo DB and RDS , and HTTP APIs to gather backend data for the API. It gives an HTTPS endpoint

GraphQL: GraphQL is a query language for APIs and a runtime for application programming interfaces (APIs) that priorities giving clients exactly the data they request.API developers use GraphQL to create a schema to describe all the possible data that clients can query through that service.

Scenario Example:

In this scenario we will build a simple GraphQL API to create a catalog entry of books in Dynamo DB table by using AppSync API. This uses AWS services such as AWS AppSync, Amazon Cognito Userpool and Amazon Dynamo DB. Authentication of the GraphQL API handles with Amazon Cognito User Pool.

Set up the Amazon Congnito UserPool & App Integration:

You can create a userpool from Amazon Cognito console, by selecting the Create User Pool option and select the sign in option as below :

Create an AppSync API :

We will create an AppSync API to create new entry in the Amazon Dynamo DB and fetch item from the DB , the following steps we will follow to create the API.

Create the DynamoDB table : We will create a Dynamo DB table called Catalog with id as partition key.

AWS IAM role : Dynamo DB IAM role for read and write to the Dynamo DB , this role will be attached to the AppSync API. Amazon CloudWatch log role to log the details from the AppSync API

Steps to create the APPSync API with Cognito User Pool Authorization:

Create an APP Sync API from the console named CatalogAPI :

Create a Schema

Create a Data source:

Go to the settings and change the Default Authorization mode to Amazon Cognito User Pool and choose the User Pool created above.

AppSync API Authorization setting screen

Test API from AppSync Console:

Go to the APP Sync API and and select queries , if you try to execute the API it will fail and now login with the credentials created in the User Pool

Query Result without Login ( Failed )

Query Result with the UserPool Credential ( Success )

Developing a ReactApp using AWS Amplify:

AWS Amplify:AWS Amplify is a full-suite platform developed to aid web and mobile developers in building full-stack and scalable applications operated by AWS. We will deploy a React App using AWS Amplify and call the AWS AppSync API and Cognito Auth from the App.

As a prerequisite we need to install AWS Amplify CLI , the below command can be used for the same.

npm install -g @aws-amplify/cli

create a sample react application called amplifyapp, you can use the below command to create an application :

npx create-react-app amplifyapp

Navigate to the Project root folder of amplifyapp and run the below command:

amplify init

This will ask you the configuration details of AWS configuration , region etc which will be used for deployment of the application:

Add the codegen category of the project : This will automatically generate GraphQL documents

amplify add codegen - apiId <<AWSAppSyncapiid>>

we will call the mutation query on opening the application and the authorization will be done by cognito

the following code can be tested from the App.js and can be tested as shown below:

import logo from './logo.svg';
import './App.css';

import { Amplify } from 'aws-amplify';
import { API, Auth } from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import { useAuthenticator, withAuthenticator } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';

// import the API & graphqlOperation helpers as well as the query
import { graphqlOperation } from 'aws-amplify'
import { createItem } from './graphql/mutations'

// configure amplify
// this can be added in index.js as well
Amplify.configure(awsconfig);
Auth.configure(awsconfig);

function App() {
    
    async function createCatalog() {
        const item = {
            name: 'book 3',
            description: 'Book category is fiction'
        };

        API.graphql(graphqlOperation(createItem, { input: item }));
        console.log("document created: ", item.name)
    }

    const { signOut } = useAuthenticator()
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={createCatalog}>Create catalog</button>
        <button onClick={() => signOut()}>Log Out</button>
      </header>
    </div>
  );
}

export default withAuthenticator(App);

Login with the UserPool credential

Call the Api

Conclusion: AWS AppSync and AWS Amplify simplifies the development of Graph QL API development and deployment and easily integrate with Cognito for Authentication.