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 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.
You can signin using the **Sign-in*button.
You can retrieve data (using Auth Code Flow /w PKCE).