Securing React API Calls with Amazon Cognito JWT Tokens and Amazon API Gateway Authorizers

Introduction

In today’s web applications, security is non-negotiable. When your React frontend interacts with AWS APIs, you must ensure that every API call is authenticated and authorized. Amazon Cognito and Amazon API Gateway Authorizers provide a solution using JWT tokens.

This blog will walk you through securing API calls from a React app using Amazon Cognito JWT Tokens and Amazon API Gateway Authorizers.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

Why Use Amazon Cognito and Amazon API Gateway Authorizers?

Amazon Cognito handles user authentication, user pools, and token issuance.
Amazon API Gateway Authorizers (JWT Authorizers) validate incoming tokens before processing API requests.
Together, they ensure only authenticated and authorized users can access your backend APIs.

Architecture Flow

User logs in via Amazon Cognito User Pool.
Amazon Cognito issues JWT tokens (Access Token & ID Token).
The React app includes the JWT token in API requests.
Amazon API Gateway validates the token via JWT Authorizer.
Amazon API Gateway invokes the backend (AWS Lambda/API) if valid.

api

Step-by-Step Guide

Set Up Amazon Cognito User Pool

Go to Amazon Cognito → Create User Pool.
Configure attributes (email, password policy, etc.).
Enable an App Client (uncheck client secret for frontend usage).
Note down the User Pool ID and App Client ID.

Set Up Amazon API Gateway JWT Authorizer

Go to Amazon API Gateway → Select your API.
Under Authorizers, create a new JWT Authorizer.
- Issuer URL: https://cognito-idp.<region>.amazonaws.com/<user-pool-id>
- Audience: <App Client ID>
Attach this Authorizer to your API routes (Method Request → Authorization → Select Authorizer).

Implement Amazon Cognito Authentication in React

Install Amazon Cognito SDK:

npm install amazon-cognito-identity-js

Create a login function in React:
import { CognitoUserPool, CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';

const poolData = {
  UserPoolId: 'YOUR_USER_POOL_ID',
  ClientId: 'YOUR_APP_CLIENT_ID'
};

const userPool = new CognitoUserPool(poolData);

export const login = (Username, Password) => {
  const user = new CognitoUser({ Username, Pool: userPool });
  const authDetails = new AuthenticationDetails({ Username, Password });

  return new Promise((resolve, reject) => {
    user.authenticateUser(authDetails, {
      onSuccess: (result) => {
        const accessToken = result.getAccessToken().getJwtToken();
        resolve(accessToken);
      },
      onFailure: (err) => reject(err),
    });
  });
};

npm install amazon-cognito-identity-js

Create a login function in React:

import { CognitoUserPool, CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';

const poolData = {

UserPoolId: 'YOUR_USER_POOL_ID',

ClientId: 'YOUR_APP_CLIENT_ID'

};

const userPool = new CognitoUserPool(poolData);

export const login = (Username, Password) => {

const user = new CognitoUser({ Username, Pool: userPool });

const authDetails = new AuthenticationDetails({ Username, Password });

return new Promise((resolve, reject) => {

user.authenticateUser(authDetails, {

onSuccess: (result) => {

const accessToken = result.getAccessToken().getJwtToken();

resolve(accessToken);

onFailure: (err) => reject(err),

});

};

Call Amazon API Gateway with JWT Token

After successful login, use the token in API calls:

const callSecuredApi = async (token) => {
  const response = await fetch('https://<your-api-gateway-url>/secured-endpoint', {
    method: 'GET',
    headers: {
      'Authorization': token,
    },
  });

  const data = await response.json();
  console.log(data);
};

const callSecuredApi = async (token) => {

const response = await fetch('https://<your-api-gateway-url>/secured-endpoint', {

method: 'GET',

headers: {

'Authorization': token,

});

const data = await response.json();

console.log(data);

};

5. Test the End-to-End Flow

Run the React app.
Log in with Amazon Cognito credentials.
Capture the JWT token.
Call your secured API.
Amazon API Gateway will validate the token and invoke the backend only if it is valid.

Benefits of This Approach

No manual token validation: Amazon API Gateway handles it.
Highly secure: Tokens are signed and time-bound.
Scalable & Serverless: No backend authentication logic needed.
Role-Based Access Control (RBAC): You can define roles & policies via Amazon Cognito groups.

Conclusion

Securing your React application’s API calls with Amazon Cognito JWT Tokens and API Gateway Authorizers provides a seamless, serverless, and secure way to manage authentication.

This setup eliminates the need for custom auth middleware in your backend, leveraging AWS’s security infrastructure.

Drop a query if you have any questions regarding Amazon Cognito JWT Tokens and we will get back to you quickly.

Empowering organizations to become ‘data driven’ enterprises with our Cloud experts.

Reduced infrastructure costs
Timely data-driven decisions

Get Started

About CloudThat

CloudThat is an award-winning company and the first in India to offer cloud training and consulting services worldwide. As a Microsoft Solutions Partner, AWS Advanced Tier Training Partner, and Google Cloud Platform Partner, CloudThat has empowered over 850,000 professionals through 600+ cloud certifications winning global recognition for its training excellence including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 12 awards in the last 8 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, IoT, and cutting-edge technologies like Gen AI & AI/ML. It has delivered over 500 consulting projects for 250+ organizations in 30+ countries as it continues to empower professionals and enterprises to thrive in the digital-first world.

FAQs

1. What is a JWT Token in Amazon Cognito?

ANS: – A JWT (JSON Web Token) is a digitally signed token issued by Amazon Cognito after successful authentication. It contains user identity information and is used to authorize access to protected resources like APIs.

2. What is the difference between an Access Token and an ID Token in Amazon Cognito?

ANS: –

Access Token: Used to authorize API calls and access protected resources.
ID Token: Contains user profile information (like email and username) and is mainly used on the frontend for user identity.
To secure API calls, you should use the Access Token.

3. Can I secure Amazon API Gateway without Amazon Cognito?

ANS: – Yes, Amazon API Gateway supports other authorizer types like AWS Lambda Authorizers (Custom Authorizers) and IAM-based access control, but Amazon Cognito JWT Authorizers are the most seamless for user authentication workflows.

WRITTEN BY Shreya Shah

Shreya Shah is a Frontend Developer II at CloudThat, specializing in building scalable, user-focused web applications. She has a strong emphasis on creating clean, responsive interfaces with seamless integration to cloud-based solutions. Passionate about delivering smooth user experiences, Shreya continuously explores innovative ways to enhance efficiency, quality, and overall product performance.