Environment Variables and Security

Before using the integration token from chapter 5 in code, let's set up a clean configuration – Expo's mechanism differs slightly from Vite, but the principle stays identical to the React web tutorial.

Environment variables in Expo: the EXPO_PUBLIC_ prefix

Expo, EXACTLY like Vite, reads environment variables from a .env file in the project root – but for SECURITY REASONS, only ones starting with EXPO_PUBLIC_.

.env

EXPO_PUBLIC_MAGENTO_BASE_URL=https://YOUR-SHOP.com/rest/V1
EXPO_PUBLIC_MAGENTO_MEDIA_URL=https://YOUR-SHOP.com/media
EXPO_PUBLIC_MAGENTO_ACCESS_TOKEN=YOUR_INTEGRATION_ACCESS_TOKEN

.env.example

EXPO_PUBLIC_MAGENTO_BASE_URL=https://your-shop.example/rest/V1
EXPO_PUBLIC_MAGENTO_MEDIA_URL=https://your-shop.example/media
EXPO_PUBLIC_MAGENTO_ACCESS_TOKEN=your-access-token-here

.gitignore

node_modules/
.expo/
dist/
.env

Achtung: .env MUST be in .gitignore – otherwise your real access token ends up in Git history.

Reading the variables in code

const baseUrl = process.env.EXPO_PUBLIC_MAGENTO_BASE_URL;
const accessToken = process.env.EXPO_PUBLIC_MAGENTO_ACCESS_TOKEN;

process.env.EXPO_PUBLIC_... is Expo's built-in access to environment variables (since Expo SDK 49) – EXACTLY this pattern is what we use in chapter 7's api/magentoApi.js.

The unvarnished truth: tokens in app code

Achtung: Even with .env and .gitignore, the SAME holds as in the React web tutorial: once you build the app (eas build or a local build), the access token ends up in the finished app package. EXPO_PUBLIC_ variables are NOT secret once the app is built – they only prevent the token from ending up in the SOURCE CODE repository, NOT from being readable in the shipped app (e.g. by decompiling the app package or intercepting network traffic).

The proper approach for a real production app

In a REAL application, a dedicated backend would act as a mediator: the app talks ONLY to this own backend, and only the backend knows the Magento token. That way the token is NEVER visible in the app package shipped to devices.

Tipp: For THIS learning project, the direct approach (token in the app) is deliberately chosen to focus on the Magento API integration itself. Do NOT use this approach unchanged for a shop with real customer data or write access – for plain, publicly visible READING of product data (as in this tutorial), the risk is limited, but you should know that boundary consciously.

Restarting the dev server after .env changes

Achtung: Expo only reads .env files when the dev server STARTS – changes while npx expo start is already running are NOT picked up automatically. Stop the server (Ctrl+C) and restart it after EVERY .env change.