> ## Documentation Index
> Fetch the complete documentation index at: https://docs.newly.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Secrets / Environment Variables

> Manage secrets and configuration for your app

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

<CardGroup cols={2}>
  <Card title="API Keys" icon="key">
    Third-party service credentials
  </Card>

  <Card title="Configuration" icon="sliders">
    Feature flags, URLs, settings
  </Card>

  <Card title="Secrets" icon="lock">
    Sensitive data that shouldn't be in code
  </Card>

  <Card title="Environment-Specific" icon="server">
    Different values for dev/staging/prod
  </Card>
</CardGroup>

### 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.

<Note>
  **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](/features/backend).
</Note>

## Liquid Backend

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

### Frontend Variables

For variables used in your React Native code:

<Steps>
  <Step title="Open Settings">
    Click \*\*Database \*\*and go to **Secrets** in the project menu
  </Step>

  <Step title="Add Variable">
    Enter the variable name and value:

    * Name: `GOOGLE_MAPS_API_KEY`
    * Value: `your_api_key_here`
  </Step>

  <Step title="Save">
    Click Save to store the variable, it is now accesible by the backend services.
  </Step>
</Steps>

## Supabase Environment Variables

### Supabase

Supabase credentials are managed through OAuth:

<Steps>
  <Step title="After connecting Supabase">
    Click **More** → \*\*Environment Variables \*\*and add your secrets.
  </Step>

  <Step title="Example">
    Add name **OPENAI\_API\_KEY** and value \*\*sk-... \*\*and save.
  </Step>
</Steps>

## Using Public Secrets / Environment Variables in Frontend

### Accessing Variables

All frontend environment variables are specified in **app.json** and accessed the same way:

```tsx theme={null}
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

```tsx theme={null}
const apiUrl = Constants.expoConfig?.extra?.API_URL ?? 'https://api.example.com';
```

***

## Best Practices

<AccordionGroup>
  <Accordion title="Never hardcode secrets">
    API keys, passwords, and tokens should always be in environment variables, not in your code.
  </Accordion>

  <Accordion title="Use descriptive names">
    Use clear names like `STRIPE_PUBLIC_KEY` instead of `KEY1`
  </Accordion>

  <Accordion title="Separate frontend and backend secrets">
    Only public keys belong in frontend environment variables. Server-side secrets go in your backend.
  </Accordion>

  <Accordion title="Document required variables">
    Keep track of which environment variables your app needs for deployment.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Variable returns undefined">
    * Check the variable name matches exactly (case-sensitive)
    * Ensure you saved after adding the variable
    * Reload the preview after changes
  </Accordion>

  <Accordion title="API key not working">
    * Verify the key is correct (copy-paste from source)
    * Check if the key has proper permissions/scopes
  </Accordion>

  <Accordion title="Secret exposed in code">
    * If its not a "public secret", contact support in Newly
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Backend Systems" icon="server" href="/features/backend">
    Understand Liquid Backend vs Supabase
  </Card>

  <Card title="Supabase Integration" icon="database" href="/integrations/supabase">
    Full Supabase setup guide
  </Card>
</CardGroup>