Updated OAuth SPA and API Code Sample

Overview

An OAuth code sample to extend the initial code sample with the following behaviors:

• The SPA uses the traditional OpenID connect flow, with a complete application lifecycle.
• The API combines claims-based authorization with finer-grained business permissions.
• The SPA and API both use OAuth user attributes and business user attributes.

Views

The SPA is a simple UI with some basic navigation between views, to render fictional investment resources.

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 these DNS entries to your hosts file:

127.0.0.1 localhost www.authsamples-dev.com api.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 24+ is installed, then build and run the SPA and API:

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

The system browser runs and you can sign in with my AWS test credentials:

• User: [email protected]
• Password: GuestPassword1

You can then test all lifecycle operations, including token refresh, multi tab browsing and logout.

Problem Areas

• The updated SPA does not handle tokens in line with 2021 security recommendations.
• The SPA also demonstrates some usability problems with iframe-based silent token renewal.
• The Final SPA Code Sample solves these problems but requires a more complex flow.

Further Information

• See the Updated SPA and API Code Sample blog post a walkthrough and the key technical points.

Programming Languages

• The SPA and its views use plain TypeScript code.
• The API uses Node.js and TypeScript.

Infrastructure

• Express is used as the HTTP server for both the API and the SPA's web static content.
• The SPA uses the oidc-client-ts library to implement OpenID Connect.
• The API uses the jose library to validate JWT access tokens.
• AWS Cognito is the default authorization server for the SPA and API.