Angular + AWS Cognito authentication service

An Angular 17 reference app for authentication on AWS: Cognito sign-in with password and Microsoft (Azure AD) federation, the full password and email-verification flows, token refresh and three kinds of sign-out, then temporary AWS credentials from an Identity Pool to upload and browse files in S3.

About the project

This project explores, end to end, how a browser app signs users in with Amazon Cognito and then uses that identity to reach other AWS services directly.

An injectable Angular AuthService wraps the Cognito Identity Provider API: username and password sign-in, the new password required challenge, forgot and confirm password, email verification, and changing a password while signed in. It keeps the session in sync, refreshes tokens before they expire, and offers regular, global and token-revoking sign-out. Route guards protect the signed-in pages, and federated sign-in with Microsoft Azure AD runs through Amplify.

With a valid ID token the app asks a Cognito Identity Pool for temporary, scoped AWS credentials and uses them to upload files to S3 with metadata (for downstream processing) and to browse and download results with pre-signed URLs. Developer pages show the tokens and their claims, refresh them on demand, and display the auth state.

The screenshots show the app running locally with every AWS call answered by demo responses; no real accounts, tokens or credentials appear.

Features

Sign-in with username and password, or federated with Microsoft Azure AD.
Account flows: new-password challenge, forgot and confirm password, email verification with resend, and change password while signed in.
Sessions: token storage, decoding and expiry checks, automatic and on-demand refresh, and regular, global and revoke-token sign-out.
Protected routes with an Angular guard.
AWS access: identity ID and temporary credentials from an Identity Pool; S3 upload with metadata and a file browser with pre-signed download links.
Developer tools: a token refresh demo, a debug console and a configuration manager.

Screenshots

Sign-in: username and password through Cognito, or federated sign-in with Microsoft

The signed-in dashboard: user info, account management, three kinds of sign-out, and S3 file tools

Token refresh demo: the access, ID and refresh tokens with their expiry and decoded claims

Identity Pool: exchanging the ID token for an identity ID and temporary AWS credentials (demo values)

Debug console: configuration, current auth state and stored tokens at a glance

Architecture

Angular 17 app with an injectable AuthService (RxJS observables for user and auth state) and an S3Service.
Sign-in calls the Cognito Identity Provider API directly through the AWS SDK v3 (USER_PASSWORD_AUTH, REFRESH_TOKEN_AUTH, challenge responses, sign-out and revocation); federated sign-in uses Amplify.
The ID token is exchanged at a Cognito Identity Pool for short-lived AWS credentials, which sign S3 requests from the browser; downloads use pre-signed URLs.
Route guards restore the session from stored tokens before allowing protected pages.

Challenges & what I learned

Keeping the signed-in state consistent across page loads, token expiry and refresh without refresh loops.
Supporting several sign-out semantics (this device, all devices, revoke the refresh token) and showing what each one does.
Giving the browser direct, least-privilege access to S3 through Identity Pool credentials instead of a backend proxy.

A browser app can't keep a secret: its Cognito app client should have no client secret, and any configuration that reaches the browser is public.
Cognito's pieces (User Pool for identity, Identity Pool for AWS credentials) fit together cleanly once each token's purpose is clear.
Developer-facing views of tokens and auth state make an auth integration much easier to debug and explain.