Add Simple Auth with Amazon Cognito and an API Gateway JWT Authorizer

Learning Outcomes

By the end of this lesson, you will be able to:

1. Explain why the dashboard now needs authentication.
2. Create a simple Amazon Cognito user-pool sign-in flow.
3. Protect HTTP API routes with a JWT authorizer.
4. Send a bearer token from the frontend to API Gateway.
5. Explain why Authorization must be allowed in API CORS settings.

---

The Core Idea

Your dashboard is already functional, but it's currently public. To protect it, we'll use Amazon Cognito User Pools for sign-in and API Gateway HTTP API JWT Authorizers to protect routes.

---

Part 1: Create a Cognito User Pool

Create an Amazon Cognito user pool for your dashboard users and an app client for the frontend. Cognito issues an ID token, access token, and refresh token after a successful sign-in.

---

Part 2: Managed Login

Enable Managed Login for your user pool. Cognito's managed login pages provide ready-made web interfaces for sign-up, sign-in, MFA, and password resets, so you don't have to build the UI yourself.

---

Part 3: Token Pattern

Cognito returns three tokens. For this project, your frontend must collect the token after sign-in and send it as a Bearer Token in the Authorization header when it calls your protected API routes.

---

Part 4: Create an HTTP API JWT Authorizer

In API Gateway, create a new JWT Authorizer for your HTTP API with these settings:

• Identity Source: $request.header.Authorization
• Issuer: https://cognito-idp.REGION.amazonaws.com/USER_POOL_ID
• Audience: Your Cognito App Client ID

---

Part 5: Validation Check

Once attached to a route, API Gateway will automatically:

• Extract the token from the header.
• Validate the signature and expiration (exp).
• Verify the issuer (iss) and audience (aud).

If any check fails, the request is rejected with a 401 Unauthorized before it even reaches your Lambda code.

---

Part 6: Attach the Authorizer

Protect your sensitive dashboard routes:

• GET /metadata
• GET /metadata/list
• POST /upload-url
• DELETE /metadata

---

Part 7: Update API CORS

Because the browser will now send an Authorization header, your HTTP API CORS configuration must allow it.

Update your Allowed Headers list to include: Content-Type, Authorization.

---

Part 8: Frontend Integration

The frontend fetch pattern changes to include the header:

const response = await fetch(`${API_BASE_URL}/metadata/list`, {
  headers: {
    "Authorization": `Bearer ${token}`
  }
});

---

Lab Checklist

---

Micro-activity 1: Reflection

---

Micro-activity 2: Match the Auth Concepts

---

Summary

This lesson kicks off Module 3.3: Secure and Deploy the Dashboard. You've implemented the clean AWS security pattern: Cognito for identity and API Gateway JWT authorizers for access control.

---

Quiz