# How to Set Up Environment Variables for Supabase Auth Redirect URLs Locally in awesome-gpt-image-2

> Learn to set up environment variables for Supabase Auth redirect URLs locally in awesome-gpt-image-2. Configure your Vite dev server and Supabase Dashboard for seamless local development.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-08-26

---

**To configure Supabase Auth redirect URLs locally in the awesome-gpt-image-2 project, copy `.env.example` to `.env`, set `VITE_SUPABASE_AUTH_REDIRECT` to your Vite dev server address (typically `http://localhost:5173`), and register that exact URL in the Supabase Dashboard under Authentication Settings.**

The **awesome-gpt-image-2** repository uses a Vite-based frontend that relies on environment variables to manage Supabase authentication flows. Properly configuring these variables ensures that OAuth providers return users to your local development server after sign-in rather than a production domain.

## Understanding the Environment File Structure

The project follows the standard Vite pattern for managing secrets and configuration. All sensitive values are templated in **`.env.example`** at the repository root, which you must duplicate into a local `.env` file that Vite loads automatically during development.

The template contains three critical variables for Supabase integration:

```text

# .env.example

VITE_SUPABASE_URL=your-supabase-url
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_SUPABASE_AUTH_REDIRECT=http://localhost:5173

```

## Configuring the Supabase Auth Redirect Variable

### Locating the Example File

Begin by creating your local environment file from the provided template. This preserves the required variable names while allowing you to inject your specific project values:

```bash
cp .env.example .env

```

### Setting the VITE_SUPABASE_AUTH_REDIRECT Value

The **`VITE_SUPABASE_AUTH_REDIRECT`** variable tells Supabase exactly where to send users after they complete authentication with an external provider. For local development, this must match the Vite development server port:

- **`VITE_SUPABASE_URL`**: Your Supabase project URL (e.g., `https://xyz.supabase.co`)
- **`VITE_SUPABASE_ANON_KEY`**: The public anon key from your Supabase dashboard
- **`VITE_SUPABASE_AUTH_REDIRECT`**: `http://localhost:5173` (or whichever port your Vite server uses)

Variables prefixed with `VITE_` are explicitly exposed to the client-side code by Vite's build system, making them accessible via `import.meta.env`.

## Initializing the Supabase Client with Redirect Configuration

In **[`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js)**, the application reads these environment variables and passes the redirect URL directly into the Supabase client initialization:

```javascript
// src/supabaseClient.js
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
const redirectUrl = import.meta.env.VITE_SUPABASE_AUTH_REDIRECT

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: { redirectTo: redirectUrl },
})

```

This configuration ensures that any call to `supabase.auth.signInWithOAuth()` automatically uses the local redirect URL without hardcoding domain values into your source code.

## Registering Redirect URLs in the Supabase Dashboard

Even with the environment variable set, Supabase will reject authentication attempts unless the redirect URL is explicitly allowlisted in your project settings:

1. Navigate to the **Supabase Dashboard** → **Authentication** → **Settings** → **URL Configuration**
2. Locate the **Redirect URLs** section
3. Add the exact value from `VITE_SUPABASE_AUTH_REDIRECT` (e.g., `http://localhost:5173`)
4. Save the configuration changes

This security measure prevents redirect attacks by ensuring Supabase only sends tokens to domains you control.

## Verifying the Local Authentication Flow

After configuring both the environment variables and the dashboard settings, start the development server to test the complete flow:

```bash
npm run dev

```

Trigger an authentication request using the Supabase client:

```javascript
import { supabase } from '@/supabaseClient'

async function signInWithGoogle() {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    // redirectTo is automatically pulled from the env configuration
  })
  if (error) console.error('Auth error:', error.message)
}

```

If configured correctly, the OAuth provider will redirect back to `http://localhost:5173` with the authentication tokens appended to the URL.

## Summary

- **Copy `.env.example`** to `.env` to establish your local environment configuration.
- **Set `VITE_SUPABASE_AUTH_REDIRECT`** to match your Vite dev server URL (default: `http://localhost:5173`).
- **Register the same URL** in the Supabase Dashboard under Authentication Settings to allowlist the redirect.
- **Reference the variables** in [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) using `import.meta.env` to inject the redirect URL into the Supabase client constructor.
- **Restart the dev server** after modifying `.env` files to reload environment variables.

## Frequently Asked Questions

### Why must the environment variable start with VITE_?

Vite only exposes environment variables to the client-side code when they are prefixed with `VITE_`. This security feature prevents accidental leakage of server-side secrets to the browser. The `import.meta.env` object in [`src/supabaseClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/supabaseClient.js) can only access variables that follow this naming convention.

### What port should I use for the redirect URL in local development?

The default Vite development server runs on port **5173**, so you should set `VITE_SUPABASE_AUTH_REDIRECT=http://localhost:5173`. If you have configured Vite to use a different port in [`vite.config.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/vite.config.js), use that specific port number instead to ensure the redirect lands on your running dev server.

### Where do I register the redirect URL in Supabase?

You must add the URL to the **Redirect URLs** list in your Supabase project dashboard. Navigate to **Authentication** → **Settings** → **URL Configuration**, then enter the exact local URL (e.g., `http://localhost:5173`) in the redirect allowlist. Without this step, Supabase will block the authentication callback as a security measure.

### Do I need to restart the dev server after editing .env?

Yes, Vite reads environment variables at startup. After modifying `.env` to update `VITE_SUPABASE_AUTH_REDIRECT` or other values, you must stop and restart the development server (`npm run dev`) for the changes to propagate to `import.meta.env`.