Cognito Authentication With React: A Small, Verifiable Setup

Authentication is not magic. It is configuration, tokens, and clear verification checks. This is the minimal Cognito plus React setup I run when I need to understand the flow.

It avoids pre-built Amplify UI components so I can see exactly what is happening.

The moving parts

• User pool: the directory of users.
• App client: the public interface that lets your frontend talk to the pool.
• ID token: a JWT containing claims about the authenticated user.
• Amplify Auth: the client library that manages sign-in and token storage.

Step 1: create the user pool

In the AWS Console, go to Amazon Cognito and create a user pool:

1. Select Email as the sign-in option.
2. Set No MFA for the lab. Enable MFA later for real apps.
3. Leave sign-up defaults.
4. Select Send email with Cognito for message delivery.
5. Name the pool, for example react-demo-pool.
6. Uncheck "Generate a client secret." Browser apps cannot keep secrets.
7. Create the pool.

Save the User Pool ID. You will need it in Step 4.

Step 2: create a user and app client

Inside the pool:

1. Go to the Users tab and create a user. Mark the email verified and set a known password.
2. Go to the App integration tab and copy the Client ID.

You now have a User Pool ID, a Client ID, and a test user.

Step 3: create the React app

npm create vite@latest cognito-demo -- --template react
cd cognito-demo
npm install aws-amplify

Run npm run dev and confirm the default Vite screen loads.

Step 4: configure Amplify

Create src/aws-exports.js:

export const awsConfig = {
  Auth: {
    Cognito: {
      userPoolId: "YOUR_USER_POOL_ID",
      userPoolClientId: "YOUR_APP_CLIENT_ID",
    }
  }
};

Then wire it into src/main.jsx:

import { Amplify } from 'aws-amplify';
import { awsConfig } from './aws-exports';

Amplify.configure(awsConfig);

At this point, the app can talk to Cognito. The next step is a sign-in form that calls Amplify.signIn. I usually verify the config first by checking the console for errors before adding UI.

Common mistakes I have made

• Forgetting to uncheck the client secret. Browser apps cannot use secrets.
• Using the wrong region in the User Pool ID.
• Skipping the test user and trying to build sign-up first. Create a user manually, verify login works, then add registration.

Closing

Cognito is not complicated once you separate the pieces: the pool holds users, the client identifies your app, and Amplify handles the token exchange. Verify each piece before adding the next.