My GitHub repo shows how to how to implement a “backend-for-frontend” pattern for protecting an API subscription key when using a Single Page App (React).
It also shows how to use an Azure Function to regenerate or set the primary & secondary keys of an Azure API Management (APIM) subscription programatically.
Protecting API subscription key
A common problem with Single Page Apps (SPAs) like React or Angular is that they are all in JavaScript downloaded to the client. This means that there is no way to protect a secret (like a client_secret or an API subscription key). You can always right-click on a SPA in the browser and click View Source to see all the source code.
A common solution to this problem is the backend for frontend pattern. In this pattern, we make a special API the front-end will call for all its API requests. This backend runs on a server (like Azure Functions) where we can store & protect a secret (like an API key). The React front-end will authenticate with the “backend” using [Auth Code Flow with PKCE](- https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-auth-code-flow) or Implicit Flow (preferably Auth Code /w PKCE).
You could also implement the same pattern using API Management and things like named values.
Application
You can signin using the **Sign-in*button.
You can retrieve data (using Auth Code Flow /w PKCE).
