By the end of this guide, you’ll have:

• ✅ AWS Cognito User Pool created
• ✅ Users can sign up with email/password
• ✅ Users can log in to your app
• ✅ Frontend authenticates users before showing controls
• ✅ User sessions persist across page refreshes

Part 1: Create AWS Cognito User Pool

Step 1.1: Navigate to Cognito

1. Log in to AWS Console
2. Search for “Cognito” in the top search bar
3. Click Amazon Cognito
4. Click Create user pool

You’ll be taken to the “Set up resources for your application” wizard.

Step 1.2: Define Your Application

Step 1 - Tell us about your application:

Application type:

• ⚪ Select Single-page application (SPA)
  • A website with a single URL that updates content based on user interaction
  • Examples are JavaScript, Angular, React (that’s us!)

Name your application:

• Enter: TreatDispenserWebApp
• You can use any name, but keep it descriptive

Click Next

Step 1.3: Configure Sign-in Experience

Step 2 - Configure sign-in experience:

Cognito user pool sign-in options:

• ✅ Select Email (users will sign in with email address)
• ⬜ Uncheck “Username” (we’ll use email only)
• ⬜ Uncheck “Phone number”

Multi-factor authentication (MFA):

• ⚪ Select No MFA (keep it simple for now)
  • You can add this later for production

User account recovery:

• ✅ Select Enable self-service account recovery
• ✅ Select Email only

Click Next

Step 1.4: Configure Security Requirements

Step 3 - Configure security requirements:

Password policy:

• ⚪ Select Cognito defaults
  • Minimum length: 8 characters
  • Requires uppercase, lowercase, numbers, special characters

Multi-factor authentication:

• Already set to “No MFA” from previous step

User account recovery:

• Already set to “Email only”

Click Next

Step 1.5: Configure Sign-up Experience

Step 4 - Configure sign-up experience:

Self-service sign-up:

• ✅ Enable Enable self-registration (users can sign up themselves)

Attribute verification and user account confirmation:

• ✅ Select Send email message, verify email address

Required attributes:

• ✅ Select email (already required by default)
• Add optional: name (user’s display name)

Custom attributes:

• Leave empty for now

Click Next

Step 1.6: Configure Message Delivery

Step 5 - Configure message delivery:

Email provider:

• ⚪ Select Send email with Cognito
  • Free tier: 50 emails/day
  • For production, you can use Amazon SES for higher limits

FROM email address:

• Leave as default: no-reply@verificationemail.com

SES Region:

• Leave as default

Click Next

Step 1.7: Review and Create

Step 6 - Review and create:

The wizard will show you a summary with:

• User pool name: TreatDispenserUserPool (auto-generated based on your app name)
• App client name: TreatDispenserWebApp (what you entered in Step 1.2)
• All your configuration choices

Review all settings and click Create user pool

Step 1.8: Get Your Configuration Values

After clicking “Create user directory”, you’ll see a success page with a quick setup guide.

⚠️ Ignore the code examples on that page - They show how to use oidc-client-ts, but we’re using AWS Amplify instead (which is easier).

To get your configuration values:

1. In the left sidebar, click on User pools
2. Click on your user pool (e.g., “User pool - jxvkzs”)
3. You’ll see the User Pool Overview page

Copy these values (you’ll need them for the frontend):

1. User Pool ID:

• Look for “User pool ID” in the User pool overview section
• Format: us-east-2_XXXXXXXXX (or whatever region you used)
• Example: us-east-2_jxvkzs
• Copy this value!

2. App Client ID:

• Click the App clients section in the left side bar
• Copy the Client ID value
• Format: 1234567890abcdefghijklmnop (26 characters)
• Copy this value!

3. AWS Region:

• This is the region where you created the pool
• Look at the URL or the User Pool ID prefix
• Example: us-east-2 (from us-east-2_jxvkzs)
• Note this value!

You should now have all three values. Keep them handy for the next step!

Next step: Part 2: Configure-Frontend-with-Amplify