OAuth Final SPA

Overview

The final demo Single Page Application, which aims to meet some Web Architecture Goals.
The Token Handler Pattern enables the following main behaviors:

• The SPA uses the most secure cookies with no tokens in the browser, to limit the impact of XSS exploits.
• The SPA uses modern productive development with only client side React technology.
• The SPA static content is distributed to ~400 locations by a CDN for best web performance.

Components

Cookies are managed solely by OAuth Agent and OAuth Proxy utilities on the API side of the architecture:

Views

The SPA is a simple UI with some basic navigation between views, to render fictional investment resources.
Its data is returned from an OAuth-secured API that uses claims-based authorization.
The SPA uses user attributes from both the OpenID Connect userinfo endpoint and its API.

Online System

The online version uses the AWS Cloudfront content delivery network to deliver static content to the browser.
Login at https://www.authsamples.com/ with this AWS Cognito test account:

- User: [email protected]
- Password: GuestPassword1

Local Development Quick Start

To run the code sample locally you must configure some infrastructure before you run the code.

Configure DNS and SSL

Configure custom development domains by adding this DNS entry to your hosts file:

127.0.0.1 localhost www.authsamples-dev.com

Install OpenSSL 3+ if required, create a secrets folder, then create development certificates:

export SECRETS_FOLDER="$HOME/secrets"
mkdir -p "$SECRETS_FOLDER"
./certs/create.sh

Finally, configure Browser SSL Trust for the SSL root certificate at this location:

./certs/authsamples-dev.ca.crt

Run the Code

Ensure that Node.js 20+ is installed, then build and run the SPA in the webpack development server:

./build.sh && ./run.sh

The browser then opens at https://www.authsamples-dev.com/ and you can sign in with the test account.
You can then test all lifecycle operations, including expiry events, multi-tab browsing and multi-tab logout.

Further Information

• See the API Journey - Client Side for further information on the app's behaviour.
• See blog posts for further details specific to the SPA, starting in the Final SPA Overview.

Programming Languages

• The app's code uses TypeScript and its views use React.

Infrastructure

• AWS Route 53 provides custom hosting domains.
• AWS S3 is the upload point for web static content.
• AWS Cloudfront distributes web static content globally, for equal web performance.
• AWS Certificate Manager issues and auto renews the web host's SSL certificate.
• AWS Cognito is the default authorization server for the SPA and API components.
• AWS Serverless or Kubernetes host remote API endpoints that the SPA calls.
• Token handler components implement API-driven cookie issuing on behalf of the SPA.