androidfirebasereact-nativeexpoeas

Correct Way to use Environment variables for Expo Application using EAS build process?

I am building a mobile application in Expo Managed Workflow and My application works perfectly in development build. Configurations are: Expo SDK 51, React-Native Typescript, Firebase: 10.13.0
I have created an env file containing all my environment variables. It includes credentials for the firebase-config file and some API keys. Now I don't want to commit those credentials to source control, so I have kept the .env file in .gitignore

But, When I created the APK build of my application, I was getting this error

FirebaseError: Firebase: Error (auth/invalid-api-key)., js engine: hermes

Now I want to know what are the steps for properly configuring your environment variables when you are building with EAS.

My files look like this.

  1. .env file (All my values are in quotation.)
FIREBASE_API_KEY=my-key-here
FIREBASE_AUTH_DOMAIN=my-key-here
FIREBASE_PROJECT_ID=my-key-here
FIREBASE_STORAGE_BUCKET=my-key-here
FIREBASE_MESSAGING_SENDER_ID=my-key-here
FIREBASE_APP_ID=my-key-here
FIREBASE_MEASUREMENT_ID=my-key-here
GOOGLE_SERVICES_JSON=my-key-here
SUMMARY_API= https:my-key-here

2.firebaseConfig.js

const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};
  1. I havent made any changes to app.config.js or the eas.json regarding this environment variables. Expo's documentation doesn't clearly guide us on how to configure this while building your app with EAS.

Note: I don't want to commit my variables to source control.

Expo's documentation mentioned something about putting your env variables in the eas.json. I wanted to know if that is the only way.

Solution

  • I usually add them in the project secrets page.

    1. Log in to your dashboard
    2. Go to Projects
    3. Select your project
    4. Expand Configuration in the left sidebar and click Secrets
    5. Add your secrets there

    The URL looks something like this:

    https://expo.dev/accounts/infinitered/projects/ChainReactApp2023/secrets

    ...but, of course, you'll have your own URL.

    eas secrets page

    You can also add them to your account for account-wide secrets. That's at your dashboard / secrets. Something like this:

    https://expo.dev/accounts/infinitered/settings/secrets