Expo EAS build not exposing secrets when being accessed with `process.env.X`

Question

I have tried to create secrets for my Expo app using both the EAS CLI and the Expo website, according to the documentation:https://docs.expo.dev/build-reference/variables/. However, after I have made an EAS build for Android with the command: eas build -p android --profile <profile_name>, and run it through the installation link on my physical Android device.

It seems that when I try to view the secrets through process.env.VARIABLE_NAME (Through alerts), it just gives me undefined.

I was wondering if anyone have faced this issue before and perhaps found a solution? Thank you in advance.

Thousandfold

Answer 1

I was having the same issue. I looked at the logs in the expo website and I could see under the "spin up build environment" section that the secrets were being exposed during the build. Problem is, that expo does not automatically inject the secret values under the process.env variables. In order to catch these values you can use a tool such as the babel plugin transform-inline-environment-variables.

Partee

find this answer conflicting with expo docs docs.expo.dev/build-reference/variables/… "After creating a secret, you can read it on subsequent EAS Build jobs with process.env.VARIABLE_NAME from Node.js or in shell scripts as $VARIABLE_NAME." – Lungworm

Answer 2

Yes, as Jhonnatan says, you can use the transform-inline-environment-variables plugin. I'll show you.

First, install the dependency.

npm install --save-dev babel-plugin-transform-inline-environment-variables

Then, add the plugin to your babel.config.js file. It would look something like this:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['transform-inline-environment-variables'],
  };
};

After that I recommend creating a .env file in your project, for example, to a API URL base, in this case, for a server running locally in your machine:

API_URL_BASE = http://10.0.2.2:3001

Remember that the .env file shouldn't be pushed to GitHub, because that is usually where we store sensitive data.

At this point, you can use environment variables directly in your source code, with process.env.API_URL_BASE. Literally anywhere in your code. When you modify babel.config.js, you should always restart the development server and clear the cache, so start your project with npx expo start --clear.

Okey, but what happened if I want to use another API_URL_BASE in production (EAS Build)? No problem, you need to add a secret to your EAS project.

Go to your project (https://expo.dev/accounts/my-username/projects/my-project) and in the Dashboard choose Secrets.

Then Create.

Finally, set the name of the secret (same as the .env file) and the value that you want for production environment.

And that's it! When you develop on your local machine, it will use the API_URL_BASE from your .env file, and when you build your app, EAS will take the API_URL_BASE from the secrets.

I hope that works for you! Any questions are available. Regards :)

Propertius

Nice explanation. But how do you use with three or more environments? (i.e.: development, preview and production) – Manor

I would like to know the answer for that question – Craner

Sorry for the delay @DannyP. Certainly, this approach may not be the best for handling two possible values for a single variable. A solution could be to have an environment variable with the environment of the application, and then two or more variables per environment with the respective values. For example, you could have ENVIRONMENT, API_URL_BASE_PROD, and API_URL_BASE_TEST. So, in the code, you can make a logic based on ENVIRONMENT, to choose the production or test url. – Propertius

Answer 3

A bit late to the party, but I want to elaborate on the answers here. I had the same issue, and it turns out that EAS secrets is not evaluated if you are running your app with --dev-client, even if the app i built with eas build.

I did not have a .env file. The secrets was stored in EAS but was getting undefined on environment variables when i ran my app with npx expo start --dev-client. When I built the app for production it was working as expected.

TL;DR: you need a .env file (added to your .gitignore) if you want to run your app with --dev-client.

Haematothermal