Environment Variables

Overview

The Incidents App uses environment variables to configure both the mobile app and web dashboard. This guide covers all required and optional environment variables for each platform.

Never commit environment files (.env, .env.local) to version control. These contain sensitive credentials.

Mobile App Environment Variables

The mobile app uses environment variables prefixed with EXPO_PUBLIC_ to make them accessible in the client.

Required Variables

Create a .env file in the mobile directory:

mobile/.env

EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Variable Reference

EXPO_PUBLIC_SUPABASE_URL

string

required

The URL of your Supabase project. Find this in your Supabase project settings under API.Format: https://[project-id].supabase.co

EXPO_PUBLIC_SUPABASE_ANON_KEY

string

required

The anonymous (public) API key for your Supabase project. This key is safe to use in client-side code.Location: Supabase Dashboard → Settings → API → anon public

Usage in Code

Environment variables are accessed in the mobile app:

mobile/src/services/supabase.ts

import { createClient } from '@supabase/supabase-js'
import * as SecureStore from 'expo-secure-store'

const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL as string
const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY as string

export const supabase = createClient(
  supabaseUrl,
  supabaseAnonKey,
  {
    auth: {
      storage: ExpoSecureStoreAdapter,
      persistSession: true,
      autoRefreshToken: true,
      detectSessionInUrl: false
    }
  }
)

EAS Build Configuration

For production builds with EAS, add environment variables to eas.json:

mobile/eas.json

{
  "build": {
    "production": {
      "env": {
        "EXPO_PUBLIC_SUPABASE_URL": "https://your-project.supabase.co",
        "EXPO_PUBLIC_SUPABASE_ANON_KEY": "your-anon-key"
      }
    },
    "preview": {
      "env": {
        "EXPO_PUBLIC_SUPABASE_URL": "https://staging-project.supabase.co",
        "EXPO_PUBLIC_SUPABASE_ANON_KEY": "staging-anon-key"
      }
    }
  }
}

Alternatively, use Expo’s encrypted secrets for sensitive values:

eas secret:create --scope project --name EXPO_PUBLIC_SUPABASE_ANON_KEY --value your-key

Web Dashboard Environment Variables

The web dashboard uses Next.js environment variables. Client-side variables must be prefixed with NEXT_PUBLIC_.

Required Variables

Create a .env.local file in the web directory:

web/.env.local

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

Variable Reference

NEXT_PUBLIC_SUPABASE_URL

string

required

The URL of your Supabase project.Format: https://[project-id].supabase.co

NEXT_PUBLIC_SUPABASE_ANON_KEY

string

required

The anonymous (public) API key for your Supabase project.Location: Supabase Dashboard → Settings → API → anon public

Usage in Code

Client-Side

web/lib/supabase.ts

import { createBrowserClient } from "@supabase/ssr";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error("Missing Supabase environment variables");
}

export const supabase = createBrowserClient(supabaseUrl, supabaseAnonKey);

Server-Side

web/lib/supabase-server.ts

import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value;
        },
        set() {},
        remove() {},
      },
    }
  );
}

Environment Files

Next.js supports multiple environment files:

File	Description	Loaded When
`.env`	Default environment variables	All environments
`.env.local`	Local overrides (not committed)	All environments
`.env.development`	Development-specific variables	`npm run dev`
`.env.production`	Production-specific variables	`npm run build` && `npm start`

Only .env should be committed to version control. Add .env*.local to .gitignore.

Vercel Configuration

When deploying to Vercel, add environment variables in the project settings:

Open project settings

Navigate to your project in Vercel Dashboard → Settings → Environment Variables

Add variables

Add each required variable:

Key: NEXT_PUBLIC_SUPABASE_URL
Value: Your Supabase project URL
Environment: Production, Preview, Development

Redeploy

Redeploy your application for changes to take effect.

Getting Supabase Credentials

To find your Supabase credentials:

Open Supabase Dashboard

Visit app.supabase.com and select your project.

Navigate to API settings

Go to Settings → API in the left sidebar.

Copy credentials

Project URL: Copy the URL under “Project URL”
Anon Key: Copy the key under “Project API keys” → “anon public”

The anon key is safe to use in client-side code. It respects Row Level Security (RLS) policies.

Security Best Practices

Never Expose Service Role Key

Supabase provides two types of API keys:

anon (public): Safe for client-side use, respects RLS
service_role: Full database access, NEVER use in client code

Only use the service_role key in secure server environments, never in mobile or web client code.

Environment Variable Checklist

