Finally you got rid of user management in your application since your organisation has standardized on an IdP. There are plenty to choose from. I usually develop using a Keycloak IdP before I test it with the target IdP (and yes: Azure Entrada tries to be different).

So it's time to adjust your SPA to use the IdP. The admins tell you, you need to use PKCE, part of the OIDC specification

Where is the fun in ready made?

A quick search on npmjs shows, the topic is popular and AWS takes the crown. But for deeper understanding, let's roll our own.

Prerequisites

There are just four items you need. The first three are provided by your IdP admins, the forth one you have to provide to them.

• The URL of your IdP, the full path where .well-known can be found. That's usually the root, but does differ for Entrada or Keycloak
• The issuer. That typically is the URL, except for Entrada
• The clientId. A String, usually opaque
• The callback urls. Pick those wisely. Typically you want three: http://localhost:3000/myApp, https://localhost:8443/myApp and https://final.place.com/myApp The first two enable you to test your application locally with both http and https