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

# Environment Variables

> Configure 8Space with environment variables for both app and landing packages

8Space uses environment variables to configure the application and landing site. The project is split into two packages, each with its own configuration.

## App Package Variables

The main application (`packages/app`) requires Supabase configuration to connect to the backend.

<ParamField path="VITE_SUPABASE_URL" type="string" required>
  Supabase project URL. For local development, use the local Supabase instance.

  **Default (local):** `http://127.0.0.1:54321`

  **Example (production):** `https://your-project.supabase.co`
</ParamField>

<ParamField path="VITE_SUPABASE_ANON_KEY" type="string" required>
  Supabase anonymous key for client-side authentication. This key is safe to expose in the browser.

  **Local development:** Copy from `supabase start` output

  **Production:** Get from Supabase Dashboard → Settings → API
</ParamField>

### App Configuration Example

Create `packages/app/.env`:

```bash packages/app/.env theme={null}
VITE_SUPABASE_URL=http://127.0.0.1:54321
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
```

<Tip>
  The Supabase client in `packages/app/src/integrations/supabase/client.ts` includes fallback values for local development:

  * Fallback URL: `http://127.0.0.1:54321`
  * Fallback anon key for local Supabase instances
</Tip>

## Landing Package Variables

The landing site (`packages/landing`) requires additional variables for authentication and payment processing.

### Supabase Configuration

<ParamField path="NEXT_PUBLIC_SUPABASE_URL" type="string" required>
  Supabase project URL for the Next.js landing site. Should match the app package URL.

  **Default (local):** `http://127.0.0.1:54321`
</ParamField>

<ParamField path="NEXT_PUBLIC_SUPABASE_ANON_KEY" type="string" required>
  Supabase anonymous key for the Next.js landing site. Should match the app package anon key.
</ParamField>

### Google OAuth Configuration

<ParamField path="GOOGLE_CLIENT_ID" type="string">
  Google OAuth 2.0 client ID for social authentication.

  Configure in Supabase Dashboard → Authentication → Providers → Google or in `config.toml` for local development.
</ParamField>

<ParamField path="GOOGLE_CLIENT_SECRET" type="string">
  Google OAuth 2.0 client secret. Keep this secure and never commit to version control.
</ParamField>

### Stripe Configuration (Optional)

<ParamField path="STRIPE_SECRET_KEY" type="string">
  Stripe secret key for payment processing. Used by the Stripe API routes.

  **Format:** `sk_test_...` (test) or `sk_live_...` (production)

  Get from: Stripe Dashboard → Developers → API keys
</ParamField>

<ParamField path="STRIPE_WEBHOOK_SECRET" type="string">
  Stripe webhook signing secret for verifying webhook events.

  **Format:** `whsec_...`

  Get from: Stripe Dashboard → Developers → Webhooks
</ParamField>

<Note>
  Stripe configuration is optional. The billing features will be disabled if these variables are not set.
</Note>

### Email Configuration (Optional)

<ParamField path="RESEND_API_KEY" type="string">
  Resend API key for transactional email delivery.

  **Format:** `re_...`

  Get from: Resend Dashboard → API Keys
</ParamField>

### Landing Configuration Example

Create `packages/landing/.env.local`:

```bash packages/landing/.env.local theme={null}
# Supabase
NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Google OAuth
GOOGLE_CLIENT_ID=123456789-abc.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-...

# Stripe (optional)
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Resend (optional)
RESEND_API_KEY=re_...
```

## Getting Started

<Steps>
  <Step title="Start Supabase">
    Run local Supabase instance:

    ```bash theme={null}
    cd packages/app
    supabase start
    ```

    Copy the `anon key` from the output.
  </Step>

  <Step title="Create environment files">
    Create `.env` files in both packages using the examples above.
  </Step>

  <Step title="Start development servers">
    From the repository root:

    ```bash theme={null}
    npm run dev
    ```

    This starts both the landing site and app simultaneously.
  </Step>
</Steps>

## Security Best Practices

<Warning>
  Never commit `.env` files to version control. Add them to `.gitignore`.
</Warning>

* **Public variables** (`NEXT_PUBLIC_*`, `VITE_*`) are safe to expose in the browser
* **Secret variables** (API keys, secrets) should only be used server-side
* Use different keys for development, staging, and production environments
* Rotate keys regularly and immediately if compromised
* Store production secrets in secure environment variable services (Vercel, Railway, etc.)

## Client Configuration

The Supabase client automatically configures authentication features:

```typescript packages/app/src/integrations/supabase/client.ts theme={null}
export const supabase = createClient(
  supabaseUrl ?? fallbackUrl,
  supabaseAnonKey ?? fallbackAnonKey,
  {
    auth: {
      autoRefreshToken: true,
      persistSession: true,
      detectSessionInUrl: true,
    },
  }
);
```

<Check>
  Session persistence and automatic token refresh are enabled by default for a seamless user experience.
</Check>

## Related Resources

<CardGroup cols={2}>
  <Card title="Database Setup" icon="database" href="/configuration/database-setup">
    Configure the PostgreSQL database schema
  </Card>

  <Card title="Authentication" icon="shield-halved" href="/configuration/authentication">
    Set up Supabase Auth with providers
  </Card>

  <Card title="Billing Setup" icon="credit-card" href="/configuration/billing">
    Configure Stripe payment integration
  </Card>
</CardGroup>