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

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:

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

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, the application reads these environment variables and passes the redirect URL directly into the Supabase client initialization:

// 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:

npm run dev

Trigger an authentication request using the Supabase client:

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

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}