Is there a way to dynamically inject sensitive environment variables into a serverless React frontend application using Azure/Github Actions?

Question

I'm sort of restricted to Azure since that is what the client is already using.

But basically, we have this React website which is your typical react-scripts no server website, which means that there's nowhere in Azure Static Webapps to set environment variables for a frontend application.

I saw this on Azure Static Webapps Configuration, but subject to the following restrictions, won't work for my use case because there is no backend API for my frontend application - the backend associated with the frontend is published separately to Azure App services. And I need the secrets on the frontend to use some npm packages that require them, which I would prefer to do on frontend instead of backend.

• Are available as environment variables to the backend API of a static web app
• Can be used to store secrets used in authentication configuration
• Are encrypted at rest
• Are copied to staging and production environments
• May only be alphanumeric characters, ., and _

I was doing some more research, and this seems to sort of be up the alley of what I'm looking for:

https://docs.microsoft.com/en-us/answers/questions/249842/inject-environment-variables-from-pipeline-to-azur.html

Essentially, I really want to avoid hardcoding secrets into the React code because that's bad practice.

I personally see a few different (potential) options:

1. Create an endpoint on the backend Spring Boot api that simply serves all environment variables

   This is the most trivial to implement but I have concerns about security with this approach. As my frontend has no access to any kind of secrets, there's no way for it to pass a secure token to the backend or anything to authenticate the request, so someone could conceivably have chrome network inspect element tab open, see that I'm making a request to /getEnvironmentVariables, and recreate the request. The only way I can see to prevent this is to have IP restrictions enacted on the backend API, so it only accepts incoming requests from the IP address of my frontend website, but honestly that just sounds like so much overhead to worry about. Especially because we're building the product as more of a POC, so we don't have access to their production environments and can't just test it like that.

2. Have the Azure Static Webapps Github Actions workflow somehow inject environment variables

   So I've actually done something similar with GCP before. In order to login to a GCP service account to deploy the app during continuous build, the workaround was to encode a publicly viewable file that could be freely uploaded to whatever public repo, which could only (realistically) be decrypted using secrets set on the CI/CD pipeline, which would be travis-ci, or in my case, Github Actions. And I know how to set secrets on Github Actions but I'm not sure how realistic a solution like that would be for my use case because decrypting a file is not enough, it has to be formatted or rewritten in such a way that React is able to read it, and I know React is a nightmare working with fs and whatnot, so I'm really worried about the viability of going down a path like that. Maybe a more rudimentary approach might be writing some kind of bash script that could run in the github actions, and using the github actions secrets to store the environment variables I want to inject, run a rudimentary file edit on a small React file that is responsible for just disbursing environment variabless, before packaging with npm and deploying to Azure?

TLDR: I have a window in github actions when I have access to a linux environment and any environment variables I want, in which I want to somehow inject into React during ci/cd before deployment.