Umgebungsvariablen und Sicherheit

Bevor wir den Integration-Token aus Kapitel 5 im Code verwenden, richten wir eine saubere Konfiguration ein – Expos Mechanismus dafür unterscheidet sich leicht von Vite, das Prinzip bleibt aber identisch zum React-Web-Tutorial.

Umgebungsvariablen in Expo: das EXPO_PUBLIC_-Präfix

Expo liest, GENAU wie Vite, Umgebungsvariablen aus einer .env-Datei im Projekt-Wurzelverzeichnis – aus SICHERHEITSGRÜNDEN aber NUR solche, die mit EXPO_PUBLIC_ beginnen.

.env

EXPO_PUBLIC_MAGENTO_BASE_URL=https://IHR-SHOP.de/rest/V1
EXPO_PUBLIC_MAGENTO_MEDIA_URL=https://IHR-SHOP.de/media
EXPO_PUBLIC_MAGENTO_ACCESS_TOKEN=IHR_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 MUSS in .gitignore stehen – sonst landet Ihr echter Access Token im Git-Verlauf.

Die Variablen im Code lesen

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

process.env.EXPO_PUBLIC_... ist Expos eingebauter Zugriff auf Umgebungsvariablen (seit Expo SDK 49) – GENAU dieses Muster nutzen wir in Kapitel 7 in api/magentoApi.js.

Die ungeschminkte Wahrheit: Tokens im App-Code

Achtung: Auch mit .env und .gitignore gilt DASSELBE wie im React-Web-Tutorial: Sobald Sie die App bauen (eas build oder einen lokalen Build), landet der Access Token im fertigen App-Paket. EXPO_PUBLIC_-Variablen sind NICHT geheim, sobald die App gebaut ist – sie verhindern nur, dass der Token im QUELLCODE-Repository landet, NICHT, dass er in der ausgelieferten App auslesbar ist (z. B. durch Dekompilieren des App-Pakets oder Abfangen des Netzwerkverkehrs).

Der richtige Weg für eine echte Produktions-App

In einer ECHTEN Anwendung würde ein eigenes Backend als Vermittler dienen: Die App spricht NUR mit diesem eigenen Backend, das Backend allein kennt den Magento-Token. So bleibt der Token NIEMALS im an Endgeräte ausgelieferten App-Paket sichtbar.

Tipp: Für DIESES Lern-Projekt ist der direkte Weg (Token in der App) bewusst gewählt, um sich auf die Magento-API-Integration selbst zu konzentrieren. Nutzen Sie diesen Ansatz NICHT unverändert für einen Shop mit echten Kundendaten oder Schreibzugriff – für reines, öffentlich sichtbares LESEN von Produktdaten (wie in diesem Tutorial) ist das Risiko begrenzt, aber Sie sollten die Grenze bewusst kennen.

Dev-Server nach .env-Änderungen neu starten

Achtung: Expo liest .env-Dateien NUR beim Start des Dev-Servers ein – Änderungen während npx expo start bereits läuft, werden NICHT automatisch übernommen. Beenden Sie den Server (Strg+C) und starten Sie ihn nach JEDER .env-Änderung neu.