TypeScript

Developing Authentication with Cognito User Pool and JavaScript Apps

Every app needs login and signup. Every backend developer has built it from scratch at least once. And every time, the same question lingers: is this actu...

14 Oct 2023

Developing Authentication with Cognito User Pool and JavaScript Apps

Every app needs login and signup. Every backend developer has built it from scratch at least once. And every time, the same question lingers: is this actually secure?

AWS Cognito takes that question off your plate. It handles user pools, OAuth, MFA, and token management as a managed service. You focus on your app. Amazon handles the security infrastructure.

Amazon Cognito lets you add user sign-up, sign-in, and access control to your web and mobile apps quickly and easily. Amazon Cognito scales to millions of users and supports sign-in with social identity providers, such as Facebook, Google, and Amazon, and enterprise identity providers via SAML 2.0.

Here's how I set up a Cognito User Pool and wired it into a React app.

Setting up the User Pool

1_RBh_ffg73ERxPXGkY3Le1A.webp

Create a custom login pool in AWS Cognito.

1_cfUoAAoUbj8DMFK5MWL7qw.webp

Enter a pool name (I used "cognito-react-application-users") and step through the settings.

1_b3VIMeNUjGE5I5a9aFdLpA.webp

For this app, I only need email and password. You can add other attributes if your use case requires them.

1_shOabLfpvhEI1EgVAW18tA.webp

Configure password policy. I required special characters for this project.

1_6G6cbeAKxTQ_Z-nkRCUDPQ.webp

Enable email verification. If you need MFA (multi-factor authentication), users must provide a second factor like a phone number alongside their email.

1_mIQvpOnd-g3hXamhBtsnqw.webp

You can customize the verification email. The reply-to and from addresses work through AWS SES (Simple Email Service).

1_qBIaPNwuNx2J9NuGvFZZpw.webp

Tag your app for organization.

1_5kDv3-RooasFQx9RcdVc2w.webp

Set device remembering to "Always" for this demo.

1_bVXkC4Gt3SIQU29oBXxFTA.webp

Important: Uncheck "Generate Client Secret." Since we're authenticating from the frontend, we can't safely store secrets in the browser. Client secrets are for backend-to-Cognito communication only.

1_tbXSEATSMG6EPfPT-TqwIA.webp

You can add Lambda triggers here for custom workflows — post-confirmation emails, pre-signup validation, token customization, etc.

1_yvhlPElZfIb4RrI11bKDGA.webp

Review and confirm your configuration.

Wiring it into React

Install the AWS Amplify libraries:

Bash
npm install aws-amplify --save
npm install aws-amplify-react --save

1_BG9zCF3FEm2uCQ_UOHfuRw.webp

Configure Amplify with your Cognito settings:

Typescript
import CognitoConfig from '../Configs/Cognito.config'
Amplify.configure(CognitoConfig)

The trade-off

Cognito removes the burden of building auth yourself. You get OAuth, MFA, and token refresh out of the box.

But you're locked into AWS. Migrating user pools to another provider isn't trivial. And Cognito's pricing can surprise you at scale — the free tier covers 50,000 monthly active users, but costs ramp up after that.

For most projects, the trade-off is worth it. Building secure auth from scratch is a liability. Letting AWS handle it is a decision you rarely regret.