Use EXPO_PUBLIC_ prefix for Expo mobile app

Use NEXT_PUBLIC_ prefix for Next.js web app

Never commit .env.local or .env files with secrets

Use anon key for client-side, not service_role

Rotate keys if accidentally exposed

Use environment-specific values for staging vs production

Rotating Keys

If you accidentally expose your anon key:

Generate new keys

Go to Supabase Dashboard → Settings → API → Generate new anon key

Update environment variables

Update the key in all deployment environments (Vercel, EAS, local)

Redeploy applications

Rebuild and redeploy mobile and web apps with new keys

Revoke old key

After confirming new key works, revoke the old key in Supabase

Multi-Environment Setup

For staging and production environments:

Mobile (EAS)

mobile/eas.json

{
  "build": {
    "production": {
      "env": {
        "EXPO_PUBLIC_SUPABASE_URL": "https://prod-project.supabase.co",
        "EXPO_PUBLIC_SUPABASE_ANON_KEY": "prod-key"
      }
    },
    "staging": {
      "env": {
        "EXPO_PUBLIC_SUPABASE_URL": "https://staging-project.supabase.co",
        "EXPO_PUBLIC_SUPABASE_ANON_KEY": "staging-key"
      }
    }
  }
}

Build for specific environment:

eas build --profile staging --platform android

Web (Vercel)

Create different environment variable sets in Vercel:

Production: Used for main branch
Preview: Used for pull request deployments
Development: Used for local development

Troubleshooting

Variables Not Loading

Mobile app:

Restart the Metro bundler: npx expo start --clear
Ensure variables start with EXPO_PUBLIC_
Check .env file is in mobile/ directory

Web app:

Restart Next.js dev server
Ensure variables start with NEXT_PUBLIC_ for client-side
Check .env.local file is in web/ directory

Build-Time vs Runtime

Environment variables are embedded at build time. If you change variables:

Mobile: Rebuild the app with EAS
Web: Redeploy to Vercel or restart the server

”Missing Supabase environment variables” Error

This error occurs when required variables are not set:

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error("Missing Supabase environment variables");
}

Solution: Verify variables are set correctly in your environment file and restart the dev server.

Next Steps

Supabase Setup

Configure your Supabase backend and database

Mobile Deployment

Deploy the mobile app to app stores

Web Deployment

Deploy the web dashboard to production

Getting Started

Mobile App

Web Dashboard

Core Features

Deployment

Overview

Mobile App Environment Variables

Required Variables

Variable Reference

Usage in Code

EAS Build Configuration

Web Dashboard Environment Variables

Required Variables

Variable Reference

Usage in Code

Client-Side

Server-Side

Environment Files

Vercel Configuration

Getting Supabase Credentials

Security Best Practices

Never Expose Service Role Key

Environment Variable Checklist

Rotating Keys

Multi-Environment Setup

Mobile (EAS)

Web (Vercel)

Troubleshooting

Variables Not Loading

Build-Time vs Runtime

”Missing Supabase environment variables” Error

Next Steps

Supabase Setup

Mobile Deployment

Web Deployment

Build docs developers (and LLMs) love

Getting Started

Mobile App

Web Dashboard

Core Features

Deployment

​Overview

​Mobile App Environment Variables

​Required Variables

​Variable Reference

​Usage in Code

​EAS Build Configuration

​Web Dashboard Environment Variables

​Required Variables

​Variable Reference

​Usage in Code

​Client-Side

​Server-Side

​Environment Files

​Vercel Configuration

​Getting Supabase Credentials

​Security Best Practices

​Never Expose Service Role Key

​Environment Variable Checklist

​Rotating Keys

​Multi-Environment Setup

​Mobile (EAS)

​Web (Vercel)

​Troubleshooting

​Variables Not Loading

​Build-Time vs Runtime

​”Missing Supabase environment variables” Error

​Next Steps

Supabase Setup

Mobile Deployment

Web Deployment

Build docs developers (and LLMs) love

Overview

Mobile App Environment Variables

Required Variables

Variable Reference

Usage in Code

EAS Build Configuration

Web Dashboard Environment Variables

Required Variables

Variable Reference

Usage in Code

Client-Side

Server-Side

Environment Files

Vercel Configuration

Getting Supabase Credentials

Security Best Practices

Never Expose Service Role Key

Environment Variable Checklist

Rotating Keys

Multi-Environment Setup

Mobile (EAS)

Web (Vercel)

Troubleshooting

Variables Not Loading

Build-Time vs Runtime

”Missing Supabase environment variables” Error

Next Steps