Skip to main content
Secrets / Environment variables let you store configuration and secrets that your app needs, without showing them to other people, just like your personal passwords.

​
When to Use Secrets / Environment Variables

API Keys

Third-party service credentials

Configuration

Feature flags, URLs, settings

Secrets

Sensitive data that shouldn’t be in code

Environment-Specific

Different values for dev/staging/prod

​
In AI Prompts

Tell the AI to use secrets / environment variables but never add the secret to the prompt: Bad example: 
Add weather data to the home screen, Here's the Openweather secret: nsadf98dsafjdsajnfiu
Good example: Before prompting, we add OPENWEATHER_API_KEY to the backend as a secret. The name of the secret is OPENWEATHER_API_KEY. 
Add weather data to the home screen. Use the OPENWEATHER_API_KEY
environment variable for the API key.

​
Secrets / Environment Variables by Backend Type

How you manage environment variables depends on which backend system you’re using.
Which backend am I using? If you see a “Database” button in the preview header, you’re on Liquid Backend. Otherwise, you’re using Supabase. See Backend Systems.

​
Liquid Backend

With Liquid Backend, environment variables are split between frontend and backend:

​
Frontend Variables

For variables used in your React Native code:
1

Open Settings

Click **Database **and go to Secrets in the project menu
2

Add Variable

Enter the variable name and value:
  • Name: GOOGLE_MAPS_API_KEY
  • Value: your_api_key_here
3

Save

Click Save to store the variable, it is now accesible by the backend services.

​
Supabase Environment Variables

​
Supabase

Supabase credentials are managed through OAuth:
1

After connecting Supabase

Click More → **Environment Variables **and add your secrets.
2

Example

Add name OPENAI_API_KEY and value **sk-… **and save.

​
Using Public Secrets / Environment Variables in Frontend

​
Accessing Variables

All frontend environment variables are specified in app.json and accessed the same way: 
import Constants from 'expo-constants';

// Access any environment variable
const apiKey = Constants.expoConfig?.extra?.MY_API_KEY;
const baseUrl = Constants.expoConfig?.extra?.API_BASE_URL;

​
With Default Values

const apiUrl = Constants.expoConfig?.extra?.API_URL ?? 'https://api.example.com';

​
Best Practices

API keys, passwords, and tokens should always be in environment variables, not in your code.
Use clear names like STRIPE_PUBLIC_KEY instead of KEY1
Only public keys belong in frontend environment variables. Server-side secrets go in your backend.
Keep track of which environment variables your app needs for deployment.

​
Troubleshooting

  • Check the variable name matches exactly (case-sensitive)
  • Ensure you saved after adding the variable
  • Reload the preview after changes
  • Verify the key is correct (copy-paste from source)
  • Check if the key has proper permissions/scopes
  • If its not a “public secret”, contact support in Natively

Backend Systems

Understand Liquid Backend vs Supabase

Supabase Integration

Full Supabase setup guide