Secure Your Web App with AWS Cognito: Easy and Scalable Authentication Without a Server

Introduction

Handling user authentication yourself can quickly become complicated and risky. To avoid dealing with passwords, identity verification, and token management, I chose to use Amazon Cognito — a secure, scalable, and fully managed authentication service by AWS.

In this article, I’ll walk you through how I integrated Cognito into a simple web application (HTML/JS) to allow users to sign up, log in, and securely access protected resources — all without writing any backend authentication logic.

Project Goal

The goal was to:

• Create a User Pool with Cognito to manage user accounts.
• Provide a simple sign-up and login UI, including email verification.
• Protect API access using JWT tokens.
• Do all this with a serverless approach!

Step-by-Step Setup

Create the User Pool

From the AWS Console:

• Go to Amazon Cognito > User Pools > Create user pool
• Use email as the primary sign-in method.
• Enable automatic email verification.
• Note down:
• Your User Pool ID
• Your App Client ID (without secret for frontend usage)

✅ You can customize required sign-up fields (e.g., phone, name, etc.)

Set Up a Cognito-Hosted UI Domain

To use Cognito’s hosted authentication UI:

• Go to App Integration > Domain name
• Set a unique domain name like myapp-auth, which creates:
• [https://myapp-auth.auth.us-east-1.amazoncognito.com](https://myapp-auth.auth.us-east-1.amazoncognito.com)

This domain provides hosted sign-up and login forms if needed.

Add Cognito SDK to Your Frontend

I included the Amazon Cognito Identity SDK in my HTML page

<script src="https://cdn.jsdelivr.net/npm/amazon-cognito-identity-js@6.1.1/dist/amazon-cognito-identity.min.js"></script>

Then I initialized the user pool:

const poolData = {
    UserPoolId: 'us-east-1_XXXXXXX', // Your User Pool ID
    ClientId: 'YYYYYYYYYYYYYY'       // Your App Client ID
};
const userPool = new AmazonCognitoIdentity.CognitoUserPool(poolData);

Create a Sign-Up Form

Here’s a simple HTML form:

<input type="email" id="email" placeholder="Email">
<input type="password" id="password" placeholder="Password">
<button onclick="signUp()">Sign Up</button>

And the JavaScript handler:

function signUp() {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;

    const attributeList = [
        new AmazonCognitoIdentity.CognitoUserAttribute({ Name: "email", Value: email })
    ];

    userPool.signUp(email, password, attributeList, null, function(err, result) {
        if (err) {
            alert(err.message || JSON.stringify(err));
            return;
        }
        alert("Sign-up successful! Please verify your email.");
    });
}

Add Login Functionality

HTML login form:

<input type="email" id="loginEmail" placeholder="Email">
<input type="password" id="loginPassword" placeholder="Password">
<button onclick="signIn()">Log In</button>

Login function in JavaScript:

function signIn() {
    const authenticationDetails = new AmazonCognitoIdentity.AuthenticationDetails({
        Username: document.getElementById("loginEmail").value,
        Password: document.getElementById("loginPassword").value
    });

    const userData = {
        Username: document.getElementById("loginEmail").value,
        Pool: userPool
    };

    const cognitoUser = new AmazonCognitoIdentity.CognitoUser(userData);
    cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function(result) {
            const token = result.getIdToken().getJwtToken();
            localStorage.setItem("jwt", token);
            alert("Login successful!");
        },
        onFailure: function(err) {
            alert(err.message || JSON.stringify(err));
        }
    });
}

Use the JWT to Protect API Requests

You can now include the token in your API requests like this:

const token = localStorage.getItem("jwt");
fetch("https://api.myapp.com/protected", {
    method: "GET",
    headers: {
        "Authorization": token
    }
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

On the backend (e.g., API Gateway), you can enable a Cognito Authorizer to validate the JWT automatically.

Final Result

• Users can sign up with email verification.
• Authenticated users receive a JWT token stored in local storage.
• All API calls are protected — no anonymous access.
• There’s no need to manage or store passwords manually!

Conclusion

Amazon Cognito helped me build a secure authentication flow quickly, cleanly, and without managing any backend. With built-in support for sign-up, login, token issuance, and email confirmation, it’s an ideal solution for web developers looking for a scalable and secure identity layer.