Environment Variables part of client source code

Hello,

I built a create-react-app, which essentially pulls back data from http://strava.com. Part of the authorization process of getting data from strava is initially passing a Client Secret ID query parameter.

I have a .env file where I store this key value i.e. REACT_APP_CLIENT_SECRET=1234567890 and my .env file resides in .gitignore so it is not exposed my Git Repo.

I then stored the key value in a Netlify environment variable under Build and Deploy settings.

I set up a Lambda function to handle the Axios call that passes the Client Secret ID to strava (intended to make the call on the server thus securing my client secret). This all works great.

What I didn’t expect however was that the Client Secret ID is still accessible in source source through the client.

I’m a novice in web development and learning as I go. What I don’t understand is whether this is something I need to resolve on the create-react-app side or the Netlify side.

Can someone provide any insight and help me figure out how to secure this?

Thanks in advance.

Are you passing the env variable through to the function? That shouldn’t be needed, I think you could set the env variable in netlify UI and then access it via the function at run time? I’m not too experienced here but I think you can access them from functions.

Hi,

I think the issue I have is that any environment variables I set in Netlify UI are bundled into the source code during the build and are available in the client source code.

This is the part I don’t understand. If I cannot set my Client Secret ID as an environment variable how do I securely access it post build to make the strava authentication call.

I am accessing the variable in the lambda function like you mention - yet i still have the issue above.

I have found an interesting discussion on Strava developer forum: https://groups.google.com/g/strava-api/c/y901i7B_ocY/m/0Y-a1ctSAgAJ

In short, from what I read, people are saying that when using client-side-only routes like Netlify, your client secret will be exposed, no matter what. But, there are other interesting ways people have managed to get it done.

That is an interesting find. It seems the problem I am trying to solve is more create-react-app related:

Where it is stated:

IMPORTANT NOTE: No environment variables can be accessed from a create-react-app dynamically from the browser hosted on Netlify! They must be accessed at build time to be used in the static site.

This makes sense to me. I just need to figure out how to solve this problem now. The joys of learning :slight_smile:

Massive workaround but you could have an API that only accepts requests from your domain, even add a signature hash with time etc that has to match the API and then the API pulls your secret from some database (? :L) and then calls strava? :smiley: Might be over the top or long winded just what flowed through my head!

I have an API that uses signature, hashed current time, parameters called with, and an environment variable which is exposed. and the API only accepts requests from the root domain. Im no expert but hoped this would give some protection haha.

Seems you can deploy an express app on Netlify - How to deploy express.js on Netlify - YouTube

I have it all working locally so I’ll try deploying it and that should secure my calls to strava since my Client Secret ID wont be built into my front end source code anymore. I’ll be making the calls on the express server and the Client Secret ID I can store in Netlify environment variable. I might be missing something else security wise but it’s my next step to try :grinning:

Yes haha sorry that is what I meant by the API, run the API through serverless functions.

Here is another link if it helps! How to run Express.js apps with Netlify Functions