How to use environment variables in Expo

I am trying to use environment variables in my expo app.

When i change my babel.config.js from:

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

to:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ["module:react-native-dotenv", {
        "moduleName": "@env",
        "path": ".env",
        "blacklist": null,
        "whitelist": null,
        "safe": false,
        "allowUndefined": true
      }]
    ]
  };
};

And import them:

import { MY_ENV_VAR } from '@env';

Expo cannot detect that i have anything inside of app/ The docs say to prefix environment variables with EXPO_PUBLIC_ but they say: "Do not store sensitive info, such as private keys, in EXPO_PUBLIC_ variables. These variables will be visible in plain-text in your compiled application."

I want to use @supabase/supabase-js and need to store:SUPABASE_URL, SUPABASE_ANON_KEY and GOOGLE_CLIENT_ID

Is it safe to store these in EXPO_PUBLIC_ variables or is there a workaround?

Try restarting expo with expo r -c whenever you update .env file as variables might not be correctly loaded.

In general it is not secure to prefix variables with EXPO_PUBLIC_ as it will be embedded in the app and will be visible to anyone. However, SUPABASE_URL and SUPABASE_ANON_KEY are public by design and are safe to store in EXPO_PUBLIC_ variables. This is because Supabase has Row Level Security enabled. For GOOGLE_CLIENT_ID, it depends on its use case. It is safe if it is for OAuth login but if it's for backend authentication, use a server like cloud functions and fetch the API from there. You can check this reddit thread about using environment variables in Expo which might be helpful in your case.