> ## Documentation Index
> Fetch the complete documentation index at: https://devperez08-platform-list-anime-54.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Environment Variables

> Configuration reference for environment variables and secrets

## Overview

EpiNeko requires environment variables for Supabase authentication and database connectivity. All variables must be configured before running the application.

<Warning>
  Never commit `.env.local` or any file containing actual credentials to version control. Keep your secrets secure!
</Warning>

## Required Variables

### Supabase Configuration

<Accordion title="NEXT_PUBLIC_SUPABASE_URL">
  **Required**: Yes\
  **Type**: Public\
  **Description**: Your Supabase project URL

  ```bash theme={null}
  NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
  ```

  **Where to find it:**

  1. Go to your [Supabase Dashboard](https://app.supabase.com)
  2. Select your project
  3. Navigate to Settings → API
  4. Copy the "Project URL"

  <Note>
    The `NEXT_PUBLIC_` prefix makes this variable accessible in client-side code.
  </Note>
</Accordion>

<Accordion title="NEXT_PUBLIC_SUPABASE_ANON_KEY">
  **Required**: Yes\
  **Type**: Public\
  **Description**: Your Supabase anonymous/public API key

  ```bash theme={null}
  NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
  ```

  **Where to find it:**

  1. Go to your [Supabase Dashboard](https://app.supabase.com)
  2. Select your project
  3. Navigate to Settings → API
  4. Copy the "anon public" key under Project API keys

  <Tip>
    This key is safe to use in client-side code as it's restricted by Row Level Security (RLS) policies.
  </Tip>
</Accordion>

***

## Environment File Setup

### Create .env.local

Create a `.env.local` file in the root of your project:

<Steps>
  <Step title="Create the file">
    ```bash theme={null}
    touch .env.local
    ```
  </Step>

  <Step title="Add configuration">
    ```bash .env.local theme={null}
    # Supabase Configuration
    NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
    NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
    ```
  </Step>

  <Step title="Restart development server">
    ```bash theme={null}
    npm run dev
    ```

    Environment variables are loaded on server start.
  </Step>
</Steps>

### Example Configuration

```bash .env.local theme={null}
# ==================================
# Supabase Configuration
# ==================================
NEXT_PUBLIC_SUPABASE_URL=https://xyzcompany.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh5emNvbXBhbnkiLCJyb2xlIjoiYW5vbiIsImlhdCI6MTYxNTIxOTIwMywiZXhwIjoxOTMwNzk1MjAzfQ.example-key-do-not-use
```

***

## Variable Usage in Code

### Client-Side Usage

Variables prefixed with `NEXT_PUBLIC_` are accessible in browser code:

```typescript src/utils/supabase/client.ts theme={null}
export function createClient() {
  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
  const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

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

  return createBrowserClient(supabaseUrl, supabaseKey);
}
```

### Server-Side Usage

Server components and API routes can access all environment variables:

```typescript src/utils/supabase/server.ts theme={null}
export async function createClient() {
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        // Cookie configuration
      },
    }
  );
}
```

### Middleware Usage

The middleware also accesses public environment variables:

```typescript src/utils/supabase/middleware.ts theme={null}
const supabase = createServerClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  {
    cookies: {
      // Cookie configuration
    },
  }
);
```

***

## Validation

### Runtime Validation

The application validates required environment variables at runtime:

```typescript theme={null}
if (!supabaseUrl || !supabaseKey) {
  throw new Error(
    'Missing Supabase environment variables: ' +
    'NEXT_PUBLIC_SUPABASE_URL or NEXT_PUBLIC_SUPABASE_ANON_KEY'
  );
}
```

### Check Before Starting

Verify your configuration before running the app:

```bash theme={null}
# Check if variables are set
echo $NEXT_PUBLIC_SUPABASE_URL
echo $NEXT_PUBLIC_SUPABASE_ANON_KEY
```

***

## Deployment Configuration

### Vercel

<Steps>
  <Step title="Navigate to project settings">
    Go to your Vercel project → Settings → Environment Variables
  </Step>

  <Step title="Add variables">
    Add each variable with appropriate values:

    * `NEXT_PUBLIC_SUPABASE_URL`
    * `NEXT_PUBLIC_SUPABASE_ANON_KEY`
  </Step>

  <Step title="Select environments">
    Choose which environments need the variables:

    * Production
    * Preview
    * Development
  </Step>

  <Step title="Redeploy">
    Trigger a new deployment for changes to take effect
  </Step>
</Steps>

<Tip>
  Use different Supabase projects for production and development environments for better isolation.
</Tip>

***

## Security Best Practices

<CardGroup cols={2}>
  <Card title="Never Commit Secrets" icon="ban">
    Add `.env.local` to `.gitignore`
  </Card>

  <Card title="Use RLS Policies" icon="shield">
    Protect data with Row Level Security
  </Card>

  <Card title="Rotate Keys Regularly" icon="rotate">
    Update API keys periodically
  </Card>

  <Card title="Environment Separation" icon="layer-group">
    Use different keys for dev/staging/prod
  </Card>
</CardGroup>

### .gitignore Configuration

Ensure your `.gitignore` includes:

```bash .gitignore theme={null}
# Environment variables
.env
.env.local
.env.*.local
.env.development.local
.env.test.local
.env.production.local
```

***

## Troubleshooting

<Accordion title="Error: Missing Supabase environment variables">
  **Cause**: Environment variables are not set or not accessible.

  **Solution**:

  1. Verify `.env.local` exists in project root
  2. Check variable names match exactly (case-sensitive)
  3. Restart development server after adding variables
  4. Ensure no extra spaces around `=` sign

  ```bash theme={null}
  # ✅ Correct
  NEXT_PUBLIC_SUPABASE_URL=https://example.supabase.co

  # ❌ Incorrect
  NEXT_PUBLIC_SUPABASE_URL = https://example.supabase.co
  ```
</Accordion>

<Accordion title="Variables not updating after changes">
  **Cause**: Development server needs restart to load new environment variables.

  **Solution**:

  1. Stop the development server (Ctrl+C)
  2. Start it again: `npm run dev`
  3. Clear Next.js cache if needed: `rm -rf .next`
</Accordion>

<Accordion title="Undefined environment variables in client code">
  **Cause**: Variables without `NEXT_PUBLIC_` prefix are not exposed to the browser.

  **Solution**:

  * Ensure all client-side variables have `NEXT_PUBLIC_` prefix
  * Server-only secrets should NOT have this prefix
  * Rebuild after adding the prefix
</Accordion>

<Accordion title="Authentication errors after deployment">
  **Cause**: Environment variables not configured in deployment platform.

  **Solution**:

  1. Check Vercel/deployment platform settings
  2. Verify all variables are added
  3. Ensure correct environment is selected
  4. Redeploy after adding variables
</Accordion>

***

## Additional Configuration

### Optional Enhancements

While not currently used, you might want to add these for enhanced functionality:

<Accordion title="NEXT_PUBLIC_SITE_URL">
  ```bash theme={null}
  NEXT_PUBLIC_SITE_URL=https://your-app.vercel.app
  ```

  Useful for:

  * OAuth redirect URLs
  * Email confirmation links
  * Absolute URL generation
</Accordion>

<Accordion title="SUPABASE_SERVICE_ROLE_KEY">
  ```bash theme={null}
  SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
  ```

  <Warning>
    This key bypasses Row Level Security. Only use in server-side code, never expose to client!
  </Warning>

  Useful for:

  * Admin operations
  * Bulk data operations
  * Bypassing RLS for migrations
</Accordion>

***

## Environment Variable Checklist

Use this checklist when setting up a new environment:

* [ ] Created `.env.local` file in project root
* [ ] Added `NEXT_PUBLIC_SUPABASE_URL` with correct project URL
* [ ] Added `NEXT_PUBLIC_SUPABASE_ANON_KEY` with anon key from Supabase
* [ ] Verified `.env.local` is in `.gitignore`
* [ ] Restarted development server
* [ ] Tested authentication flow
* [ ] Configured production environment variables in Vercel
* [ ] Verified production deployment works

***

## Related Documentation

<CardGroup cols={3}>
  <Card title="Deployment Guide" icon="rocket" href="/development/deployment">
    Deploy with environment variables
  </Card>

  <Card title="Services" icon="cloud" href="/development/services">
    Learn how services use variables
  </Card>

  <Card title="Supabase Setup" icon="database" href="/integration/supabase">
    Initial Supabase configuration
  </Card>
</CardGroup>