An OAuth sample focused on integrating with Microsoft Entra ID using a standards based approach:
- The SPA uses the traditional OpenID connect flow, with session management features
- The API authorizes access to data using claims from multiple data sources
The SPA is a simple UI with some basic navigation between views, to render fictional resources.
The data is returned from an API that authorizes using claims from multiple sources.
See the Entra ID SPA and API Setup for the Microsoft online configuration details.
Then update the settings in these files to point to your own Entra ID tenant:
- spa/spa.config.json
- api/api.config.json
Ensure that Node.js 20+ is installed, then run the build script:
./build.shCustom development domains are used so you must add these entries to your hosts file:
127.0.0.1 localhost web.mycompany.com api.mycompany.com
Next configure Browser SSL Trust for the SSL root certificate:
./api/certs/localhost/mycompany.com.ca.pem
Then run the following script to run the code for both SPA and API:
./run.shA browser will then be invoked, after which you can sign in with your own Entra ID test user accounts.
- See the Entra ID SPA and API OAuth Flow page to understand some finer details
- In 2021 it is instead recommended to keep tokens out of the browser, using a Backend for Frontend
- See the Final SPA Code Sample for an API driven implementation
- Plain TypeScript is used for the SPA, to explain OAuth behaviour in the simplest way
- Node.js and TypeScript are used to implement the API
- Express is used to host both the API and the SPA content
- Microsoft Entra ID is used as the default Authorization Server
- The oidc-client-ts library is used by the SPA to implement OpenID Connect
- The jose library is used by the API to validate JWT access tokens
- The node-cache library is used to cache extra claims, when access tokens are first received