AWS Cognito User Pool Setup for SPA

PublishedAugust 30, 2025

Amazon Cognito User Pool delivers authentication, authorization, and user management capabilities for web and mobile applications. This guide demonstrates how to configure a comprehensive Cognito User Pool for a Single Page Application (SPA), covering user registration, sign-in functionality, custom attributes, and email verification processes.

Create User Pool

To create a new Cognito User Pool for your SPA, follow these steps:

Navigate to Amazon Cognito console.
Click Create User Pool to start the setup process.
Choose your Application Type and Sign-in Identifiers based on your application requirements.
Select Required attributes such as email, given_name, family_name.

Configure the Sign-Up Experience

To customize the sign-up experience, you can add custom attributes to capture additional user information:

Under Custom attributes, click Add custom attribute if you need additional user data.
For example, add a username custom attribute:
- Attribute name: username
- Data type: String
- Set Mutable to allow users to update this attribute after account creation.
Configure other custom attributes as needed for your business requirements.

Retrieve Configuration Values

After the User Pool is created, collect the following essential configuration values:

User Pool ID
- Found in the User Pool Overview page
- Format: ap-southeast-1_XXXXXXXXX
App Client ID
- Found in Applications → App Clients section
- Format: xxxxxxxxxxxxxxxxxxxx

This covers the fundamental setup for a Cognito User Pool tailored for Single Page Applications. With this basic configuration, you can:

Enable user registration and sign-in functionality
Manage user attributes and profiles
Handle email verification workflows
Secure your SPA with JWT tokens

Frontend Integration with AWS Amplify

AWS Amplify simplifies Cognito integration by providing clean, easy-to-use methods for authentication.

Installation

npm install aws-amplify

Configuration

lib / amplify-config.ts

import { Amplify } from 'aws-amplify';

const amplifyConfig = {
  Auth: {
    Cognito: {
      userPoolId: 'ap-southeast-1_XXXXXXXXX', // Your User Pool ID
      userPoolClientId: 'xxxxxxxxxxxxxxxxxxxx', // Your App Client ID
      signUpVerificationMethod: 'code'
    }
  }
};

Amplify.configure(amplifyConfig);

Authentication Methods

Method	Sample Code
User Registration	`import { signUp } from 'aws-amplify/auth'; await signUp({ username: email, password: password, options: { userAttributes: { email: email, given_name: first_name, family_name: last_name, 'custom:username': username } } });`
Email Verification	`import { confirmSignUp } from 'aws-amplify/auth'; await confirmSignUp({ username: email, confirmationCode: code });`
User Login	`import { signIn } from 'aws-amplify/auth'; await signIn({ username: email, password: password });`
Get Current User	`import { getCurrentUser } from 'aws-amplify/auth'; const user = await getCurrentUser();`
User Logout	`import { signOut } from 'aws-amplify/auth'; await signOut();`